Bryntum Calendar Examples

Features

Calendar print feature

This example shows how to use the Calendar print feature

Display day views that don't start at midnight

This example shows how to shift day start times from midnight to 6PM

Event filtering

This demo shows you how easy it is to filter & highlight events and resources to quickly find what matters to you

Multi-level filtering

This demo shows how to filter by multiple conditions, such as the task project and resources that a task is assigned to

Events viewed in grid form

This example demonstrates the 'list' view type

Event lists showing arbitrary date ranges

This example demonstrates EventList modes displaying arbitrary date ranges

Loading only what the UI requires

This example shows how to use the load on demand feature to only load a subset of a 100,000 event dataset

Exporting events 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)

Exporting events to ICS format

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

This example shows Calendar with multiple assignment events

Multi assignment using resourceIds

This example shows a calendar using resourceIds field to support multi assignment

ResourceView

This example shows per-resource calendar views

Date/ResourceView

This example shows resources grouped by dates

Resources with capacity tick renderer

This example shows resource allocation per hour with a capacity tick renderer

Date/ResourceView showing non-consectutive dates

This example shows how to show only certain dates in the Calendar

Undo & redo

This demo shows undo / redo functionality one can use in an application using standard State Tracking Manager facility

EventColumn

This example shows usage of the EventColumn in the EventList view

Storing and restoring state

This example shows a state-preserving Calendar setup

Using TimeRanges

Shows how to use the TimeRanges feature to add vertical zones to the calendar

Time zone support

Shows how time zone support can be implemented

Dual DayView

This example shows the DualDayView extension

Day Agenda View

This example shows the serial DayAgenda view

Travel time demo

This demo shows how to visualize travel time before/after an event

Basics

Basic setup

This example shows basic Calendar setup

Basic setup as a PWA

This example shows the basic Calendar setup packaged as an installable Progressive Web App

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

Zooming the DayView timeline

This example shows zooming the hour tick size in a DayView

DayView time axis split into six minute ticks

This example shows a DayView time axis split into six minute ticks

Illustrates responsive sizing breakpoints

This example illustrates responsive size breakpoints

Icon buttons to events in DayViews and WeekViews

This example shows how to add icon buttons to events in DayViews and WeekViews

Show the current time line in different ways

This demo shows the various ways of displaying the "current time" line

Show a compact month view suitable for phone sized displays

This example shows a month view suitable for phone sized screens

Year planner view

This example shows a Year planner view of a year.
Note that this UI is designed for use with larger screen sizes

AI

AI-powered Pest control

Demonstrates the Bryntum AI Assistant integrated into the Calendar

Customization

Alternative resource filtering UI

This example shows how filtering resources can be customized for any UX.

It also illustrates the showAllDayHeader config

Confirmation dialogs

This example shows confirmation dialogs after create, resize and drag drop actions

Customized context menus

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

Customized sidebar

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

Shows how to preload a specific locale and localize the application

Rendering resource avatars in the event bars

This example shows how to insert resource avatars into event bars

Rich text editor

This example shows how to use TinyMCE as a field in the event editor popup

Docked event editor

This example shows the event editor docked inside the browser viewport

Event group rendering outside the event flow

This example illustrates how to change the cellData event payload to create a customized 'grouped' event record for use by a custom eventRenderer

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

Sliding day range

This example shows a day-range calendar view

Power demos

Big data set

This example shows the Calendar loading with lots and lots of events and resources

Calendar + Taskboard integration

thin

This example shows a Taskboard view of Calendar data

Drag events from external grid

This example shows how to drag events from a grid onto a Calendar

Drag events between two Calendar instances

This example shows how to drag events between different Calendar instances

Drag equipment from external grid 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

This example shows how to use a Scheduler in a Calendar

Colossal data set

This example shows rapid Calendar navigation with 100,000 events in the store

Show booking and scheduling UI

This example shows special handling of empty day cells

Radio broadcast scheduling UI

This example demonstrates resource views displaying arbitrary date ranges

