Category Archives: WordPress

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:

Squished mobile calendar

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…

Unpublished, private page to hide Time.ly calendar.

Time.ly settings: calendar page

Now it’s set to “Auto-create new page.” Do NOT press the “Update” button!!!!

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!

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).