Bryntum Calendar Cookbook

This document provides solutions to common requirements and customization tasks when working with the Bryntum Calendar.

1. Toolbar Customization

The top toolbar contains the following items by default:

• toggleSidebar:
  • Type: Button
  • Description: A button to collapse and expand the sidebar.
  • weight: 100
• todayButton:
  • Type: Button
  • Description: A button that navigates the active view to include today's date.
  • weight: 200
• prevButton:
  • Type: Button
  • Description: A button that navigates the active view to its previous time span. weight: 300
• nextButton:
  • Type: Button
  • Description: A button that navigates the active view to its next time span.
  • weight: 400
• viewDescription:
  • Type: Widget
  • Description: A non-interactive widget that displays the date range of the current view (e.g., "October 2025").
  • weight: 500
• spacer:
  • Type: Widget
  • Description: A flexible spacer that pushes subsequent items to the right.
  • weight: 600
• modeSelector:
  • Type: ModeSelector
  • Description: A container with buttons to switch between the available calendar views (e.g., Day, Week, Month).
  • weight: 700

How to Add a Custom Button to the Toolbar

You can add new widgets to the toolbar by adding them to the tbar.items configuration. Use the weight property to control the position of the new item relative to the existing ones.

const calendar = new Calendar({
    appendTo : document.body,
    tbar : {
        items : {
            addEventButton : {
                type    : 'button',
                text    : 'Add Event',
                icon    : 'b-icon-add',
                weight  : 150, // Insert after the toggleSidebar button (weight 100)
                onClick() {
                    calendar.createEvent(new Date());
                }
            }
        }
    }
});

How to Remove a Button from the Toolbar

To remove a default item from the toolbar, set its configuration to null in the tbar.items object.

const calendar = new Calendar({
    appendTo : document.body,
    tbar : {
        items : {
            // Remove the "Today" button
            todayButton : null
        }
    }
});

How to Reorder Toolbar Items

You can change the order of toolbar items by assigning new weight values. Lower weights appear first (further to the left in LTR mode).

const calendar = new Calendar({
    appendTo : document.body,
    tbar : {
        items : {
            // Move the mode selector to the beginning
            modeSelector : {
                weight : 50
            },
            // Move the today button to the end
            todayButton : {
                weight : 800
            }
        }
    }
});

2. Sidebar Customization

The sidebar contains the following items by default:

• datePicker:
  • Type: CalendarDatePicker
  • Description: A calendar view used to select the active date for the main calendar.
  • weight: 100
• eventFilter:
  • Type: FilterField
  • Description: A text field that filters events in the calendar by their name.
  • weight: 150
• resourceFilter:
  • Type: ResourceFilter
  • Description: A list of available calendars (resources) that can be toggled to show or hide their events.
  • weight: 200

How to Add a Field to the Sidebar

Add custom widgets to the sidebar.items configuration. Use weight to position your new widget.

const calendar = new Calendar({
    appendTo : document.body,
    sidebar : {
        items : {
            customFilter : {
                type        : 'textfield',
                label       : 'Custom Filter',
                placeholder : 'Filter by...',
                weight      : 250, // Place it after the resourceFilter
                listeners   : {
                    change({ value }) {
                        // Apply custom filtering logic here
                        console.log('Custom filter value:', value);
                    }
                }
            }
        }
    }
});

See Store filtering

How to Remove a Field from the Sidebar

To remove a default item from the sidebar, set its configuration to null.

const calendar = new Calendar({
    appendTo : document.body,
    sidebar : {
        items : {
            // Remove the resource filter from the sidebar
            resourceFilter : null
        }
    }
});

3. Event Editor Customization

The event editor contains the following items by default:

• nameField
  • Type: TextField
  • Description: The event's name or title.
  • weight: 100
• resourceField
  • Type: ResourceField
  • Description: A dropdown to select the calendar (resource) for the event.
  • weight: 200
• allDay
  • Type: SlideToggle
  • Description: A toggle to mark the event as an all-day event.
  • weight: 250
• startDateField
  • Type: DateField
  • Description: The start date of the event.
  • weight: 300
• startTimeField
  • Type: TimeField
  • Description: The start time of the event.
  • weight: 400
• endDateField
  • Type: DateField
  • Description: The end date of the event.
  • weight: 500