Multi resource scheduling modes

This example shows a multi-project Calendar

Year month grid view

This example shows the MonthGrid view of a year

Charts

Calendar with a chart

thin

This example shows a Chart next to the Calendar

Calendar with HighCharts integration

This example shows Bryntum Calendar integration with HighCharts

Misc

Kitchen sink

thin

Comprehensive showcase of all the widgets included in the Bryntum package. Browse through text fields, date pickers, buttons, layouts, and more

Integration

Include using EcmaScript module

This example shows how to include and use the grid using EcmaScript modules (import)

Integrate with Salesforce Lightning

This demo shows how to embed Bryntum Calendar into the Lightning Web Component to use in your salesforce org

Include using script tag

This example shows how to include and use the calendar bundle using an ordinary script tag

Use as web component

This example shows how to use the Custom elements version of the Calendar

Backend in PHP

Demonstrates an editable Calendar with a simple PHP backend (only stores data in session, no database)

Custom build using WebPack

WebPack 5

This very basic demo shows how to use Calendar and webpack to do a custom build from our sources

Custom thin build using WebPack

WebPack 5

thin

This very basic demo shows how to use Calendar and webpack to do a custom build from our thin packages

Angular

examples/frameworks/angular

Basic setup using HttpClient

Angular 11

TypeScript 4

This demo shows you how use the Calendar web component in Angular. Data is loaded from server with HttpClient

Basic setup

Angular 13

TypeScript 4

This example shows basic Calendar setup

Basic thin setup

Angular 13

TypeScript 4

thin

This example shows basic thin Calendar setup

Big data set

Angular 13

TypeScript 4

This example shows the Calendar loading with lots and lots of events and resources

Scheduler Timeline

Angular 22

TypeScript 6

This example shows how to use a Scheduler in a Calendar

Customized context menus

Angular 22

TypeScript 6

This example shows how to customize context menus

Show the current time line in different ways

Angular 22

TypeScript 6

This demo shows the various ways of displaying the "current time" line

Customized resource filtering

Angular 22

TypeScript 6

This example shows how filtering resources can be customized for any UX

Day Agenda View

Angular 22

TypeScript 6

This example shows the serial DayAgenda view

Timeaxis ticks

Angular 22

TypeScript 6

This example shows a DayView time axis split into six minute ticks

Drag from external source

Angular 13

TypeScript 4

This example shows how to drag events from a grid onto a Calendar

Drag equipment from external grid onto tasks

Angular 16

TypeScript 5

This example shows how to drag any DOM node and drop it onto a task to update some aspect of it

EventColumn

Angular 22

TypeScript 6

This example shows usage of the EventColumn in the EventList view

Event group rendering outside the event flow

Angular 22

TypeScript 6

This example illustrates how to change the cellData event payload to create a customized 'grouped' event record for use by a custom eventRenderer

Event items

Angular 22

TypeScript 6

This example shows how to add custom items (guests) to the events

Customized event editor

Angular 13

TypeScript 4

This example shows event editor customization

Rich text editor

Angular 22

TypeScript 6

This example shows how to use TinyMCE as a field in the event editor popup

Exporting events to Excel

Angular 22

TypeScript 6

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)

Exporting events to ICS format

Angular 22

TypeScript 6

This demo shows how to export an event to the ICS format to be added to Outlook and other calendars

Event filtering

Angular 13

TypeScript 4

This demo shows you how easy it is to filter & highlight events in the Angular Calendar component, to quickly find what matters to you

Inline data

Angular 13

TypeScript 4

Shows how to bind inline data to the Angular Calendar component

Events viewed in grid form

Angular 16

TypeScript 5

This example demonstrates the 'list' view type

Resources with capacity tick renderer

Angular 22

TypeScript 6

This example shows resource allocation per hour with a capacity tick renderer

Date/ResourceView showing non-consecutive dates

Angular 22

TypeScript 6

This example shows how to show only certain dates in the Calendar

