This is much more of an FYI/How-to than a question. I just wanted to share something cool with everyone. Enjoy!

Time.ly puts out a great WordPress Events Calendar plugin with free and pro versions.

However, seeing as how the default calendar view is "month" for a lot of people and that "month" on mobile looks terrible, I wrote up a little blurb of my experience with the calendar and mobile devices on my website. I walk through the process of creating an "if ... then" statement of sorts to determine if a visitor is on a mobile device or not; depending on the device, the agenda view or the month view will be displayed! Hope this helps someone!

In the answers section below is the walkthrough from my write up.

//edit: if someone would create the following tags on this post, that'd be great, thanks!

<timely> <all-in-one-events-cal>
  • HEY, "down-voter", I'm not trying to get points, I don't plan on accepting my answer, and I don't work for Time.ly... I just use the plugin. I'm just trying to share my experiences. If it makes you feel any better, my answer is set as a community wiki. – joshmax Dec 17 '13 at 23:24

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!


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.


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

Time.ly Settings

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!!!!

do NOT press the "Update" button!!

Now, my non-mobile devices look normal AND my mobile devices look good, too!

Non-mobile devices' view: Non-mobile devices' view

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!

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.