LOGIC Library

This site is the Logic involvement in sharing expertise and skills acquired in daily work. The goal is to create a solid knowledge base and share best practices in software development and systems management.

More info about us can be found on logicsistemi.it.

A simple calendar for Joomla! articles

Searching internet for a solution to display a calendar with link and tooltips for every published Joomla! article, you probably come accross JEvents.

This extension is the most popular for displaying events and it has some nice calendar modules you can add in your site, but it has a lot of functionalities and it's sometimes hard to configure.

In this post we explain an alternate solution that allows to add an articles calendar to your site without installing additional modules.


Our solution will use jQuery and the Fullcalendar plugin written by Adam Shaw. We choose this particular calendar plugin because it's very complete and support AJAX requests.

To use it we will modify the site template to add required files and to create a new view for articles.

The calendar will be added to the site by creating a custom HTML module.

Setting up jQuery

Joomla! has choosen MooTools as Javascript framework, but there are a lot of templates that already use jQuery.

Before changing the template code you must check the Javascript libraries includes to avoid a double inclusion of jquery libraries.

Open the homepage of your site in the browser, display the HTML code and check all the "script" tags for the jquery library. If you already have it you must skip the next operation.

Download the jQuery library and put it in the js folder under your template (it's a simple js file, that is now called jquery-1.8.0.min.js). Add the script to your site by adding the following line to the main page of your template (you can edit it using Joomla! template manager).

<script src="/templates/<path-to-your-template>/js/jquery-1.8.0.min.js" type="text/javascript"></script>

Put it just near the other script tags.

Perform the same actions to install the Fullcalendar plugin: download the Fullcalendar package form the site, extract from it the file fullcalendar.min.js and put it in the js folder under your template folder.

Fullcalendar also need a css file to style the calendar. You find a pre-build css in the package, so you can copy it in the css folder under your template.

The lines to include in the template main page are the following:

<script src="/templates/<path-to-your-template>/js/fullcalednar.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="/templates/<path-to-your-template>/css/fullcalendar.css" type="text/css" />

Creating the HTML module

To add the calendar to your pages, you must create a custom HTML module with the following content.

<script type="text/javascript">
jQuery(function() {
<div id="calendar"></div>

Be sure to not use an WYSIWYG editor to write the module content or the script tags will be deleted after saving.

By using this method you can put the calendar everywhere in your site, like any other module.

After completing these operations you can test a page with this module to see an empty, but working, calendar.

List of articles

Our calendar is able to display events that come from a JSON source, so we need the list of article in a JSON format.

We can start writing a custom PHP page to get the desired informations, but we choose to use tools that are already part of the Joomla! system.

To get a good control on the articles displayed in the calendar, we choose to use the "Featured Articles" component. By using this component we can choose categories to be displayed and, by the mean of the featured flag, we can add or remove articles from the calendar in every moment leaving them published.

Let's create e new menu voice of the type "Featured Articles", with alias "articles" and all settings left as the default. This voice can be added to a menu not displayed in the site, so it will remain "hidden", but we can reach it with the following URL: http://<your-site>/articles.

JSON view for the articles

Joomla! doesn't allow to create a new view for an existing component, but only to change the view layout. This is not good to create a JSON output starting from a default view, because the JSON will be surrounded by the HTML code of the template.

To transform our featured articles list into a JSON file, we can write an override for the component and we can end our ovverride code with a die() instruction. This will stop the code execution and only the JSON data will be sent back to the browser.

We put the following code into the file /templates/<path-to-your-template>/html/com_content/featured/json.php:

// no direct access
defined('_JEXEC') or die;

foreach($this->items as $item) {
$ts = strtotime($item->publish_up);

if (($ts >= $_REQUEST["calendar_start"]) && ($ts <= $_REQUEST["calendar_end"])) {
$arrEvents[] = array(
'id' => $item->publish_up,
'title' => $item->title,
'start' => $item->publish_up,
'end' => $item->publish_up,
'allDay' => true,
'url' => JRoute::_(ContentHelperRoute::getArticleRoute($item->slug, $item->catid))

echo json_encode($arrEvents);

This code create the required JSON using items build by the featured articles model. We don't need to write any query, but we use a check to filter articles on the base of their publishing date.

Final operations

To end the job we only have to edit our custom HTML module to add the JSON source and 2 other parameters:

<script type="text/javascript">
jQuery(function() {
events: '/index.php/articles?layout=json',
            startParam: 'calendar_start',
            endParam: 'calendar_end'
<div id="calendar"></div>

We must specify a different name for the start parameter used to filter events. The default "start" is already used by Joomla! to specify the OFFSET for the query.

It's time to look at Fullcalendar options to personalize the calendar view and to modify the fullcalendar.css to match the site look!


#1 Aaron 2013-04-14 01:29
Got this working but it has a major flaw! Most calendars need events showing in the future. Using the publish date (publish_up) causes the article to not be viewed in the "Featured Article" menu item which results in it not viewed on the calendar.
#2 Edy Incoletti 2013-04-15 08:15
If you need date in the future, you can use the created date ($item->created ) instead of $item->publish_up.
Joomla! allows to set this date in the future even if the start publishing is in the past.