Time.ly has developed a wonderful plugin called All in One Event Calendar for WordPress. The short description of it is:
A calendar system with month, week, day, agenda views; upcoming events widget, color-coded categories, recurrence, and import/export of .ics feeds.
A few features include:
Calendar Features For Users
- Recurring events
- Filtering by event category or tag
- Easy sharing with Google Calendar, Apple iCal, MS Outlook and any other system that accepts iCalendar (.ics) feeds
- Embedded Google Maps
- Color-coded events based on category
- Month, week, day and agenda views
- Upcoming Events widget
- Direct links to filtered calendar views
Features for Website and Blog Owners
- Import other calendars automatically to display in your calendar
- Categorize and tag imported calendar feeds automatically
- Events from The Events Calendar plugin can also be easily imported
- Create a Calendar administration role to allow for a dedicated calendar application
Here’s a short video recap, too:
Anyway, now down to the actual “mobile” part of things. After creating a wonderfully responsive website for Tahlequah Public Schools and installing this awesome calendar plugin, I found I had an issue with the site being mobile-friendly still… My calendar looked awful on mobile: it displayed the month calendar by default and everything would be very compacted and illegible.
AI1EC doesn’t come with any options for mobile viewing just yet, but I found a work-around!
Work-around
With the help of really small plugin called WP Mobile Detect:
“WP Mobile Detect by Jesse Friedman creates an easy way for the User Admin to control when content is shown or [hidden] based on visitor device or operating”
This plugin adds a. lot. of shortcodes for you to use to display/hide content based on devices:
[phone], [tablet], [device], [notphone], [nottab], [notdevice], [ios], [iPhone], [iPad], [android], [windowsmobile]
So, by installing this little gem, I was able to utilize the [device] & [notdevice] shortcodes and create a dynamic calendar displayed based on device type (phones/tablets vs desktops/laptops). The next issue to tackle was how to make the change between calendar views (month vs agenda). Well, AI1EC includes shortcodes for this, too!
Using the following, I was able to decide which calendar view to use:
[notdevice] [ai1ec view=”month”] [/notdevice]
[device] [ai1ec view=”agenda”] [/device]
This gives me an agenda view on all mobile devices regardless of operating system or device type and the normal month view on all other traditional computers.
Speedbump
I ran into a problem though, in the AI1EC settings, you have to choose which page to display your calendar automatically. Like most people I chose the “Calendar” page; however, this is also the page on which shortcodes were located. For some reason, this removed the toolbar from above the calendar. I’m not sure if this is a bug or a plugin conflict just yet, but I found a work-around for it, too…
I created a private page called “DO NOT PUBLISH.” Unfortunately, you cannot set the calendar page to an unpublished or private page in the AI1EC settings: double whammy! Sooo, I published the page publicly temporarily, then set the calendar page in the AI1EC settings to my “DO NOT PUBLISH” page.
Afterwards, I went back to my “DO NOT PUBLISH” page and set it as privately published.
Once this was finished, I went back to the AI1EC settings page and saw that the “calendar page” wasn’t set to any particular page any more. The first time I did this I made the mistake of clicking the “update” button. This executes the “Auto-create new page” for the calendar. Anyway, I doubled back, deleted the newly created page and followed my previous steps.
Now, my non-mobile devices look normal AND my mobile devices look good, too!
- Non-mobile Calendar
- Mobile Calendar
So, if you’re looking for a great calendar plugin for your WordPress website, give Time.ly’s All in One Event Calendar a try! I’m hopeful that they will figure out a way to have a feature to set a certain calendar view for mobile devices (agenda or posterboard most likely).