Ektron 9.00

Working with Calendars

Web Calendars keep site visitors informed about upcoming events. Any authorized user can add events to a calendar. Ektron has System, User, and Group calendars. The calendar type determines where events are stored in the database, and what permissions are needed to edit them. See Also: WebCalendar server controla server control uses API language to interact with the CMS and Framework UI to display the output. A server control can be dragged and dropped onto a Web form and then modified..

Calendar Types

 

System Calendar

User Calendar

Group Calendar

Where events are stored

Workarea > Content > Calendar Folder

Community User Calendar

Community Group Calendar

Where events are added or edited

The Web page or Workarea folder

The community usera user with limited privileges, such as writing to a community forum, but not having the same privileges as a forum moderator, or an administrator who has access to the Workarea. (A community user is the same as a membership user.)’s profile Web page

The community group’s Web page

Where permissions are set

Folder Permissions

Community Users and Colleagues

Community Group Membership

How it appears on a Web page

Web page with Server Control or widget

For more information, see

Adding a Calendar

Creating a Calendar in My Profile

Creating a Calendar in a Group

When first viewed, a Web calendar shows the current day, month, or week, whether you are on a Web page or in the Workarea. After logging in, you can add or edit calendar events if you have permission to do so.

Adding a calendar

Adding a Calendar

Prerequisite

To add, edit or delete a calendar, you must be a member of the Administrators Group or have permission to Add, Edit, and Delete folders on the Advanced Permissions screen. See Also: Setting Up Your CMS Folder Structure

To create a system calendar:

  1. In the Workarea, click Content > the folder to which you want to add a calendar.
  2. Click New > Calendar. The Add Calendar screen appears.
    —Image—

  3. Enter the Calendar Name.
  4. Enter the Description.

  5. Enter a Style Sheet.—Specify a style sheet that defines styles that may be applied to event content in this folder. The style sheet must reside in the site root folder. Or, leave this field blank to inherit the parent folder’s style sheet. The style sheet populates the style drop-down list within the editor.

    —Image—

    NOTE: This style sheet affects event content being edited. It does not necessarily affect the content’s appearance on your website. To set or edit the style sheet that determines your Web pages’ appearance, open the page’s Web form and place a <link rel=”stylesheet”... tag within its <HEAD> tags. If desired, you can identify the same style sheet in both locations. To include user-selectable styles, they must be generic classes.

  6. Set the Content Searchable value. See Also: Making Content Searchable
    • Calendar Properties Template Tab
      • Inherit Parent Template Configuration—Check this box to inherit the template from the parent content folder. Or, do not check this box and specify one or more templates below.
      • Page Templates—Specify one or more templates for Calendar events in this folder. This folder’s content uses the specified template when appearing on your website.
    • Other Calendar Properties Tabs
  7. Click Add Calendar. Note that the system calendar icon is unique ().

After creating a calendar, you may add events.

Adding system calendar events

Adding System Calendar Events

Prerequisite

You logged into Ektron and have edit permission for the calendar. Calendars have the same permission and approval settings as folders. See Also: Managing Folder and Content Permissions, Setting Approval Chains

