It's easy to create a mobile-friendly upcoming events list for a mobile website or mobile viewing. We can host the mobile upcoming events list for you or you can embed the code into your own web page located on your server.
To see a demo of the mobile-friendly upcoming events list, open your smartphone browser
and enter the following url:
https://www.calendarwiz.com/cwlist/cwlist_page.html?crd=yourcalendaridentifier&mobile=1
Create a Mobile-Friendly Upcoming Events List (hosted by CalendarWiz):
- Enable your Upcoming Events List in your CalendarWiz calendar via: Admin Menu > Website Plugins > Upcoming Events List > Check to enable and select public categories to include in list > [SAVE]
Customize colors and styles via the List and Events tabs -> [SAVE]
If you already have an upcoming events list on your website you can create a 2nd Upcoming Events List Theme for your mobile website. To create a 2nd theme to to the "Themes" tab -> Click [New] -> Enter Title "Mobile List" or something similar -> [OK]
- Insert your calendar identifier into the link below to view your mobile-friendly upcoming events list:
https://www.calendarwiz.com/cwlist/cwlist_page.html?crd=yourcalendaridentifier&mobile=1
Be sure you replace "yourcalendaridentifier " in the link with your unique calendar identifier. The above link defaults to use the Master Theme.
- Optionally, use the full link format to point to a specific Upcoming Events List theme or to change the alternating colors in the events list. Here is the full featured link:
http://www.calendarwiz.com/cwlist/cwlist_page.html?crd=yourcalendaridentifier&theme=Mobile%20List&mobile=1&color_a=%23FFFFFF&color_b=%23D5D5D5
Where the following parameters control:
crd=yourcalendaridentifier replace with your unique calendar identifier
theme=Mobile%20List is the theme name with %20 for any blanks
mobile=1 sets list width to 100% of viewing device and optimizes mobile viewing.
color_a=%23E6E6E6 is the first alternating hex color with %23 for #
color_b=%23D5D5D5 is the second alternating hex color with %23 for #
Note:You can create multiple upcoming events list themes, if you like.
Create a Mobile-Friendly Upcoming Events List (hosted on your own web page):
Optionally, you can embed the mobile upcoming events list code into your own web page hosted on your domain. Here are the steps to embed the mobile-friendly upcoming events list on a web page hosted on your server:
- Go to Admin Menu > Website Plugins > Upcoming Events List ->
make sure the plugin is enabled > Save
- Create a web page hosted on your server and add the following code to the head of the page:
- Add the following JavaScript snippet to the body of your web page.
Important Note: Be sure to replace 'yourcalendaridentifier' and 'yourucelisttheme' with your unique calendar identifier and theme before entering into your web page. Also, if your theme name contains a space input a %20 in place of the space in the url, e.g. "Master Theme" becomes "Master%20Theme" in the url.
- Customization Tips:
Change Font Colors and Size via the admin screen for your upcoming events list:
Go to Admin Menu > Website Plugins > Upcoming Events List > Theme Tab > Select Theme > click [Open] > Make adjustments in the List and Events Tab > Save
Change alternating background colors in list:
Notice that src= link includes the following parameters to control the alternating background colors for the events in the list. These hex color codes may be changed to any codes you want.
&uc_eventalta_color=%236E6E6E6 alternating color code a
&uc_eventaltb_color=%23D5D5D5 alternating color code b
- Link your Mobile Home Page to the webpage containing the Mobile Upcoming Events List.