Calendar

The Calendar component is an implementation of FullCalendar (version 5) as a Perspective component. It supports multiple calendar views, event display and interaction, drag-and-drop scheduling, and built-in popups for creating and editing events.

Two optional built-in popups are available but disabled by default. The Event Popup appears when an event is clicked and can optionally allow editing. The Create Event Popup appears when a date or time block is clicked. Neither popup modifies the calendar directly — all changes are surfaced through component events for handling in scripts.

The Calendar component works alongside the External Event Box component to support drag-and-drop scheduling from an external list of events onto the calendar.

Properties

Name	Description	Property Type
editable	Allows events to be dragged to new times and resized.	boolean
selectable	Allows selecting a single date or a range of dates.	boolean
selectedDate	When selectable is true and a selection is made, these readonly properties reflect the current selection.	object
defaultView	The initial calendar view displayed when the component loads.	string
currentView	The currently displayed view. Writing to this property will change the view. If an invalid view name is written, the component will error. Valid options are: dayGridMonth, dayGridWeek, dayGridDay, timeGridWeek, timeGridDay, listMonth, listWeek, listDay.	string
events	An array of event objects to display on the calendar. See Event Object Properties below.	array

Event Object Properties

Each item in the events array supports the following properties. Only start is required.

Name	Description	Property Type
title	The text displayed on the event.	string
start	Required. When the event starts, as a parseable date/time string. If no end is defined, the event defaults to all-day on the start date. If start includes a time and end is omitted, the event duration defaults to one hour.	string
end	When the event ends. This value is exclusive — an all-day event ending on 2020-09-03 spans through 2020-09-02.	string
duration	The duration of the event as an alternative to end, in the format HH:mm.	string
allDay	When true, the event ignores any time portion of start and end.	boolean
borderColor	The color of the event's border.	string
backgroundColor	The background color of the event box. Also used for dots in list view.	string
textColor	The color of the event's text.	string
id	An identifier for the event. Defaults to an empty string if not provided.	string
rrule	A recurrence rule for repeating events. See the FullCalendar rrule documentation.	string

Event Pop Properties

Name	Description	Property Type
useEventPop	Whether the built-in popup for showing event details will appear when an event is clicked.	boolean
canEditEventOnPop	Whether the edit button appears on the built-in event popup.	boolean
canExportEventOnPop	Whether the event can be exported as an iCal object from the popup.	boolean
useCreateEventPop	Whether the built-in popup for creating events appears when a date or time block is clicked.	boolean

Event Display Properties

Name	Description	Property Type
eventDisplayType	Controls the rendering style of events. Options: auto (solid block for all-day/multi-day, dot for timed events in daygrid), block (always solid block in daygrid), list-item (always dot in daygrid), background (highlights background), inverse-background (highlights inverse background), none (not rendered).	string
color	The default background and border color for events.	string
backgroundColor	The default background color for events. Overrides color.	string
borderColor	The default border color for events.	string
font	Controls the color, weight, size, and family of the event text.	object
displayEventTime	Whether to show the start time on timed (non-all-day) events.	boolean
nextDayThreshold	The minimum time that must pass into a day for a spanning event to be rendered on that day in daygrid view. Format: HH:mm:ss.	string
eventOrder	Determines display order when events occupy the same space. Uses event property names; prefix with - for descending order.	string
slotEventOverlap	Whether timed events in TimeGrid view visually overlap.	boolean

Current Calendar Date Properties

Name	Description	Property Type
date	An ISO 8601 string (YYYY-MM-DD) of the current displayed date. Writable when dateIsReadOnly is false.	string
dateIsReadOnly	When false, writing to date changes the displayed date.	boolean
week	The ISO week number of the year (readonly).	number
displayDateStart	The first visible date on the display. In month view this may not be the first of the month (readonly).	string
displayDateEnd	The last visible date on the display. This value is exclusive (readonly).	string
currentDateStart	The first date of the range the view represents (readonly).	string
currentDateEnd	The last date of the range the view represents. This value is exclusive (readonly).	string
title	The title string currently generated by the calendar (readonly).	string

Date and Time Display Properties

