Tutorial 4: Client events

This tutorial demonstrates how to handle client-side events.

1. Initial preparations

Follow Tutorial 1: Creating appointments on how to create a web site that contains two instances of the Calendar control and add appointments to it. Follow Tutorial 2: Filtering and grouping on how to set filtering and grouping. Follow Tutorial 3: Recurrences and reminders on how to add recurrences and reminders.

2. Handling the ItemCreating and ItemDeleting events

In the 'Properties' pane find the ItemCreatingScript and ItemDeletingScript properties and set them to 'onItemCreating' and 'onItemDeleting'. Add the corresponding functions to the JavaScript script block:

JavaScript

function onItemCreating(sender, args) {
    //get the list of contacts id-s associated with the item 
    var contacts = args.get_item().contacts;
    if (contacts && contacts.length > 0) {
        //get the first contact
        var contact = sender.getResourceById(contacts[0]);
        //get all items
        var items = sender.getItems();
        //get the start and end time of the item to be created
        var d1 = args.get_item().startTime.valueOf();
        var d2 = args.get_item().endTime.valueOf();
        //check if another, associated with this contact, item is present within the same time range 
        for (var i = 0, l = items.length; i < l; i++) {
            var item = items[i];
            var id1 = item.getStartTime().valueOf();
            var id2 = item.getEndTime().valueOf();
            //if another item is present display a warning and cancel the creation of the item
            if ((d1 < id2) && (d2 > id1) && Array.indexOf(item.getContacts(), contact) > -1) {
                alert('{0} {1} is busy at this time'.format(contact.getFirstName(), contact.getLastName()));
                args.set_cancel(true);
                return;
            }
        }
    }
}function onItemDeleting(sender, args) {
    //check the subject of the item to be deleted
    //display a warning and cancel the event
    if (args.get_item().getSubject() == 'Meeting') {
         alert('This appointment cannot be deleted!')
         args.set_cancel(true);
    }
}

When an item, associated with a Contact is created on the client-side it will be checked against all items, present in the Calendar. If the contact has another appointment within the same time range the event will be cancelled and no item will be created.

Upon deleting an item from the client-side the subject of the item will be checked and if it equals 'Meeting' the event will be cancelled and the item will not be deleted.

3. Handling the ItemDragEnd event

In the 'Properties' pane find the ItemDragEndScript property and set its value to 'onItemDragEnd'  Add the corresponding function to the JavaScript script block:

JavaScript

function onItemDragEnd(sender, args) {
    //get the list of contacts associated with the item
    var contacts = args.get_item().getContacts();
    if (contacts.length > 0) {
        //get the first contact
        var contact = contacts[0];
        //get all items associated with this contact id
        var items = sender.getItemsByResourceId(contact.getId());
        // get the start and end time of the dragged item
        var d1 = args.get_changes().startTime.valueOf();
        var d2 = args.get_changes().endTime.valueOf();
        //check if another, associated with this contact, item is present within the same time range
        for (var i = 0, l = items.length; i < l; i++) {
            var item = items[i];
            var id1 = item.getStartTime().valueOf();
            var id2 = item.getEndTime().valueOf();
            //if another item is present display a warning and cancel the modification of the item
            if ((d1 < id2) && (d2 > id1) && (Array.indexOf(item.getContacts(), contact) > -1) && (item != args.get_item())) {
                alert('{0} {1} is busy at this time'.format(contact.getFirstName(), contact.getLastName()));
                args.set_cancel(true);
                return;
            }
        }
    }
}

When an item, associated with a Contact is dragged on the client-side it will be checked against all items, which are associated with the same Contact. If the contact has another appointment within the same time range the event will be cancelled and the item will be returned back to its initial position.

4. Handling the HeaderClick event

In the 'Properties' pane find the TimetableColumnHeaderClickScript property and set its value to 'onHeaderClick'. Add the corresponding function to the JavaScript script block:

JavaScript

function onHeaderClick(sender, args) {
    //get the resources by which the calendar is filtered
    var resources = sender.getFilteredResources();
    if (resources.length > 0) {
        var contact = resources[0];
        //get the list of all items defined in the calendar
        var items = sender.getItems();
        var cnt = 0;
        for (var i = 0, l = items.length; i < l; i++) {
            var item = items[i];
            var date1 = item.getStartTime().getDate();
            var date2 = item.getEndTime().getDate();
            var date = args.get_date().getDate();
            //check if the item is associated with the resource
            if (Array.indexOf(item.getContacts(), contact) > -1) {
                //increase the counter if the item is within the specified time range
                if ((date1 == date) || (date2 == date) || (date1 <= date && date2 >= date)) {
                    cnt += 1;
                }
            }
        }
        //display the count of appointments associated with the resource
        alert('{0} has {1} appointment(s) on {2}'.format(contact.getFirstName(), cnt, args.get_date().toString('dd MMMM')));
    }
}

If the Calendar is currently filtered by some resource clicking on a date's header will display the number of the appointments for the corresponding resource and date range.

5. Build and run the sample

Run the web page. The image below depicts what the page output would look like when we try to delete the 'Meeting' appointment.