Your events calendar has to look good and work well for two types of site visitors, those using computers and those using mobile phones and tablets. A single calendar view won't satisfy both types. That's why we created the Mobile Table calendar view.
This topic describes how to coordinate the 25Live® mobile options with steps you've already taken to make your website mobile-friendly.
Viewing a calendar customized to look good on mobile devices.
The following table matches the mobile-friendly steps you've already taken with the steps you need to take in 25Live to optimize your calendars for a mobile experience.
| Mobile steps you've taken | What to do in 25Live |
| None |
|
| Separate mobile website |
|
| Mobile-responsive website
By mobile-responsive, we mean your website automatically detects either the device or the screen size of the device a website visitor is using. |
|
| Offer mobile apps for download |
|
To get the most out of the Mobile Table view spud, take a few minutes to familiarize yourself with some important background information.
However, there are some publication-level settings that affect both the main and mobile views. If you want the finest level of control over how your mobile calendar and its event detail pages look and behave, you may want to create a separate mobile publication.
Mobile Table view is similar to the Classic Table main calendar view except that the mobile view's default settings focus on keeping the calendar width small. For example, by default, Mobile Table view shows only each event's start time, start date, and description, hides some event and calendar actions, and uses the small versions of paging buttons.
Tip To modify settings for the main calendar spud, in the Publishing Control Panel, click the Calendar Spuds tab. In the Main Calendar Spud section, click Edit Settings & Styles.
For example, to save space and keep the mobile calendar simple, we've limited the fields that display with each event and the number of events that display per page. We've also turned off some event and calendar actions in the calendar view.
You have two options for previewing the Mobile Table view. The option you choose depends upon your current goal.
Use the view's Preview feature on the Calendar Spuds tab.
On a mobile device, navigate to the URL for the calendar's hosted view.
Tip The following steps assume that you have already created, added events to, and published at least one calendar.
The Mobile Table view default settings may work perfectly for you. Or, you might want to modify the settings. You won't know unless you preview the defaults.
Tip Font and color style settings are taken directly from your publication's base style settings so they already reflect your organization's branding. Some mobile view settings are inherited from the main calendar spud. Learn more.
To preview the Mobile Table view settings
If you're not in the Publishing Control Panel, in the 25Live editing environment, select the calendar you want a mobile view for, and then click Publish Settings.
The Preview for Mobile Table page appears:
To modify the the settings, see Edit the Mobile Table view settings.
After you're satisfied with the Mobile Table view settings and you set the Enable mobile calendar view option, you can preview the view on a mobile device by navigating to the URL for the calendar's hosted view.
How do I find the URL for a calendar's hosted view?
On a mobile device, the hosted page preview will look something like this example that shows a Mobile Table view on an iPhone:
The Show Controls link above the calendar is unique to the hosted view and will not show up when visitors view the calendar embedded into your website. Clicking Show Controls displays the control spuds that typically appear to the left of the calendar in the hosted view.
Tip These steps assume that you have already created, added events to, and published at least one calendar.
Tip If you decide to change default settings on one or more tabs, best practice is to preview after each couple of settings changes to see the specific effects of each change and to know which changes you want to undo.
Event actions
By default, event actions are turned off in the mobile calendar view while they remain available in the detail view. Mobile visitors who view event details can still add events to their calendars, forward events to friends, and more.
Note If you set the event actions display to Multiple, visitors can take event actions on more than one event at a time. Notice the mobile-responsive version of the Event Actions panel at the top of the calendar view:
Featured events
If you want to feature events in the mobile view (and you've set up featured events for the calendar), in the Event Layout section, assign layouts to the featured levels you have defined.
You can use the group by feature to enhance the display of your calendar.
The mobile calendar view has its own mobile event detail view. This gives you the freedom to customize the event detail view to look good and perform well in the limited space available on mobile devices.
Note You can set your main calendar view to automatically display the mobile calendar view and/or the mobile detail view, separately, on mobile devices. More
For example, your main calendar detail views might include large images and map thumbnails and the entire range of event actions. You can customize the mobile detail view to hide map and event images and show only the Facebook and Twitter event actions.
To learn more about customizing event detail views, see Event detail views.
Refresh my memory about control spuds.
How control spuds look and work on mobile devices depends upon which mobile option you implement and the type of control spud you use.
If you have a separate mobile website, you may want to embed one or two control spuds above your mobile calendar spud. For example, filter, location search, and keyword search control spuds might work well in a mobile environment.
Tip If you want to use the same types of control spuds on your mobile site as you use on your main site but customize them differently, remember that you can create multiple configurations of the same spuds for use in different contexts.
Given the limited width available on mobile devices, it's probably best to position control spuds above rather than beside the calendar view.
Location search spud positioned above the mobile table calendar view
Tip You can configure filter spuds to respond to the viewing device. Learn more.
If you set your main calendar spud to display the mobile calendar view on mobile devices (Learn more), any control spuds you've embedded above or alongside the calendar also appear on mobile devices. For more information, go to Main calendar views.
If you've embedded keyword search, View Chooser, and audience filter spuds into the main calendar page, for example, these same control spuds display alongside the mobile table calendar view when users view the calendar using a mobile device.
While you can't hide control spuds on mobile devices, you can configure filter spuds to respond to the viewing device (Learn more).
If your main calendar automatically detects mobile and a View Chooser spud is embedded on your main calendar page, visitors who view the calendar on a mobile device will see the View Chooser.
Even when mobile table view isn't explicitly listed in the View Chooser, it is always automatically associated with the main calendar's default view when viewing the calendar on a mobile device.
For example, in this View Chooser, List is the main calendar's default view. When visitors first view your calendar page using a mobile device, they see the View Chooser with List view selected and the calendar in mobile table view.
If visitors switch to a different view, they can return to the mobile table view by selecting List again.
Important In this scenario, visitors who are viewing the calendar on a mobile device could potentially use it to switch to a different view that isn't mobile optimized. To avoid this issue, you can hide the View Chooser on mobile devices. See How to hide View Chooser on mobile devices.
You can configure filter spuds to respond to the device on which they're being viewed. For example, you can set up a multi-select filter spud that automatically converts to a space-saving single-select spud when your webpage is viewed on a mobile phone or tablet.
| Multi-select filter | Single-select filter |
 |
 |
To make a filter spud device responsive, in the Publishing Control Panel, on the Control Spuds tab, edit the settings for the spud you want to configure and set the Force single select on mobile option to Yes.
I need more details about adding and configuring filter spuds.
You can set your main calendar view to automatically display the mobile calendar view and/or the mobile detail view, separately, on mobile devices. For example, a visitor using a:
We recommend that you preview the mobile calendar and/or event detail views before you select these settings. For more information, go to Main calendar views.
Tips
Preview the mobile calendar and/or event detail views using both a computer and a mobile device to confirm that the customized views look how you want. For more information, go to Main calendar views.
| Tip You can preview the Mobile Table view on a mobile device by navigating to the URL for your hosted calendar. By default, the control spuds that appear to the left of the calendar on the hosted page are hidden. On your mobile device, you can display the control spuds by tapping Show Controls above the calendar. | |
For supported calendar view and promotion spuds, in addition to setting a maximum width for all event images:
... you can also set a maximum width for when the spud is displayed at less than a specified width, including when viewing the spud on a mobile device:
Supported calendar view spuds and where to find these settings:
| Calendar view | Settings locations |
|---|---|
| List, and Classic Table | Max image width control: Events tab > Image Settings section. Spud width less than and Max image width mobile controls: Events tab > Image Width Mobile section. |
| Detail List - Title, Detail List - Date, and Photo Events | Max image width control: Settings tab > Image Settings section. Spud width less than and Max image width mobile controls: Styles tab > Image Width Mobile section. |
Supported promotion spuds spuds and where to find these settings:
| Promotion spud | Settings locations |
|---|---|
| Event Slider, Upcoming Fader List, Upcoming Vertical Crawler, Photo Upcoming, and Upcoming Table | Max image width control: Settings tab > Image Options section. Spud width less than and Max image width mobile controls: Events tab > Image Width Mobile section. |
In addition to or instead of publishing an events calendar optimized for a mobile website, you can include your calendar in an app that your customers can download to their mobile devices.
To include calendar data in a mobile app, the app developer uses one of the data feeds that 25Live automatically generates for every calendar you publish. The feeds even break down the data, which gives the app developer enough flexibility to control which event fields display.
For example, if the developer will use:
| This feed type | Provide a URL similar to this |
|---|---|
| iCal | http://www.trumba.com/calendars/yourcalendarwebname.ics |
| RSS | http://www.trumba.com/calendars/yourcalendarwebname.rss?xcal=1 |
| Atom (XML) | http://www.trumba.com/calendars/yourcalendarwebname.xml?xcal=1 |
| JSON | http://www.trumba.com/calendars/yourcalendarwebname.json |
Tip Before giving the RSS or Atom feed URL to the developer, add the xcal parameter to the end of the feed exactly as shown in the table. This parameter makes all event fields accessible to the developer so you can choose which fields to display in the app. With iCal feeds, all fields are automatically accessible.
You or the app developer can learn more about calendar feeds at Customize calendar feeds.
