Exporting Appointments to Other Calendars Using iCal

You can export Web calendar appointments to any calendar that accepts an iCalendar *.ics file. This is helpful if you want to track appointments on your Web calendar and a mobile device calendar, for example.

NOTE: Ektron uses accepted standards for producing the iCalendar ics file. This does not mean that all calendar types use the recurring appointment data properly. Contact your calendar vendor if iCalendar support is needed.

WARNING! Changes to recurring appointments do not work correctly for iCal files used in Microsoft Office 2003.

Prerequisites: You are logged into the Ektron Web site and are a member of the Administrators group or assigned the Calendar-Admin role

To export a Web Calendar event to another calendar:

1. Hover over an event on the Web calendar.
   

   

2. Click download. The File Download screen appears.
3. Click Save and save to a folder on your computer.
4. After the file is downloaded, click Open Folder.
5. Double click the .ics file you saved. When you do, the appointment setting page for your default calendar opens. For example, this file name was event-997.ics.

   NOTE: If you are adding the appointment to a calendar other than the default calendar on your PC, first open that calendar and import or add the *.ics file to it. For example,when using a Google Calendar, click Add then choose import. See your calendar's instructions for importing iCalendar appointments.

6. Save and close this appointment. It will now appear on your calendar.

Showing Calendar Events on Activity Streams

A new or updated Calendar event appears on a Community Activity Stream if the following notification settings are checked on a user's or Membership Group's Profile > Activities tab. For more information, see Notification Message Recipients.

• Add Calendar Event
• Update Calendar Event
• Add Calendar Event
• Update Group Calendar Event

  

Customizing the Web Calendar Tooltip

When you hover over a calendar event, a tooltip automatically shows its details.

You can change how this tooltip looks and behaves by modifying the telerik:RadToolTip properties. You can apply many changes to a tooltip, but the following example makes the tooltip appear without delay and use fade-in animation. The example below uses the EktronTech starter site.

First, add a calendar event and observe the default behavior. Then, follow these steps.

1. Open the EktronTech Website file folder in your editor.
2. Make a copy of the Display.ascx and Display.ascx.cs files from this folder

   siteroot\workarea\WebCalendar\DefaultTemplate

3. Paste them into a new folder in the Web site, such as siteroot\CustomUserControls.

   WARNING! You should copy these files and move them to a folder outside the \Workarea folder. Upgrades overwrite \workarea folder files.

4. Edit the new .ascx file you just created.
5. Change these properties on the Telerik:RadToolTip server control.

   Property	Value	Default Value
   ShowDelay	0	400
   Animation	Fade	None

6. Save your changes.
7. Edit your template.
8. Update the WebCalendar server control's DisplayTemplatePath property with the location of the revised display.ascx file. For example: /CustomUserControls/display.ascx. See Also: Using the WebCalendar Server Control.
9. Save your changes.
10. Refresh the browser page containing the calendar.
11. Hover over the calendar event to see the new behavior.

Customizing the Web Calendar Style Sheet

The Web calendar style sheet is WebCalendar.css. It is located in the folder siteroot\workarea\WebCalendar\View.

Modify the .RadScheduler classes to change the Web calendar's style. Below are sample changes.

.RadScheduler .rsDateHeader {
   font-size: 12px;
   padding: 1px 4px 3px;
   text-decoration: none;
   color: green
}

.RadScheduler .rsSpacerCell, 
.RadScheduler .rsVerticalHeaderTable th,
.RadScheduler .rsHorizontalHeaderTable th {
   border-style: solid;
   text-transform: uppercase
}

Adding a System Calendar to a Widget

A system calendar is one that is managed within Ektron Workarea. For more information, see Adding a Calendar.

To add a system calendar to a calendar widget:

1. Click Edit () in the upper right corner of the Web Calendar widget.
2. Click the Folder tab.
3. Locate the calendar to add. Note its unique icon.
   

   

4. Click Save. The calendar is added to the Selected Calendars list.
   

   

Adding a User Calendar to a Widget

To add your user calendar to a Web Calendar widget:

1. Click Edit () in the upper right corner of the Web Calendar widget.
2. Click the User tab.
   

   

3. Specify a user that has a calendar set up and click Search Users to find a person's calendar (that is available to you).
4. Click Add Calendar () to add the calendar to the Calendar Widget list.
   

   

5. You can choose colors for events from each user's calendar to differentiate each use on your calendar. AutoSelect uses the next available color.
6. To remove any calendar, click Remove ().
7. Click Save.

Adding a Group Calendar to a Widget

To show one or more Group calendars on a Web Calendar widget, follow the steps below.

1. Click Edit () in the upper right corner of the Web calendar widget.
2. Click the Group tab.
3. Search for other group calendars by entering a group name and clicking Search Groups.
   

   

4. Click Add Calendar () next to a calendar you want to add. All chosen group calendars appear on the Selected Calendars tab.
   

   