Name	Description	Property Type
firstDay	The first day of the week in day grid views. 0 = Sunday.	number
minTime	The earliest time displayed in time grid views.	string
maxTime	The latest time displayed in time grid views.	string
navLinks	Whether to make parts of the calendar (e.g., date numbers) into links that navigate to related views.	boolean
weekNumbers	Whether to display week numbers when possible.	boolean
useISOWeekCalc	Whether to use ISO week numbers rather than localized week numbers.	boolean
weekLabel	The label displayed before the week number.	string
nowIndicator	Whether to show a red line indicating the current time on time grid views.	boolean
todayColor	The highlight color for the current date.	string
slotDuration	The duration of each time slot in time grid views.	string
expandRows	Whether rows expand to fill the full height of the view when they don't naturally fill it.	boolean
snapDuration	The time interval at which a dragged event snaps to the time axis.	string
slotLabelFormat	The format of the time labels in time grid views, as a Date Format object. See FullCalendar date formatting.	object
allDayText	The text shown on the all-day slot in time grid views.	string
weekends	Whether to display weekends on the calendar.	boolean
hiddenDays	An array of integers representing days to hide. Days are indexed from 0 (Sunday) to 6 (Saturday).	array
businessHours	Highlights business hours on the calendar. Can be false to disable, or an object/array of objects with daysOfWeek, startTime, and endTime. Example: {"daysOfWeek": [1,2,3,4,5], "startTime": "09:00", "endTime": "17:00"}.	object or boolean
timeZone	The time zone of the calendar. Options: local (browser time zone), gateway (pulled from the Perspective session), custom (uses local but allows a custom now), or a time zone identifier string such as America/New_York.	string
now	When timeZone is set to custom, sets the current time as an ISO formatted date string.	string

Toolbar Properties

Name	Description	Property Type
header	Configures the header toolbar with left, center, and right string properties. Each is a comma-separated list of toolbar elements. Set to false to remove the header entirely. Available elements: title, prev, next, prevYear, nextYear, today, or any valid view name (e.g., dayGridMonth). Spaces between commas add gaps between buttons.	object or boolean
footer	Same structure as header. Configures the footer toolbar. Set to false to remove.	object or boolean
titleFont	Controls the font color, size, weight, and family of the toolbar title.	object
titleSeparator	The separator string used in the title when a date range is shown.	string
buttons	Controls button styling for primary, hover, and active states.	object
buttonText	Overrides the default display text for toolbar buttons.	object

Popover Properties

Name	Description	Property Type
dayMaxEvents	In dayGrid views, the maximum number of events to show per day before a "+more" link appears. Set to true to limit based on cell height.	number or boolean
dayPopoverFormat	The format of the date displayed in the "+more" popover, as a Date Format object.	object
moreLinkContent	The content of the "+more" link. Accepts a string or an HTML object like { html: '<i>text</i>' }.	string or object
moreLinkClick	The action taken when the "+more" link is clicked. Options: popover, week, day, or any valid view name.	string

View Properties

Name	Description	Property Type
day.columnHeaderFormat	Date Format object for column headers in day views.	object
day.titleFormat	Date Format object for the view title in day views.	object
week.columnHeaderFormat	Date Format object for column headers in week views.	object
week.titleFormat	Date Format object for the view title in week views.	object
month.columnHeaderFormat	Date Format object for column headers in month views.	object
month.titleFormat	Date Format object for the view title in month views.	object
month.fixedWeekCount	When true, every month view shows the same number of weeks regardless of how many days the month has.	boolean
month.showNonCurrentDates	When true, displays dates from the previous and next months that can be shown.	boolean
dayGrid.showColumnHeader	Whether to show the column header in day grid views.	boolean
dayGrid.eventTimeFormat	Date Format object for the event time display in day grid views.	object
timeGrid.showColumnHeader	Whether to show the column header in time grid views.	boolean
timeGrid.eventTimeFormat	Date Format object for the event time display in time grid views.	object
timeGrid.showAllDaySlot	Whether to show the all-day slot in time grid views.	boolean
list.noEventsMessage	Message displayed when there are no events in list views.	string
list.listDayFormat	Date Format object for the day displayed on the left side of list view day headers. Set to false to hide.	object or boolean
list.listDaySideFormat	Date Format object for the day displayed on the right side of list view day headers. Set to false to hide.	object or boolean

Theme Properties

Name	Description	Property Type
theme.classes	A string or array of CSS class names to apply to the calendar for custom theming. Unlike Perspective's style.classes property, the full class name including any prefix must be provided. For example, if your style class is defined as .psc-toolbar, you must enter psc-toolbar — the prefix is not implied automatically.	string or array

Locale Settings