Resource view

Angular 16

TypeScript 5

This example shows per-resource calendar views

Icon buttons to events in DayViews and WeekViews

Angular 22

TypeScript 6

This example shows how to add icon buttons to events in DayViews and WeekViews

Confirmation dialogs

Angular 22

TypeScript 6

This example shows confirmation dialogs after create, resize and drag drop actions

Display day views that don't start at midnight

Angular 22

TypeScript 6

This example shows how to shift day start times from midnight to 6PM

Storing and restoring state

Angular 22

TypeScript 6

This example shows a state-preserving Calendar setup

Using TimeRanges

Angular 16

TypeScript 5

Shows how to use the TimeRanges feature to add vertical zones to the calendar

Undo/redo

Angular 13

TypeScript 4

This demo shows undo / redo functionality one can use in an application using standard State Tracking Manager facility

Configuring visible hours

Angular 13

TypeScript 4

This React Calendar component example shows how to define the hours to render and what hour should be scrolled to initially

Calendar + Taskboard integration

Angular 22

TypeScript 6

thin

This example shows a Taskboard view of Calendar data

Custom rendering

Angular 22

TypeScript 6

thin

This example shows how to customize the markup used for events in the Calendar

Custom Theme

Angular 22

TypeScript 6

thin

This demo has a custom theme, to showcase how you can create your own. Check src/app/custom.css to see how it is done

Date/ResourceView

Angular 19

TypeScript 5

This example shows resources grouped by dates

Multi resource scheduling modes

Angular 22

TypeScript 6

This example shows a multi-project Calendar

Sliding day range

Angular 22

TypeScript 6

This example shows a day-range calendar view

Time zone support

Angular 22

TypeScript 6

Shows how time zone support can be implemented

Customized Event Tooltip

Angular 22

TypeScript 6

This example shows a customized event tooltip

Travel time demo

Angular 22

TypeScript 6

This demo shows how to visualize travel time before/after an event

Year planner view

Angular 22

TypeScript 6

This example shows a Year planner view of a year.
Note that this UI is designed for use with larger screen sizes

Loading only what the UI requires

Angular 22

TypeScript 6

This example shows how to use the load on demand feature to only load a subset of a 100,000 event dataset

Localization

Angular 22

TypeScript 6

Shows how to preload a specific locale and localize the application

Colossal data set

Angular 22

TypeScript 6

This example shows rapid Calendar navigation with 100,000 events in the store

Show a compact month view suitable for phone sized displays

Angular 22

TypeScript 6

This example shows a month view suitable for phone sized screens

Year month grid view

Angular 22

TypeScript 6

This example shows the MonthGrid view of a year

Multi assignment

Angular 22

TypeScript 6

This example shows Calendar with multiple assignment events

Multi assignment using resourceIds

Angular 22

TypeScript 6

This example shows a calendar using resourceIds field to support multi assignment

Calendar print feature

Angular 22

TypeScript 6

This example shows how to use the Calendar print feature

Radio broadcast scheduling UI

Angular 22

TypeScript 6

This example demonstrates resource views displaying arbitrary date ranges

Recurring events

Angular 22

TypeScript 6

This example shows recurring events and you can edit the recurrence pattern easily

Rendering resource avatars in the event bars

Angular 22

TypeScript 6

This example shows how to insert resource avatars into event bars

Zooming the DayView timeline

Angular 22

TypeScript 6

This example shows zooming the hour tick size in a DayView

Docked event editor

Angular 22

TypeScript 6

This example shows the event editor docked inside the browser viewport

Drag events between two Calendar instances

Angular 22

TypeScript 6

This example shows how to drag events between different Calendar instances

Drag from sidebar grid demo

Angular 22

TypeScript 6

This example shows how to drag events from a grid in the sidebar of a Calendar

Multi-level filtering

Angular 22

TypeScript 6

This demo shows how to filter by multiple conditions, such as the task project and resources that a task is assigned to

Fit timeline to available space

Angular 22