5. You can choose colors for events from each user's calendar to differentiate each use on your calendar. AutoSelect uses the next available color.
6. To remove any calendar, click Remove ().
7. Click Save.

The following are Ektron-specific server control properties. You can find information about native .NET properties such as font, height, width and border style in Visual Studio^® help.

• AllowEventEditing (Boolean)

  Determines whether users can add or edit calendar events. Default is True.

• DefaultDisplayType (String)

  Specify the default calendar display. The default is Month, which means that the month view appears on the Web page. The site visitor can change the view.

• DisplayTemplatePath (String)

  Specify the path to the code that controls how events are displayed. Default is blank. See Also: Customizing the Web Calendar Tooltip

• DisplayType (String)

  Determines which time period choices are presented on the calendar. Choices are All, Day, Month, Week. Default is All.

• DoInitFill (Boolean)

  By default, Fill occurs during the Page_Init event. Set to false if you want to postpone the fill-action until later. In this case, Fill is automatically called during the Page Render event. You might do this if you need to set or change a property on the control in code-behind and have it render with your changes shown.

• DynamicParameter (String)

  To make this calendar dynamic, select calendar_id. When you do, this server control uses the calendar passed as a URL parameter. To exclude this function, choose None- Use Default. Only Calendars with sourcetype=SystemCalendar may be used in the querystring for this value. For example, where DyanamicParameter=”calendar_id”, the URL may read http://mysite.com/calendar.aspx?calendar_id=”55”. In this case, calendar 55 must be of the SystemCalendar type.

• Hide (Boolean)

  Hides or displays the output of the control in design time and run time.

  • True—Hide the control output.
  • False—Display the control output.
• Language (Integer)

  Set a language for viewing content; shows results in design-time (in Visual Studio) and at run-time (in a browser).

• SuppressWrapperTags (Boolean)

  Suppresses the output of the span/div tags around the control.

  • True—Suppress wrap tags.
  • False (default)—Allow wrap tags.
• WrapTag (String)

  Lets a developer specify a server control’s tag.

  • Span (default)—designate an inline portion of an HTML document as a span element.
  • Div—apply attributes to a block of code.
  • Custom—Lets you use a custom tag.

• backColor (String)

  The background color of the calendar event. If you set this value to AutoSelect, the next available color in the list is chosen automatically.

• defaultId (String)

  The Id of the SystemCalendar, GroupCalendar or UserCalendar to display on the Web page. For more information about using this property, see Combining Web Calendars (Mashups).

• queryParam (String)

  The parameter that may be in the query string to mash-up additional calendars. This can be any Calendar SourceType. For example, if the value is set to uid, then the querystring can be:

  .../calendar.aspx?calendar_id=”55”&uid=”440”

  For more information about using this property, see Combining Web Calendars (Mashups)

• sourceType (String)

  Choices are SystemCalendar, GroupCalendar, UserCalendar. See Also: Combining Web Calendars (Mashups)

  NOTE: The CategoryID property set inside the <DataSource> <CategoryID> tag is used to identify taxonomy categories to filter calendar events. See Also: Using Taxonomy with Web Calendars

Combining Calendars Using the Dynamic Method

The dynamic method uses the URL query string parameter to specify a calendar. This method maintains one calendar template that can display many calendars on your site. The following example uses the EktronTech starter site. The exercise combines calendars using a URL whose query parameter is cal2: http://<servername>/ektrontech/calendar.aspx?cal2=376

To combine 2 calendars:

1. Create 2 calendars in the workarea. See Also: Adding a Calendar
2. Determine each calendar's ID number by examining its properties. This example uses calendar folder IDs 88 and 376.
   

   

3. Edit the calendar.aspx template that contains the Web calendar. In this example, the template is located on the Web server in this folder: d:\inetpub\wwwroot\EktronTech.
4. Add 2 CalendarDataSource tags: one for a static calendar, the other for a dynamic calendar.
   • In the first (static) CalendarDataSource property, add defaultId = “88”.
   • In the second (dynamic) CalendarDataSource property, add queryParam = “cal2”. This lets you display any calendar referenced in the query string.
5. In both CalendarDataSource tags, set the sourceType = “SystemCalendar” property. The finished code looks like this.

   <cms:WebCalendar ID="webcalendar" runat="server" 
     DynamicParameter="calendar_id" DisplayType="All" 
     SuppressWrapperTags="True">
   <cms:WebCalendar ID="webcalendar" runat="server" 
     DynamicParameter="calendar_id" DisplayType="All"
     SuppressWrapperTags="True">
     <DataSource>	
       <cms:CalendarDataSource defaultId="88" sourceType="SystemCalendar"/>	
       <cms:CalendarDataSource queryParam="cal2" sourceType="SystemCalendar"/>
     </DataSource>
   </cms:WebCalendar>