To add or edit a system calendar event:

  1. Navigate to your calendar from the Web page containing it or the Workarea > Content tab.
  2. Click any day. (You can also click New > Add Calendar Event.) The Edit Event screen appears.
    —Image—

    • Enter the event title into the Title text box. “Company Picnic” for example. The title appears on the calendar and in the pop-up information. To customize this pop-up, see Customizing the Web Calendar Tooltip.
      —Image—

    • Enter the Location.
    • Enter the Description.
    • Specify the Start time and the All day options at the bottom of the Edit Appointment page.
      —Image—

      • For start date, click Calendar () and set the start date.
      • For start time, enter the time text or click Clock ().

      Ektron stores event times as UTC (also known as Greenwich Mean Time—GMT). For members or visitors that login, events show in the member’s time zone. For visitors that do not log in, events show in the Web server’s time zone. For information about setting the user time zone, see Time Zone Field.

  3. If appropriate, set recurrences. Appointments can recur daily, weekly, monthly, or yearly. They can be spaced at various intervals and have a finite duration or recur indefinitely. For example, you can set a recurring event for each Friday for the next 5 weeks.
    —Image—

    When editing a recurring event, you are prompted to edit either the single occurrence or the series.

  4. Select a Taxonomy category. A typical calendar taxonomy screens events that a site visitor might wish to see. For example, a college sports website shows all sports, but a visitor only wants football games. To show only events related a specific category on your calendar page, use a Taxonomy. See Also: Using Taxonomy with Web Calendars.
    —Image—

  5. If desired, set Metadata for the event. See Also: Working with Metadata.
  6. If desired, set the event alias. See Also: Creating User-Friendly URLs with Aliasing
  7. Click Save. The event appears on the calendar.
Exporting appointments to other calendars using iCal

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.

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

Prerequisites

You are logged into the Ektron website 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.
    —Image—

  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

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

Viewing system calendar properties

Viewing System Calendar Properties

The Calendar properties screen lets you set permissions as well as modify the calendar’s metadata, taxonomy, templates, flagging, Web Alerts and Breadcrumbs. To view a system calendar's properties:

  1. From the Workarea, choose Content.
  2. Click the calendar you wish to view. The View Events screen appears.
  3. Click View > Properties. The View Properties screen appears. (To edit the properties, click Edit Properties.)
    —Image—

    To learn more about the properties, see Adding a Calendar

Using community Web calendars

Using Community Web Calendars

Both community group and community usera user with limited privileges, such as writing to a community forum, but not having the same privileges as a forum moderator, or an administrator who has access to the Workarea. (A community user is the same as a membership user.) profile pages can display a Web Calendar. The following example shows a user profile page with a personal calendar.

—Image—

The calendar on a personal community page obeys the same community rules as other features in the community. You can restrict the visibility of your events to only colleagues or make them public.

Creating a calendar in My Profile

Creating a Calendar in My Profile

You can place a Web calendar on a user profile to track personal appointments. The following code places a WebCalendar server control on a User Profile template. You must set sourceType and dynamicParameter as shown.

<CMS:WebCalendar ID="WebCalendar1" runat="server" >
	<DataSource> 
          <CMS:CalendarDataSource sourceType="UserCalendar" dynamicParameter="id” >
	</DataSource>
</CMS:WebCalendar>
Creating the user calendar in the database

Creating the User Calendar in the Database

To use a personal calendar, you must add it to the database. Each user needs to do this when they decide to use a calendar on their profile.

To add a user calendar to the database:

  1. Log in to your website.
  2. Navigate to your personal Web page or your profile.
  3. Click Edit Profile. In this example, Edit Profile is on a personal profile page of the eIntranet Starter Site.
    —Image—

    Alternatively, you can log into the Workarea then go to Settings > Users > User Profile.

  4. When the Edit Profile window appears, click the Custom tab.
  5. Check Create User Calendarto create a user calendar in the database.
    —Image—

    WARNING! After you save this profile, you cannot later uncheck this option.

  6. Click Save. Your calendar appears on your profile page.
Creating a calendar in a group

Creating a Calendar in a Group

You can add a Web Calendar to any Ektron community group. The following is a sample calendar on a group page.

—Image—

The calendar on a community group page obeys the same community rules as other community features. You can restrict the visibility of group events to group members, or make the calendar public.

NOTE: An alternate way to use group calendars is using the WebCalendar widget on a group dashboard. See Adding a Calendar to the WebCalendar Widget for more information.

The following example provides the code for placing a WebCalendar server control on a Group Profile template. You must set sourceType and dynamicParameter as shown for CalendarDataSource.

