How to make Time.ly all-in-one event calendar mobile friendly
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). Combining these shortcodes with the following AI1EC shortcodes, 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!
Unpublished, private page to hide Time.ly calendar:
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. Well, 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 that it’s set to “Auto-create new page,” do NOT press the “Update” button!!!!
Now, my non-mobile devices look normal AND my mobile devices look good, too!
Non-mobile devices’ view:
Mobile devices’ view:
I’m hopeful Time.ly will figure out a way to have a feature to set a certain calendar view for mobile devices (agenda or posterboard most likely).
I hope this is useful for someone! Let me know what you guys think!