EXAMPLE DIRECTORYFind an example

Views

Month, week & day DayGrid week & day Multi-month Year List Custom date range

Events & data

Recurring events RRULE & exclusions iCalendar import / export Sources & caching

Customization

Localization

⌄

0 available · Type to search; use ↓ / ↑ and Enter to choose.

Time zone

⌄

0 available · Type to search; use ↓ / ↑ and Enter to choose.

Background events Themes & appearance Event render hooks Keyboard & print

Premium features

Premium Previews & documentation

Resources & planning

Resource grid Resource DayGrid Resource TimeGrid Resource & non-resource timeline Dates above resources Resource CRUD & sources Resource hierarchy Resource grouping, ordering & filtering Resource columns & render hooks Resource availability & assignment Capacity, skills & roles Resource virtualization & print Repeated-task views Utilization & capacity heatmaps Split shifts & rotating schedules Resource dependencies & substitutes Overbooking policies Demand & availability forecasting Dependencies & critical paths

Premium interoperability

Two-way Google Calendar synchronization Microsoft 365 / Outlook adapter CalDAV adapter ICS change detection & reconciliation Moment / Luxon migration toolkit Configuration migration assistant

Enterprise workflow

Multi-stage approvals Configurable event state machines Immutable audit history Permissions & field-level policies Optimistic / offline mutation queues Existing-backend interfaces

See all features →

New theme integrations, responsive labels & automatic contrast · Unreleased; examples use the installed package.

Examples/Interaction

Business hours

Weekday scheduling from 09:00 to 17:00 with business-hour constraints and overlap prevention.

September 2026

Click an empty cell or select a range to create. Click an event to edit, duplicate, or delete.

Loading calendar…

Interactive calendar and sample events load in your browser.

CONFIGURATION

Configurable options

22 for this view

Changes apply immediately through calendar.setOptions().

Find an option Option group

Reset keeps the current view, date, and event edits. Localization and time zone stay in the Customization sidebar. Search checks every group for this view.

Appearance

Compact day labels

dayNarrowWidth · Actual day-column threshold; 0 disables. Does not reduce column widths.

Event text contrast

eventContrastColor · Auto chooses black/white text. Explicit event/source/global text colors win.

Theme

theme · Use a built-in package theme.

Appearance

colorScheme · Light, dark, or the operating system preference.

Layout

Calendar height

height · Pixels, or auto to follow the view content.

First day of week

startOfWeek · Reorders weekly columns and aligns week navigation.

Show weekends

weekends · Include Saturday and Sunday.

Show week numbers

weekNumbers · Display week numbers alongside the grid.

Events

Event ordering

eventOrder · Within-day ordering; the calendar still preserves layout constraints.

Time grid

Time-slot duration

slotDuration · Minutes per visible slot; also updates dayView.hourSegment and weekView.hourSegment.

Visible day starts

slotMinTime · First visible time. Must be before the end time.

Visible day ends

slotMaxTime · Exclusive end time; 24:00 includes the full day.

Time-axis labels

slotLabelFormat · Format used beside hourly slots.

Show all-day row

allDaySlot · Keep a separate row for all-day events.

Allow visual overlap

slotEventOverlap · Overlap event columns without changing their actual times.

Interaction

Drag and resize events

editable · Enable editing in supported grid views; existing constraints still apply.

Select date and time ranges

selectable · Drag across grid cells to create a selection.

Allow overlapping edits

eventOverlap · Permit edits that overlap other events, subject to other constraints.

Enforce business hours

businessHoursPolicy · Show the configured schedule and restrict event edits and selections to it.

Business days

MTWTFSS

businessHours.daysOfWeek · Choose the weekdays included in the primary business-hours interval.

Starts at

businessHours.startTime · Inclusive start time for the primary business-hours interval.

Ends at

businessHours.endTime · Exclusive end time for the primary business-hours interval.

Callback activity (0 recent)

Current configuration & code

Updates with the active view, date, and options. The setup includes the original sample events and editor callbacks; saved event edits are not exported. Site navigation and callback logging are separate.

Changes stay in this browser session and reset when switching examples or reloading. No account, backend, or credentials required.