<CMS:WebCalendar ID="WebCalendar1" runat="server">
  <DataSource>
  <CMS:CalendarDataSource sourceType="GroupCalendar" dynamicParameter="id”/>
  </DataSource>
</CMS:WebCalendar>

To use a group calendar, you must add it to the database. Each group needs to do this once when they decide to have a calendar for their group.

To add a group calendar to the database:

  1. Log in to your website.
  2. Navigate to your group Web page.
  3. Choose Manage > Edit Group.
  4. When the Edit Group window appears, check the Create Group Calendar checkbox to create a group calendar in the database.
    —Image—

    WARNING! After you save this profile, you cannot later uncheck this option.

  5. Click Save. A group calendar exists in the database and can appear on the group page.
Customizing the Web calendar tootip

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 website, 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. Set these property values on the Telerik:RadToolTip server control.
    • ShowDelay-0
    • Animation-Fade
  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: 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

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.

Color CSS Style Change 

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

Uppercase CSS Style Change 

.RadScheduler .rsSpacerCell, 
.RadScheduler .rsVerticalHeaderTable th,
.RadScheduler .rsHorizontalHeaderTable th {
   border-style: solid;
   text-transform: uppercase
}
Adding a calendar to the WebCalendar widget

Adding a Calendar to the WebCalendar Widget

The WebCalendar widgetWidgets are mini-applications that you place on a Web page using PageBuilder; a widget provides either specific functionality (calculators, search, social bars, etc.) or areas into which you can add content (content blocks, list summaries, collections, and so on). can display a combination of system, user, and group calendars. You place a Web calendar on a Web page by using either a WebCalendar server controla server control uses API language to interact with the CMS and Framework UI to display the output. A server control can be dragged and dropped onto a Web form and then modified. or a WebCalendar widget. A WebCalendar widget is an easy way to add a calendar to a PageBuilder page or Smart Desktop (See Also: Managing Content from the Smart Desktop.)

Adding a system calendar to a WebCalendar widget

Adding a System Calendar to a WebCalendar Widget

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

To add a system calendar to a WebCalendar widget:

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

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

Adding a user calendar to a WebCalendar widget

Adding a User Calendar to a WebCalendar Widget

  1. Click Edit () in the upper right corner of the WebCalendar widget.
  2. Click the User tab.
    —Image—

  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.
    —Image—

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

Adding a Group Calendar to a WebCalendar Widget

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

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

  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.
Combining Web calendars (mashups)

Combining Web Calendars (Mashups)

A Calendar Mashup combines events from different calendars into one calendar view. As an example, you could combine company meetings from one calendar with a special seminar series from another.

The ways to combine calendar events are described below.

Combining calendars using the dynamic method

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.
    —Image—

  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.

    —Image—

Combining calendars using the static method

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

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

—Show the code— 
‘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

—Show the code— 
//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
Using taxonomy with Web calendars

Using Taxonomy with Web Calendars

You can use taxonomy categories to filter calendar events. Calendar categories could include meeting rooms, audience, or whether the event should appear on a special public calendar. The following example organizes events based on locations and audience. See Also: Creating a Taxonomy and Its Associated Categories

—Image—

After you create a taxonomy, you can assign its categories to events.

Use a CategoryID value in the CalendarDataSource to filter events according to taxonomy categories. In the following example, the calendar shows events for the Training Center (category 123) or Administrators (category 124).

<cms:WebCalendarID="webcalendar"runat="server">	
  <DataSource>
    <cms:CalendarDataSourcedefaultId="726"sourceType="SystemCalendar">  
    <CMS:CategoryIDcategoryId="123"/>
    <CMS:CategoryIDcategoryId="124"/>
    </cms:CalendarDataSource>
  </DataSource>
</cms:WebCalendar>

By using an ID of a higher category in the taxonomy tree, you can show all events under it. For example, this taxonomy has 2 higher level branches with ID 100 and 200.

—Image—

If you set the category ID to 100, you see any events associated with categories 100, 111 or 112.