Calendar Embedding - Detailed Instructions

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 and 47 screen shots of real websites using KeepandShare embedded calendars. All embedded calendars can have their colors and size customized. In addition, the unique 'day scroll' style is practically infinite in its configurability.

Here is a short video demonstrating how to embed a calendar. Be sure to watch the portion at the end where we demonstrate the amazing 'day scroll' interactive configuration tool:

Thirty Seconds to Embed

1. Click the 'Customize & Share' button for your calendar.
2. Set your calendar sharing to 'Public'.
3. Click 'Embed Calendar' or 'Embed Day Scroll' link on the right side.
4. If you want, change any of the parameters / settings. (E.g., find the field titled 'Menu Bar BG' and click its color swatch and pick bright red).
5. Click in the gray 'Embed Code:' box. It automatically selects everything within it. Copy it to your clipboard.
6. Click 'Save & Exit' to leave the configuration screen. Your changes will be remembered.
7. Paste the embed code into the native HTML of your webpage.

That's all it takes! The rest of this help screen provides advanced detailed information and tips.

Visitors Can Control Overlays

When a calendar has one or more overlays turned on, a visitor can control the display of the overlays using this icon:

The icon is not displayed to you inside of your account - it only appears next to the printer icon when the calendar is viewed by someone visiting the account or when the calendar is embedded on a web page. The icon displays a dialog box with checkboxes for each active overlay. If you have structured your calendar to have various overlays representing different event types or schedules, your visitors can easily turn each overlay on and off.

Tips

At this point, if you need to make any further changes to how your embedded calendar looks, you can go back to the configuration screen and make changes there and copy the embed code again. Or you can learn how to edit the embed code directly. Editing the embed code directly is not very hard and is a quick way to change a color or width setting.

This is what the 'Embed Calendar' configuration screen looks like after typing in the 'FF0000' to change the calendar header color:

Required 'Credit Links'

We can offer you a free calendar and other embeddables because we keep our marketing costs low by gaining new customers through referrals and 'word-of-mouth' advertising. As you know, on the web, links are the equivalent of 'word-of-mouth'.

To continue to keep our marketing costs low, if you have a free KeepandShare account, our Terms of Service require that you must include a single, short 'credit link' on the home page of the website on which you embed any KeepandShare component.

Here is a sample credit link:

Printable Calendar

Credit links point to a KeepandShare page and include a specific anchor text that you should not change. The credit link is included in your embed code. Initially the credit link will appear just below your embedded component but you are required to cut and paste the credit link so it appears on your website's home page - so long as the credit link is human readable. Learn more about credit links.

How to Copy the Embed Code

The embed code appears in small gray boxes which show only the first few characters of the embed code. Don't worry, just click in the small gray box and give a copy to clipboard command (e.g., Ctrl-C). Then paste the embed code into the HTML source code of the web page into which you are embedding the calendar.

In free accounts the embed code looks like this:

In paid accounts the embed code looks like this:

If you make customization choices in the configuration screen, each custom setting is placed in your embed code as a parameter.

Instant Gratification

To quickly copy and paste some code just to get a feeling for the process, you can copy out these embed codes for our sample calendar:

Month View:

Week View:

Day View:

Event View:

Day Scroll View:

How to Test

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 sharing control's 'Allow Edit' box.

Customizing Colors

When you click on 'Embed Calendar' to obtain the embed code for your calendar, you are placed on an interactive screen that allows you to customize the colors of your calendar. Use that screen to customize your calendar colors, and copy out the code.

If you want to get technical, the underlying mechanism to customize the colors of your embedded calendar is to add parameters to the calendar URL. This allows you to make the embedded calendar match the colors of your site. See these sample screen shots of each color parameter, making it easy to see what they control. The URL color parameters are (abbreviations in parentheses):

1. dbc (day box border color) - border color for the day box
2. hc (header color) - background color of the date header
3. htc (header text color) - text color of the date header
4. mnbc (month date number background color) - background color for the date number in month view rows 2,3,4,5
5. mntc (month date number text color) - text color for the date number in month view rows 2,3,4,5
6. tbc (text box color) - background color for the day box text area (if set, overrides 'pdc' and 'tc')
7. tbtc (text box text color) - standard text color in the text area
8. mbc (menubar color) - background color of the menu bar
9. mbtc (menubar text color) - text color for the menu bar text
10. ltc (link text color) - color of URL links in the text area
11. mtbc (month date today background color) - today text background color
12. mttc (month date today text color) - today text foreground (font) color
13. pdc (pastdaycolor) - background color for day box for past days (will be overriden by 'tbc' if it is set)
14. tc (todaycolor) - background color for day box for today (will be overriden by 'tbc' if it is set)
15. fdc (futuredaycolor) - future color for day box for future days
16. dehc (dayeditorheadercolor) - day editor header background color
17. dehtc (dayeditorheadertextcolor) - day editor header text color
18. bbc (bodybackcolor) - the backround color painted before the calendar; controls what color 'flashes' and controls small border gaps that sometimes appear to right and bottom of the calendar
19. sdc (selecteddaycolor) - only occurs in search results - when a visitor searches the calendar and 'goes to' a date, the selected search date will be displayed in this color
20. colorreset=y - will force all colors back to default values

