icon Event Calendar
Created by Orckestra

See also:

Show technical information 

How to add Event Calendar to a website

To implement Event Calendar on your website, you can:

  • create the Event Calendar by creating a new page  or
  • add the Event Calendar to an existing page.

How to create an Event Calendar page

  1. Create a page to list events.
  2. Select "Event calendar" as its page type.

The "Event calendar" page type adds:

  • the Events application to the page
  • the EventCalendarAndSignup function on the page

How to add Event Calendar to an existing page

If you want the Event Calendar on an existing page:

  1. Edit the page.
  2. Add the Composite.Community.EventCalendarAndSignup function ( Insert > Function) or insert the following code on the page: Expand code
  3. If necessary, set its optional parameters:
    • Event List Intro: Custom content to show above the event list (default view). This content will not show up on more detailed views and is intended as a general introduction to your event list.
    • Options: Additional options of the event:
      • Show Event Hours: If true, dates will be shown with the hours (hh:mm). False by default.
      • Use International Dates: If true, dates will be shown in the internationally recognizable format YYYY-MM-DD; otherwise, a localized short date format will be used. False by default.
  4. Add the Events application to the page.

How to create events

  1. Select the Events below the page set up to list events.
  2. Click Add Event on the toolbar.
  3. On the General tab, provide the required information in these fields:
    • Event title: The title of the event
    • Start time: The date and time the event starts
    • End time: The date and time the event ends
  4. If necessary, provide the optional information in these fields:
  5. On the Signup tab, if you want people to sign up for this event, provide the optional information in these fields:
    • Number of seats: The maximum number of available seats for this event.
    • Signup deadline: Signups will not be possible past this deadline
    • Signup configuration: The settings to use for signups. If none is selected, signup is not available. (Learn how to create signup configurations.)
  6. On the Description tab, if necessary, add an HTML formatted long description of the event.

If you choose to use the signup configuration, make sure that you have provided the sender's proper name and email address. (Please see How to create signup configurations.)

Note: The link to the signup form appears on the event page only if (a) the signup configuration is selected and (b) the number of seats is greater than 0.

How to show event teasers

You can list available events from all the event calendars on any page of the website.

  1. Edit the page.
  2. Add the Composite.Community.EventTeasers function ( Insert > Function) or insert the following code on the page: Expand code
  3. If necessary, set its optional parameters:
    • Count: A number of events to show as teasers
    • Options: Additional options of the event:
      • Show Event Hours: If true, dates will be shown with the hours (hh:mm). False by default.
      • Show Short Description: If true, short descriptions of events will be shown below their titles.
      • Use International Dates: If true, dates will be shown in the internationally recognizable format YYYY-MM-DD; otherwise, a localized short date format will be used. False by default.

How to create locations

  1. In the Content perspective, expand Website Items and select Event location.
  2. Click Add Data on the toolbar.
  3. Set its required parameter:
    • Location name: The name of the event location
  4. If necessary, set it optional parameters:
    • Address: The address of the event location
    • Info URL: The web address associated with this location.
  5. Save the location.

How to create signup configurations

  1. In the Content perspective, expand Website Items and select Event signup configuration.
  2. Click Add Data on the toolbar.
  3. On the Settings tab, provide the required information in these fields:
    • Configuration name: The name of this signup configuration
    • Send-from e-mail: The e-mail address used for the 'from' field in e-mails
    • Send-from name: The name used for the 'from' field in e-mails
  4. If necessary, provide the optional information in these fields:
    • Internal notification e-mail: When specified, notifications of new signups will be sent to this e-mail address. Separate multiple e-mail addresses with a semi-colon (";").
    • Send e-mails to participants: When selected, e-mails will be sent to the person signing up. The participant will also be notified about queue changes and cancellations.
    • Cancelation link text: The text to show in the 'cancel signup here' link in emails.
  5. If necessary, modify the text of the messages sent to the participants.
  6. If necessary, customize and configure the signup form
  7. Save the configuration.

