Cell customization in JavaScript Scheduler control

18 Nov 20186 minutes to read

The cells of the Scheduler can be easily customized to modify their appearance, add custom content, or apply conditional styling. This can be achieved using the cellTemplate property or the renderCell event. Cell customization allows you to highlight specific dates, display additional information, or create a unique visual experience for your scheduling application.

Customizing cells in all the views

The appearance of cells can be customized across all Scheduler views using either template options or the renderCell event. Both approaches provide flexibility to modify cell content and styling based on specific requirements.

Using template

The cellTemplate property accepts a template string and allows you to customize the cell background with specific images, icons, or formatted text based on the given date values. This approach is ideal when you need to apply consistent styling or content across multiple cells.

Customizing cells using renderCell event

The renderCell event provides an alternative approach for cellTemplate. This event is triggered during the rendering of each cell, allowing you to apply dynamic customizations based on runtime conditions. Use this event when you need more control over individual cells or when customization logic depends on complex business rules.

The renderCell event allows you to customize different types of cells such as work cells, month cells, all-day cells, header cells, resource header cells by checking the elementType property within the event arguments. The following table describes the available element types:

Element type	Description
dateHeader	Triggered when rendering header cells that display dates.
monthDay	Triggered when rendering header cells in the month view.
resourceHeader	Triggered when rendering resource header cells.
alldayCells	Triggered when rendering all-day cells in day, week, and work week views.
emptyCells	Triggered when rendering empty cells in the header bar.
resourceGroupCells	Triggered when rendering work cells for parent resource.
workCells	Triggered when rendering work cells.
monthCells	Triggered when rendering date cells in the month view.
majorSlot	Triggered when rendering major time slot cells.
minorSlot	Triggered when rendering minor time slot cells.
weekNumberCell	Triggered when rendering cells that display week numbers.

Setting cell dimensions in all views

The height and width of Scheduler cells can be adjusted using the cssClass property along with custom CSS. This approach allows you to increase or reduce cell sizes to accommodate different content requirements or improve visual hierarchy. The custom CSS classes override the default styles applied to cells.

Checking cell availability for appointments

The isSlotAvailable method verifies whether a specific time range is available for creating new appointments or is already occupied by existing events. This method is useful for implementing custom validation logic or preventing double-booking scenarios. In the following example, the method prevents adding new appointments to time slots that already contain events.

Note: The isSlotAvailable method verifies appointments within the current view’s date range only. It does not evaluate availability for recurrence occurrences that fall outside the visible date range.

Customizing cell header in month view

The month header of each date cell in the month view can be customized using the cellHeaderTemplate property. This property accepts either a template string or an HTMLElement, allowing you to display custom content such as formatted dates, icons, or additional information. The corresponding date can be accessed with the template.

Customizing the minimum and maximum date values

The minDate and maxDate properties define the allowable date range for the Scheduler. Dates that fall outside this range will be disabled, preventing navigation beyond the specified boundaries.

By default, the minDate property is set to new Date(1900, 0, 1) and the maxDate property is set to new Date(2099, 11, 31). Custom values can be assigned to these properties to restrict the date range according to application requirements.

Customizing the weekend cells background color

You can customize the background color of weekend cells by utilizing the renderCell event and checking the elementType option within the event.

renderCell: function (args) {
    if (args.elementType == "workCells") {
        // To change the color of weekend columns in week view
        if (args.date) {
            if (args.date.getDay() === 6) {
                (args.element).style.background = '#ffdea2';
            }
            if (args.date.getDay() === 0) {
                (args.element).style.background = '#ffdea2';
            }
        }
    }
}

And, the background color for weekend cells in the Month view, apply custom CSS through the through the cssClass property, which overrides the default CSS applied on cells.

.schedule-cell-customization.e-schedule .e-month-view .e-work-cells:not(.e-work-days) {
    background-color: #f08080;
}

How to disable multiple cell and row selection in Schedule

By default, the allowMultiCellSelection and allowMultiRowSelection properties of the Schedule are set to true. So, the Schedule allows to select multiple cells and rows.If multiple cell and row selection needs to be disabled, this feature can be turned off by setting these properties to false.

You can refer to our JavaScript Scheduler feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Scheduler example to knows how to present and manipulate data.