• endTimeField
  • Type: TimeField
  • Description: The end time of the event.
  • weight: 600
• recurrenceCombo
  • Type: RecurrenceCombo
  • Description: A dropdown to configure event recurrence (e.g., "Repeats daily").
  • weight: 700
• editRecurrenceButton
  • Type: Button
  • Description: A button to open the detailed recurrence editor dialog.
  • weight: 800

How to Add a Custom Field to the Event Editor

To add a custom field to the event editor, you need to modify the eventEdit feature configuration. Add your custom field to the items object of the editor.

First, make sure your EventModel has the new field defined.

class MyEvent extends EventModel {
    static fields = [
        { name: 'location', type: 'string' }
    ];
}

const calendar = new Calendar({
    project : {
        eventStore : {
            modelClass : MyEvent,
            data       : [
                // ... event data
            ]
        }
    },
    features : {
        eventEdit : {
            items : {
                // Add a location field
                locationField : {
                    type  : 'textfield',
                    name  : 'location',
                    label : 'Location'
                }
            }
        }
    }
});

How to Remove a Field from the Event Editor

To remove a field, set its configuration to null within the eventEdit.items object.

const calendar = new Calendar({
    features : {
        eventEdit : {
            items : {
                // Remove the resource field from the editor
                resourceField : null
            }
        }
    }
});

See the EventEdit Feature

4. View Customization

How to Customize Event Rendering

Use the eventRenderer function in a specific view mode to customize the content of the event body.

const calendar = new Calendar({
    modes : {
        week : {
            // You can mutate the renderData and that will be applied to the event element.
            // If nothing is returned, the default element content is produced
            eventRenderer({ eventRecord, renderData }) {
                // Add a custom icon if the event is important
                renderData.iconCls['fa fa-star'] = eventRecord.isImportant;
            }
        }
    }
});

See eventRenderer

How to use a Scheduler as a mode

You can add any Bryntum scheduling widget as a new mode in the calendar. A common example is adding a Scheduler view.

const calendar = new Calendar({
    modes : {
        myScheduler : {
            // Should be the first - default modes have weight 0
            weight  : -10,
            type    : 'scheduler',
            title   : 'Timeline',
            // Scheduler-specific configurations
            columns : [
                { type : 'resourceInfo', text : 'Staff', field : 'name' }
            ]
        }
    },
    // Set the new mode as the active one
    mode : 'myScheduler'
});

5. Data Operations

How to Programmatically Add an Event

You can add events by calling the add method on the eventStore.

const newEvent = calendar.eventStore.add({
    name       : 'New Important Meeting',
    startDate  : '2025-10-26T10:00:00',
    endDate    : '2025-10-26T12:00:00',
    resourceId : 'someResource'
});

See Store add function

How to Filter Events

You can apply filters to the eventStore to show only a subset of events.

// Show only events that have a name containing "Meeting"
calendar.eventStore.filter({
    property : 'name',
    value    : 'Meeting',
    operator : 'includes'
});

// To clear the filter
calendar.eventStore.clearFilters();

See Store filtering

6. Event creation Validation

You can control doublclick-create, drag-create, drag-resize, and drag-move operations by implementing validation callbacks in the drag feature. Return false from a validator to invalidate the operation.

const calendar = new Calendar({
    features : {
        drag : {
            // Prevent creating events on weekends
            validateCreateFn({ eventRecord }) {
                for (const date = DateHelper.startOf(eventRecord.startDate); date < eventRecord.endDate; date.setDate(date.getDate() + 1)) {
                    const day = date.getDay();
                    if (day === 0 || day === 6) {
                        // Returning false invalidates the drag-create
                        return false;
                    }
                }
                return true;
            },

            // Prevent resizing events to be shorter than 1 hour
            validateResizeFn({ eventRecord : { startDate, endDate } }) {
                const durationHours = (endDate - startDate) / (1000 * 60 * 60);
                if (durationHours < 1) {
                    return false;
                }
                return true;
            }
        }
    },

    // Called when double click or context menu is used
    onBeforeAutoCreate({ view, startDate, endDate }) {
        const day = startDate.getDay();
        if (day === 0 || day === 6) {
            // Returning false invalidates the auto-create
            return false;
        }
    }
});

See the CalendarDrag feature