Tutorial 3: Recurrences and reminders

This tutorial shows how to create recurrences and reminders either programmatically or by using the built-in forms.

1. Initial preparations

Follow the steps described in Tutorial1: Creating appointments and Tutorial 2: Filtering and grouping.

2. Create a reminder

Switch to code view and add the following code at the end of CreateScheduleData method:

C#

Reminder reminder = new Reminder();
reminder.Message = "Get ready for the very important meeting!";
reminder.Type = ReminderType.Leading;
reminder.TimeInterval = TimeSpan.FromMinutes(15);
//set the Reminder property of the first appointment to the newly created Reminder
app1.Reminder = reminder;

Visual Basic

Dim reminder As New Reminder()
reminder.Message = "Get ready for the very important meeting!"
reminder.Type = ReminderType.Leading
reminder.TimeInterval = TimeSpan.FromMinutes(15)
'set the Reminder property of the first appointment to the newly created Reminder
app1.Reminder = reminder

This code creates a Reminder that will trigger 15 minutes before the corresponding appointment's start time.
In order to show reminder messages, you must handle the Calendar's ItemReminderTriggered event. Switch to 'Design view' and find the 'Client events' section in the 'Properties' pane of the control. Set the value of the ItemReminderTriggeredScript property to 'onReminder' - this will be the name of the JavaScript function that will handle the event. Add the following code to the *.aspx file that contains the Calendar control:

JavaScript

<script type="text/javascript">

function onReminder(sender, args) {
  alert(args.get_item().getReminder().getMessage());
}

</script>

3. Create a recurrence

Switch to code view and add the following code at the end of CreateScheduleData method:

C#

Recurrence recurrence1 = new Recurrence()
{
    Pattern = RecurrencePattern.Daily,
    DailyRecurrence = DailyRecurrence.EveryWorkday,
    StartDate = app2.StartTime,
    RecurrenceEnd = RecurrenceEnd.EndDate,
    EndDate = new DateTime(2011,12,31)
};
app2.Recurrence = recurrence1;Recurrence recurrence2 = new Recurrence()
{
    Pattern = RecurrencePattern.Weekly,
    DaysOfWeek = DaysOfWeek.Monday | DaysOfWeek.Wednesday,
    StartDate = app3.StartTime,
    NumOccurrences = 30
};
app3.Recurrence = recurrence2;

Visual Basic

Dim recurrence1 As New Recurrence() With { _
   .Pattern = RecurrencePattern.Daily, _
   .DailyRecurrence = DailyRecurrence.EveryWorkday, _
   .StartDate = app2.StartTime, _
   .EndDate = New DateTime(2011, 12, 31)}
app2.Recurrence = recurrence1Dim recurrence2 As New Recurrence() With { _
   .Pattern = RecurrencePattern.Weekly, _
   .DaysOfWeek = DaysOfWeek.Monday Or DaysOfWeek.Wednesday, _
   .StartDate = app3.StartTime, _
   .NumOccurrences = 30}
app3.Recurrence = recurrence2

This code creates two Recurrence objects. The first Recurrence has a daily pattern with occurrences on every working day and it's end date set to a specific date. The second one has a weekly pattern with occurrences every Monday and Wednesday and will end after a specified number of occurrences is reached.

Recurrences can also be created during run-time by using the built-in RecurrenceForm. Here a snapshot of the form set to create a weekly recurrence.

4. Change displayed dates

Switch to code view and add the following code to the Page_Load event handler, right above the call of the CreateScheduleData method:

C#

DateTime startDate = DateTime.Now;
DateTime endDate = startDate.AddDays(7);while (startDate < endDate)
{
    TimetableDate date = new TimetableDate(startDate);
    Calendar1.TimetableSettings.Dates.Add(date);
    startDate = startDate.AddDays(1);
}

Visual Basic

Dim startDate As DateTime = DateTime.Now
Dim endDate As DateTime = startDate.AddDays(7)

While startDate < endDate
    Dim [date] As New TimetableDate(startDate)
    Calendar1.TimetableSettings.Dates.Add([date])
    startDate = startDate.AddDays(1)
End While

This code will add six new dates to the collection of displayed dates in the Timetable.

5. Handle the SelectionEnd event

In order to change easily the displayed dates in run-time we will add another Calendar and use it as a date range selector. Add a second Calendar control to the page and set its ID to 'Calendar2', CurrentView property to SingleMonth and Theme to Vista. Set the UseForms property to false, then expand the 'ItemSettings' section and set the ShowMoreItemsCue and ItemsVisible properties to Disabled. These changes will ensure items could not be created or be visible in this calendar. Set the SelectionEndScript property to 'onSelectionEnd' - this will be the name of the JavaScript function that will handle the event. Add the event-handling code somewhere in the *.aspx file, for example after the 'onReminder' method:

JavaScript

function onSelectionEnd(sender, args) {
    __doPostBack('__Page');
}

This code will postback the page every time the client-side SelectionEnd event is triggered. Once the page is posted back to the server we will be able to read the range of selected dates in the second calendar and add it as a range of displayed dates in the main calendar.
Switch to code view and add the following code in the Page_Load event handler, right after the if (!IsPostBack) block:

C#

else
{
//check if Calendar2 has any selection
    if (Calendar2.Selection.Ranges.Count != 0)
    {
        //clear the dates
        Calendar1.TimetableSettings.Dates.Clear();
        //get the start and end time of the selection
        DateTime startDate = Calendar2.Selection.Ranges[0];
        DateTime endDate = Calendar2.Selection.Ranges[1];
        //create and add the new dates to the Dates collection
        while (startDate < endDate)
        {
            TimetableDate date = new TimetableDate(startDate);
            Calendar1.TimetableSettings.Dates.Add(date);
            startDate = startDate.AddDays(1);
        }
    }            
}

Visual Basic

Else
'check if Calendar2 has any selection
    If (Calendar2.Selection.Ranges.Count <> 0) Then
        'clear the dates
        Calendar1.TimetableSettings.Dates.Clear()
        'get the start and end time of the selection
        Dim startDate = Calendar2.Selection.Ranges(0)
        Dim endDate = Calendar2.Selection.Ranges(1)
        'create and add the new dates to the Dates collection
        While (startDate < endDate)
            Dim [date] As New TimetableDate(startDate)
            Calendar1.TimetableSettings.Dates.Add([date])
            startDate = startDate.AddDays(1)
        End While
    End If
End If

This code checks if there is any selected range in the second calendar, and if so creates and adds the new range of dates to the main Calendar's displayed dates collection.

6. Run the tutorial

Build and run the tutorial. The image below depicts how the output should look like:

Select arbitrary dates and date ranges in the calendar to the right to see how the displayed dates collection in the calendar to the left updates to the corresponding range.