See these sample screen shots of each color parameter. And here is a detailed video on how to customize the colors of your embedded calendar.

Include the parameter name in this form in your iFrame embed code: "&mbc=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 the URL portion of embed code where the border & header color are set to be red (FF0000) (they are in bold face to make them stand out):

Note that the color parameters do not have the '#' character for the color code, and that the entire URL must be enclosed in quotes and cannot have spaces or carriage returns.

Once any color parameters have been passed, the calendar will 'remember' that color for the rest of the browser session, even if you delete the color parameter from the URL. The only way to get the color back to default values is to either quit and restart your browser, or include "&colorreset=y" in your iFrame URL.

Try It Yourself - Tutorial with Sample Calendar

The following steps will walk you through embedding our sample calendar. Try these steps to familiarize yourself with the process, and then you can redo the embedding process in a few seconds by copying your real calendar's embed code.

Here is a sample full iFrame code, just click in this box and copy the code to your web page:

We suggest you first copy the code exactly as it is, without making any changes. Once you have that code working on your web page, here are some simple steps to modify it:

• Change the "hc" from '996633' to 'FFAA00'. You should see the header of the month menu in orange.
• Change the "dbc" from 'FF0000' to 'FFAA00'. You should see the borders of the days in orange.
• Try adding another color. Right after the 2nd 'FFAA00' add this text: '&tbc=66CC00'. You'll see the day box backgrounds as a bright green. Ugh! At least you know your parameters are working. Here's a better color: change the '66CC00' to be 'FFFFFF' to make the day boxes white.
• Change the width value from '650' to '750'. You should see the iFrame get wider.
• Good, you're getting the hang of customizing an iFrame KeepandShare calendar! Remember you can control all the colors as well as the size and style of your embedded calendar. Here is the a color chart to pick color values.

At this point your iFrame code should look just like this:

One last tip: if you want to display a calendar from your account, just change the "i" value from '889231' to be the i value displayed in the URL's when you are viewing a calendar in your account. Every account has a unique i value.

Try It Yourself - Embed Code with All Parameters

The following sample embed code has all the color parameters. They are set to the same values as the default values. You might find this a useful code to copy out and play around with:

Day Scrolls

Be sure to try the interactive configuration screen to generate 100% custom day scrolls:

• Click 'Customize & Share' for a calendar.
• Click 'Embedd Day Scroll' in the right column.
• Change a value and tab or click in another box - you'll see real time feedback as you change each option!
• Copy out the gray embed link code when you want to paste the current version into your web page.
• Watch the second half of this short video to see the 'day scroll' interactive configuration tool in action.

Some particularly useful Day Scroll options::

• Days to Display controls how many days are in the day scroll.
• Hide Empty Days will cause only non-blank days to display. KeepandShare will 'look' up to 120 days in the future to fill your day scroll.
• Orientation controls vertical or horizontal layout.

You can add URL parameters by hand to your day scroll to give it 'begin' and 'end' dates. The syntax is:

• &bd=YYYY-MM-DD begin date, inclusive
• &ed=YYYY-MM-DD end date, inclusive

For instance, adding an end date of "&ed=2011-05-03" as a parameter to your dayscroll URL will keep the viewers from scrolling past May 3, 2011. Adding a begin date of &bd=2011-05-01 will keep viewers from scrolling before May 1, 2011. Here is a code snippet of a single cell day scroll that limits viewers to these dates:

Event View

There are a number of ways to customize your embedded event view calendar:

• "&sa=y" to force the event calendar to show all days; "&sa=n" to force the event calendar to hide empty days.
• "&vw=event20" to force your embedded calendar to display 20 days, or "&vw=event30", or "&vw=event60", or "&vw=event90".
• "&eventw=150" to force the left date column to 150 pixels wide (allowed to range between 100 & 300).
• "&nopopup=y" to inhibit the pop up day editor when a visitor clicks on an embedded calendar. Since Event view calendars always display all the information in each day, there is little need for a pop up window "&nopopup=n" will turn the pop up on again.
• "&md=5" to limit the number of days shown event view to 5 days (overrides vw=event30 etc.). E.g., "&md=12" will display only the next 12 days.

Show Only Certain Days

Some schedules only want to show certain days, e.g., only show Saturdays. To do so, use either our 'Event' view embedded calendar, or our 'Day Scroll'. Both have an option to 'Hide Empty Days'. Then, in your calendar, so long as Sunday-Friday are always empty, they'll never be shown, and your calendar will only show Saturdays. Try the Hide Empty Days feature, it's great.

