Search: Advanced search
Please enter a keyword or ID
Browse by category:
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.
- 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.
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 firstname.lastname@example.org
|Others in this category|
|Create a Mobile-Friendly List of Events for Mobile Website or Smartphone:|
|Add mobile version of your calendar to mobile site|
|Remove Login Nav Bar From Mobile Calendar App|
|Optimize upcoming events list for a responsive website|