TypeScript 6

This example shows how to fit the timeline to the available vertical space

Event lists showing arbitrary date ranges

Angular 22

TypeScript 6

This example demonstrates EventList modes displaying arbitrary date ranges

React + Vite

examples/frameworks/react-vite

Basic thin setup

React 18

Vite 5

TypeScript 5

thin

This demo contains a basic thin React Calendar component implementation

Scheduler Timeline

React 19

Vite 8

TypeScript 6

This example shows how to use a Scheduler in a Calendar

Calendar + Taskboard integration

React 19

Vite 8

TypeScript 6

thin

This example shows a Taskboard view of Calendar data

Show the current time line in different ways

React 19

Vite 8

TypeScript 6

This demo shows the various ways of displaying the "current time" line

Customized context menus

React 19

Vite 8

TypeScript 6

This example shows how to customize context menus

Custom rendering

React 19

Vite 8

TypeScript 6

thin

This example shows how to customize the markup used for events in the Calendar

Custom Theme

React 19

Vite 8

TypeScript 6

thin

This demo has a custom theme, to showcase how you can create your own. Check src/custom.css to see how it is done

Customized resource filtering

React 19

Vite 8

TypeScript 6

This example shows how filtering resources can be customized for any UX

Date/ResourceView

React 19

Vite 8

TypeScript 6

This example shows resources grouped by dates

Day Agenda View

React 19

Vite 8

TypeScript 6

This example shows the serial DayAgenda view

Timeaxis ticks

React 19

Vite 8

TypeScript 6

This example shows a DayView time axis split into six minute ticks

Drag equipment from external grid onto tasks

React 18

Vite 5

TypeScript 5

This example shows how to drag any DOM node and drop it onto a task to update some aspect of it

EventColumn

React 19

Vite 8

TypeScript 6

This example shows usage of the EventColumn in the EventList view

Event group rendering outside the event flow

React 19

Vite 8

TypeScript 6

This example illustrates how to change the cellData event payload to create a customized 'grouped' event record for use by a custom eventRenderer

Event items

React 19

Vite 8

TypeScript 6

This example shows how to add custom items (guests) to the events

Rich text editor

React 19

Vite 8

TypeScript 6

This example shows how to use TinyMCE as a field in the event editor popup

Exporting events to Excel

React 19

Vite 8

TypeScript 6

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)

Exporting events to ICS format

React 19

Vite 8

TypeScript 6

This demo shows how to export an event to the ICS format to be added to Outlook and other calendars

Events viewed in grid form

React 18

Vite 4

TypeScript 5

This example demonstrates the 'list' view type

Using React renderers

React 19

Vite 6

TypeScript 5

This example demonstrates using React components as renderers

Resource view

React 18

Vite 4

TypeScript 5

This example shows per-resource calendar views

Multi resource scheduling modes

React 19

Vite 8

TypeScript 6

This example shows a multi-project Calendar

Icon buttons to events in DayViews and WeekViews

React 19

Vite 8

TypeScript 6

This example shows how to add icon buttons to events in DayViews and WeekViews

Confirmation dialogs

React 19

Vite 8

TypeScript 6

This example shows confirmation dialogs after create, resize and drag drop actions

Display day views that don't start at midnight

React 19

Vite 8

TypeScript 6

This example shows how to shift day start times from midnight to 6PM

Resources with capacity tick renderer

React 19

Vite 8

TypeScript 6

This example shows resource allocation per hour with a capacity tick renderer

Date/ResourceView showing non-consecutive dates

React 19

Vite 8

TypeScript 6

This example shows how to show only certain dates in the Calendar

Storing and restoring state

React 19

Vite 8

TypeScript 6

This example shows a state-preserving Calendar setup

Using TimeRanges

React 18

Vite 4

TypeScript 5

Shows how to use the TimeRanges feature to add vertical zones to the calendar

Sliding day range

React 19

Vite 8

TypeScript 6

This example shows a day-range calendar view