Foreign Languages

Make your calendar speak 18 Languages: before you copy out your calendar embed code use the drop down menu to pick a language. Or you can add a parameter to the calendar URL in the form of '&lang=fr' ('fr' is for French). View sample live calendars in each of the languages. Here are the values you should pass for the supported languages:

"af" for Afrikaans
"cs" for Czech
"da" for Danish
"nl" for Dutch
"en" for English
"fi" for Finnish
"fr" for French
"de" for German
"it" for Italian
"lv" for Latvian
"no" for Norwegian
"pl" for Polish
"pt" for Portuguese
"ru" for Russian
"es" for Spanish
"sv" for Swedish
"tr" for Turkish
"uk" for Ukrainian
  (if your language is not supported and you are willing to volunteer to translate our calendar strings into your language, email us at support@keepandshare.com)

Tips

Hyperlinks: Using the chain icon in the pop up editor window you can place hyperlinks in the text of any day box. If you want your link to open in the same browser window as your web page, please note that the Target option of 'Same Window' does the standard HTML behavior of opening the linked page inside of the iFrame -- which is probably not what you want. Use the _top Target option instead. Be sure to test your hyperlinks on your final website page.

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:

/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 570-600 wide. Any less than that and portions of the calendar will be 'clipped' from view. Day view and week view can be smaller yet, and be sure to try creating and adding a day scroll - they are infinitely customizable and can be very small.

More Calendar URL Tips

• "&noname=y" in the URL of an iFrame calendar will turn off the display of the calendar Name in the title area.
• "&noviewmenu=y" in the URL of an iFrame calendar will turn off the 5 view icons in the calendar title.
• The "i" parameter is the unique id for the account holding your calendar. Every KeepandShare account has a unique "i" number - you'll see it in all URLs when you are logged in to your account. You can copy any of the above embed codes and modify the "i" parameter from "i=889231" to whatever your unique "i" number is.
• The "/calendar/" portion of the URL determines which of the calendars in your account is being referenced (remember, paid accounts provide you multiple calendars in the same account). "/calendar/" references calendar 1. "/calendar4/" references calendar 4.
• add "&sh=n" to any calendar URL to force the left panel to be closed.
• "&nopopup=y" will stop the pop-up day editor from appearing when a visitor clicks on an embedded calendar. "&nopopup=n" will turn the pop up on again.
• The no warning parameter "&nw=y" turns off the display of a warning message when an embedded calendar is displayed in the same browser as which you are logged in.
• "show.php" is the normal calendar viewer and can be embedded to have any of the below 22 views set by the "vw=" parameter (see below).
• "embed_calendar.php" is the day scroll calendar.
• The "&date=2010-03-08" parameter forces a calendar to show a particular date.
• The parameter "&tzo=14" forces the embedded calendar to display in a specific timezone. The number is relative to Greenwich Mean Time (GMT). So "&tzo=-8" would be the California time zone which is 8 hours behind GMT. If there is no tzo parameter, the embedded calendar displays with the timezone of the viewer's browser.
• "nobreak=y" will force the calendar title area to be on a single line in an iFrame, no matter how narrow the iFrame. Set it to "nobreak=n" if you want your calendar title to be on two lines to fit well in a narrow iframe.
• "&p=y" will remove the logo & header area from the calendar's display.
• "&sh=n" will force the left panel to a closed position.

Control the 'view' of your embedded calendar by setting the parameter "vw=" to one of these values:

1. year -- year display
2. year365 -- year display w/ density
3. year@ -- year display w/ headlines
4. month -- month display
5. month5 -- 5 day week month display
6. month7 -- 7 day week month display
7. week -- week display
8. week5 -- 5 day week display
9. week7 -- 7 day week display
10. week20 -- 4 week, 5 day week display
11. week28 -- 4 week, 7 day week display
12. day -- day display
13. day1 -- 1 day display
14. day2 -- 2 day display
15. day3 -- 3 day display
16. day4 -- 4 day display
17. day5 -- 5 day display
18. event -- event display
19. event20 -- 20 day event display
20. event30 -- 30 day event display
21. event60 -- 60 day event display
22. event90 -- 90 day event display

For example, this embed code will show your calendar in 7 day week month view (the "vw" parameter is in bold face):

And this embed code will show your calendar in 20 day event view:

Set Your Calendar's Time Zone

You can force your embedded calendar to display in a particular time zone by adding the parameter "&tzo=14" where the number will pick a time zone relative to Greenwich Mean Time. Time zones mostly matter to ensure that KeepandShare displays the correct day as 'today' in the calendar. E.g., &tzo=14 is "14" hours ahead of GMT. You can also use a negative number to indicate a certain number of hours before (negative) GMT. PST would be -8.

(iFrame; embed embedding live embedding website iFrame, html calendar, web calendar)