1"use strict";(globalThis.webpackChunkkanoa_software=globalThis.webpackChunkkanoa_software||[]).push([[8993],{4505(e,t,r){r.r(t),r.d(t,{assets:()=>h,contentTitle:()=>l,default:()=>a,frontMatter:()=>i,metadata:()=>d,toc:()=>c});const d=JSON.parse('{"id":"components/kanoa/calendar","title":"Calendar","description":"The Calendar component is an implementation of FullCalendar (version 7) 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. Resource views (Columns and Timeline) let you lay events out per resource, such as a line, machine, or person.","source":"@site/docs/components/kanoa/calendar.md","sourceDirName":"components/kanoa","slug":"/components/kanoa/calendar","permalink":"/components/kanoa/calendar","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":2,"frontMatter":{"id":"calendar","title":"Calendar","sidebar_position":2,"hide_table_of_contents":true},"sidebar":"tutorialSidebar","previous":{"title":"Breadcrumb","permalink":"/components/kanoa/breadcrumb"},"next":{"title":"External Event Box","permalink":"/components/kanoa/externalEventBox"}}');var s=r(74848),n=r(28453);const i={id:"calendar",title:"Calendar",sidebar_position:2,hide_table_of_contents:!0},l=void 0,h={},c=[{value:"Properties",id:"properties",level:2},{value:"Event Object Properties",id:"event-object-properties",level:3},{value:"Timeline Properties",id:"timeline-properties",level:3},{value:"Resource Object Properties",id:"resource-object-properties",level:4},{value:"Resource Column Properties",id:"resource-column-properties",level:4},{value:"Event Pop Properties",id:"event-pop-properties",level:3},{value:"Event Display Properties",id:"event-display-properties",level:3},{value:"Current Calendar Date Properties",id:"current-calendar-date-properties",level:3},{value:"Date and Time Display Properties",id:"date-and-time-display-properties",level:3},{value:"Toolbar Properties",id:"toolbar-properties",level:3},{value:"Mode and Granularity Elements",id:"mode-and-granularity-elements",level:3},{value:"Toolbar Button Properties",id:"toolbar-button-properties",level:3},{value:"Popover Properties",id:"popover-properties",level:3},{value:"View Properties",id:"view-properties",level:3},{value:"Theme Properties",id:"theme-properties",level:3},{value:"theme.borders",id:"themeborders",level:4},{value:"theme.palette",id:"themepalette",level:4},{value:"theme.classes",id:"themeclasses",level:4},{value:"Locale Settings",id:"locale-settings",level:3},{value:"Component Events",id:"component-events",level:2},{value:"onDateClick",id:"ondateclick",level:3},{value:"onEventClick",id:"oneventclick",level:3},{value:"onEventDropped",id:"oneventdropped",level:3},{value:"onEventResized",id:"oneventresized",level:3},{value:"onSelectionMade",id:"onselectionmade",level:3},{value:"onEventCreated",id:"oneventcreated",level:3},{value:"onEventEdited",id:"oneventedited",level:3},{value:"onEventDeleted",id:"oneventdeleted",level:3},{value:"onEventReceived",id:"oneventreceived",level:3},{value:"onDatesRender",id:"ondatesrender",level:3},{value:"onWindowResize",id:"onwindowresize",level:3}];function o(e){const t={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,n.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["The Calendar component is an implementation of ",(0,s.jsx)(t.a,{href:"https://fullcalendar.io/docs/v7",children:"FullCalendar"})," (version 7) 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. Resource views (Columns and Timeline) let you lay events out per resource, such as a line, machine, or person."]}),"\n",(0,s.jsxs)(t.p,{children:["Two optional built-in popups are available but disabled by default. The ",(0,s.jsx)(t.strong,{children:"Event Popup"})," appears when an event is clicked and can optionally allow editing. The ",(0,s.jsx)(t.strong,{children:"Create Event Popup"})," appears when a date or time block is clicked. Neither popup modifies the calendar directly \u2014 all changes are surfaced through component events for handling in scripts."]}),"\n",(0,s.jsxs)(t.p,{children:["The Calendar component works alongside the ",(0,s.jsx)(t.a,{href:"/components/kanoa/externalEventBox",children:"Exter
1nal Event Box"})," component to support drag-and-drop scheduling from an external list of events onto the calendar."]}),"\n",(0,s.jsxs)("div",{style:{display:"flex",gap:"16px",flexWrap:"wrap",justifyContent:"center"},children:[(0,s.jsx)("div",{children:(0,s.jsx)("img",{src:"/img/components/calendar-light.png",alt:"Calendar light mode",width:"720"})}),(0,s.jsx)("div",{children:(0,s.jsx)("img",{src:"/img/components/calendar-dark.png",alt:"Calendar dark mode",width:"720"})})]}),"\n",(0,s.jsx)(t.h2,{id:"properties",children:"Properties"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Name"}),(0,s.jsx)(t.th,{children:"Description"}),(0,s.jsx)(t.th,{children:"Property Type"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"editable"}),(0,s.jsx)(t.td,{children:"Allows events to be dragged to new times and resized."}),(0,s.jsx)(t.td,{children:"boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"selectable"}),(0,s.jsx)(t.td,{children:"Allows selecting a single date or a range of dates."}),(0,s.jsx)(t.td,{children:"boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"selectedDate"}),(0,s.jsxs)(t.td,{children:["When ",(0,s.jsx)(t.code,{children:"selectable"})," is true and a selection is made, reflects the current selection with ",(0,s.jsx)(t.code,{children:"start"})," and ",(0,s.jsx)(t.code,{children:"end"})," string properties."]}),(0,s.jsx)(t.td,{children:"object"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"selectedEvents"}),(0,s.jsxs)(t.td,{children:["The currently selected events. A single click selects an event (replacing the current selection); Ctrl/Cmd or Shift-click toggles individual events. Can also be written to programmatically to drive the selection. Each item contains ",(0,s.jsx)(t.code,{children:"id"}),", ",(0,s.jsx)(t.code,{children:"title"}),", ",(0,s.jsx)(t.code,{children:"start"}),", ",(0,s.jsx)(t.code,{children:"end"}),", ",(0,s.jsx)(t.code,{children:"allDay"}),", ",(0,s.jsx)(t.code,{children:"resourceId"}),", ",(0,s.jsx)(t.code,{children:"resourceIds"}),", ",(0,s.jsx)(t.code,{children:"backgroundColor"}),", ",(0,s.jsx)(t.code,{children:"textColor"}),", and ",(0,s.jsx)(t.code,{children:"extendedProps"}),"."]}),(0,s.jsx)(t.td,{children:"array"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"timeline"}),(0,s.jsxs)(t.td,{children:["Resource and layout configuration for the Columns and Timeline views. See ",(0,s.jsx)(t.a,{href:"#timeline-properties",children:"Timeline Properties"})," below."]}),(0,s.jsx)(t.td,{children:"object"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"defaultView"}),(0,s.jsxs)(t.td,{children:["The initial calendar view displayed when the component loads. Default is ",(0,s.jsx)(t.code,{children:"dayGridMonth"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"currentView"}),(0,s.jsxs)(t.td,{children:["The currently displayed view. Writing to this property will change the view. If an invalid view name is written, the component will reset to the current view. Valid options are: ",(0,s.jsx)(t.code,{children:"dayGridMonth"}),", ",(0,s.jsx)(t.code,{children:"dayGridWeek"}),", ",(0,s.jsx)(t.code,{children:"dayGridDay"}),", ",(0,s.jsx)(t.code,{children:"dayGridYear"}),", ",(0,s.jsx)(t.code,{children:"timeGridWeek"}),", ",(0,s.jsx)(t.code,{children:"timeGridDay"}),", ",(0,s.jsx)(t.code,{children:"listYear"}),", ",(0,s.jsx)(t.code,{children:"listMonth"}),", ",(0,s.jsx)(t.code,{children:"listWeek"}),", ",(0,s.jsx)(t.code,{children:"listDay"}),", ",(0,s.jsx)(t.code,{children:"multiMonthYear"}),", ",(0,s.jsx)(t.code,{children:"resourceTimelineDay"}),", ",(0,s.jsx)(t.code,{children:"resourceTimelineWeek"}),", ",(0,s.jsx)(t.code,{children:"resourceTimelineMonth"}),", ",(0,s.jsx)(t.code,{children:"resourceTimeGridDay"}),", ",(0,s.jsx)(t.code,{children:"resourceTimeGridWeek"}),", ",(0,s.jsx)(t.code,{children:"resourceDayGridMonth"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"events"}),(0,s.jsxs)(t.td,{children:["An array of event objects to display on the calendar. See ",(0,s.jsx)(t.a,{href:"#event-object-properties",children:"Event Object Properties"})," below."]}),(0,s.jsx)(t.td,{children:"array"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"longPressDelay"}),(0,s.jsxs)(t.td,{children:["For touch devices, the time in milliseconds the user must hold down before an event becomes draggable or a date becomes selectable. Default is ",(0,s.jsx)(t.code,{children:"1000"}),"."]}),(0,s.jsx)(t.td,{children:"integer"})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"event-object-properties",children:"Event Object Properties"}),"\n",(0,s.jsxs)(t.p,{children:["Each item in the ",(0,s.jsx)(t.code,{children:"events"}
1)," array supports the following properties. Only ",(0,s.jsx)(t.code,{children:"start"})," is required."]}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Name"}),(0,s.jsx)(t.th,{children:"Description"}),(0,s.jsx)(t.th,{children:"Property Type"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"id"}),(0,s.jsx)(t.td,{children:"A unique identifier for the event. Defaults to an empty string if not provided."}),(0,s.jsx)(t.td,{children:"string or number"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"groupId"}),(0,s.jsxs)(t.td,{children:["Events sharing the same ",(0,s.jsx)(t.code,{children:"groupId"})," will be dragged and resized together."]}),(0,s.jsx)(t.td,{children:"string or number"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"title"}),(0,s.jsx)(t.td,{children:"The text displayed on the event."}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"start"}),(0,s.jsxs)(t.td,{children:[(0,s.jsx)(t.strong,{children:"Required."})," When the event starts, as a parseable date/time string. If no ",(0,s.jsx)(t.code,{children:"end"})," is defined, the event defaults to all-day on the start date. If ",(0,s.jsx)(t.code,{children:"start"})," includes a time and ",(0,s.jsx)(t.code,{children:"end"})," is omitted, the event duration defaults to one hour."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"end"}),(0,s.jsxs)(t.td,{children:["When the event ends. This value is ",(0,s.jsx)(t.strong,{children:"exclusive"})," \u2014 an all-day event ending on ",(0,s.jsx)(t.code,{children:"2020-09-03"})," spans through ",(0,s.jsx)(t.code,{children:"2020-09-02"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"allDay"}),(0,s.jsxs)(t.td,{children:["When ",(0,s.jsx)(t.code,{children:"true"}),", the event ignores any time portion of ",(0,s.jsx)(t.code,{children:"start"})," and ",(0,s.jsx)(t.code,{children:"end"}),"."]}),(0,s.jsx)(t.td,{children:"boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"color"}),(0,s.jsx)(t.td,{children:"The background and border color of the event."}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"contrastColor"}),(0,s.jsxs)(t.td,{children:["The text color of the event (foreground color that contrasts with ",(0,s.jsx)(t.code,{children:"color"}),")."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"display"}),(0,s.jsxs)(t.td,{children:["Overrides the display style for this individual event. Same options as ",(0,s.jsx)(t.code,{children:"eventDisplay.eventDisplayType"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"editable"}),(0,s.jsxs)(t.td,{children:["Overrides the component-level ",(0,s.jsx)(t.code,{children:"editable"})," setting for this specific event."]}),(0,s.jsx)(t.td,{children:"boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"startEditable"}),(0,s.jsx)(t.td,{children:"Whether the start date/time of this event can be changed by dragging."}),(0,s.jsx)(t.td,{children:"boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"durationEditable"}),(0,s.jsx)(t.td,{children:"Whether the duration of this event can be changed by resizing."}),(0,s.jsx)(t.td,{children:"boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"resourceId"}),(0,s.jsxs)(t.td,{children:["The id of the resource this event belongs to. Used by the Columns and Timeline views. See ",(0,s.jsx)(t.a,{href:"#timeline-properties",children:"Timeline Properties"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"resourceIds"}),(0,s.jsx)(t.td,{children:"An array of resource ids, for events that belong to more than one resource."}),(0,s.jsx)(t.td,{children:"array"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"resourceEditable"}),(0,s.jsx)(t.td,{children:"Whether the event can be dragged between resources in the Columns and Timeline views."}),(0,s.jsx)(t.td,{children:"boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"overlap"}),(0,s.jsx)(t.td,{children:"Whether this event is allowed to overlap other events when being dragged or resized."}),(0,s.jsx)(t.td,{children:"boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"constraint"}),(0,s.jsxs)(t.td,{children:["Limits where this event can be dragged or resized. Accepts a constraint object with ",(0,s.jsx)(t.code,{children:"start"}),"/",(0,s.jsx)(t.code,{children:"end"}),"/",(0,s.jsx)(t.code,{children:"daysOfWeek"}),", a group ID string to constrain within matching events, or ",(0,s.jsx)(t.code,{children:"'businessHours'"})," to restrict to business hours."]}),(0,s.jsx)(t.td,{children:"object or string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"url"}),(0,s.jsx)(t.td,{children:"A URL that will be navigated to when this event is clicked."}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"className"}),(0,s.jsx)(t.td,{children:"One or more CSS class names (space-separated) to attach to the rendered event element."}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"extendedProps"}),(0,s.jsx)(t.td,{children:"A freeform object for any additional custom properties. Values are accessible in component event handlers."}),(0,s.jsx)(t.td,{children:"object"})]})]})]}),"\n",(0,s.jsx)(t.p,{children:"Example event object:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-json",children:'{\n "id": "1",\n "title": "Production Run A",\n "start": "2026-06-23T09:00:00",\n "end": "2026-06-23T11:00:00",\n "color": "#d40000",\n "contrastColor": "#ffffff"\n}\n'})}),"\n",(0,s.jsx)(t.h3,{id:"timeline-properties",children:"Timeline Properties"}),"\n",(0,s.jsxs)(t.p,{children:["Configures the resource-aware views: the Timeline views (",(0,s.jsx)(t.code,{children:"resourceTimeline*"}),"), where resources are rows, and the Columns views (",(0,s.jsx)(t.code,{children:"resourceTimeGrid*"}),", ",(0,s.jsx)(t.code,{children:"resourceDayGridMonth"}),"), where resources are columns. These properties are only visible in the designer while one of those views is the current view. Events are assigned to a resource through their ",(0,s.jsx)(t.code,{children:"resourceId"})," or ",(0,s.jsx)(t.code,{children:"resourceIds"}),"."]}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Name"}),(0,s.jsx)(t.th,{children:"Description"}),(0,s.jsx)(t.th,{children:"Property Type"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"timeline.resources"}),(0,s.jsxs)(t.td,{children:["The resources to display, as rows in the Timeline views or columns in the Columns views. See ",(0,s.jsx)(t.a,{href:"#resource-object-properties",children:"Resource Object Properties"})," below."]}),(0,s.jsx)(t.td,{children:"array"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"timeline.resourceColumnsWidth"}),(0,s.jsxs)(t.td,{children:["The width of the resource name area. Only affects the Timeline views. Default is ",(0,s.jsx)(t.code,{children:"20%"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"timeline.resourceColumns"}),(0,s.jsxs)(t.td,{children:["Column definitions for the resource area. Only affects the Timeline views. When empty, a single ",(0,s.jsx)(t.code,{children:"title"})," column is shown. See ",(0,s.jsx)(t.a,{href:"#resource-column-properties",children:"Resource Column Properties"})," below."]}),(0,s.jsx)(t.td,{children:"array"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"timeline.rowHeight"}),(0,s.jsxs)(t.td,{children:["The height of each resource row as a CSS length. Only affects the Timeline views. Default is ",(0,s.jsx)(t.code,{children:"44px"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]})]})]}),"\n",(0,s.jsx)(t.h4,{id:"resource-object-properties",children:"Resource Object Properties"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Name"}),(0,s.jsx)(t.th,{children:"Description"}),(0,s.jsx)(t.th,{children:"Property Type"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"id"}),(0,s.jsxs)(t.td,{children:["A stable identifier for the resource. Events reference this through ",(0,s.jsx)(t.code,{children:"resourceId"})," or ",(0,s.jsx)(t.code,{children:"resourceIds"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"title"}),(0,s.jsx)(t.td,{children:"The display text for the resource."}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"eventColor"}),(0,s.jsx)(t.td,{children:"The default background color for events assigned to this resource, unless overridden by the event."}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"eventTextColor"}),(0,s.jsx)(t.td,{children:"The default text color for events assigned to this resource, unless overridden by the event."}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"extendedProps"}),(0,s.jsxs)(t.td,{children:["A freeform object carried on the resource. Keys can be displayed through a resource column's ",(0,s.jsx)(t.code,{children:"field"}),"."]}),(0,s.jsx)(t.td,{children:"object"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"children"}),(0,s.jsx)(t.td,{children:"Nested sub-resources, displayed indented beneath this resource."}),(0,s.jsx)(t.td,{children:"array"})]})]})]}),"\n",(0,s.jsx)(t.h4,{id:"resource-column-properties",children:"Resource Column Properties"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Name"}),(0,s.jsx)(t.th,{children:"Description"}),(0,s.jsx)(t.th,{children:"Property Type"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"field"}),(0,s.jsxs)(t.td,{children:["The resource field to display, e.g. ",(0,s.jsx)(t.code,{children:"title"})," or an ",(0,s.jsx)(t.code,{children:"extendedProps"})," key. Default is ",(0,s.jsx)(t.code,{children:"title"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"headerContent"}),(0,s.jsx)(t.td,{children:"The column header text."}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"width"}),(0,s.jsxs)(t.td,{children:["The column width, e.g. ",(0,s.jsx)(t.code,{children:"120px"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"event-pop-properties",children:"Event Pop Properties"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Name"}),(0,s.jsx)(t.th,{children:"Description"}),(0,s.jsx)(t.th,{children:"Property Type"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"useEventPop"}),(0,s.jsx)(t.td,{children:"Whether the built-in popup for showing event details will appear when an event is clicked."}),(0,s.jsx)(t.td,{children:"boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"canEditEventOnPop"}),(0,s.jsx)(t.td,{children:"Whether the edit button appears on the built-in event popup."}),(0,s.jsx)(t.td,{children:"boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"canExportEventOnPop"}),(0,s.jsx)(t.td,{children:"Whether the event can be exported as an iCal object from the popup."}),(0,s.jsx)(t.td,{children:"boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"useCreateEventPop"}),(0,s.jsx)(t.td,{children:"Whether the built-in popup for creating events appears when a date or time block is clicked."}),(0,s.jsx)(t.td,{children:"boolean"})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"event-display-properties",children:"Event Display Properties"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Name"}),(0,s.jsx)(t.th,{children:"Description"}),(0,s.jsx)(t.th,{children:"Property Type"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"eventDisplayType"}),(0,s.jsxs)(t.td,{children:["Controls the default rendering style for all events. Options: ",(0,s.jsx)(t.code,{children:"auto"})," (solid block for all-day/multi-day, dot for timed events in daygrid), ",(0,s.jsx)(t.code,{children:"block"}
1)," (always solid block in daygrid), ",(0,s.jsx)(t.code,{children:"list-item"})," (always dot in daygrid), ",(0,s.jsx)(t.code,{children:"background"})," (highlights background), ",(0,s.jsx)(t.code,{children:"inverse-background"})," (highlights inverse background), ",(0,s.jsx)(t.code,{children:"none"})," (not rendered). Default colors are set via ",(0,s.jsx)(t.code,{children:"theme.palette"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"displayEventTime"}),(0,s.jsx)(t.td,{children:"Whether to show the start time on timed (non-all-day) events."}),(0,s.jsx)(t.td,{children:"boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"displayEventEnd"}),(0,s.jsx)(t.td,{children:"Whether to show the end time on events."}),(0,s.jsx)(t.td,{children:"boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"nextDayThreshold"}),(0,s.jsxs)(t.td,{children:["The minimum time that must pass into a day for a spanning event to be rendered on that day in daygrid view. Format: ",(0,s.jsx)(t.code,{children:"HH:mm:ss"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"eventOrder"}),(0,s.jsxs)(t.td,{children:["Determines display order when events occupy the same space. Uses event property names; prefix with ",(0,s.jsx)(t.code,{children:"-"})," for descending order. Default is ",(0,s.jsx)(t.code,{children:"start,-duration,allDay,title"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"slotEventOverlap"}),(0,s.jsx)(t.td,{children:"Whether timed events in TimeGrid view visually overlap."}),(0,s.jsx)(t.td,{children:"boolean"})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"current-calendar-date-properties",children:"Current Calendar Date Properties"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Name"}),(0,s.jsx)(t.th,{children:"Description"}),(0,s.jsx)(t.th,{children:"Property Type"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"date"}),(0,s.jsxs)(t.td,{children:["An ISO 8601 string (",(0,s.jsx)(t.code,{children:"YYYY-MM-DD"}),") of the current displayed date. Writable when ",(0,s.jsx)(t.code,{children:"dateIsReadOnly"})," is ",(0,s.jsx)(t.code,{children:"false"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"dateIsReadOnly"}),(0,s.jsxs)(t.td,{children:["When ",(0,s.jsx)(t.code,{children:"false"}),", writing to ",(0,s.jsx)(t.code,{children:"date"})," changes the displayed date."]}),(0,s.jsx)(t.td,{children:"boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"week"}),(0,s.jsx)(t.td,{children:"The ISO week number of the year (readonly)."}),(0,s.jsx)(t.td,{children:"number"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"displayDateStart"}),(0,s.jsx)(t.td,{children:"The first visible date on the display. In month view this may not be the first of the month (readonly)."}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"displayDateEnd"}),(0,s.jsx)(t.td,{children:"The last visible date on the display. This value is exclusive (readonly)."}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"currentDateStart"}),(0,s.jsx)(t.td,{children:"The first date of the range the view represents (readonly)."}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"currentDateEnd"}),(0,s.jsx)(t.td,{children:"The last date of the range the view represents. This value is exclusive (readonly)."}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"title"}),(0,s.jsx)(t.td,{children:"The title string currently generated by the calendar (readonly)."}),(0,s.jsx)(t.td,{children:"string"})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"date-and-time-display-properties",children:"Date and Time Display Properties"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Name"}),(0,s.jsx)(t.th,{children:"Description"}),(0,s.jsx)(t.th,{children:"Property Type"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"firstDay"}),(0,s.jsxs)(t.td,{children:["The first day of the week in day grid views. ",(0,s.jsx)(t.code,{children:"0"})," = Sunday, ",(0,s.jsx)(t.code,{children:"1"})," = Monday, etc."]}),(0,s.jsx)(t.td,{children:"number"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"minTime"}),(0,s.jsxs)(t.td,{children:["The earliest time displayed in time grid views. Format: ",(0,s.jsx)(t.code,{children:"HH:mm:ss"}),". Default is ",(0,s.jsx)(t.code,{children:"00:00:00"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"maxTime"}),(0,s.jsxs)(t.td,{children:["The latest time displayed in time grid views. Format: ",(0,s.jsx)(t.code,{children:"HH:mm:ss"}),". Default is ",(0,s.jsx)(t.code,{children:"24:00:00"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"navLinks"}),(0,s.jsx)(t.td,{children:"Whether to make parts of the calendar (e.g., date numbers) into links that navigate to related views."}),(0,s.jsx)(t.td,{children:"boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"weekNumbers"}),(0,s.jsx)(t.td,{children:"Whether to display week numbers when possible."}),(0,s.jsx)(t.td,{children:"boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"useISOWeekCalc"}),(0,s.jsx)(t.td,{children:"Whether to use ISO week numbers rather than localized week numbers."}),(0,s.jsx)(t.td,{children:"boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"weekLabel"}),(0,s.jsxs)(t.td,{children:["The label displayed before the week number. Default is ",(0,s.jsx)(t.code,{children:"W"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"nowIndicator"}),(0,s.jsx)(t.td,{children:"Whether to show a line indicating the current time on time grid views."}),(0,s.jsx)(t.td,{children:"boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"slotDuration"}),(0,s.jsxs)(t.td,{children:["The duration of each time slot in t
1ime grid views. Default is ",(0,s.jsx)(t.code,{children:"00:30:00"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"slotLabelInterval"}),(0,s.jsxs)(t.td,{children:["The frequency at which time slot labels are shown. Useful when ",(0,s.jsx)(t.code,{children:"slotDuration"})," is small but you only want labels every hour."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"expandRows"}),(0,s.jsx)(t.td,{children:"Whether rows expand to fill the full height of the view when they don't naturally fill it."}),(0,s.jsx)(t.td,{children:"boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"snapDuration"}),(0,s.jsxs)(t.td,{children:["The time interval at which a dragged event snaps to the time axis. Default is ",(0,s.jsx)(t.code,{children:"00:30:00"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"slotLabelFormat"}),(0,s.jsxs)(t.td,{children:["The format of the time labels in time grid views, as a Date Format object. See ",(0,s.jsx)(t.a,{href:"https://fullcalendar.io/docs/date-formatting",children:"FullCalendar date formatting"}),"."]}),(0,s.jsx)(t.td,{children:"object"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"allDayText"}),(0,s.jsxs)(t.td,{children:["The text shown on the all-day slot in time grid views. Default is ",(0,s.jsx)(t.code,{children:"All day"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"weekends"}),(0,s.jsx)(t.td,{children:"Whether to display weekends on the calendar."}),(0,s.jsx)(t.td,{children:"boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"hiddenDays"}),(0,s.jsxs)(t.td,{children:["An array of integers representing days to hide. Days are indexed from ",(0,s.jsx)(t.code,{children:"0"})," (Sunday) to ",(0,s.jsx)(t.code,{children:"6"})," (Saturday)."]}),(0,s.jsx)(t.td,{children:"array"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"businessHours"}),(0,s.jsxs)(t.td,{children:["Highlights business hours on the calendar. Can be an empty object ",(0,s.jsx)(t.code,{children:"{}"})," to disable, or an object/array of objects with ",(0,s.jsx)(t.code,{children:"daysOfWeek"}),", ",(0,s.jsx)(t.code,{children:"startTime"}),", and ",(0,s.jsx)(t.code,{children:"endTime"}),". Example: ",(0,s.jsx)(t.code,{children:'{"daysOfWeek": [1,2,3,4,5], "startTime": "09:00", "endTime": "17:00"}'}),"."]}),(0,s.jsx)(t.td,{children:"object"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"timeZone"}),(0,s.jsxs)(t.td,{children:["The time zone of the calendar. Options: ",(0,s.jsx)(t.code,{children:"local"})," (browser time zone), ",(0,s.jsx)(t.code,{children:"gateway"})," (pulled from the Perspective session), ",(0,s.jsx)(t.code,{children:"custom"})," (uses ",(0,s.jsx)(t.code,{children:"local"})," but allows a custom ",(0,s.jsx)(t.code,{children:"now"}),"), or a time zone identifier string such as ",(0,s.jsx)(t.code,{children:"America/Ne
1w_York"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"now"}),(0,s.jsxs)(t.td,{children:["When ",(0,s.jsx)(t.code,{children:"timeZone"})," is set to ",(0,s.jsx)(t.code,{children:"custom"}),", sets the current time as an ISO formatted date string."]}),(0,s.jsx)(t.td,{children:"string"})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"toolbar-properties",children:"Toolbar Properties"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Name"}),(0,s.jsx)(t.th,{children:"Description"}),(0,s.jsx)(t.th,{children:"Property Type"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"header"}),(0,s.jsxs)(t.td,{children:["Configures the header toolbar with ",(0,s.jsx)(t.code,{children:"left"}),", ",(0,s.jsx)(t.code,{children:"center"}),", and ",(0,s.jsx)(t.code,{children:"right"})," string properties. Each is a comma-separated list of toolbar elements. Set to ",(0,s.jsx)(t.code,{children:"false"})," to remove the header entirely. Defaults are ",(0,s.jsx)(t.code,{children:"left"}),": ",(0,s.jsx)(t.code,{children:"modeList,modeGrid,modeColumns,modeTimeline granularityMenu"}),", ",(0,s.jsx)(t.code,{children:"center"}),": ",(0,s.jsx)(t.code,{children:"title"}),", ",(0,s.jsx)(t.code,{children:"right"}),": ",(0,s.jsx)(t.code,{children:"prev,today,next"}),". Available elements: ",(0,s.jsx)(t.code,{children:"title"}),", ",(0,s.jsx)(t.code,{children:"prev"}),", ",(0,s.jsx)(t.code,{children:"next"}),", ",(0,s.jsx)(t.code,{children:"prevYear"}),", ",(0,s.jsx)(t.code,{children:"nextYear"}),", ",(0,s.jsx)(t.code,{children:"today"}),", any valid view name, or any of the ",(0,s.jsx)(t.a,{href:"#mode-and-granularity-elements",children:"mode and granularity elements"})," below. Spaces between commas add gaps between buttons."]}),(0,s.jsx)(t.td,{children:"object or boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"footer"}),(0,s.jsxs)(t.td,{children:["Same structure as ",(0,s.jsx)(t.code,{children:"header"}),". Configures the footer toolbar. Defaults to ",(0,s.jsx)(t.code,{children:"false"})," (hidden)."]}),(0,s.jsx)(t.td,{children:"object or boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"buttons"}),(0,s.jsxs)(t.td,{children:["An object with a key per toolbar button name, each configuring that button's appearance and behavior. See ",(0,s.jsx)(t.a,{href:"#toolbar-button-properties",children:"Toolbar Button Properties"})," below. Configurable buttons are: ",(0,s.jsx)(t.code,{children:"today"}),", ",(0,s.jsx)(t.code,{children:"prev"}),", ",(0,s.jsx)(t.code,{children:"next"}),", ",(0,s.jsx)(t.code,{children:"prevYear"}),", ",(0,s.jsx)(t.code,{children:"nextYear"}),", ",(0,s.jsx)(t.code,{children:"dayGridYear"}),", ",(0,s.jsx)(t.code,{children:"dayGridMonth"}),", ",(0,s.jsx)(t.code,{children:"dayGridWeek"}),", ",(0,s.jsx)(t.code,{children:"timeGridWeek"}),", ",(0,s.jsx)(t.code,{children:"timeGridDay"}),", ",(0,s.jsx)(t.code,{children:"multiMonthYear"}),", ",(0,s.jsx)(t.code,{children:"listYear"}),", ",(0,s.jsx)(t.code,{children:"listMonth"}),", ",(0,s.jsx)(t.code,{children:"listWeek"}),", ",(0,s.jsx)(t.code,{children:"listDay"}),"."]}),(0,s.jsx)(t.td,{children:"object"})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"mode-and-granularity-elements",children:"Mode and Granularity Elements"}),"\n",(0,s.jsxs)(t.p,{children:["The default header uses a two-part view switcher. A ",(0,s.jsx)(t.strong,{children:"mode"})," button selects the family of views, and the ",(0,s.jsx)(t.strong,{children:"granularity"})," menu selects Day, Week, or Month within it. The calendar combines the two to pick the actual view, so changing the mode keeps the current granularity and vice versa."]}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Element"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"modeList"}),(0,s.jsxs)(t.td,{children:["Switches to the list views (",(0,s.jsx)(t.code,{children:"listDay"}),", ",(0,s.jsx)(t.code,{children:"listWeek"}),", ",(0,s.jsx)(t.code,{children:"listMonth"}),"). Default label is ",(0,s.jsx)(t.code,{children:"List"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"modeGrid"}),(0,s.jsxs)(t.td,{children:["Switches to the standard calendar views (",(0,s.jsx)(t.code,{children:"timeGridDay"}),", ",(0,s.jsx)(t.code,{children:"timeGridWeek"}),", ",(0,s.jsx)(t.code,{children:"dayGridMonth"}),"). Default label is ",(0,s.jsx)(t.code,{children:"Calendar"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"modeColumns"}),(0,s.jsxs)(t.td,{children:["Switches to the vertical resource views with resources as columns (",(0,s.jsx)(t.code,{children:"resourceTimeGridDay"}),", ",(0,s.jsx)(t.code,{children:"resourceTimeGridWeek"}),", ",(0,s.jsx)(t.code,{children:"resourceDayGridMonth"}),"). Default label is ",(0,s.jsx)(t.code,{children:"Columns"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"modeTimeline"}),(0,s.jsxs)(t.td,{children:["Switches to the horizontal resource views with resources as rows (",(0,s.jsx)(t.code,{children:"resourceTimelineDay"}),", ",(0,s.jsx)(t.code,{children:"resourceTimelineWeek"}),", ",(0,s.jsx)(t.code,{children:"resourceTimelineMonth"}),"). Default label is ",(0,s.jsx)(t.code,{children:"Timeline"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"granularityMenu"}),(0,s.jsx)(t.td,{children:"A popover for choosing Day, Week, or Month at the current mode."})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"toolbar-button-properties",children:"Toolbar Button Properties"}),"\n",(0,s.jsxs)(t.p,{children:["Each button under ",(0,s.jsx)(t.code,{children:"toolbar.buttons"})," supports:"]}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Name"}),(0,s.jsx)(t.th,{children:"Description"}),(0,s.jsx)(t.th,{children:"Property Type"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"text"}),(0,s.jsx)(t.td,{children:"The display label for the button."}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"hint"}),(0,s.jsx)(t.td,{children:"Tooltip text shown on hover."}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"className"}),(0,s.jsxs)(t.td,{children:["A CSS class name to apply to the button. The ",(0,s.jsx)(t.code,{children:"psc-"}
1)," prefix is applied automatically \u2014 enter only the suffix (e.g., enter ",(0,s.jsx)(t.code,{children:"my-button"}),", not ",(0,s.jsx)(t.code,{children:"psc-my-button"}),")."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"isPrimary"}),(0,s.jsxs)(t.td,{children:["When ",(0,s.jsx)(t.code,{children:"true"}),", renders the button with primary styling."]}),(0,s.jsx)(t.td,{children:"boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"display"}),(0,s.jsxs)(t.td,{children:["Controls how the button content is rendered. Options: ",(0,s.jsx)(t.code,{children:"auto"}),", ",(0,s.jsx)(t.code,{children:"icon"}),", ",(0,s.jsx)(t.code,{children:"text"}),", ",(0,s.jsx)(t.code,{children:"icon-text"}),", ",(0,s.jsx)(t.code,{children:"text-icon"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"popover-properties",children:"Popover Properties"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Name"}),(0,s.jsx)(t.th,{children:"Description"}),(0,s.jsx)(t.th,{children:"Property Type"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"dayMaxEvents"}),(0,s.jsxs)(t.td,{children:["In ",(0,s.jsx)(t.code,{children:"dayGrid"}),' views, the maximum number of events to show per day before a "+more" link appears. Set to ',(0,s.jsx)(t.code,{children:"true"})," to limit based on cell height."]}),(0,s.jsx)(t.td,{children:"number or boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"eventMaxStack"}),(0,s.jsxs)(t.td,{children:["In ",(0,s.jsx)(t.code,{children:"timeGrid"})," views, the maximum number of events that stack left-to-right before overflow is hidden."]}),(0,s.jsx)(t.td,{children:"number"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"dayPopoverFormat"}),(0,s.jsx)(t.td,{children:'The format of the date displayed in the "+more" popover, as a Date Format object.'}),(0,s.jsx)(t.td,{children:"object"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"moreLinkContent"}),(0,s.jsxs)(t.td,{children:['The content of the "+more" link. Default is ',(0,s.jsx)(t.code,{children:"+ more"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"moreLinkClick"}),(0,s.jsxs)(t.td,{children:['The action taken when the "+more" link is clicked. Options: ',(0,s.jsx)(t.code,{children:"popover"}),", ",(0,s.jsx)(t.code,{children:"week"}),", ",(0,s.jsx)(t.code,{children:"day"}),", or any valid view name."]}),(0,s.jsx)(t.td,{children:"string"})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"view-properties",children:"View Properties"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Name"}),(0,s.jsx)(t.th,{children:"Description"}),(0,s.jsx)(t.th,{children:"Property Type"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"day.dayHeaderFormat"}),(0,s.jsx)(t.td,{children:"Date Format object for column headers in day views."}),(0,s.jsx)(t.td,{children:"object"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"day.titleFormat"}),(0,s.jsx)(t.td,{children:"Date Format object for the view title in day views."}),(0,s.jsx)(t.td,{children:"object"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"week.dayHeaderFormat"}),(0,s.jsx)(t.td,{children:"Date Format object for column headers in week views."}),(0,s.jsx)(t.td,{children:"object"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"week.titleFormat"}),(0,s.jsx)(t.td,{children:"Date Format object for the view title in week views."}),(0,s.jsx)(t.td,{children:"object"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"month.dayHeaderFormat"}),(0,s.jsx)(t.td,{children:"Date Format object for column headers in month views."}),(0,s.jsx)(t.td,{children:"object"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"month.titleFormat"}),(0,s.jsx)(t.td,{children:"Date Format object for the view title in month views."}),(0,s.jsx)(t.td,{children:"object"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"month.fixedWeekCount"}),(0,s.jsxs)(t.td,{children:["When ",(0,s.jsx)(t.code,{children:"true"}),", every month view shows the same number of weeks regardless of how many days the month has."]}),(0,s.jsx)(t.td,{children:"boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"month.showNonCurrentDates"}),(0,s.jsxs)(t.td,{children:["When ",(0,s.jsx)(t.code,{children:"true"}),", displays dates from the previous and next months that fill out the grid."]}),(0,s.jsx)(t.td,{children:"boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"dayGrid.dayHeaders"}),(0,s.jsx)(t.td,{children:"Whether to show the column header row in day grid views."}),(0,s.jsx)(t.td,{children:"boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"dayGrid.eventTimeFormat"}),(0,s.jsx)(t.td,{children:"Date Format object for the event time display in day grid views."}),(0,s.jsx)(t.td,{children:"object"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"timeGrid.dayHeaders"}),(0,s.jsx)(t.td,{children:"Whether to show the column header row in time grid views."}),(0,s.jsx)(t.td,{children:"boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"timeGrid.allDaySlot"}),(0,s.jsx)(t.td,{children:"Whether to show the all-day slot at the top of time grid views."}),(0,s.jsx)(t.td,{children:"boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"timeGrid.eventTimeFormat"}),(0,s.jsx)(t.td,{children:"Date Format object for the event time display in time grid views."}),(0,s.jsx)(t.td,{children:"object"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"list.listDayFormat"}),(0,s.jsxs)(t.td,{children:["Date Format object for the day label on the left side of list view day headers. Set to ",(0,s.jsx)(t.code,{children:"false"})," to hide."]}),(0,s.jsx)(t.td,{children:"object or boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"list.listDaySideFormat"}),(0,s.jsxs)(t.td,{children:["Date Format object for the day label on the right side of list view day headers. Set to ",(0,s.jsx)(t.code,{children:"false"})," to hide."]}),(0,s.jsx)(t.td,{children:"object or boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"list.noEventsContent"}),(0,s.jsxs)(t.td,{children:["Message displayed when there are no events to show in the current list view range. Default is ",(0,s.jsx)(t.code,{children:"No events to display"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"list.eventTimeFormat"}),(0,s.jsx)(t.td,{children:"Date Format object for the event time display in list views."}),(0,s.jsx)(t.td,{children:"object"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"multiMonth.multiMonthMaxColumns"}),(0,s.jsxs)(t.td,{children:["The maximum number of month columns in the multi-month year view. Default is ",(0,s.jsx)(t.code,{children:"3"}),"."]}),(0,s.jsx)(t.td,{children:"number"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"multiMonth.singleMonthMinWidth"}),(0,s.jsxs)(t.td,{children:["The minimum pixel width of each month in the multi-month view before columns are reduced. Default is ",(0,s.jsx)(t.code,{children:"350"}),"."]}),(0,s.jsx)(t.td,{children:"number"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"multiMonth.singleMonthTitleFormat"}),(0,s.jsx)(t.td,{children:"Date Format object for the title of each individual month in the multi-month view."}),(0,s.jsx)(t.td,{children:"object"})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"theme-properties",children:"Theme Properties"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"theme"})," property controls the visual appearance of the calendar through border options, a color palette, and CSS class slots."]}),"\n",(0,s.jsx)(t.h4,{id:"themeborders",children:"theme.borders"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Name"}),(0,s.jsx)(t.th,{children:"Description"}),(0,s.jsx)(t.th,{children:"Property Type"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"borderlessTop"}),(0,s.jsx)(t.td,{children:"Removes the top border of the calendar."}),(0,s.jsx)(t.td,{children:"boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"borderlessBottom"}),(0,s.jsx)(t.td,{children:"Removes the bottom border of the calendar."}),(0,s.jsx)(t.td,{children:"boolean"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"borderlessX"}),(0,s.jsx)(t.td,{children:"Removes the left and right borders of the calendar."}),(0,s.jsx)(t.td,{children:"boolean"})]})]})]}),"\n",(0,s.jsx)(t.h4,{id:"themepalette",children:"theme.palette"}),"\n",(0,s.jsxs)(t.p,{children:["Controls the color system for the calendar. Individual event colors set via the event's ",(0,s.jsx)(t.code,{children:"color"})," and ",(0,s.jsx)(t.code,{children:"contrastColor"})," properties take precedence over these defaults."]}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Name"}),(0,s.jsx)(t.th,{children:"Description"}),(0,s.jsx)(t.th,{children:"Property Type"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"primary"}),(0,s.jsx)(t.td,{children:"The default background and border color for events."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"primaryForeground"}),(0,s.jsx)(t.td,{children:"The default text color for events."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"content.backgroundEvent"}),(0,s.jsx)(t.td,{children:"The fill color used for background-display events."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"content.backgroundEventOpacity"}),(0,s.jsxs)(t.td,{children:["The opacity of background-display event fills. Default is ",(0,s.jsx)(t.code,{children:"15%"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"content.backgroundEventForegroundOpacity"}),(0,s.jsxs)(t.td,{children:["The opacity of text/foreground content on background-display events. Default is ",(0,s.jsx)(t.code,{children:"50%"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"content.highlight"}),(0,s.jsx)(t.td,{children:"The color used to highlight a date/time range while it is being selected."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"content.today"}),(0,s.jsx)(t.td,{children:"The background color of the cell representing today's date."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"content.now"}),(0,s.jsx)(t.td,{children:"The color of the current-time indicator line in time grid views."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"content.smallDotWidth"}),(0,s.jsxs)(t.td,{children:["The diameter of the small event dot used in list-item/dot displays. Default is ",(0,s.jsx)(t.code,{children:"8px"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"content.largeDotWidth"}),(0,s.jsxs)(t.td,{children:["The diameter of the large event dot. Default is ",(0,s.jsx)(t.code,{children:"10px"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"button.color"}),(0,s.jsx)(t.td,{children:"The background color of toolbar buttons in their default state."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"button.border"}),(0,s.jsx)(t.td,{children:"The border color of toolbar buttons in their default state."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"button.strong"}),(0,s.jsx)(t.td,{children:"The background color of a toolbar button when hovered or pressed."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"button.strongBorder"}),(0,s.jsx)(t.td,{children:"The border color of a toolbar button when hovered or pressed."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"button.outline"}),(0,s.jsx)(t.td,{children:"The focus outline color of toolbar buttons."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"button.foreground"}),(0,s.jsx)(t.td,{children:"The text/icon color of toolbar buttons."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"neutral.background"}),(0,s.jsx)(t.td,{children:"The main background color of the calendar surface (light mode)."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"neutral.faint"}),(0,s.jsx)(t.td,{children:"A very subtle background tint applied to disabled days and non-business hours (light mode)."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"neutral.muted"}),(0,s.jsx)(t.td,{children:"A muted background used for secondary surfaces like the all-day divider and popover headers (light mode)."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"neutral.strong"}),(0,s.jsx)(t.td,{children:"A stronger neutral fill used for emphasized surfaces (light mode)."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"neutral.foreground"}),(0,s.jsx)(t.td,{children:"The primary text color for day headers and time-axis labels (light mode)."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"neutral.faintForeground"}),(0,s.jsx)(t.td,{children:"A faint text color for de-emphasized content (light mode)."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"neutral.mutedForeground"}),(0,s.jsx)(t.td,{children:"A muted text color for secondary labels like week numbers (light mode)."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"neutral.border"}),(0,s.jsx)(t.td,{children:"The color of grid lines and cell borders (light mode)."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"neutral.strongBorder"}),(0,s.jsx)(t.td,{children:"A stronger border color for emphasized dividers (light mode)."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"dark.background"}),(0,s.jsx)(t.td,{children:"The main background color of the calendar surface (dark mode)."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"dark.faint"}),(0,s.jsx)(t.td,{children:"A very subtle background tint applied to disabled days and non-business hours (dark mode)."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"dark.muted"}),(0,s.jsx)(t.td,{children:"A muted background used for secondary surfaces like the all-day divider and popover headers (dark mode)."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"dark.strong"}),(0,s.jsx)(t.td,{children:"A stronger neutral fill used for emphasized surfaces (dark mode)."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"dark.foreground"}),(0,s.jsx)(t.td,{children:"The primary text color for day headers and time-axis labels (dark mode)."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"dark.faintForeground"}),(0,s.jsx)(t.td,{children:"A faint text color for de-emphasized content (dark mode)."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"dark.mutedForeground"}),(0,s.jsx)(t.td,{children:"A muted text color for secondary labels like week numbers (dark mode)."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"dark.border"}),(0,s.jsx)(t.td,{children:"The color of grid lines and cell borders (d
1ark mode)."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"dark.strongBorder"}),(0,s.jsx)(t.td,{children:"A stronger border color for emphasized dividers (dark mode)."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"dark.backgroundEvent"}),(0,s.jsx)(t.td,{children:"The fill color used for background-display events (dark mode)."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"dark.backgroundEventOpacity"}),(0,s.jsxs)(t.td,{children:["The opacity of background-display event fills (dark mode). Default is ",(0,s.jsx)(t.code,{children:"25%"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"dark.backgroundEventForegroundOpacity"}),(0,s.jsxs)(t.td,{children:["The opacity of text/foreground content on background-display events (dark mode). Default is ",(0,s.jsx)(t.code,{children:"50%"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"dark.highlight"}),(0,s.jsx)(t.td,{children:"The color used to highlight a date/time range while selecting (dark mode)."}),(0,s.jsx)(t.td,{children:"color"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"dark.today"}),(0,s.jsx)(t.td,{children:"The background color of today's date cell (dark mode)."}),(0,s.jsx)(t.td,{children:"color"})]})]})]}),"\n",(0,s.jsx)(t.h4,{id:"themeclasses",children:"theme.classes"}),"\n",(0,s.jsxs)(t.p,{children:["Named CSS class slots for applying Perspective style classes to specific parts of the calendar. Enter the style class name ",(0,s.jsx)(t.strong,{children:"without"})," the ",(0,s.jsx)(t.code,{children:"psc-"})," prefix \u2014 it is applied automatically. For example, to apply a style class defined as ",(0,s.jsx)(t.code,{children:".psc-my-title"}),", enter ",(0,s.jsx)(t.code,{children:"my-title"}),"."]}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Name"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"toolbarTitle"}),(0,s.jsx)(t.td,{children:"Applied to the toolbar title element."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"navLink"}),(0,s.jsxs)(t.td,{children:["Applied to navigation links (e.g., day numbers in month view when ",(0,s.jsx)(t.code,{children:"navLinks"})," is enabled)."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"eventClass"}),(0,s.jsx)(t.td,{children:"Applied to the outer wrapper of each event."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"eventInnerClass"}),(0,s.jsx)(t.td,{children:"Applied to the inner content element of each event."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"listItemEventClass"}),(0,s.jsx)(t.td,{children:"Applied to the outer wrapper of each event in list views."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"listItemEventInnerClass"}),(0,s.jsx)(t.td,{children:"Applied to the inner content element of each event in list views."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"dayHeaderClass"}),(0,s.jsx)(t.td,{children:"Applied to the inner content of each day column header."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"slotLabelClass"}),(0,s.jsx)(t.td,{children:"Applied to the inner content of each time slot label in time grid views."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"allDayClass"}),(0,s.jsx)(t.td,{children:"Applied to the inner content of the all-day slot header in time grid views."})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"locale-settings",children:"Locale Settings"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Name"}),(0,s.jsx)(t.th,{children:"Description"}),(0,s.jsx)(t.th,{children:"Property Type"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"locale"}),(0,s.jsxs)(t.td,{children:["A language code that changes the calendar's displayed text and date formats. Default is ",(0,s.jsx)(t.code,{children:"en"}),"."]}),(0,s.jsx)(t.td,{children:"string"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"dir"}),(0,s.jsxs)(t.td,{children:["Text direction. ",(0,s.jsx)(t.code,{children:"ltr"})," (default), ",(0,s.jsx)(t.code,{children:"rtl"}),", or ",(0,s.jsx)(t.code,{children:"auto"}),". Use ",(0,s.jsx)(t.code,{children:"rtl"})," for right-to-left languages such as Arabic and Hebrew."]}),(0,s.jsx)(t.td,{children:"string"})]})]})]}),"\n",(0,s.jsx)(t.h2,{id:"component-events",children:"Component Events"}),"\n",(0,s.jsx)(t.h3,{id:"ondateclick",children:"onDateClick"}),"\n",(0,s.jsx)(t.p,{children:"Triggered when a date or time block is clicked on the calendar."}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Property"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.date"}),(0,s.jsx)(t.td,{children:"object"}
1),(0,s.jsx)(t.td,{children:"A date object containing the date and time of the block clicked."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.dateStr"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"An ISO 8601 formatted string representing the block clicked."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.resourceId"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsxs)(t.td,{children:["The id of the resource that was clicked. ",(0,s.jsx)(t.code,{children:"null"})," outside the Columns and Timeline views."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.resourceTitle"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsxs)(t.td,{children:["The title of the resource that was clicked. ",(0,s.jsx)(t.code,{children:"null"})," outside the Columns and Timeline views."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.view"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsxs)(t.td,{children:["The name of the view that was active when the block was clicked, e.g. ",(0,s.jsx)(t.code,{children:"resourceTimelineWeek"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.altKey"}),(0,s.jsx)(t.td,{children:"boolean"}),(0,s.jsx)(t.td,{children:"Whether the Alt key was held when the event fired."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.shiftKey"}),(0,s.jsx)(t.td,{children:"boolean"}),(0,s.jsx)(t.td,{children:"Whether the Shift key was held when the event fired."})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"oneventclick",children:"onEventClick"}),"\n",(0,s.jsx)(t.p,{children:"Triggered when an event on the calendar is clicked."}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Property"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.id"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The id of the event."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.title"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The title of the event."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.start"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The start of the event."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.end"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The end of the event."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.allDay"}),(0,s.jsx)(t.td,{children:"bool"}),(0,s.jsx)(t.td,{children:"Whether the event spans full days."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.resourceId"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsxs)(t.td,{children:["The id of the resource row or column that was clicked, falling back to the event's first resource. ",(0,s.jsx)(t.code,{children:"null"})," if the event has no resources."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.resourceIds"}),(0,s.jsx)(t.td,{children:"array"}),(0,s.jsx)(t.td,{children:"The ids of every resource the event is assigned to."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.view"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsxs)(t.td,{children:["The name of the view that was active when the event was clicked, e.g. ",(0,s.jsx)(t.code,{children:"resourceTimelineWeek"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.backgroundColor"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The event's background color."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.textColor"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The event's text color."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.extendedProps"}),(0,s.jsx)(t.td,{children:"object"}),(0,s.jsxs)(t.td,{children:["The event's ",(0,s.jsx)(t.code,{children:"extendedProps"}),", including any custom fields supplied with the event."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.altKey"}),(0,s.jsx)(t.td,{children:"boolean"}),(0,s.jsx)(t.td,{children:"Whether the Alt key was held when the event fired."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.shiftKey"}),(0,s.jsx)(t.td,{children:"boolean"}),(0,s.jsx)(t.td,{children:"Whether the Shift key was held when the event fired."})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"oneventdropped",children:"onEventDropped"}),"\n",(0,s.jsxs)(t.p,{children:["Triggered when an event is moved by dragging. Dates are returned as ",(0,s.jsx)(t.code,{children:"YYYY-MM-DD HH:mm:ss"}),"."]}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Property"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.id"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The id of the event. Returns an empty string if not supplied."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.startDate"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The new start date of the event."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.startTime"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsxs)(t.td,{children:["The new start time as ",(0,s.jsx)(t.code,{children:"HH:mm:ss"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.endD
1ate"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The new end date of the event."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.endTime"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsxs)(t.td,{children:["The new end time as ",(0,s.jsx)(t.code,{children:"HH:mm:ss"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.allDay"}),(0,s.jsx)(t.td,{children:"bool"}),(0,s.jsx)(t.td,{children:"Whether the event spans full days."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.resourceIds"}),(0,s.jsx)(t.td,{children:"array"}),(0,s.jsx)(t.td,{children:"The ids of every resource the event is assigned to after the change."})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"oneventresized",children:"onEventResized"}),"\n",(0,s.jsxs)(t.p,{children:["Triggered when an event is resized and the final size differs from the original. Dates are returned as ",(0,s.jsx)(t.code,{children:"YYYY-MM-DD HH:mm:ss"}),"."]}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Property"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.id"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The id of the event. Returns an empty string if not supplied."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.startDate"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The start date of the event."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.startTime"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsxs)(t.td,{children:["The start time as ",(0,s.jsx)(t.code,{children:"HH:mm:ss"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.endDate"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The end date of the event."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.endTime"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsxs)(t.td,{children:["The end time as ",(0,s.jsx)(t.code,{children:"HH:mm:ss"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.allDay"}),(0,s.jsx)(t.td,{children:"bool"}),(0,s.jsx)(t.td,{children:"Whether the event spans full days."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.resourceIds"}),(0,s.jsx)(t.td,{children:"array"}),(0,s.jsx)(t.td,{children:"The ids of every resource the event is assigned to after the change."})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"onselectionmade",children:"onSelectionMade"}),"\n",(0,s.jsxs)(t.p,{children:["Triggered when ",(0,s.jsx)(t.code,{children:"selectable"})," is ",(0,s.jsx)(t.code,{children:"true"})," and a range of dates has been selected."]}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Property"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.selectStart"}),(0,s.jsx)(t.td,{children:"object"}),(0,s.jsx)(t.td,{children:"The start of the selection."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.selectEnd"}),(0,s.jsx)(t.td,{children:"object"}),(0,s.jsx)(t.td,{children:"The end of the selection."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.altKey"}),(0,s.jsx)(t.td,{children:"boolean"}),(0,s.jsx)(t.td,{children:"Whether the Alt key was held when the event fired."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.shiftKey"}),(0,s.jsx)(t.td,{children:"boolean"}),(0,s.jsx)(t.td,{children:"Whether the Shift key was held when the event fired."})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"oneventcreated",children:"onEventCreated"}),"\n",(0,s.jsxs)(t.p,{children:["Triggered when the built-in Create Event Popup is submitted. Dates are returned as ",(0,s.jsx)(t.code,{children:"YYYY-MM-DD HH:mm:ss"}),"."]}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Property"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.title"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The title entered for the new event."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.startDate"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The start date of the new event."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.startTime"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsxs)(t.td,{children:["The start time as ",(0,s.jsx)(t.code,{children:"HH:mm:ss"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.endD
1ate"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The end date of the new event."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.endTime"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsxs)(t.td,{children:["The end time as ",(0,s.jsx)(t.code,{children:"HH:mm:ss"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.eventColor"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The event color as a hex code."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.eventTextColor"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The event text color as a hex code."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.allDay"}),(0,s.jsx)(t.td,{children:"bool"}),(0,s.jsx)(t.td,{children:"Whether the event spans full days."})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"oneventedited",children:"onEventEdited"}),"\n",(0,s.jsxs)(t.p,{children:["Triggered when the built-in Event Popup's edit mode has been submitted. Dates are returned as ",(0,s.jsx)(t.code,{children:"YYYY-MM-DD HH:mm:ss"}),"."]}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Property"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.title"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The updated title of the event."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.startDate"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The updated start date."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.startTime"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsxs)(t.td,{children:["The updated start time as ",(0,s.jsx)(t.code,{children:"HH:mm:ss"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.endDate"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The updated end date."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.endTime"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsxs)(t.td,{children:["The updated end time as ",(0,s.jsx)(t.code,{children:"HH:mm:ss"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.eventColor"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The event color as a hex code."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.eventTextColor"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The event text color as a hex code."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.allDay"}),(0,s.jsx)(t.td,{children:"bool"}),(0,s.jsx)(t.td,{children:"Whether the event spans full days."})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"oneventdeleted",children:"onEventDeleted"}),"\n",(0,s.jsx)(t.p,{children:"Triggered when the delete button is pressed in the built-in Event Popup."}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Property"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsx)(t.tbody,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.id"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The id of the event to delete. Returns an empty string if not supplied."})]})})]}),"\n",(0,s.jsx)(t.h3,{id:"oneventreceived",children:"onEventReceived"}),"\n",(0,s.jsxs)(t.p,{children:["Triggered when an event is dragged from an ",(0,s.jsx)(t.a,{href:"/components/kanoa/externalEventBox",children:"External Event Box"})," and dropped onto the calendar."]}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Property"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.title"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The title of the received event."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.startDate"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The start date of the event."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.startTime"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The start time of the event."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.endD
1ate"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The end date of the event."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.endTime"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The end time of the event."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.allDay"}),(0,s.jsx)(t.td,{children:"boolean"}),(0,s.jsx)(t.td,{children:"Whether the event is an all-day event."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.eventColor"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The background and border color of the event."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.eventContrastColor"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The text color of the event."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.extendedProps"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"Any additional custom properties on the event."})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"ondatesrender",children:"onDatesRender"}),"\n",(0,s.jsx)(t.p,{children:"Triggered whenever the calendar's visible date range changes (e.g., navigating to a different month or switching views)."}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Property"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.activeStart"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The first visible date. In month view this is often before the 1st of the month."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.activeEnd"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The last visible date. This value is exclusive."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.currentStart"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The first date of the period the view represents (disregards hidden days)."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.currentEnd"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The last date of the period the view represents. This value is exclusive."})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"onwindowresize",children:"onWindowResize"}),"\n",(0,s.jsx)(t.p,{children:"Triggered when the calendar is re-rendered following a window resize."}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Property"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsx)(t.tbody,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"event.view"}),(0,s.jsx)(t.td,{children:"string"}),(0,s.jsx)(t.td,{children:"The current FullCalendar view object."})]})})]})]})}function a(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(o,{...e})}):o(e)}},28453(e,t,r){r.d(t,{R:()=>i,x:()=>l});var d=r(96540);const s={},n=d.createContext(s);function i(e){const t=d.useContext(n);return d.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),d.createElement(n.Provider,{value:t},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.