Joomla 3 bootstrap and the Responsive Joomla calendar

In the past years Joomla development has progressed at breakneck speed, challenging Joomla extensions developers to adopt new processes and introduce new features.

Joomla 2.5 introduced major new features such as the ACL (including the permissions and access levels), multilingual support and new form elements.

In Joomla 3, the most exciting new feature is full integration of bootstrap to make Joomla the first major CMS to be responsive and mobile-ready .

In this first post of the series on JCal Pro® — our calendar add-on for Joomla — we examine how JCal Pro® 3 has used Joomla Bootstrap to provide mobile-optimized administration of your calendar as well as the recently introduced responsive template named “Inspired” to provide a true mobile calendar experience for your visitors.

Responsive design at very basic level is the use of code to identify the screen size of the device, and adjusts the output to the particular screen size accordingly. JCal Pro® 3 uses core Joomla 3’s integrated Bootstrap to ensure maximum compatibility with minimal code.

What does this mean to your visitor?

JCal Pro® 3 Monthly View is very similar in the new Inspired responsive theme as it is with the standard themes, which is close what your grandmother had in a wooden frame in her kitchen. The nice calendar below can be purchased on eBay!

Jcal Monthly Calendar Views

The Jcal Pro 3 Inspired desktop monthly view on the right has a clean style with Joomla 3’s bootstrap elements, essentially it has a very similar layout as the default theme on the left.

The menu has been simplified with the lesser used functions such as Get as iCal, Search, Print, and Add Event functions hidden in the tools dropdown.

Monthly Views

When we start looking at the calendar with our smartphone, things start look a little different. The tabular form of the monthly view automatically becomes a compact monthly list view and the menu reorganizes to better fit the screen’s width.

Jcal Monthly_320x480

On the 768x1024 display of an iPad mini, the vertical portrait view will be in the small screen monthly list view similar to most phones. Holding the iPad Mini in the horizontal landscape view produces the tabular view like you see on the desktop. 

Jcal Admin_Events_Desktop

Jcal Monthly_767x1024


This behaviour may be different depending on the responsive Joomla template that is used on the site.

Other Calendar Views

Not only the monthly view has received the Joomla 3 bootstrap treatments, the other views also provide some great new innovations.

The Weekly, Categories, Category, as well as the Search Views also take advantage of Joomla 3 bootstrap to create a responsive mobile calendar experience. One simple feature is the ability to hide elements instead of scrolling through them. Simply click or touch the X on the top right of an Event or Category to remove it from the view. Simple reload the page or navigate to another page to restore them all.

Jcal Categories_320x480

Jcal Category_320x480Jcal Search_320x480
Submissions and Moderation

We have not forgotten the on-the-go folks that organize events and moderate calendar submissions. The submissions forms have tabs in order to reduce the amount of scrolling that is required even on smaller phones. The moderator screens have been simplified in the responsive views to make it possible to moderate events using your smartphone.

Administrator Views

The Joomla 3 administration panel is fully responsive through the default Isis template. The JCal Pro® 3 development team has adopted it fully in order to provide a consistent administrator’s user experience.

At first the team was a little frustrated but earlier today lead developer Jeff Channell — currently implementing tags for JCal Pro® — quipped “I just love how awesome bootstrap is in the admin area.”

All views are consistent with the Joomla Isis bootstrapped admin template including the Event Manager depicted below:

Jcal Admin_Events_Desktop  Jcal Admin_Events_320x480

I still have Joomla 2.5, what about me?

The beauty of a common framework such as bootstrap is that it it’s functions are shared, Templates based on Gantry or T3 for example have bootstrap.

Your responsive Joomla 2.5 template such as the JoomlaBamboo reVision template in the header image of this blog (full size below) based on the T3v3 framework passes it’s bootstrap to JCal Pro®. This will provide a mobile calendar to your visitors even on joomla 2.5 sites. 

 Am I_Responsive_Inspired_on_reVision

Special thanks to:
reVision Template by Joomlabamboo
Wooden dog calendar available on eBay
Viewport Images by Am I Responsive

Last modified on May092013
blog comments powered by Disqus

Get the latest updates on our extensions