6. Save calendar.aspx.
7. Enter the following URL to see the calendar:
   http://<servername>/ektrontech/calendar.aspx?cal2=376

   You see the combined calendar events. If there are too many events to show on a date, clock more... to see all events.

   

   

Combining Calendars Using the Static Method

The static method of combining calendars "hard codes" calendar id numbers instead of using a query string parameter. This method creates a calendar whose event source does not change dynamically.

1. Create 2 calendar folders in the workarea. See Also: Adding a Calendar
2. Determine the ID number for each calendar by examining the Calendar Folder properties.
3. Edit the calendar.aspx template.
4. In the CalendarDataSource properties, add defaultId values for each calendar as shown.
   

   			
   <cms:WebCalendar 
     ID="webcalendar" 
     runat="server" 
     DynamicParameter="calendar_id" 
     DisplayType="All" 
     SuppressWrapperTags="True">
     <DataSource>
       <cms:CalendarDataSource defaultId="88" sourceType="SystemCalendar"/>
       <cms:CalendarDataSource defaultId="376" sourceType="SystemCalendar"/>
     </DataSource>
   

   In this example, events for calendars 88 and 376 are combined on the calendar.aspx page.

Combining a Static Mashup and Dynamic Parameter

The following example displays a calendar according to a dynamic parameter in the query string. If the query string parameter is not used, the calendar shows a mashup of 3 calendars. The following example assumes you created 3 calendars with IDs 88, 374, and 376.

This is the code for the events.aspx template.

<cms:WebCalendar ID="webcalendar1" runat="server">
  <DataSource>
    <cms:CalendarDataSource sourceType="SystemCalendar" >
    </cms:CalendarDataSource>
  </DataSource>
</cms:WebCalendar>
	

This is the code-behind which tests for a query parameter. If none is found, display a static calendar mashup.

events.aspx.vb

‘This code is located in the Page_Load event
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
  ‘Create a CalendarDataSource instance and set the sourceType and queryParam
  Dim cds As New Ektron.Cms.Controls.CalendarDataSource()
  cds.queryParam = "calid"
  cds.sourceType = Ektron.Cms.Controls.SourceType.SystemCalendar
  ‘Add the DataSource object
  webcalendar1.DataSource.Add(cds)
  ‘If the queryString is used, show that calendar, otherwise show the following mashup
  If (Request.QueryString("calid") = String.Empty) Then
    ‘Create three CalendarDataSource instances and 
    add the sourceType and defaultId for each.
    cds = New Ektron.Cms.Controls.CalendarDataSource()
    cds.sourceType = Ektron.Cms.Controls.SourceType.SystemCalendar      
    webcalendar1.DataSource.Add(cds)
    cds = New Ektron.Cms.Controls.CalendarDataSource()
    cds.sourceType = Ektron.Cms.Controls.SourceType.SystemCalendar
    cds.defaultId = 88
    webcalendar1.DataSource.Add(cds)
    cds = New Ektron.Cms.Controls.CalendarDataSource()
    cds.sourceType = Ektron.Cms.Controls.SourceType.SystemCalendar
    cds.defaultId = 376
    webcalendar1.DataSource.Add(cds)
  End If
‘Fill and return
webcalendar1.Fill()
End Sub		

events.aspx.cs

//This code is located in the Page_Load event
protected void Page_Load(object sender, System.EventArgs e)
{
  //Create a CalendarDataSource instance and set the sourceType and queryParam
    Ektron.Cms.Controls.CalendarDataSource cds = new Ektron.Cms.Controls.CalendarDataSource();
    cds.queryParam = "calid";
    cds.sourceType = Ektron.Cms.Controls.SourceType.SystemCalendar;
  //Add the DataSource object
    webcalendar1.DataSource.Add(cds);
  //If the queryString is used, show that calendar, otherwise show the following mashup
    if ((Request.QueryString("calid") == string.Empty)) {
      //Create three CalendarDataSource instances and add the 
      //sourceType and defaultId for each.
      cds = new Ektron.Cms.Controls.CalendarDataSource();
      cds.sourceType = Ektron.Cms.Controls.SourceType.SystemCalendar;
      webcalendar1.DataSource.Add(cds);
      cds = new Ektron.Cms.Controls.CalendarDataSource();
      cds.sourceType = Ektron.Cms.Controls.SourceType.SystemCalendar;
      cds.defaultId = 88;
      webcalendar1.DataSource.Add(cds);
      cds = new Ektron.Cms.Controls.CalendarDataSource();
      cds.sourceType = Ektron.Cms.Controls.SourceType.SystemCalendar;
      cds.defaultId = 376;
      webcalendar1.DataSource.Add(cds);
    }
    //Fill and return
    webcalendar1.Fill();
}

To see a single calendar such as 376, use this URL:

http://<server>/cms400developer/events.aspx?calid=376

To see all calendars together, do not use the query string parameter.

http://<server>/cms400developer/events.aspx