It's easy to have your your KeepandShare calendar actually "embedded" inside of web pages on other websites. Here are live samples of calendar embedding. All embedded calendars can have their colors and size customized. In addition, the unique 'day scroll' style is practically infinite in its configurability.
To embed, first, set your calendar sharing to the 'public' share group - since you are embedding onto your public website, your embedded information should be publicly viewable - otherwise your web visitors will be prompted to log into KeepandShare to view your information.
Second, copy the 'Embed code' we provide you in a gray box. Click on 'Customize & Share', use the drop down to pick the view your embedded calendar will display, and copy the 'Embed code' from the gray box. If you want a lot of control over how the embedded calendar looks, click on 'Create Embedded Day Scroll' from the same screen - using the interactive configurator, you'll be able to control color, layout, size and more.
Embedding works by placing the referenced KeepandShare page inside of an HTML "iFrame". You will have to paste the embed code into the HTML source code of the hosting web page. The iFrame code has width and height and scrolling parameters that can be easily modified to change the size of the window holding the KeepandShare page, and to turn scroll bars on and off.
How to test your embedded calendar: once you've pasted the embed code into your web page you can make it live and the calendar will appear in an iFrame on your page. Note that clicking in a day box will still pop up a window of that day box - this is so visitors can view all the day box contents if they are long. The pop up window will not have a Save button unless you have checked the edit box. Note: when testing your embedded calendar, you want to be sure KeepandShare thinks you are a 'public' visitor, so be sure you are logged out of your own KeepandShare account or that you are using a different browser - then you will see exactly what a real public visitor to your site will see.
To customize the colors of your embedded calendar, add parameters to the calendar URL. This allows you to make the embedded calendar match the colors of your site. The URL color parameters are:
- dayboxbordercolor - border color for the day box
- headercolor - background color of the date header
- headertextcolor - text color of the date header
- textboxcolor - background color for the text area
- textboxtextcolor - standard text color in the text area
- menubarcolor - background color of the menu bar
- menubartextcolor - text color for the menu bar text
Include the parameter name in this form in your iFrame embed code: "&menubarcolor=ff0000" where the portion to the right to of the equal sign is the 6 digit color code (here is a color chart). Here is a the URL portion of embed code where the border & header color are set to 'FF0000' (which is red):
http://www.keepandshare.com/calendar/show_month.php?i=889231&ifr=y&dayboxbordercolor=ff0000&headercolor=ff0000
How to point your calendar at a particular date: include a parameter "&date=2010-11-15" in your URL and your calendar will initially display with that date. Here is a sample with the date parameter in bold:
http://www.keepandshare.com/calendar/show_month.php?i=889231&ifr=y&dayboxbordercolor=ff0000&headercolor=ff0000&date=2010-11-15
iPhone Accessible. The 'day scroll' version of embedding works great for viewing from iPhones, Blackberries and the like. We suggest you put a larger month or week view on your web page, and then right next to it have a link to click to a 'small view' that presents a page with just a day scroll version. Your mobile viewers will love it.
How small can you make an embedded calendar? Use 'event view' or 'day scroll' embedding for the smallest calendars. For month view, you can play around with the width parameters and see for yourself, but typically for month view calendars about the smallest is about 635 wide. Any less than that and portions of the calendar will be 'clipped' from view.
(iFrame; embed embedding live embedding website iFrame, html calendar, web calendar)
