Bryntum Calendar

Features

Print demo - This example shows to use the Calendar print feature.
Shifted day example - This example shows how to shift day start times from midnight to 6PM.
Filtering demo - This demo shows you how easy it is to filter & highlight events and resources to quickly find what matters to you.
Multi-level Filtering demo - This demo shows how to filter by multiple conditions, such as the task project and resources that a task is assigned to.
List view demo - This example demonstrates the 'list' view type.
Date range EventList demo - This example demonstrates EventList modes displaying arbitrary date ranges
Load on demand demo - This example shows how to use the load on demand feature to only load a subset of a 100,000 event dataset.
Export Calendar to Excel - This demo shows how to export Calendar events to Excel without involving the server based on a third party library called write-excel-file (https://www.npmjs.com/package/write-excel-file)
Export Events to ICS - This demo shows how to export an event to the ICS format to be added to Outlook and other calendars
Fit timeline to available space - This example shows how to fit the timeline to the available vertical space
Multi assignment demo - This example shows Calendar with multiple assignment events.
Multi assignment using resourceIds field demo - This example shows a calendar using resourceIds field to support multi assignment.
ResourceView demo - This example shows per-resource calendar views.
Resources grouped by date - This example shows resources grouped by dates
Resources with capacity tick renderer - This example shows resource allocation per hour with a capacity tick renderer
Showing non-consecutive dates - This example shows how to show only certain dates in the Calendar
Undo/Redo demo - This demo shows undo / redo functionality one can use in an application using standard State Tracking Manager facility.
EventColumn demo - This example shows usage of the EventColumn in the EventList view
Stateful demo - This example shows a state-preserving Calendar setup.
TimeRanges demo - Shows how to use the TimeRanges feature to add vertical zones to the calendar
Time zone demo - Shows how time zone support can be implemented
DualDayView demo - This example shows the DualDayView extension
DayAgenda view demo - This example shows the serial DayAgenda view
Travel time demo - This demo shows how to visualize travel time before/after an event

Basics

Basic demo - This example shows basic Calendar setup.
Configuring visible hours - This example shows how to define the hours to render and what hour should be scrolled to initially
Recurring Events - This example shows recurring events and you can edit the recurrence pattern easily.
Day zoom demo - This example shows zooming the hour tick size in a DayView
Timeaxis ticks demo - This example shows a DayView time axis split into six minute ticks
Responsive demo - This example illustrates responsive size breakpoints.
ActionButtons demo - This example shows how to add icon buttons to events in DayViews and WeekViews
showCurrentTime options - This demo shows the various ways of displaying the 'current time' line
MonthAgenda demo - This example shows a month view suitable for phone sized screens

Customization

Customized resource filtering - This example shows how filtering resources can be customized for any UX.<p>It also illustrates the <code>showAllDayHeader</code> config
Confirmation dialogs - This example shows confirmation dialogs after create, resize and drag drop actions
Context menu demo - This example shows how to customize context menus.
Customized Event Editor - This example shows event editor customization.
Customized Event Tooltip - This example shows a customized event tooltip.
Sidebar customization demo - This example shows how to add widgets to the side bar.
Custom rendering - This example shows how to customize the markup used for events in the Calendar.
Event items - This example shows how to add custom items (guests) to the events
Localization demo - Shows how to preload a specific locale and localize the application.
Resource Avatars - This example shows how to insert resource avatars into event bars.
Docked Event Editor - This example shows the event editor docked inside the browser viewport.
Event group demo - This example illustrates how to change the <code>cellData</code> event payload to create a customized 'grouped' event record for use by a custom <code>evenRenderer</code>.
Custom theme - This demo has a custom theme, to showcase how you can create your own. Check the resources/ folder to see how it is done
Day range demo - This example shows a day-range calendar view.

Power demos

Big dataset demo - This example shows the Calendar loading with lots and lots of events and resources.
Calendar + Taskboard integration - This example shows a Taskboard view of Calendar data
Drag from external source demo - This example shows how to drag events from a grid onto a Calendar.
Drag between calendars demo - This example shows how to drag events between different Calendar instances.
Drag equipment onto tasks - This example shows how to drag any DOM node and drop it onto a task to update some aspect of it.
Drag from sidebar grid demo - This example shows how to drag events from a grid in the sidebar of a Calendar.
Scheduler Timeline Demo - This example shows how to use a Scheduler in a Calendar.
Mega dataset demo - This example shows rapid Calendar navigation with 100,000 events in the store.
Show booking and rescheduling demo - This example shows special handling of empty day cells.
Radio broadcast scheduling demo - This example demonstrates resource views displaying arbitrary date ranges
Resource modes - This example shows a multi-project Calendar.

Integration

EcmaScript module demo - This example shows how to include and use the grid using EcmaScript modules (import)
Salesforce demo - This demo shows how to embed Bryntum Calendar into the Lightning Web Component to use in your salesforce org.
Script tag demo - This example shows how to include and use the calendar bundle using an ordinary script tag.
Web Components demo - This example shows how to use the Custom elements version of the Calendar
Calendar demo (Ionic) - This demo shows the Angular Calendar control integrated with the Ionic framework.
PHP demo - Demonstrates an editable Calendar with a simple PHP backend (only stores data in session, no database)
Custom build using WebPack - This very basic demo shows how to use Calendar and webpack to do a custom build from our sources
Custom build using WebPack and thin bundles - This very basic demo shows how to use Calendar and webpack to do a custom build from our thin packages