Time zone support

React 19

Vite 8

TypeScript 6

Shows how time zone support can be implemented

Customized Event Tooltip

React 19

Vite 8

TypeScript 6

This example shows a customized event tooltip

Travel time demo

React 19

Vite 8

TypeScript 6

This demo shows how to visualize travel time before/after an event

Configuring visible hours

React 19

Vite 8

TypeScript 6

This example shows how to define the hours to render and what hour should be scrolled to initially

Year planner view

React 19

Vite 8

TypeScript 6

This example shows a Year planner view of a year.
Note that this UI is designed for use with larger screen sizes

Loading only what the UI requires

React 19

Vite 8

TypeScript 6

This example shows how to use the load on demand feature to only load a subset of a 100,000 event dataset

Localization

React 19

Vite 8

TypeScript 6

Shows how to preload a specific locale and localize the application

Colossal data set

React 19

Vite 8

TypeScript 6

This example shows rapid Calendar navigation with 100,000 events in the store

Show a compact month view suitable for phone sized displays

React 19

Vite 8

TypeScript 6

This example shows a month view suitable for phone sized screens

Year month grid view

React 19

Vite 8

TypeScript 6

This example shows the MonthGrid view of a year

Multi assignment

React 19

Vite 8

TypeScript 6

This example shows Calendar with multiple assignment events

Multi assignment using resourceIds

React 19

Vite 8

TypeScript 6

This example shows a calendar using resourceIds field to support multi assignment

Calendar print feature

React 19

Vite 8

TypeScript 6

This example shows how to use the Calendar print feature

Radio broadcast scheduling UI

React 19

Vite 8

TypeScript 6

This example demonstrates resource views displaying arbitrary date ranges

Recurring events

React 19

Vite 8

TypeScript 6

This example shows recurring events and you can edit the recurrence pattern easily

Rendering resource avatars in the event bars

React 19

Vite 8

TypeScript 6

This example shows how to insert resource avatars into event bars

Zooming the DayView timeline

React 19

Vite 8

TypeScript 6

This example shows zooming the hour tick size in a DayView

Docked event editor

React 19

Vite 8

TypeScript 6

This example shows the event editor docked inside the browser viewport

Drag events between two Calendar instances

React 19

Vite 8

TypeScript 6

This example shows how to drag events between different Calendar instances

Drag events from external grid

React 19

Vite 8

TypeScript 6

This example shows how to drag events from a grid onto a Calendar

Drag from sidebar grid demo

React 19

Vite 8

TypeScript 6

This example shows how to drag events from a grid in the sidebar of a Calendar

Multi-level filtering

React 19

Vite 8

TypeScript 6

This demo shows how to filter by multiple conditions, such as the task project and resources that a task is assigned to

Fit timeline to available space

React 19

Vite 8

TypeScript 6

This example shows how to fit the timeline to the available vertical space

Event lists showing arbitrary date ranges

React 19

Vite 8

TypeScript 6

This example demonstrates EventList modes displaying arbitrary date ranges

React

examples/frameworks/react

Basic setup

React 18

This example shows basic Calendar setup

Big data set

React 18

This example shows the Calendar loading with lots and lots of events and resources

Customized event editor

React 18

This example shows event editor customization

Event filtering

React 16

This demo shows how to use the React Calendar web component wrapper and Widgets and filter or highlight the calendar events

Inline data

React 16

Shows how to bind inline data to the React Calendar component

Undo/redo

React 18

This demo shows undo / redo functionality one can use in an application using standard State Tracking Manager facility

Basic setup with TypeScript

React 17

TypeScript 3

This demo contains the React Calendar wrapper and the demo is written in TypeScript

SharePoint Workbench with TypeScript

React 17

TypeScript 4

thin

This demo includes a SPFx web part that uses TypeScript and React

React + Remix

Basic setup

React 18

Remix 2

Vite 5

TypeScript 5

This demo contains the React Calendar wrapper and the demo is written in Remix using Typescript

