Add full calendar to a responsive website

Adding your CalendarWiz calendar to a responsive website is easier than you think.  The goal of a responsive website is to provide an optimal viewing experience, whether on smartphone, tablet or desktop device.

The CalendarWiz full calendar dynamically adjusts its width to look great on desktops and tablets.  For smartphones, we'd suggest displaying either our upcoming events list or a link to mobile calendar.

How it Works:

The basic approach is to show the full calendar on devices that are big enough to view it (tablets and desktops) and swap out the full calendar for mobile upcoming events list on narrow devices widths.  Let's get started.

1. Embed the full calendar.  Insert the below code  into your calendar webpage.   Note, that the iframe has a class="full-calendar" - this class will be important.  Be sure to insert your unique calendar identifier name.
 

You may adjust the iframe height as needed.  Learn more about embedding the full calendar.

 

2. Embed the upcoming events list.

Next, add the following JavaScript code below your full calendar iframe code.   Be sure to insert your unique calendar identifier name

  

3. Add @media css statements.  

This is where the magic happens.  These @media statements will hide your full calendar on smartphones and instead show the upcoming events list.  Add the following style statements to your site css file or into head tag of your page using style tags.

We'd be happy to help you integrate CalendarWiz into your responsive website.  If you have questions, email us at support@calendarwiz.com



Article ID: 194
Last updated: 29 Dec, 2016
Revision: 30
Mobile Website Integration -> Add full calendar to a responsive website
https://www.calendarwiz.com/knowledgebase/entry/194/