Name	Description	Property Type
locale	A language code that changes the calendar's header/footer titles, grid headers, and list headers to the selected language and date format. See the supported locales list.	string
dir	Text direction. Set to ltr or rtl to support right-to-left languages such as Arabic and Hebrew.	string

Component Events

onDateClick

Triggered when a date or time block is clicked on the calendar.

Property	Type	Description
event.date	object	A date object containing the date and time of the block clicked.
event.dateStr	string	An ISO 8601 formatted string representing the block clicked.
event.altKey	boolean	Whether the Alt key was held when the event fired.
event.shiftKey	boolean	Whether the Shift key was held when the event fired.

onEventClick

Triggered when an event on the calendar is clicked. Dates are returned as YYYY-MM-DD HH:mm:ss.

Property	Type	Description
event.id	int	The id of the event. Returns None if not supplied.
event.title	string	The title of the event.
event.start	string	The start of the event.
event.end	string	The end of the event. Returns None for single-day all-day events.
event.allDay	bool	Whether the event spans full days.
event.altKey	boolean	Whether the Alt key was held when the event fired.
event.shiftKey	boolean	Whether the Shift key was held when the event fired.

onEventDropped

Triggered when an event is moved by dragging. Dates are returned as YYYY-MM-DD HH:mm:ss.

Property	Type	Description
event.id	string	The id of the event. Returns an empty string if not supplied.
event.startDate	string	The new start date of the event.
event.startTime	string	The new start time as HH:mm:ss.
event.endDate	string	The new end date of the event. Returns None for single-day all-day events.
event.endTime	string	The new end time as HH:mm:ss.
event.allDay	bool	Whether the event spans full days.

onEventResized

Triggered when an event is resized and the final size differs from the original. Dates are returned as YYYY-MM-DD HH:mm:ss.

Property	Type	Description
event.id	string	The id of the event. Returns an empty string if not supplied.
event.startDate	string	The start date of the event.
event.startTime	string	The start time as HH:mm:ss.
event.endDate	string	The end date of the event. Returns None for single-day all-day events.
event.endTime	string	The end time as HH:mm:ss. Returns None for single-day all-day events.
event.allDay	bool	Whether the event spans full days.

onSelectionMade

Triggered when selectable is true and a range of dates has been selected. Dates are returned as YYYY-MM-DD HH:mm:ss.

Property	Type	Description
event.selectStart	string	The start of the selection.
event.selectEnd	string	The end of the selection.
event.altKey	boolean	Whether the Alt key was held when the event fired.
event.shiftKey	boolean	Whether the Shift key was held when the event fired.

onEventCreated

Triggered when the built-in Create Event Popup is submitted. Dates are returned as YYYY-MM-DD HH:mm:ss.

Property	Type	Description
event.title	string	The title entered for the new event.
event.startDate	string	The start date of the new event.
event.startTime	string	The start time as HH:mm:ss.
event.endDate	string	The end date of the new event.
event.endTime	string	The end time as HH:mm:ss.
event.eventColor	string	The event background and border color as a hex code.
event.eventTextColor	string	The event text color as a hex code.
event.allDay	bool	Whether the event spans full days.

onEventEdited

Triggered when the built-in Event Popup's edit mode has been used and submitted. Dates are returned as YYYY-MM-DD HH:mm:ss.

Property	Type	Description
event.title	string	The updated title of the event.
event.startDate	string	The updated start date.
event.startTime	string	The updated start time as HH:mm:ss.
event.endDate	string	The updated end date.
event.endTime	string	The updated end time as HH:mm:ss.
event.eventColor	string	The event background and border color as a hex code.
event.eventTextColor	string	The event text color as a hex code.
event.allDay	bool	Whether the event spans full days.

onEventDeleted

Triggered when the delete button is pressed in the built-in Event Popup.

Property	Type	Description
event.id	string	The id of the event to delete. Returns an empty string if not supplied.

onEventReceived

Triggered when an event is dragged from an External Event Box and dropped onto the calendar.

Property	Type	Description
event.title	string	The title of the received event.
event.startDate	string	The start date and time of the event.
event.startTime	string	The start time of the event.
event.endDate	string	The end date and time of the event.
event.endTime	string	The end time of the event.
event.allDay	boolean	Whether the event is an all-day event.
event.eventColor	string	The background and border color of the event.
event.eventTextColor	string	The text color of the event.

Component Images

Light Mode

Dark Mode

Event Popup