Best Online Calendar

Support

Knowledge Base

Browse knowledge base categories or search with keyword related to your question.

Email Support

Can't find your answer?

Contact Support or Contact Sales
Search:     Advanced search
Browse by category:

Add full calendar to a responsive website

Article ID: 194
Last updated: 29 Dec, 2016

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.

  • Start by going to the admin menu > upcoming events list > select categories to display.
  • Set your list width = 100% so it will fill the width of its containing element on your web page.
  • Adjust styles, etc. SAVE your changes.

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

Others in this category
document Create a Mobile-Friendly List of Events for Mobile Website or Smartphone:
document Add mobile version of your calendar to mobile site
document Remove Login Nav Bar From Mobile Calendar App
document Add upcoming events list to a responsive website