If you have an Office Live Small Business website, you probably have a need to add a calendar to your website. Many webmasters have tried the built-in Events Calendar module, but aesthetically, it looked like something from the early 90s and it is not customizable:

event_calendar

As a result, webmasters turn to Google Calendar instead. Luckily, there is now a better way to add a calendar to your website with the Windows Live Calendar badge! nice_calendar

  1. Go to Windows Live Calendar. Click on Add a new calendar.  Fill in the information for your new calendar and click Save:image
  2. On the Calendar, hover over the date/time where you wish to add an event. Click on +Add. Fill in the information for the event, making sure that you select the calendar created above in Step 1 for the Calendar field. Click Save:image
  3. Repeat the above step for additional events you wish to add to the calendar. Once done, Click on Share near the top of the calendar and click on the calendar you wish to share (in this case, we called it Website Calendar):image

  4. Click on Share this calendar and check the Make your calendar public checkbox. Click on the Get your calendar links link:image

  5. Accept the Sharing confirmation pop-up. A new set of clickable links will appear on the Share this calendar page. Click on Preview in a web browser:image

  6. From the HTML links pop-up box, copy down two items from the URL provided – the cid (i.e. cid-5fcda5d02e159e1f) and the calendar name (i.e. Website+Calendar):image If your URL does not begin with cid (i.e. it does not look like http://cid-….), you should still copy down the calendar name, but you will need to find out the cid by clicking on Profile from the Windows Live quick access bar at the top:image Once the Profile page opens up, go to your browser’s address bar and copy down your cid from it:image

  7. Now, we are ready to add the Windows Live Calendar badge to our Office Live Small Business website. Open up the web page you wish to place the calendar badge in Page Editor. You should choose a layout that works well for the badge (i.e. three, span bottom). Add an HTML module in the Zone where you wish to add the badge. Enter the following code (replace the red parts with your own cid and calendar name):

    <iframe frameborder="0" scrolling="no" width="141" height="500" src="http://calendar.live.com/calendar/badgeif.aspx?user=cid-36a1f009fc15c2c5&cal=Website+Calendar"></iframe>

  8. Save the HTML module and view your webpage:image

  9. We can customize how the calendar looks by adding some additional parameters to the badge URL in the above code:

    (credit: Windows Live Mail Blog)

    clip_image002
    <iframe frameborder="0" scrolling="no" width="141" height="500" src=http://calendar.live.com/calendar/badgeif.aspx?user=cid-36a1f009fc15c2c5&cal=Website+Calendar&h=height&w=width&l=type&c=background|border|text|alternate|link|selection>
    </iframe>

    The parameters are defined as:
    &h=height:
    &h=s (shows 1 event in event list)
    &h=m (shows 3 event in event list)
    &h=mt (shows 5 event in event list)
    &h=t (shows 7 event in event list)
    Note that you may need to change the height of the iframe as well (the “500” value noted in blue above) depending on the length of the event list.

    &w=width:
    &w=n (narrow: 141 pixels)
    &w=w (wide: 194 pixels)
    Note that you may need to change the width of the iframe as well (the “141” value noted in purple above) depending on the width set.

    &l=type:
    &l=m (just the calendar grid)
    &l=a (just the events list)
    &l=ma (both calendar and events list)

    &c=background|border|text|alternateText|link|selection:
    Where each element is referring to is shown in the image above. Each element is separated by the pipe symbol (|). The color codes are HEX values (a good utility to use is Color Schemer Online for generating these values). For example, if I wish to have a background that is black, with grey borders, white text and pink alternate text, yellow for links, and orange for selection, this is the parameter for it:
    &c=000000|858585|FFFFFF|FF3399|FFFF33|FF9933

    Putting all of the above together, if I wanted to change the badge into a wide one displaying a medium list with 3 events, and with the color described in above, I would use the following code:

    <iframe frameborder="0" scrolling="no" width="194" height="500" src="http://calendar.live.com/calendar/badgeif.aspx?user=cid-36a1f009fc15c2c5&cal=Website+Calendar&h=m&w=w&l=ma&c=000000|858585|FFFFFF|FF3399|FFFF33|FF9933">
    </iframe>

    image
  10. As you can see, Microsoft placed a nice viral message on the badge to get more people sign up for Windows Live Calendar. On a business website, however, you may not wish to co-brand with Windows Live on your own website. Fortunately, you can hide that very easily by pulling on the bottom resize handle for the HTML module in Page Editor, making the bottom part of the badge with the message disappear.