Click an empty cell or select a range to create. Click an event to edit, duplicate, or delete.Tab into the calendar. Use its keyboard hints to navigate; Escape cancels.

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 time format

eventTimeFormat · Package date-format tokens for event labels.

Show event times

displayEventTime · Show start times in event labels.

Show event end times

displayEventEnd · Display end times where the view has room.

Event ordering

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

Month grid

Always show six weeks

fixedWeekCount · Keep month grids at six rows rather than their natural week count.

Show adjacent-month dates

showNonCurrentDates · Display leading and trailing dates outside the month.

Visible events per day

dayMaxEvents · Extra events remain available through the overflow popover.

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.