Calendar widget

Use the MVC Calendar widget to display a calendar of events on your website pages. You select the content to display and then specify how events are listed and displayed individually. The widget provides options to filter the displayed events based on various criteria.

PREREQUISITES: You created at least one event item. For more information, see Create events.

On the Content tab, choose which events you want to display in the calendar from the following options:

• All events
  Show all events that are uploaded and published.
• Events by date... You can filter the displayed events based on their start and end dates. Select one of the following:
  • upcoming events...
    Show only events that start in the future. You can additionally restrict an event's start by clicking Change and then choosing a defined time interval, or choosing Custom range to define a preferred time interval.
  • current events
    Show only events that are currently in progress.
  • past events...
    Show only events that ended in the past. You can additionally restrict an event's end by clicking Change and then choosing a defined time interval, or choosing Custom range to define a preferred time interval.
• Selected events...
  A custom selection of events is displayed. To select one or more events, click the Select.

Under Narrow selection you can further specify which events to display by choosing one of the following:

• All published events
  This is selected by default and displays all events selected in the previous step.
• Filtered events by...
  You can narrow the displayed events, using categories, tags and calendar. Select one or more of the following:
  • Calendar...
    Select the calendar from which events will display.
  • Categories...
    Select the categories from which events will display .
  • Tags...
    Select the tags that will narrow down events that are displayed.

NOTE: You can select more than one filter and narrow down results using combinations of filters, for example by both categories and calendar.

On the List settings tab, choose the calendar behaviors from the following options:

• In the Week starts on section, select whether you want the calendar to list days from Monday through Sunday, or Sunday through Saturday.
• Click the Default view dropdown to select the scope in view. The options are Day, Work Week, Week, Month, Agenda, and Timeline. Then choose whether you want to let users switch to one of the other views.
• In the Calendars section, choose whether you to let users filter out some calendars.
• In the List template section, select the template that will display the events on the calendar view.

NOTE: When using a timeline view of the calendar, you see all 24 hours within one day. If a timeline might extend across more than one day, you can build a custom view for the timeline. See the code solution at Overview of the Kendo UI Scheduler widget.

On the Single item settings tab, choose the way that individual events are displayed. Choose one of the following options:

• Open single item in...
  Either:
  • Auto-generated page
    When you click a event, it is displayed in an automatically generated page with the same layout as the list page.
  • Selected existing page...
    Select a page from the list of existing pages that has the preferred layout. When you click on an event, it is displayed in that specific page.

    NOTE: The page on which you want the event displayed must have an Events widget.

• Detail template
  Select the template you want to use to display the event's details on the webpage.

Click More options to specify CSS file names and apply additional CSS classes to the MVC Calendar widget.