Manipulating Cells on the Client

Each of the calendar views present visually different spans of time in time cells. Time cells are defined by their start time and their end time. For example, in Single Month, Month Range and Week Range views a time cell is one full day in the time interval, presented by the view. In List view a time cell represents a single second, minute, hour, day and so on, as specified by the CellUnits property of the Calendar.ListViewSettings. In Timetable time cells represent the time periods in the view's columns, specified by the Calendar.TimetableSettings.CellTime property.

References to time cell objects can be obtained through their planar position in the view, by calling the calendar's getCellAt method, by their start and end time values through either getTimeCell (for a single cell) or getTimeCells (for a collection of cells), or through the CellEventArgs, passed as arguments to some of the events, raised by the Calendar.

Items in a view can also be identified by the cell they are situated in by calling getCellItems - for the visible items in a time cell or getCueCellItems - for items which are not visible in a view, due to the lack of available space.

The following table lists the cell object's properties:

Property name	Type	Description
startTime	DateTime	The start time of the cell.
endTime	DateTime	The end time of the cell.
index	Number	The zero-based position of the cell within a view.
rowIndex	Number	The zero-based parent row index. (Not in Timetable view.)
columnIndex	Number	The zero-based parent column index. (Only in Timetable view.)
monthCellIndex	Number	The zero-based parent month cell index. (Only in Month Range view.)
bgCell	TD HTML element / DIV HTML element*	The HTML element, representing the cell within the Calendar. (*For Timetable view.)
title	DIV HTML element	The HTML element, representing the cell's header. (Not in Timetable view.)
titleText	TD HTML element	The HTML element, representing the cell's header text. (Not in Timetable view.)

Examples

The following example shows how particular time cells can be customized:

JavaScript

function markCells()
{
    var start = MindFusion.Common.DateTime.today();
    var end = start.clone().addDays(3);
    // Gets reference to the calendar object.
    var calendar = $find('Calendar1');
    // Gets the cells in the predefined time range.
    var cells = calendar.getTimeCells(start, end, true);
    for (var i = 0, l = cells.length; i < l; i++) {
        // colors the background of the cell red.
        cells[i].bgCell.style.backgroundColor = 'red';
    }
}

This example shows how references to cells can be obtained by handling certain Calendar events.

C#

// Prevent showing of the built-in popup forms.
Calendar1.UseForms = false;
// Provide the name of a JavaScript function, that will handle the DateClick event.
Calendar1.DateClickScript = "onDateClick";

Visual Basic

' Prevent showing of the built-in popup forms.
Calendar1.UseForms = False
' Provide the name of a JavaScript function, that will handle the DateClick event.
Calendar1.DateClickScript = "onDateClick"

JavaScript

// Handle the DateClick event to display a message showing the number of items presentily in this cell.
function onDateClick(sender, args) {
    var cell = args.get_cell();
    var cellItems = sender.getCellItems(cell);

    if (cellItems.length > 0) {
        alert(String.format('There are {0} items in this cell', cellItems.length));
    }
    else { alert('There are no items in this cell.'); }
}