How to create signup notification messages

  1. Create a new, or edit the existing signup configuration.
  2. Click the respective tab to modify the text of the message:
    • Signup Success Message: The message to send to users who have successfully signed up
    • Signup Queued Message: The message to send when the signup is queued
    • Signup De-queued Message: The message to send when the signup is de-queued
    • Signup Canceled Message: The message to send to users when their signup has been canceled

You can insert fields such as "Name" ("Insert" > "Field" > "<FieldName>") to personalize these messages.

How to customize and configure the signup form

The Even Calendar uses Composite.Forms.Renderer to render a signup form based on the Composite.Community.EventCalendar.Signup data type. You can customize the signup form in two ways:

  • Creating a new custom data type and specifying it in the existing or new signup configuration
  • Editing the existing Composite.Community.EventCalendar.Signup data type

How to customize a signup form by creating a custom data type

To customize the signup form by creating, first of all, a custom data type:

  1. In the Data perspective, create a global data type to store signups. (You can take a look at  Composite.Community.EventCalendar.Signup as an example of such a data type).
  2. Make sure the fields to store the names (e.g. "Name") and email address (e.g. "Email") are added.

Next, create a new signup configuration or edit an existing one and use this data type instead of the default data type "Composite.Community.EventCalendar.Signup":

  1. In the Content perspective, expand Website Items and select Event signup configuration.
  2. Create or edit a signup configuration and switch to the Advanced tab.
  3. In the Signup data type field, specify your custom signup data type that will store users' signup data.
  4. In the Type e-mail field field, specify the name of the field on the selected signup data type to contain users' e-mail addresses.

Finally, if necessary, configure how to handle the signups:

  1. Check the Monitor signup data events box. When checked, the signup data type will be monitored for add/delete events, and signup/queue actions will be automatically executed. You should not check this option, if you are handling signup data yourself and calling Composite.Community.EventCalendar.EventSignupManager directly. (Checked by default.)
  2. Check Temporary signup data box: When checked, signup data elements are cleaned up when they are obsolete (the event is deleted or the user cancels his/her signup). Do NOT choose this element if your signup data type is used for other purposes! (Checked by default.)

How to customize a signup form by editing an existing data type

To edit the existing signup data type, you should make your changes in both the data type and its Form UI markup. The latter step is required because the Event Calendar uses a dynamic data form, which must be updated manually.

For example, if you want to add a new field called "Company", first of all, add it by editing the data type:

  1. In the Data perspective, edit the Composite.Community.EventCalendar.Signup data type.
  2. On the Fields tab, add a new field (for example, "Company" of the String type).
  3. Save the data type.

Next, synchronize the changes in the data type's form markup:

  1. In the Data perspective, select the Composite.Community.EventCalendar.Signup data type.
  2. Click Edit Form Markup on the toolbar. The form markup editor opens.
  3. In the <cms:bindings> part, add a binding to the field (for example, <cms:binding name="Company" type="System.String" optional="true" />).
  4. Locate a field group where you want your new field, or create a new field group.
  5. In this group, add XML that represents your new field, for example: Show example

For more information on dynamic data forms, please see "Editing Form Markup".

RSS feed

The upcoming events are also available as an RSS feed on your website.

The URL is: http://<your_website>/RSS/UpcomingEvents.ashx, where <your_website> is the URL of your website. For example, http://www.contoso.com/RSS/UpcomingEvents.ashx

Important notes

  1. Install Composite.Forms.Renderer before installing Composite.Community.EventCalendar.
  2. The package comes with a default location and signup configuration. However, you can create your own locations and signup configurations for specific events.
  3. The link to the signup form appears on the event page only if (a) the signup configuration is selected and (b) the number of seats is greater than 0.
  4. If you choose to edit the existing Composite.Community.EventCalendar.Signup data type, make sure you make the corresponding changes in its form markup.
Part of subscriptions:
Version 1.5.0

Have a question?

Phone: +45 39 15 76 00
Email: Write us
3:50 PM
(Local time at HQ)