Vue 3 + Nuxt

Basic setup (Nuxt)

Vue 3

NuxtJS 4

Vite 5

This example shows basic setup of the Calendar in Nuxt

Vue 3 + Vite

examples/frameworks/vue-3-vite

Basic setup

Vue 3

Vite 5

TypeScript 5

This example shows basic setup of the grid with sorting enabled. It has a few columns with generated data and it uses date and percent columns

Basic thin setup

Vue 3

Vite 5

TypeScript 5

thin

This example shows basic thin setup of the grid with sorting enabled

Scheduler timeline

Vue 3

Vite 8

TypeScript 6

This example shows how to use a Scheduler in a Calendar

Calendar + Taskboard integration

Vue 3

Vite 8

TypeScript 6

thin

This example shows a Taskboard view of Calendar data

Customized context menus

Vue 3

Vite 8

TypeScript 6

This example shows how to customize context menus

Custom rendering

Vue 3

Vite 8

TypeScript 6

thin

This example shows how to customize the markup used for events in the Calendar

Custom Theme

Vue 3

Vite 8

TypeScript 6

thin

This demo has a custom theme, to showcase how you can create your own. Check src/custom.css to see how it is done

Customized resource filtering

Vue 3

Vite 8

TypeScript 6

This example shows how filtering resources can be customized for any UX

Date/ResourceView

Vue 3

Vite 8

TypeScript 6

This example shows resources grouped by dates

Day Agenda View

Vue 3

Vite 8

TypeScript 6

This example shows the serial DayAgenda view

Timeaxis ticks

Vue 3

Vite 8

TypeScript 6

This example shows a DayView time axis split into six minute ticks

Drag equipment from external grid onto tasks

Vue 3

Vite 4

TypeScript 4

This example shows how to drag any DOM node and drop it onto a task to update some aspect of it

EventColumn

Vue 3

Vite 8

TypeScript 6

This example shows usage of the EventColumn in the EventList view

Event group rendering outside the event flow

Vue 3

Vite 8

TypeScript 6

This example illustrates how to change the cellData event payload to create a customized 'grouped' event record for use by a custom eventRenderer

Event items

Vue 3

Vite 8

TypeScript 6

This example shows how to add custom items (guests) to the events

Rich text editor

Vue 3

Vite 8

TypeScript 6

This example shows how to use TinyMCE as a field in the event editor popup

Exporting events to Excel

Vue 3

Vite 8

TypeScript 6

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)

Exporting events to ICS format

Vue 3

Vite 8

TypeScript 6

This demo shows how to export an event to the ICS format to be added to Outlook and other calendars

Events viewed in grid form

Vue 3

Vite 4

TypeScript 4

This example demonstrates the 'list' view type

Resource view

Vue 3

Vite 4

TypeScript 4

This example shows per-resource calendar views

Icon buttons to events in DayViews and WeekViews

Vue 3

Vite 8

TypeScript 6

This example shows how to add icon buttons to events in DayViews and WeekViews

Confirmation dialogs

Vue 3

Vite 8

TypeScript 6

This example shows confirmation dialogs after create, resize and drag drop actions

Display day views that don't start at midnight

Vue 3

Vite 8

TypeScript 6

This example shows how to shift day start times from midnight to 6PM

Resources with capacity tick renderer

Vue 3

Vite 8

TypeScript 6

This example shows resource allocation per hour with a capacity tick renderer

Date/ResourceView showing non-consecutive dates

Vue 3

Vite 8

TypeScript 6

This example shows how to show only certain dates in the Calendar

Storing and restoring state

Vue 3

Vite 8

TypeScript 6

This example shows a state-preserving Calendar setup

Using TimeRanges

Vue 3

Vite 4

TypeScript 4

Shows how to use the TimeRanges feature to add vertical zones to the calendar

Multi resource scheduling modes

Vue 3

Vite 8

TypeScript 6

This example shows a multi-project Calendar

Sliding day range

Vue 3

Vite 8

