Examples of embedded Responsive Calendars

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

responsive month view calendar

Click here to view the live calendar

Style: 4 Weeks

responsive 4 week view calendar

Click here to view the live calendar

Style: Day Scroll (horizontal)

Day Scroll that starts on a specific day:

Example:

What the code looks like:

<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:

What the code looks like:

<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:

What the code looks like:

<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:

What the code looks like:

<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>