Responsive Calendars Examples

The "responsive" calendar format allows you to embed a calendar using an iFrame that automatically resizes to fit the available space in your website or browser. This type of calendar is optimized to fit any screen size, including smartphones.

You have control over everything in your embedded calendars including layouts, color coding, navigation styles, calendar features, and more.

You can embed a responsive calendar (featured on this page) or you can choose to embed a list of responsive events. In the examples below, we show you sample calendars, the code for the sample calendars, and a link you can click on to explore the live calendar. The sample calendars are listed by style.

Style: Month

Style: 4 Weeks

Style: Day Scroll (horizontal)

Day Scroll that starts on a specific day:

Example:

Code for this example:

<iframe allowTransparency="true" src="http://www.keepandshare.com/calendar/embed_calendar.php?i=533&style=h&fmt=std&startdate=2014-08-14&n=7&h=&w=&dbc=&hc=&htc=&tbc=&tbtc=&ltc=&ntc=&navicon=caret&fsz=11&nav=y&ac=y&sparse=n&lang=en&ifr=y&frw=&frh=&frs=no" width="100%" height="174px" scrolling="no" frameborder="0"></iframe>

Day Scroll Calendar showing a certain number of days:

Example:

Code for this example:

<iframe allowTransparency="true" src="http://www.keepandshare.com/calendar/embed_calendar.php?i=533&style=h&fmt=std&startdate=&n=3&h=&w=&dbc=&hc=&htc=&tbc=&tbtc=&ltc=&ntc=&navicon=caret&fsz=11&nav=y&ac=y&sparse=n&lang=en&ifr=y&frw=&frh=&frs=no" width="100%" height="174px" scrolling="no" frameborder="0"></iframe>

Day Scroll with Hidden Empty Days:

Example:

Code for this example:

<iframe allowTransparency="true" src="http://www.keepandshare.com/calendar/embed_calendar.php?i=533&style=h&fmt=std&startdate=2011-08-15&n=4&h=&w=&dbc=&hc=&htc=&tbc=&tbtc=&ltc=&ntc=&navicon=caret&fsz=11&nav=y&ac=y&sparse=y&lang=en&ifr=y&frw=&frh=&frs=no" width="100%" height="174px" scrolling="no" frameborder="0"></iframe>

If you are having issues with your empty days, please learn more about hiding emtpy days on your Day Scroll calendar.

Style: Day Scroll (vertical)

Example:

Code for this example:

<iframe allowTransparency="true" src="http://www.keepandshare.com/calendar/embed_calendar.php?i=533&style=v&fmt=std&startdate=2011-08-15&n=7&h=&w=&dbc=&hc=&htc=&tbc=&tbtc=&ltc=&ntc=&navicon=caret&fsz=11&nav=y&ac=y&sparse=n&lang=en&ifr=y&frw=&frh=&frs=no" width="274px" height="1200px" scrolling="no" frameborder="0"></iframe>