Client Side Events

Creating event handlers in JavaScript

To handle a client-side event, create a JavaScript event handler function and assign its name to the respective script property of the Calendar class. The properties that contain the names of the JavaScript event handlers have the same name as the event with a Script suffix added, in the form of [EventName]Script. The signature of the handler must contain the sender and args parameters, where sender is always the Calendar and args are the event arguments associated with the event. For example, add a "function onItemDoubleClick(sender, args)" script to handle the ItemDoubleClick event.

Almost every element in the Calendar has certain events which can trigger JavaScript functions. For example, when a Item is created by a user action, the ItemCreated event will be raised invoking the function whose name is specified in the ItemCreatedScript property. For each client-side event, there is a string property of the form [EventName]Script that specifies the respective JavaScript event handler function that should be called. In the Visual Studio Properties window, type in the name of the event handler function in the field of the respective event property, for example [EventName]Script = "onEventName".

Notification events

Most events are raised to notify you that the user has performed some action. A modification event is raised to let your application know about the modified item (for example ItemModified). When a user presses the DEL key, an item-deleted event is raised (for example ItemDeleted). The events ItemClicked, ItemDoubleClicked, DateClicked occur when an item or other element is clicked. There are many other events related to various activities a user could carry out in the Calendar.

Validation events

Validation events let you approve or reject users actions. The event handler functions are expected to set the value of the Sys.CancelEventArgs cancel property accessible through the args parameter of the handler, either set_cancel(false) if an action should be accepted, or set_cancel(true) if it should be rejected.

While the user is holding down the mouse button and dragging an item, a modification validation event is raised continuously (for example ItemModifying). There are events raised when users creates items, for example ItemCreating. When the user presses the Delete key, the ItemDeleting or RecurringItemDeleting events are raised to let you confirm the operation.

Mouse motion tracking events

The following events occur when the mouse pointer enters or leaves an Item: ItemMouseEnter or ItemMouseLeave. Respectively, the following event is raised when the mouse pointer moves over an Item: ItemMouseMove.

The following table presents all client side events with their associated event arguments, the respective Calendar Script property and a short description:

Event	Event arguments	Script property	Description
CalendarLoad	null	CalendarLoadScript	Raised just after the calendar has finished loading and is ready for interaction.
MouseMove	MouseEventArgs	MouseMoveScript	Raised when the user moves the mouse over the Calendar area.
MouseEnter	MouseEventArgs	MouseEnterScript	Raised when the user enters the area over the Calendar with the mouse.
MouseLeave	MouseEventArgs	MouseLeaveScript	Raised when the user leaves the area over the Calendar with the mouse.
Click	MouseEventArgs	ClickScript	Raised when the user clicks anywhere on the Calendar with the mouse.
DoubleClick	MouseEventArgs	DoubleClickScript	Raised when the user double-clicks anywhere on the Calendar with the mouse.
MonthHeaderClick	HeaderEventArgs	MonthHeaderClickScript	Raised when the user clicks with the mouse on the main header of the Single Month view of the Calendar.
TimetableColumnHeaderClick	HeaderEventArgs	TimetableColumnHeaderClickScript	Raised when the user clicks with the mouse on the column header of the timetable view of the Calendar.
WeekRangeHeaderClick	HeaderEventArgs	WeekRangeHeaderClickScript	Raised when the user clicks with the mouse on the main header of the Week Range view of the Calendar.
ListViewHeaderClick	HeaderEventArgs	ListViewHeaderClickScript	Raised when the user clicks with the mouse on the main header of the list view of the Calendar.
MonthRangeHeaderClick	HeaderEventArgs	MonthRangeHeaderClickScript	Raised when the user clicks with the mouse on the main header of the Month Range view of the Calendar.
SelectionStart	SelectionEventArgs	SelectionStartScript	Raised when cell selection starts.
SelectionEnd	SelectionEventArgs	SelectionEndScript	Raised when cell selection ends.
SelectionChanged	SelectionChangedEventArgs	SelectionChangedScript	Raised when cell selection has changed.
ItemSelectionChanged	ItemSelectionEventArgs	ItemSelectionChangedScript	Raised when item selection has changed.
DateClick	CellEventArgs	DateClickScript	Raised when the user clicks a time cell in a calendar view.
DateHeaderClick	CellEventArgs	DateHeaderClickScript	Raised when the user clicks the header of a time cell in a calendar view.
DateDoubleClick	CellEventArgs	DateDoubleClickScript	Raised when the user double-clicks a time cell in a calendar view.
DateMouseDown	CellEventArgs	DateMouseDownScript	Raised when the user presses a mouse button down over a time cell in a calendar view.
DateMouseUp	CellEventArgs	DateMouseUpScript	Raised when the user releases a mouse button oven a time cell in a calendar view.
ItemClick	ItemLocationEventArgs	ItemClickScript	Raised when the user clicks an Item.
ItemDoubleClick	ItemLocationEventArgs	ItemDoubleClickScript	Raised when the user double-clicks an Item.
ItemMouseDown	ItemLocationEventArgs	ItemMouseDownScript	Raised when the user presses a mouse button down over an Item.
ItemMouseUp	ItemLocationEventArgs	ItemMouseUpScript	Raised when the user releases a mouse button over an Item.
ItemMouseEnter	MouseEventArgs	ItemMouseEnterScript	Raised when the user enters the area over an Item with the mouse.
ItemMouseLeave	MouseEventArgs	ItemMouseLeaveScript	Raised when the user leaves the area over an Item with the mouse.
ItemMouseMove	MouseEventArgs	ItemMouseMoveScript	Raised when the user moves the mouse in the area over an Item.
ItemDragStart	ItemLocationEventArgs	ItemDragStartScript	Raised when the user starts to drag an Item with the mouse.
ItemDragEnd	ItemChangedEventArgs	ItemDragEndScript	Raised when the user finishes to drag an Item with the mouse.
ItemInplaceEditStarting	ItemEventArgs	ItemInplaceEditStartingScript	Raised just before the user starts an inplace edit operation on an Item.
ItemInplaceEditEnding	ItemEventArgs	ItemInplaceEditEndingScript	Raised just before the user commits an inplace edit operation on an Item.
ItemReminderTriggered	ItemEventArgs	ItemReminderTriggeredScript	Raised when a Reminder associated with an Item is triggered.
ItemCreating	ItemEventArgs	ItemCreatingScript	Raised just before an Item is created.
ItemCreated	ItemEventArgs	ItemCreatedScript	Raised when an Item is created.
ItemModifying	ItemChangedEventArgs	ItemModifyingScript	Raised when an Item is being modified.
ItemModified	ItemModifiedEventArgs	ItemModifiedScript	Raised when an Item is modified.
ItemDeleting	ItemEventArgs	ItemDeletingScript	Raised just before an Item is deleted.
RecurringItemDeleting	ItemEventArgs	RecurringItemDeletingScript	Raised just before a recurring Item is deleted.
ItemDeleted	ItemEventArgs	ItemDeletedScript	Raised when an Item is deleted.
MoreItemsCueMouseDown	CellEventArgs	MoreItemsCueMouseDownScript	Raised when the user presses a mouse button over a more items cue.
MoreItemsCueMouseUp	CellEventArgs	MoreItemsCueMouseUpScript	Raised when the user releases a mouse button over a more items cue.
FormShow	FormEventArgs	FormShowScript	Raised just before a popup form is shown.
TaskReminderTriggered	TaskEventArgs	TaskReminderTriggeredScript	Raised when a Reminder associated with a Task is triggered.

Examples

Handle the ItemModifying event to perform validation:

ASPX

<!-- Assign the name of the JavaScript function that will handle the ItemModifying event. -->
<mindfusion:Calendar ID="Calendar1" runat="server" ItemModifyingScript="onItemModifying" />

C#

// Assign the name of the JavaScript function that will handle the ItemModifying event.
Calendar1.ItemModifyingScript = "onItemModifying";

Visual Basic

' Assign the name of the JavaScript function that will handle the ItemModifying event.
Calendar1.ItemModifyingScript = "onItemModifying"

JavaScript

<script type="text/javascript">

// Handle the ItemModifying client event to deny interactive resizing of items.
function onItemModifying(sender, args) {
    // determine the type of interactive operation.
    var action = args.get_action();

    if (action == MindFusion.Scheduling.ItemModifyAction.Resize) {
        args.set_cancel(true);
    }
}

</script>

Handle the Load event to perform coloring of the title text of time cells, that contain items:

ASPX

<!-- Assign the name of the JavaScript function that will handle the Load event. -->
<mindfusion:Calendar ID="Calendar1" runat="server" CalendarLoadScript="onCalendarLoad" />

C#

// Assign the name of the JavaScript function that will handle the Load event.
Calendar1.CalendarLoadScript = "onCalendarLoad";

Visual Basic

' Assign the name of the JavaScript function that will handle the Load event.
Calendar1.CalendarLoadScript = "onCalendarLoad"

JavaScript

<script type="text/javascript">

function onCalendarLoad(sender) {
    // get the items defined for this calendar.
    var items = sender.getItems();

    for (var i = 0; i < items.length; i++) {
        var start = items[i].getStartTime().clone();
        var end = items[i].getEndTime().clone();
        // identify the cell(s) that contain that item.
        var cells = sender.getTimeCells(start, end);
        for (var k = 0; k < cells.length; k++) {
            if (cells[k].titleText) {
                // apply different style to the header of the cell.
                cells[k].titleText.style.color = 'red';
            }
        }
    }
}

</script>