TypeScript 6

This example shows a day-range calendar view

Time zone support

Vue 3

Vite 8

TypeScript 6

Shows how time zone support can be implemented

Customized Event Tooltip

Vue 3

Vite 8

TypeScript 6

This example shows a customized event tooltip

Travel time demo

Vue 3

Vite 8

TypeScript 6

This demo shows how to visualize travel time before/after an event

Configuring visible hours

Vue 3

Vite 8

TypeScript 6

This example shows how to define the hours to render and what hour should be scrolled to initially

Show the current time line in different ways

Vue 3

Vite 8

TypeScript 6

This demo shows the various ways of displaying the "current time" line

Year planner view

Vue 3

Vite 8

TypeScript 6

This example shows a Year planner view of a year.
Note that this UI is designed for use with larger screen sizes

Loading only what the UI requires

Vue 3

Vite 8

TypeScript 6

This example shows how to use the load on demand feature to only load a subset of a 100,000 event dataset

Localization

Vue 3

Vite 8

TypeScript 6

Shows how to preload a specific locale and localize the application

Colossal data set

Vue 3

Vite 8

TypeScript 6

This example shows rapid Calendar navigation with 100,000 events in the store

Show a compact month view suitable for phone sized displays

Vue 3

Vite 8

TypeScript 6

This example shows a month view suitable for phone sized screens

Year month grid view

Vue 3

Vite 8

TypeScript 6

This example shows the MonthGrid view of a year

Multi assignment

Vue 3

Vite 8

TypeScript 6

This example shows Calendar with multiple assignment events

Multi assignment using resourceIds

Vue 3

Vite 8

TypeScript 6

This example shows a calendar using resourceIds field to support multi assignment

Calendar print feature

Vue 3

Vite 8

TypeScript 6

This example shows how to use the Calendar print feature

Radio broadcast scheduling UI

Vue 3

Vite 8

TypeScript 6

This example demonstrates resource views displaying arbitrary date ranges

Recurring events

Vue 3

Vite 8

TypeScript 6

This example shows recurring events and you can edit the recurrence pattern easily

Rendering resource avatars in the event bars

Vue 3

Vite 8

TypeScript 6

This example shows how to insert resource avatars into event bars

Zooming the DayView timeline

Vue 3

Vite 8

TypeScript 6

This example shows zooming the hour tick size in a DayView

Docked event editor

Vue 3

Vite 8

TypeScript 6

This example shows the event editor docked inside the browser viewport

Drag events between two Calendar instances

Vue 3

Vite 8

TypeScript 6

This example shows how to drag events between different Calendar instances

Drag events from external grid

Vue 3

Vite 8

TypeScript 6

This example shows how to drag events from a grid onto a Calendar

Drag from sidebar grid demo

Vue 3

Vite 8

TypeScript 6

This example shows how to drag events from a grid in the sidebar of a Calendar

Multi-level filtering

Vue 3

Vite 8

TypeScript 6

This demo shows how to filter by multiple conditions, such as the task project and resources that a task is assigned to

Fit timeline to available space

Vue 3

Vite 8

TypeScript 6

This example shows how to fit the timeline to the available vertical space

Event lists showing arbitrary date ranges

Vue 3

Vite 8

TypeScript 6

This example demonstrates EventList modes displaying arbitrary date ranges

Vue 3

examples/frameworks/vue-3

Big data set

Vue 3

This example shows the Calendar loading with lots and lots of events and resources

Scheduler timeline with inline data

Vue 3

This example shows how to use a Scheduler in a Calendar with inline data in Vue 3

Customized event editor

Vue 3

This example shows event editor customization

Inline data

Vue 3

Shows how to bind inline data to the Vue 3 Calendar component

Undo/redo

Vue 3

This example shows the Calendar loading with lots and lots of events and resources

Vue 2

examples/frameworks/vue-2

Event filtering

Vue 2

Shows how to implement filtering of events using Bryntum Calendar integrated into Vue framework