1(globalThis.webpackChunkmobiscroll_docs=globalThis.webpackChunkmobiscroll_docs||[]).push([[4883],{68799(e,n,s){"use strict";s.r(n),s.d(n,{assets:()=>w,contentTitle:()=>b,default:()=>D,frontMatter:()=>g,metadata:()=>i,toc:()=>y});const i=JSON.parse('{"id":"jquery/eventcalendar/scheduler","title":"Scheduler","description":"Configure the Mobiscroll Eventcalendar Scheduler view in jQuery \u2014 a time-grid layout for daily, weekly, or multi-day slot-based scheduling.","source":"@site/versioned_docs/version-5.35.0/jquery/eventcalendar/scheduler.md","sourceDirName":"jquery/eventcalendar","slug":"/jquery/eventcalendar/scheduler","permalink":"/docs/5.35.0/jquery/eventcalendar/scheduler","draft":false,"unlisted":false,"tags":[],"version":"5.35.0","sidebarPosition":4,"frontMatter":{"sidebar_position":4,"sidebar_label":"Scheduler","displayed_sidebar":"jquerySidebar","description":"Configure the Mobiscroll Eventcalendar Scheduler view in jQuery \u2014 a time-grid layout for daily, weekly, or multi-day slot-based scheduling."},"sidebar":"jquerySidebar","previous":{"title":"Agenda","permalink":"/docs/5.35.0/jquery/eventcalendar/agenda"},"next":{"title":"Timeline","permalink":"/docs/5.35.0/jquery/eventcalendar/timeline"}}');var r=s(74848),l=s(28453);function t(e){const n={a:"a",code:"code",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,l.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h3,{id:"view-schedule-allDay",children:"allDay"}),"\n",(0,r.jsx)(n.p,{children:"boolean"}),"\n",(0,r.jsx)(n.p,{children:"Show or hide the all day events."}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"true"})]}),"\n",(0,r.jsx)(n.h3,{id:"view-schedule-currentTimeIndicator",children:"currentTimeIndicator"}),"\n",(0,r.jsx)(n.p,{children:"boolean"}),"\n",(0,r.jsxs)(n.p,{children:["Show or hide the current time indicator.\nIt defaults to ",(0,r.jsx)(n.code,{children:"true"})," when the resolution is less than a day otherwise defaults to ",(0,r.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"view-schedule-days",children:"days"}),"\n",(0,r.jsx)(n.p,{children:"boolean"}),"\n",(0,r.jsx)(n.p,{children:"Show or hide week days above the schedule grid."}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"true"})]}),"\n",(0,r.jsx)(n.h3,{id:"view-schedule-endDay",children:"endDay"}),"\n",(0,r.jsx)(n.p,{children:"number"}),"\n",(0,r.jsxs)(n.p,{children:["Specifies the last visible weekday of the view. Sunday is 0, Monday is 1, etc.\nDays outside of the ",(0,r.jsx)(n.code,{children:"startDay"})," and ",(0,r.jsx)(n.code,{children:"endDay"})," range will not be visible."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"6"})]}),"\n",(0,r.jsx)(n.h3,{id:"view-schedule-endTime",children:"endTime"}),"\n",(0,r.jsx)(n.p,{children:"string"}),"\n",(0,r.jsxs)(n.p,{children:["Set the end time of scheduler column.\nHours and minutes can be specified in the same string, example: ",(0,r.jsx)(n.code,{children:"'18:30'"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"'24:00'"})]}),"\n",(0,r.jsx)(n.h3,{id:"view-schedule-hideEmptyColumns",children:"hideEmptyColumns"}),"\n",(0,r.jsx)(n.p,{children:"boolean"}),"\n",(0,r.jsx)(n.p,{children:"Hide the empty columns."}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"false."})]}),"\n",(0,r.jsx)(n.h3,{id:"view-schedule-hideInvalidColumns",children:"hideInvalidColumns"}),"\n",(0,r.jsx)(n.p,{children:"boolean"}),"\n",(0,r.jsx)(n.p,{children:"Hide the fully invalid columns."}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"false."})]}),"\n",(0,r.jsx)(n.h3,{id:"view-schedule-maxEventStack",children:"maxEventStack"}),"\n",(0,r.jsx)(n.p,{children:'number | "all" | "auto"'}),"\n",(0,r.jsx)(n.p,{children:'Limit the number of displayed events. When the number of overlapping events reaches the\nspecified value, a "more" button will be displayed which opens a popover showing the rest of the events.'}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["If it is a ",(0,r.jsx)(n.code,{children:"number"}),', it specifies how many events will be displayed before the "more" button appears.']}),"\n",(0,r.jsxs)(n.li,{children:["If set to ",(0,r.jsx)(n.code,{children:"'all'"}),", all events will be displayed."]}),"\n",(0,r.jsxs)(n.li,{children:["If set to ",(0,r.jsx)(n.code,{children:"'auto'"}),", the component will decide how many events can be placed inside the column,\nbased on the ",(0,r.jsx)(n.code,{children:"minEventWidth"})," view option and the actual column width."]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"'all'"})]}),"\n",(0,r.jsx)(n.h3,{id:"view-schedule-minEventWidth",children:"minEventWidth"}),"\n",(0,r.jsx)(n.p,{children:"number"}),"\n",(0,r.jsxs)(n.p,{children:["Specifies the minimum event width. Will be used when ",(0,r.jsx)(n.code,{children:"maxEventStack: 'auto'"})," is used."]}),"\n",(0,r.jsx)(n.h3,{id:"view-schedule-size",children:"size"}),"\n",(0,r.jsx)(n.p,{children:"number"}),"\n",(0,r.jsx)(n.p,{children:"Specifies the number of displayed months, weeks or days."}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"1"})]}),"\n",(0,r.jsx)(n.h3,{id:"view-schedule-startDay",children:"startDay"}),"\n",(0,r.jsx)(n.p,{children:"number"}),"\n",(0,r.jsxs)(n.p,{children:["Specifies the first visible weekday of the view. Sunday is 0, Monday is 1, etc.\nDays outside of the ",(0,r.jsx)(n.code,{children:"startDay"})," and ",(0,r.jsx)(n.code,{children:"endDay"})," range will not be visible.\nShould not be mistaken for the ",(0,r.jsx)(n.a,{href:"#localization-firstDay",children:"firstDay"})," option,\nwhich sets the first day of the week, and, if not set, is defined by the ",(0,r.jsx)(n.a,{href:"#localization-locale",children:"localization"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"0"})]}),"\n",(0,r.jsx)(n.h3,{id:"view-schedule-startTime",children:"startTime"}),"\n",(0,r.jsx)(n.p,{children:"string"}),"\n",(0,r.jsxs)(n.p,{children:["Set the start time of scheduler column.\nHours and minutes can be specified in the same string, example: ",(0,r.jsx)(n.code,{children:"'09:30'"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"'00:00'"})]}),"\n",(0,r.jsx)(n.h3,{id:"view-schedule-timeCellStep",children:"timeCellStep"}),"\n",(0,r.jsx)(n.p,{children:"number"}),"\n",(0,r.jsx)(n.p,{children:"Specifies the step of the grid cells in minutes.\nSupported values: 1, 5, 10, 15, 20, 30, 60, 120, 180, 240, 360, 480, 720, 1440"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"60"})]}),"\n",(0,r.jsx)(n.h3,{id:"view-schedule-timeLabelStep",children:"timeLabelStep"}),"\n",(0,r.jsx)(n.p,{children:"number"}),"\n",(0,r.jsx)(n.p,{children:"Specifies the step of the time labels in minutes.\nSupported values: 1, 5, 10, 15, 20, 30, 60, 120, 180, 240, 360, 480, 720, 1440."}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"60"})]}),"\n",(0,r.jsx)(n.h3,{id:"view-schedule-timezones",children:"timezones"}),"\n",(0,r.jsx)(n.p,{children:"Array<string | MbscSchedulerTimezone>"}),"\n",(0,r.jsxs)(n.p,{children:["Display times in multiple timezones on the time scale and time indicator.\nThe timezones array can contain timezone strings or objects with timezone and label properties.\nTimezone strings must use the name from the ",(0,r.jsx)(n.a,{href:"https://gist.github.com/aviflax/a4093965be1cd008f172",children:"IANA time zone database"}),".\nIf no label is provided, the time column label will be UTC +/- the timezone offset."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"timezones: ['Europe/Berlin','Europe/Bucharest']\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"timezones: [\n { timezone: 'America/Chicago', label: 'CHI'}
1,\n { timezone: 'America/New_York', label: 'NY'}\n]\n"})}),"\n",(0,r.jsx)(n.h3,{id:"view-schedule-type",children:"type"}),"\n",(0,r.jsx)(n.p,{children:'"day" | "month" | "week"'}),"\n",(0,r.jsx)(n.p,{children:"Sets the scheduler type."}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"'week'"})]})]})}function d(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(t,{...e})}):t(e)}function c(e){const n={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,l.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h3,{id:"opt-clickToCreate",children:"clickToCreate"}),"\n",(0,r.jsx)(n.p,{children:'boolean | "double" | "single"'}),"\n",(0,r.jsxs)(n.p,{children:["Enable new event creation on click. If ",(0,r.jsx)(n.code,{children:"true"})," or ",(0,r.jsx)(n.code,{children:"'double'"}),", a new event will be created only with a double click\nand with the ",(0,r.jsx)(n.code,{children:"'single'"})," value the event will be created instantly with a single click."]}),"\n",(0,r.jsx)(n.p,{children:"This option will only work on desktop environment where mouse events are fired.\nIt will also allow deleting of the focused events using the Delete or Backspace key."}),"\n",(0,r.jsxs)(n.p,{children:["In touch environment a long tap should be used to create a new event\nand it is controlled by the ",(0,r.jsx)(n.a,{href:"#opt-dragToCreate",children:"dragToCreate"})," option."]}),"\n",(0,r.jsxs)(n.p,{children:["Using the ",(0,r.jsx)(n.a,{href:"#opt-extendDefaultEvent",children:"extendDefaultEvent"})," option extra properties can be set for the created event."]}),"\n",(0,r.jsxs)(n.p,{children:["The event deletion functionality can be overwritten using the ",(0,r.jsx)(n.a,{href:"#opt-eventDelete",children:"eventDelete"})," option."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-colors",children:"colors"}),"\n",(0,r.jsxs)(n.p,{children:["Array<",(0,r.jsx)(n.a,{href:"#type-MbscCalendarColor",children:"MbscCalendarColor"}),">"]}),"\n",(0,r.jsx)(n.p,{children:"Specifies the color for certain dates or date ranges on the calendar."}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.a,{href:"#type-MbscCalendarColor",children:(0,r.jsx)(n.code,{children:"MbscCalendarColor"})})," type has the following properties:"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"allDay"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the date you want to color is all day or not."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"background"}),": ",(0,r.jsx)(n.em,{children:"string"})," - Background color of the cell. It can be any valid CSS color (",(0,r.jsx)(n.code,{children:"'red'"}),", ",(0,r.jsx)(n.code,{children:"'#ff0000'"}),", ",(0,r.jsx)(n.code,{children:"'rgb(255, 0, 0)'"}),", etc.)."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"cellCssClass"}),": ",(0,r.jsx)(n.em,{children:"string"})," - CSS class for the day cell. Only applicable for the calendar view."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"cssClass"}),": ",(0,r.jsx)(n.em,{children:"string"})," - Specifies a custom CSS class for the color.\nUseful when customization is needed for the background of cells and time ranges.\nOnly applicable for the timeline and scheduler views."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"date"}),": ",(0,r.jsx)(n.em,{children:"string | object | Date"})," - Specifies a single date for the color"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"end"}),": ",(0,r.jsx)(n.em,{children:"string | object | Date"})," - Specifies the end date/time of a date/time range for the color"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"highlight"}),": ",(0,r.jsx)(n.em,{children:"string"})," - Highlight color of the day, can be any valid CSS color (",(0,r.jsx)(n.code,{children:"'red'"}),", ",(0,r.jsx)(n.code,{children:"'#ff0000'"}),", ",(0,r.jsx)(n.code,{children:"'rgb(255, 0, 0)'"}),", etc.)."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"recurring"}),": ",(0,r.jsxs)(n.em,{children:["string | ",(0,r.jsx)(n.a,{href:"#type-MbscRecurrenceRule",children:"MbscRecurrenceRule"})]}
1)," - Specifies a recurrence rule for handling recurring days."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"recurringException"}),": ",(0,r.jsx)(n.em,{children:"string | object | Date | Array<string | object | Date>"})," - Exception dates of the recurring rule.\nUseful when specific dates need to be skipped from the rule."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"recurringExceptionRule"}),": ",(0,r.jsxs)(n.em,{children:["string | ",(0,r.jsx)(n.a,{href:"#type-MbscRecurrenceRule",children:"MbscRecurrenceRule"})]})," - Exception rule of the recurring rule.\nUseful when recurring dates need to be skipped from the rule."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resource"}),": ",(0,r.jsx)(n.em,{children:"string | number | Array<string | number>"})," - In case of the timeline and scheduler view of the Eventcalendar, specifies the ",(0,r.jsx)(n.a,{href:"#opt-resources",children:"resource"})," ids\nfor the color.\nThe color will be displayed only on the specified resource.\nIf there is no resource defined, it will be applied to every resource."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"slot"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - In case of the timeline view of the Eventcalendar, specifies the ",(0,r.jsx)(n.a,{href:"#opt-slot",children:"slot"})," id\nfor the color.\nThe color will be displayed only on the specified slot.\nIf there is no slot defined, it will be applied to every slot."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"start"}),": ",(0,r.jsx)(n.em,{children:"string | object | Date"})," - Specifies the start date/time of a date/time range for the color"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"textColor"}),": ",(0,r.jsx)(n.em,{children:"string"})," - A color applied on the text."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"title"}),": ",(0,r.jsx)(n.em,{children:"string"})," - A title that will be displayed on the item."]}),"\n"]}),"\n",(0,r.jsxs)(n.admonition,{type:"info",children:[(0,r.jsx)(n.p,{children:"The colored range will be considered all-day if:"}),(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["the ",(0,r.jsx)(n.code,{children:"allDay"})," property is explicitly set."]}),"\n",(0,r.jsxs)(n.li,{children:["the ",(0,r.jsx)(n.code,{children:"start"})," / ",(0,r.jsx)(n.code,{children:"end"})," properties are not specified, only the ",(0,r.jsx)(n.code,{children:"date"}),"."]}),"\n"]})]}),"\n",(0,r.jsx)(n.admonition,{type:"info",children:(0,r.jsx)(n.p,{children:"The dates can be specified as JavaScript Date objects, ISO 8601 strings, or moment objects."})}),"\n",(0,r.jsx)(n.admonition,{type:"info",children:(0,r.jsx)(n.p,{children:"For Javascript Date objects the month numbers are zero based. Like: 0 - January, 1 - February ... 11 - December."})}),"\n",(0,r.jsx)(n.admonition,{type:"info",children:(0,r.jsxs)(n.p,{children:["The colors can be combined with the ",(0,r.jsx)(n.a,{href:"#opt-labels",children:"labels"})," or ",(0,r.jsx)(n.a,{href:"#opt-marked",children:"marked"})," options."]})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"[\n { date: new Date(2020, 2, 23), background: 'pink' },\n { date: new Date(2020, 2, 24), background: 'green' },\n { background: '#ff0000', recurring: { repeat: 'weekly', weekDays: 'SU' } },\n { background: 'yellow', recurring: { repeat: 'weekly', weekDays: 'SA' } }\n]\n"})}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-context",children:"context"}),"\n",(0,r.jsx)(n.p,{children:"string | HTMLElement"}),"\n",(0,r.jsx)(n.p,{children:"The DOM element in which the popups (event popover, year and month picker) are rendered. Can be a selector string or a DOM element."}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"'body'"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-cssClass",children:"cssClass"}),"\n",(0,r.jsx)(n.p,{children:"string"}),"\n",(0,r.jsx)(n.p,{children:"Specifies a custom CSS class for the component."}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-data",children:"data"}),"\n",(0,r.jsxs)(n.p,{children:["Array<",(0,r.jsx)(n.a,{href:"#type-MbscCalendarEvent",children:"MbscCalendarEvent"}),">"]}),"\n",(0,r.jsx)(n.p,{children:"The events for the Eventcalendar."}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.a,{href:"#type-MbscCalendarEvent",children:(0,r.jsx)(n.code,{children:"MbscCalendarEvent"})})," type has the following properties:"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"allDay"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies if the event is all day or not."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"bufferAfter"}),": ",(0,r.jsx)(n.em,{children:"number"})," - Defines a buffer time in minutes that will be displayed after the end of the event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"bufferBefore"}),": ",(0,r.jsx)(n.em,{children:"number"})," - Defines a buffer time in minutes that will be displayed before the start of the event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"cellCssClass"}),": ",(0,r.jsx)(n.em,{children:"string"})," - CSS class for the day cell. Only applicable for the calendar view."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"color"}),": ",(0,r.jsx)(n.em,{children:"string"}
1)," - Background color of the event"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"cssClass"}),": ",(0,r.jsx)(n.em,{children:"string"})," - Specifies a custom CSS class that is applied to the event. Useful when customization is needed on the event level.\nFor example: setting the width for specific events."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"date"}),": ",(0,r.jsx)(n.em,{children:"string | object | Date"})," - Specifies a single date for the event"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"dragBetweenResources"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the event is movable across resources."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"dragBetweenSlots"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the event is movable across across slots."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"dragInTime"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the event is movable in time."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"editable"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies if an event is editable or not. If false, drag & drop and resize is not allowed."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"end"}),": ",(0,r.jsx)(n.em,{children:"string | object | Date"})," - Specifies the end date/time of a date/time range for the event"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"id"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - A unique id for the event. If not specified, the event will get a generated id."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"order"}),": ",(0,r.jsx)(n.em,{children:"number"})," - Specifies the order of the event in the array. Has precedence over the default ordering rules."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"overlap"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the event can be overlapped. Has precedence over the ",(0,r.jsx)(n.code,{children:"eventOverlap"}),"\nproperty of the resource and the ",(0,r.jsx)(n.a,{href:"#opt-eventOverlap",children:"eventOverlap"})," option."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"recurring"}),": ",(0,r.jsxs)(n.em,{children:["string | ",(0,r.jsx)(n.a,{href:"#type-MbscRecurrenceRule",children:"MbscRecurrenceRule"})]})," - Specifies a recurrence rule for handling recurring events."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"recurringException"}),": ",(0,r.jsx)(n.em,{children:"string | object | Date | Array<string | object | Date>"})," - Exception dates of the recurring rule.\nUseful when specific dates need to be skipped from the rule."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"recurringExceptionRule"}),": ",(0,r.jsxs)(n.em,{children:["string | ",(0,r.jsx)(n.a,{href:"#type-MbscRecurrenceRule",children:"MbscRecurrenceRule"})]})," - Exception rule of the recurring rule.\nUseful when recurring dates need to be skipped from the rule."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resize"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the event is resizable.\nHas precedence over the ",(0,r.jsx)(n.code,{children:"eventResize"})," property of the resource and\nthe ",(0,r.jsx)(n.a,{href:"#opt-dragToResize",children:"dragToResize"})," option."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resource"}),": ",(0,r.jsx)(n.em,{children:"string | number | Array<string | number>"})," - In case of the timeline and scheduler view of the Eventcalendar, specifies the ",(0,r.jsx)(n.a,{href:"#opt-resources",children:"resource"})," ids\nfor the event.\nThe event will be displayed only on the specified resource.\nIf there is no resource defined, it will be displayed on every resource."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"slot"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - In case of the timeline view of the Eventcalendar, specifies the ",(0,r.jsx)(n.a,{href:"#opt-slot",children:"slot"})," id\nfor the event.\nThe event will be displayed only on the specified slot.\nIf there is no slot defined, it will be displayed on every slot."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"start"}),": ",(0,r.jsx)(n.em,{children:"string | object | Date"})," - Specifies the start date/time of a date/time range for the event"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"textColor"}),": ",(0,r.jsx)(n.em,{children:"string"})," - A color applied on the text."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"timezone"}),": ",(0,r.jsx)(n.em,{children:"string"})," - Timezone of the event"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"title"}),": ",(0,r.jsx)(n.em,{children:"string"})," - The title of the event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"tooltip"}),": ",(0,r.jsx)(n.em,{children:"string"})," - The tooltip text of the event."]}),"\n"]}),"\n",(0,r.jsx)(n.admonition,{type:"info",children:(0,r.jsx)(n.p,{children:"The dates can be specified as JavaScript Date objects, ISO 8601 strings, or moment objects."})}),"\n",(0,r.jsx)(n.admonition,{type:"info",children:(0,r.jsx)(n.p,{children:"For Javascript Date objects the month numbers are zero based. Like: 0 - January, 1 - February ... 11 - December."})}),"\n",(0,r.jsx)(n.admonition,{type:"info",children:(0,r.jsxs)(n.p,{children:["The event objects may have additional custom properties as well.\nThe custom properties are not used by the event calendar, but they are kept and will be available anywhere the event objects are used.\nE.g. the ",(0,r.jsx)(n.a,{href:"#event-onEventClick",children:"onEventClick"})," event will receive the event object as argument, containing the custom properties as well."]})}),"\n",(0,r.jsx)(n.admonition,{type:"info",children:(0,r.jsxs)(n.p,{children:["Use the ",(0,r.jsx)(n.a,{href:"#method-getEvents",children:"getEvents"})," method to get the events between two dates."]})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"data: [\n {\n start: new Date(2021, 5, 23),\n end: new Date(2021, 5, 30
1),\n title: 'Conference',\n allDay: true,\n color: 'red'\n },\n {\n title: 'Work project',\n recurring: {\n repeat: 'daily',\n until: '2021-04-01'\n },\n recurringException: ['2021-03-15', '2021-03-25'],\n recurringExceptionRule: {\n repeat: 'weekly',\n weekDays: 'SA,SU'\n }\n }\n]\n"})}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-dataTimezone",children:"dataTimezone"}),"\n",(0,r.jsx)(n.p,{children:"string"}),"\n",(0,r.jsxs)(n.p,{children:["The timezone in which the data is interpreted. If the data contains timezone information\n(when the ISO string has a timezone offset, e.g. ",(0,r.jsx)(n.code,{children:'"2021-03-28T01:00:00Z"'})," or ",(0,r.jsx)(n.code,{children:'"2021-03-28T03:00:00+03:00"'}),")\nthen the data's timezone is used instead."]}),"\n",(0,r.jsx)(n.admonition,{type:"info",children:(0,r.jsxs)(n.p,{children:["When using timezones, the ",(0,r.jsx)(n.a,{href:"#opt-exclusiveEndDates",children:"exclusiveEndDates"})," option is also turned on by default."]})}),"\n",(0,r.jsx)(n.admonition,{type:"info",children:(0,r.jsxs)(n.p,{children:["When using anything other than the default (",(0,r.jsx)(n.code,{children:"'local'"}),"), a ",(0,r.jsx)(n.a,{href:"#opt-timezonePlugin",children:"timezone plugin"}),"\nmust be also passed to the component."]})}),"\n",(0,r.jsx)(n.p,{children:"Possible values:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"'local'"})," - The system's local timezone."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"'utc'"})," - UTC (Universal Coordinated Time) timezone."]}),"\n",(0,r.jsxs)(n.li,{children:["Timezone name - The timezone name from the\n",(0,r.jsx)(n.a,{href:"https://gist.github.com/aviflax/a4093965be1cd008f172",children:"IANA time zone database"}),", e.g. ",(0,r.jsx)(n.code,{children:'"America/New_York"'}),"."]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["If not specified, it defaults to the ",(0,r.jsx)(n.a,{href:"#opt-displayTimezone",children:"displayTimezone"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-defaultSelectedDate",children:"defaultSelectedDate"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"#type-MbscDateType",children:"MbscDateType"})}),"\n",(0,r.jsx)(n.p,{children:"Specifies the initial selected date on the calendar."}),"\n",(0,r.jsx)(n.p,{children:"For views, where time is also displayed, the view will be scrolled to the specified time.\nIf the time part is not explicitly specified, it defaults to the start of the day."}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-displayTimezone",children:"displayTimezone"}),"\n",(0,r.jsx)(n.p,{children:"string"}),"\n",(0,r.jsx)(n.p,{children:"The timezone in which the data is displayed."}),"\n",(0,r.jsx)(n.admonition,{type:"info",children:(0,r.jsxs)(n.p,{children:["When using timezones, the ",(0,r.jsx)(n.a,{href:"#opt-exclusiveEndDates",children:"exclusiveEndDates"})," option is also turned on by default."]})}),"\n",(0,r.jsx)(n.admonition,{type:"info",children:(0,r.jsxs)(n.p,{children:["When using anything other than the default (",(0,r.jsx)(n.code,{children:"'local'"}),"), a ",(0,r.jsx)(n.a,{href:"#opt-timezonePlugin",children:"timezone plugin"}),"\nmust be also passed to the component."]})}),"\n",(0,r.jsx)(n.p,{children:"Possible values:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"'local'"})," - The system's local timezone."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"'utc'"})," - UTC (Universal Coordinated Time) timezone."]}),"\n",(0,r.jsxs)(n.li,{children:["Timezone name - The timezone name from the\n",(0,r.jsx)(n.a,{href:"https://gist.github.com/aviflax/a4093965be1cd008f172",children:"IANA time zone database"}
1),", e.g. ",(0,r.jsx)(n.code,{children:'"America/New_York"'}),"."]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"'local'"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-dragBetweenResources",children:"dragBetweenResources"}),"\n",(0,r.jsx)(n.p,{children:"boolean"}),"\n",(0,r.jsxs)(n.p,{children:["If ",(0,r.jsx)(n.code,{children:"false"}),", the events will not be moveable across resources, only in time.\nTo control movement in time, use the ",(0,r.jsx)(n.a,{href:"#opt-dragInTime",children:"dragInTime"})," option."]}),"\n",(0,r.jsxs)(n.p,{children:["Consider that ",(0,r.jsx)(n.a,{href:"#opt-dragToMove",children:"dragToMove"})," has to be enabled."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"true"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-dragInTime",children:"dragInTime"}),"\n",(0,r.jsx)(n.p,{children:"boolean"}),"\n",(0,r.jsxs)(n.p,{children:["If ",(0,r.jsx)(n.code,{children:"false"}),", the events will not be moveable in time.\nIn case of the scheduler and timeline views events events can still be moved between resources.\nTo control movement between resources, use the ",(0,r.jsx)(n.a,{href:"#opt-dragBetweenResources",children:"dragBetweenResources"})," option."]}),"\n",(0,r.jsxs)(n.p,{children:["Consider that ",(0,r.jsx)(n.a,{href:"#opt-dragToMove",children:"dragToMove"})," has to be enabled."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"true"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-dragTimeStep",children:"dragTimeStep"}),"\n",(0,r.jsx)(n.p,{children:"number"}),"\n",(0,r.jsx)(n.p,{children:"Specifies the steps in minutes for the scheduler and timeline events during drag."}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"15"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-dragToCreate",children:"dragToCreate"}),"\n",(0,r.jsx)(n.p,{children:"boolean"}),"\n",(0,r.jsxs)(n.p,{children:["If ",(0,r.jsx)(n.code,{children:"true"}),", dragging on an empty cell will create a new event.\nIt will also allow deleting of the focused events using the Delete or Backspace key."]}),"\n",(0,r.jsxs)(n.p,{children:["The title of the new event can be specified with the ",(0,r.jsx)(n.a,{href:"#opt-newEventText",children:"newEventText"})," option."]}),"\n",(0,r.jsxs)(n.p,{children:["Using the ",(0,r.jsx)(n.a,{href:"#opt-extendDefaultEvent",children:"extendDefaultEvent"})," option extra properties can be set for the created event."]}),"\n",(0,r.jsxs)(n.p,{children:["The event deletion functionality can be overwritten using the ",(0,r.jsx)(n.a,{href:"#opt-eventDelete",children:"eventDelete"})," option."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-dragToMove",children:"dragToMove"}),"\n",(0,r.jsx)(n.p,{children:"boolean"}),"\n",(0,r.jsxs)(n.p,{children:["If ",(0,r.jsx)(n.code,{children:"true"}),", the events will be moveable."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-dragToResize",children:"dragToResize"}),"\n",(0,r.jsx)(n.p,{children:"boolean"}),"\n",(0,r.jsxs)(n.p,{children:["If ",(0,r.jsx)(n.code,{children:"true"}),", the events will be resizable."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-eventDelete",children:"eventDelete"}),"\n",(0,r.jsx)(n.p,{children:"boolean"}),"\n",(0,r.jsxs)(n.p,{children:["Enables or disables event deletion. When ",(0,r.jsx)(n.code,{children:"true"}),", the focused event will be deleted on pressing the Delete or Backspace\nkeys on the keyboard."]}),"\n",(0,r.jsxs)(n.p,{children:["By default the event deletion depends on the ",(0,r.jsx)(n.a,{href:"#opt-clickToCreate",children:"clickToCreate"})," and ",(0,r.jsx)(n.a,{href:"#opt-dragToCreate",children:"dragToCreate"})," options.\nIf either of those are ",(0,r.jsx)(n.code,{children:"true"}
1),", and no ",(0,r.jsx)(n.code,{children:"eventDelete"})," option is set, then event deletion is also enabled, otherwise not."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-eventOrder",children:"eventOrder"}),"\n",(0,r.jsxs)(n.p,{children:["(event1: ",(0,r.jsx)(n.a,{href:"#type-MbscCalendarEvent",children:"MbscCalendarEvent"}),", event2: ",(0,r.jsx)(n.a,{href:"#type-MbscCalendarEvent",children:"MbscCalendarEvent"}),") => number"]}),"\n",(0,r.jsx)(n.p,{children:"Determines the ordering of the events within the same day.\nCan be a function that accepts two event objects as arguments and should return -1 or 1."}),"\n",(0,r.jsx)(n.p,{children:"If not specified, the default order is:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"all day events"}),"\n",(0,r.jsx)(n.li,{children:"rest of events, sorted by start time; events with identical start times,\nwill be ordered alphabetically based on their title"}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-eventOverlap",children:"eventOverlap"}),"\n",(0,r.jsx)(n.p,{children:"boolean"}),"\n",(0,r.jsxs)(n.p,{children:["If ",(0,r.jsx)(n.code,{children:"false"}),", the events cannot overlap."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"true"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-exclusiveEndDates",children:"exclusiveEndDates"}),"\n",(0,r.jsx)(n.p,{children:"boolean"}),"\n",(0,r.jsxs)(n.p,{children:["If ",(0,r.jsx)(n.code,{children:"true"}),", the Eventcalendar will work in exclusive end dates mode,\nmeaning that the last moment of the range (event, invalid, colors, etc.) is not part of the range."]}),"\n",(0,r.jsxs)(n.p,{children:["E.g. ",(0,r.jsx)(n.code,{children:"end: '2021-07-03T00:00'"})," means that the event ends on 2nd of July and will not be displayed on 3rd of July."]}),"\n",(0,r.jsx)(n.admonition,{type:"info",children:(0,r.jsxs)(n.p,{children:["When using timezones, the ",(0,r.jsx)(n.code,{children:"exclusiveEndDates"})," option will default to ",(0,r.jsx)(n.code,{children:"true"}),"."]})}),"\n",(0,r.jsx)(n.h3,{id:"opt-extendDefaultEvent",children:"extendDefaultEvent"}),"\n",(0,r.jsxs)(n.p,{children:["(args: MbscNewEventData) => void | ",(0,r.jsx)(n.a,{href:"#type-MbscCalendarEvent",children:"MbscCalendarEvent"})]}),"\n",(0,r.jsxs)(n.p,{children:["Use this option to set properties to the new event created with click or drag.\nThe event creation is handled by the ",(0,r.jsx)(n.a,{href:"#opt-clickToCreate",children:"clickToCreate"})," and ",(0,r.jsx)(n.a,{href:"#opt-dragToCreate",children:"dragToCreate"})," options.\nIt takes a function that should return the properties for the new event.\nThe argument object passed to this function has the following properties:"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"start"}),": ",(0,r.jsx)(n.em,{children:"Date"})," - The date when the newly created event will start."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resource"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - The id of the resource where the event creation started."]}),"\n"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"extendDefaultEvent: (args) => {\n return {\n color: args.resource === 'admin' ? 'green' : 'red',\n title: 'My event',\n };\n}\n"})}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-externalDrag",children:"externalDrag"}),"\n",(0,r.jsx)(n.p,{children:"boolean"}),"\n",(0,r.jsxs)(n.p,{children:["If ",(0,r.jsx)(n.code,{children:"true"}),", external drag & drop is allowed and events can be dragged outside of the component view."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-externalDrop",children:"externalDrop"}),"\n",(0,r.jsx)(n.p,{children:"boolean"}),"\n",(0,r.jsxs)(n.p,{children:["If ",(0,r.jsx)(n.code,{children:"true"}),", external events can be dragged into the view."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-groupBy",children:"groupBy"}),"\n",(0,r.jsx)(n.p,{children:'"resource" | "date"'}),"\n",(0,r.jsxs)(n.p,{children:["Groups the ",(0,r.jsx)(n.a,{href:"#opt-data",children:"events"})," by date or by ",(0,r.jsx)(n.a,{href:"#opt-resource",children:"resource"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"'resource'"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-height",children:"height"}),"\n",(0,r.jsx)(n.p,{children:"string | number"}),"\n",(0,r.jsx)(n.p,{children:"Sets the height of the component."}),"\n",(0,r.jsx)(n.p,{children:'The height of the calendar view impacts the number of labels that fit into a table cell.\nA "show more" label will be displayed for events that don\'t fit.'}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-immutableData",children:"immutableData"}),"\n",(0,r.jsx)(n.p,{children:"boolean"}),"\n",(0,r.jsxs)(n.p,{children:["If ",(0,r.jsx)(n.code,{children:"true"}),", the Eventcalendar will work in immutable mode.\nIn this mode the component won't update the data directly,\nonly fire the necessary lifecycle events, where the original data can be updated manually."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-invalid",children:"invalid"}),"\n",(0,r.jsxs)(n.p,{children:["Array<",(0,r.jsx)(n.a,{href:"#type-MbscDateType",children:"MbscDateType"}),"> | Array<",(0,r.jsx)(n.a,{href:"#type-MbscCalendarInvalid",children:"MbscCalendarInvalid"}),">"]}),"\n",(0,r.jsx)(n.p,{children:"An array containing the invalid values. Can contain dates,\nor objects with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"allDay"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the invalid range is all day or not."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"start"}),": ",(0,r.jsx)(n.em,{children:"Date | string | object"})," - Start of the invalid range."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"end"}),": ",(0,r.jsx)(n.em,{children:"Date, string | object"})," - End of the invalid range."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"recurring"}),": ",(0,r.jsx)(n.em,{children:"string | object"})," - Recurrence rule for recurring invalid ranges."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"recurringException"}),": ",(0,r.jsx)(n.em,{children:"string | object | Array<string | object>"})," - Exception dates of the recurring rule.\nUseful when specific dates need to be skipped from the rule."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"recurringExceptionRule"}),": ",(0,r.jsx)(n.em,{children:"string | object"})," - Exception rule of the recurring rule.\nUseful when recurring dates need to be skipped from the rule."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resource"}),": ",(0,r.jsx)(n.em,{children:"string | number | Array<string | number>"})," - Specifies the ",(0,r.jsx)(n.a,{href:"#opt-resources",children:"resource"})," ids for the invalid range.\nThe invalid range will be displayed only in the specified resource.\nIf there is no resource defined, the invalid range will be displayed in every resource."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"slot"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - Specifies the ",(0,r.jsx)(n.a,{href:"#opt-slots",children:"slot"})," id for the invalid range.\nThe invalid range will be displayed only in the specified slot.\nIf there is no slot defined, the invalid range will be displayed in every slot."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"title"}),": ",(0,r.jsx)(n.em,{children:"string"})," - Text which will be displayed for the invalid range. Only applicable for the timeline and scheduler views."]}),"\n"]}),"\n",(0,r.jsx)(n.admonition,{type:"info",children:(0,r.jsx)(n.p,{children:"The dates can be specified as JavaScript Date objects, ISO 8601 strings, or moment objects."})}),"\n",(0,r.jsx)(n.admonition,{type:"info",children:(0,r.jsx)(n.p,{children:"For Javascript Date objects the month numbers are zero based. Like: 0 - January, 1 - February ... 11 - December."})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"[\n // Passing exact dates and times\n new Date(2021, 1, 7), // Date object\n '2021-10-15T12:00', // ISO 8601 string\n moment('2020-12-25'), // moment object\n\n // Passing invalid ranges\n {\n // ISO 8601 strings\n start: '2021-10-15T12:00',\n end: '2021-10-18T13:00',\n title: 'Company 10th anniversary',\n },\n {\n // Date objects\n allDay: true,\n start: new Date(2021, 2, 7),\n end: new Date(2021, 2, 9),\n title: 'Conference for the whole team',\n },\n {\n // Time range with recurrence\n start: '13:00',\n end: '12:00',\n recurring: { repeat: 'weekly', weekDays: 'MO,TU,WE,TH,FR' },\n title: 'Lunch break',\n },\n {\n // Disable weekends\n recurring: {\n repeat: 'weekly',\n weekDays: 'SA,SU'\n }\n }\n]\n"})}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.a,{href:"#type-MbscCalendarInvalid",children:(0,r.jsx)(n.code,{children:"MbscCalendarInvalid"})})," type has the following properties:"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"allDay"}),": ",(0,r.jsx)(n.em,{children:"boolean"}
1)," - If true the specified invalid will cover the whole day."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"end"}),": ",(0,r.jsx)(n.em,{children:(0,r.jsx)(n.a,{href:"#type-MbscDateType",children:"MbscDateType"})})," - Specifies the end of the invalid range."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"recurring"}),": ",(0,r.jsxs)(n.em,{children:["string | ",(0,r.jsx)(n.a,{href:"#type-MbscRecurrenceRule",children:"MbscRecurrenceRule"})]})," - Recurrence rule for recurring invalid ranges."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"recurringException"}),": ",(0,r.jsxs)(n.em,{children:[(0,r.jsx)(n.a,{href:"#type-MbscDateType",children:"MbscDateType"})," | Array<",(0,r.jsx)(n.a,{href:"#type-MbscDateType",children:"MbscDateType"}),">"]})," - Specifies recurring exceptions.\nUseful when specific dates need to be skipped from the rule."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"recurringExceptionRule"}),": ",(0,r.jsxs)(n.em,{children:["string | ",(0,r.jsx)(n.a,{href:"#type-MbscRecurrenceRule",children:"MbscRecurrenceRule"})]})," - Specifies a recurrence exception rule.\nUseful when recurring dates need to be skipped from the rule."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"start"}),": ",(0,r.jsx)(n.em,{children:(0,r.jsx)(n.a,{href:"#type-MbscDateType",children:"MbscDateType"})})," - Specifies the start of the invalid range."]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"opt-invalidateEvent",children:"invalidateEvent"}),"\n",(0,r.jsx)(n.p,{children:'"strict" | "start-end"'}),"\n",(0,r.jsxs)(n.p,{children:["Specifies how to validate events against ",(0,r.jsx)(n.a,{href:"#opt-invalid",children:"invalid"})," ranges on create/move/resize:"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"'strict'"})," - The event cannot intersect with an invalid range at all."]}),"\n",(0,r.jsx)(n.li,{children:"`'start-end' - The event start and end cannot be inside an invalid range."}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"'strict'"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-max",children:"max"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"#type-MbscDateType",children:"MbscDateType"})}),"\n",(0,r.jsxs)(n.p,{children:["Maximum date and time. The calendar cannot be navigated beyond the specified maximum date.\nIf navigation is needed, but event creation should not be allowed after a specific date,\nuse the ",(0,r.jsx)(n.a,{href:"#opt-invalid",children:"invalid"})," option with daily recurrence starting from the specific date."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-min",children:"min"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"#type-MbscDateType",children:"MbscDateType"})}),"\n",(0,r.jsxs)(n.p,{children:["Minimum date and time. The calendar cannot be navigated beyond the specified minimum date.\nIf navigation is needed, but event creation should not be allowed before a specific date,\nuse the ",(0,r.jsx)(n.a,{href:"#opt-invalid",children:"invalid"})," option with daily recurrence until the specific date."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-modules",children:"modules"}),"\n",(0,r.jsx)(n.p,{children:"Array<IModule>"}),"\n",(0,r.jsx)(n.p,{children:"Additional modules can be added to the eventcalendar. The option receives an array of module objects.\nFor example, the print module can be added through this option."}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"// import the print module\nimport { print } from '@mobiscroll/print';\n\n// later on, add it to the modules array:\nmodules: [print]\n"})}),"\n",(0,r.jsx)(n.h3,{id:"opt-refDate",children:"refDate"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"#type-MbscDateType",children:"MbscDateType"})}),"\n",(0,r.jsx)(n.p,{children:"Specifies the reference date for the view calculation, when multiple days, weeks, months or years are displayed.\nIf not specified, for the scheduler and timeline views will be today's date, for the calendar and agenda views will be 1970/01/01."}),"\n",(0,r.jsxs)(n.p,{children:["It denotes the reference point when calculating the pages going in the future and in the past.\nFor example if the view type is day, the view size is 3, and the current date is ",(0,r.jsx)(n.code,{children:"01/16/2024"}),",\nthe pages are calculated from this date, so the initial page will contain ",(0,r.jsx)(n.code,{children:"[01/16/2024, 01/16/2024, 01/17/2024]"}),",\nthe next page ",(0,r.jsx)(n.code,{children:"[01/18/2024, 01/19/2024, 01/20/2024]"})," and so on."]}),"\n",(0,r.jsx)(n.p,{children:"In case of day view, the reference point will be exactly the specified date.\nFor week, month and year views the reference point will be the start of the week, month or year of the specified day."}),"\n",(0,r.jsxs)(n.p,{children:["Changing the reference date will not navigate the calendar to the specified date,\nit only recalculates the pages from the new reference date.\nTo navigate the view to a
1specified date and time, use the ",(0,r.jsx)(n.a,{href:"#opt-selectedDate",children:"selectedDate"})," option."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-resources",children:"resources"}),"\n",(0,r.jsxs)(n.p,{children:["Array<",(0,r.jsx)(n.a,{href:"#type-MbscResource",children:"MbscResource"}),">"]}),"\n",(0,r.jsxs)(n.p,{children:["The scheduler and timeline views can handle multiple resources.\nResource grouping can be modified with the help of the ",(0,r.jsx)(n.a,{href:"#opt-groupBy",children:"groupBy"})," option."]}),"\n",(0,r.jsxs)(n.p,{children:["If set to ",(0,r.jsx)(n.code,{children:"null"})," or ",(0,r.jsx)(n.code,{children:"undefined"}),", all events will be displayed, regardless of their ",(0,r.jsx)(n.code,{children:"resource"})," property.\nThe timeline view will not display the resource column, if the resources option is not set."]}),"\n",(0,r.jsx)(n.p,{children:"If set to an empty array, only those events will be displayed which are not tied to any resource.\nThe timeline view will display an empty resource column when an empty array is passed."}),"\n",(0,r.jsxs)(n.p,{children:["The timeline view can render multiple levels of hierarchy groups. Levels can be added with the help of the ",(0,r.jsx)(n.code,{children:"children"})," property."]}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.a,{href:"#type-MbscResource",children:(0,r.jsx)(n.code,{children:"MbscResource"})})," type has the following properties:"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"background"}),": ",(0,r.jsx)(n.em,{children:"string"})," - Specifies the background color of the resource row or column."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"children"}),": ",(0,r.jsxs)(n.em,{children:["Array<",(0,r.jsx)(n.a,{href:"#type-MbscResource",children:"MbscResource"}),">"]})," - Child resources."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"collapsed"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies the displayed state of the child resource group."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"color"}),": ",(0,r.jsx)(n.em,{children:"string"})," - Specifies the default event color of the resource.\nIf an event has an explicit color set, the resource color will be overridden.\nIf the color is not set, the events of the resource will inherit the default calendar color."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"cssClass"}),": ",(0,r.jsx)(n.em,{children:"string"})," - Specifies a css class for the resource row or column."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"eventCreation"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Disables event creation on specific resources by setting it to false. Defaults to true."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"eventDragBetweenResources"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the events in this resource are movable across resources.\nIt applies for scheduler and timeline views.\nHas precedence over the ",(0,r.jsx)(n.a,{href:"#opt-dragBetweenResources",children:"dragBetweenResources"})," option."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"eventDragBetweenSlots"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the events in this slot are movable across slots.\nHas precedence over the ",(0,r.jsx)(n.a,{href:"#opt-dragBetweenSlots",children:"dragBetweenSlots"})," option."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"eventDragInTime"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the events in this resource are movable in time.\nHas precedence over the ",(0,r.jsx)(n.a,{href:"#opt-dragInTime",children:"dragInTime"})," option."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"eventOverlap"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the events in this resource can be overlapped.\nHas precedence over the ",(0,r.jsx)(n.a,{href:"#opt-eventOverlap",children:"eventOverlap"})," option."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"eventResize"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the events in this resource are resizable.\nHas precedence over the ",(0,r.jsx)(n.a,{href:"#opt-dragToResize",children:"dragToResize"})," option."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"fixed"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the resource is fixed to the top.\nIt applies for timeline view if ",(0,r.jsx)(n.code,{children:"resolutionVertical"})," in ",(0,r.jsx)(n.a,{href:"#opt-view",children:"view"})," option is not given, or it's value is set to ",(0,r.jsx)(n.code,{children:"none"}),".\nConsider that the fixed resources always have to be the first elements of the array in a sequence\n(no non-fixed resources inserted in between) so that the dra & rop and event creation functionalities to work properly."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"id"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - The id of the resource."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"name"}),": ",(0,r.jsx)(n.em,{children:"string"})," - Specifies the name of the resource."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"reorder"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the resource can be dragged and reordered.\nIt applies for timeline view if ",(0,r.jsx)(n.code,{children:"resourceReorder"})," in ",(0,r.jsx)(n.a,{href:"#opt-view",children:"view"})," option is enabled."]}),"\n"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"resources: [\n {\n id: 1,\n name: 'Flatiron Room',\n color: '#f7c4b4'\n },\n {\n id: 2,\n name: 'The Capital City',\n color: '#c6f1c9'\n },\n {\n id: 3,\n name: 'Heroes Square',\n color: '#e8d0ef'\n }\n]\n"})}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-responsive",children:"responsive"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"#type-MbscResponsiveOptions",children:"MbscResponsiveOptions<MbscEventcalendarOptions>"})}),"\n",(0,r.jsx)(n.p,{children:"Specifies different options for different c
1ontainer widths, in a form of an object,\nwhere the keys are the name of the breakpoints, and the values are objects containing the options for the given breakpoint."}),"\n",(0,r.jsx)(n.admonition,{type:"info",children:(0,r.jsx)(n.p,{children:"The available width is queried from the container element of the component and not the browsers viewport like in css media queries"})}),"\n",(0,r.jsx)(n.p,{children:"There are five predefined breakpoints:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"xsmall"})," - min-width: 0px"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"small"})," - min-width: 576px"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"medium"})," - min-width: 768px"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"large"})," - min-width: 992px"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"xlarge"})," - min-width: 1200px"]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["Custom breakpoints can be defined by passing an object containing the ",(0,r.jsx)(n.code,{children:"breakpoint"})," property specifying the min-width in pixels.\nExample:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"responsive: {\n small: {\n display: 'bottom'\n },\n custom: { // Custom breakpoint, you can use multiple, but each must have a unique name\n breakpoint: 600,\n display: 'center'\n },\n large: {\n display: 'anchored'\n }\n}\n"})}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-selectMultipleEvents",children:"selectMultipleEvents"}),"\n",(0,r.jsx)(n.p,{children:"boolean"}),"\n",(0,r.jsxs)(n.p,{children:["When ",(0,r.jsx)(n.code,{children:"true"}),", enables multiple event selection on the calendar."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"false"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-selectedDate",children:"selectedDate"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"#type-MbscDateType",children:"MbscDateType"})}),"\n",(0,r.jsx)(n.p,{children:"Specifies the selected date on the calendar.\nThis can be changed programmatically and when changed the calendar will automatically navigate to the specified date."}),"\n",(0,r.jsx)(n.p,{children:"For views, where time is also displayed, the view will be scrolled to the specified time.\nIf the time part is not explicitly specified, it defaults to the start of the day."}),"\n",(0,r.jsxs)(n.p,{children:["This does not change the reference date that defines the reference point of the navigation pages.\nTo change the reference point for the navigation (e.g. start the paging from the newly selected date)\nuse the ",(0,r.jsx)(n.a,{href:"#opt-refDate",children:"refDate"})," option."]}),"\n",(0,r.jsxs)(n.p,{children:["You also need to pass a handler for the ",(0,r.jsx)(n.a,{href:"#event-onSelectedDateChange",children:"onSelectedDateChange"})," event\nto update the selected date when the date is changed from the calendar."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-selectedEvents",children:"selectedEvents"}),"\n",(0,r.jsxs)(n.p,{children:["Array<",(0,r.jsx)(n.a,{href:"#type-MbscCalendarEvent",children:"MbscCalendarEvent"}),">"]}),"\n",(0,r.jsxs)(n.p,{children:["Specifies the selected events on the calendar. The ",(0,r.jsx)(n.a,{href:"#event-onSelectedEventsChange",children:"onSelectedEventsChange"})," event will be\nfired when the selected events change from the calendar."]}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.a,{href:"#type-MbscCalendarEvent",children:(0,r.jsx)(n.code,{children:"MbscCalendarEvent"})})," type has the following properties:"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"allDay"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies if the event is all day or not."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"bufferAfter"}),": ",(0,r.jsx)(n.em,{children:"number"})," - Defines a buffer time in minutes that will be displayed after the end of the event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"bufferBefore"}),": ",(0,r.jsx)(n.em,{children:"number"})," - Defines a buffer time in minutes that will be displayed before the start of the event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"cellCssClass"}),": ",(0,r.jsx)(n.em,{children:"string"})," - CSS class for the day cell. Only applicable for the calendar view."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"color"}),": ",(0,r.jsx)(n.em,{children:"string"}
1)," - Background color of the event"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"cssClass"}),": ",(0,r.jsx)(n.em,{children:"string"})," - Specifies a custom CSS class that is applied to the event. Useful when customization is needed on the event level.\nFor example: setting the width for specific events."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"date"}),": ",(0,r.jsx)(n.em,{children:"string | object | Date"})," - Specifies a single date for the event"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"dragBetweenResources"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the event is movable across resources."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"dragBetweenSlots"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the event is movable across across slots."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"dragInTime"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the event is movable in time."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"editable"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies if an event is editable or not. If false, drag & drop and resize is not allowed."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"end"}),": ",(0,r.jsx)(n.em,{children:"string | object | Date"})," - Specifies the end date/time of a date/time range for the event"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"id"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - A unique id for the event. If not specified, the event will get a generated id."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"order"}),": ",(0,r.jsx)(n.em,{children:"number"})," - Specifies the order of the event in the array. Has precedence over the default ordering rules."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"overlap"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the event can be overlapped. Has precedence over the ",(0,r.jsx)(n.code,{children:"eventOverlap"}),"\nproperty of the resource and the ",(0,r.jsx)(n.a,{href:"#opt-eventOverlap",children:"eventOverlap"})," option."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"recurring"}),": ",(0,r.jsxs)(n.em,{children:["string | ",(0,r.jsx)(n.a,{href:"#type-MbscRecurrenceRule",children:"MbscRecurrenceRule"})]})," - Specifies a recurrence rule for handling recurring events."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"recurringException"}),": ",(0,r.jsx)(n.em,{children:"string | object | Date | Array<string | object | Date>"})," - Exception dates of the recurring rule.\nUseful when specific dates need to be skipped from the rule."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"recurringExceptionRule"}),": ",(0,r.jsxs)(n.em,{children:["string | ",(0,r.jsx)(n.a,{href:"#type-MbscRecurrenceRule",children:"MbscRecurrenceRule"})]})," - Exception rule of the recurring rule.\nUseful when recurring dates need to be skipped from the rule."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resize"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the event is resizable.\nHas precedence over the ",(0,r.jsx)(n.code,{children:"eventResize"})," property of the resource and\nthe ",(0,r.jsx)(n.a,{href:"#opt-dragToResize",children:"dragToResize"})," option."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resource"}),": ",(0,r.jsx)(n.em,{children:"string | number | Array<string | number>"})," - In case of the timeline and scheduler view of the Eventcalendar, specifies the ",(0,r.jsx)(n.a,{href:"#opt-resources",children:"resource"})," ids\nfor the event.\nThe event will be displayed only on the specified resource.\nIf there is no resource defined, it will be displayed on every resource."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"slot"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - In case of the timeline view of the Eventcalendar, specifies the ",(0,r.jsx)(n.a,{href:"#opt-slot",children:"slot"})," id\nfor the event.\nThe event will be displayed only on the specified slot.\nIf there is no slot defined, it will be displayed on every slot."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"start"}),": ",(0,r.jsx)(n.em,{children:"string | object | Date"})," - Specifies the start date/time of a date/time range for the event"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"textColor"}),": ",(0,r.jsx)(n.em,{children:"string"})," - A color applied on the text."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"timezone"}),": ",(0,r.jsx)(n.em,{children:"string"})," - Timezone of the event"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"title"}),": ",(0,r.jsx)(n.em,{children:"string"})," - The title of the event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"tooltip"}),": ",(0,r.jsx)(n.em,{children:"string"})," - The tooltip text of the event."]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-separator",children:"separator"}),"\n",(0,r.jsx)(n.p,{children:"string"}),"\n",(0,r.jsx)(n.p,{children:"Separator between date and time in the formatted date string."}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"' '"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-showControls",children:"showControls"}),"\n",(0,r.jsx)(n.p,{children:"boolean"}),"\n",(0,r.jsx)(n.p,{children:"Show or hide the calendar header controls: the previous and next buttons,\nand the current view button together with the year and month picker."}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"true"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-showEventBuffer",children:"showEventBuffer"}),"\n",(0,r.jsx)(n.p,{children:"boolean"}),"\n",(0,r.jsxs)(n.p,{children:["If ",(0,r.jsx)(n.code,{children:"true"}),", it will display the event buffers defined in the ",(0,r.jsx)(n.a,{href:"#opt-data",children:"event data"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"true"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-showEventTooltip",children:"showEventTooltip"}),"\n",(0,r.jsx)(n.p,{children:"boolean"}),"\n",(0,r.jsxs)(n.p,{children:["If ",(0,r.jsx)(n.code,{children:"false"}),", it will hide the native tooltip that shows up when hovering over an event."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"true"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-theme",children:"theme"}),"\n",(0,r.jsx)(n.p,{children:"string"}),"\n",(0,r.jsx)(n.p,{children:"Specifies the visual appearance of the component."}),"\n",(0,r.jsxs)(n.p,{children:["If it is ",(0,r.jsx)(n.code,{children:"'auto'"})," or ",(0,r.jsx)(n.code,{children:"undefined"}),", the theme will automatically be chosen based on the platform.\nIf custom themes are also present, they will take precedence over the built in themes, e.g. if there's an iOS based custom theme,\nit will be chosen on the iOS platform instead of the default iOS theme."]}),"\n",(0,r.jsx)(n.p,{children:"Supplied themes:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"'ios'"})," - iOS theme"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"'material'"})," - Material theme"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"'windows'"})," - Windows theme"]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["It's possible to ",(0,r.jsx)(n.a,{href:"../theming/sass-variables",children:"modify theme colors"})," or\n",(0,r.jsx)(n.a,{href:"../theming/sass-themes",children:"create custom themes"}),"."]}),"\n",(0,r.jsx)(n.admonition,{type:"info",children:(0,r.jsx)(n.p,{children:"Make sure that the theme you set is included in the downloaded package."})}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-themeVariant",children:"themeVariant"}),"\n",(0,r.jsx)(n.p,{children:'"auto" | "light" | "dark"'}),"\n",(0,r.jsxs)(n.p,{children:["Controls which variant of the ",(0,r.jsx)(n.a,{href:"#opt-theme",children:"theme"})," will be used (light or dark)."]}),"\n",(0,r.jsx)(n.p,{children:"Possible values:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"'light'"})," - Use the light variant of the theme."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"'dark'"})," - Use the dark variant of the theme."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"'auto'"})," or ",(0,r.jsx)(n.code,{children:"undefined"})," - Detect the preferred system theme on devices where this is supported."]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["To use the option with custom themes, make sure to create two custom themes, where the dark version has the same name as the light one,\nsuffixed with ",(0,r.jsx)(n.code,{children:"'-dark'"}),", e.g.: ",(0,r.jsx)(n.code,{children:"'my-theme'"})," and ",(0,r.jsx)(n.code,{children:"'my-theme-dark'"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"opt-timezonePlugin",children:"timezonePlugin"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"#type-MbscTimezonePlugin",children:"MbscTimezonePlugin"})}),"\n",(0,r.jsx)(n.p,{children:"Specifies the timezone plugin, which can handle the timezone conversions."}),"\n",(0,r.jsxs)(n.p,{children:["By default the component uses the local timezone of the browser to interpret dates.\nIf you want to interpret dates a different timezone,\nyou will need an external library to handle the timezone conversions.\nThere are two supported libraries: ",(0,r.jsx)(n.a,{href:"https://momentjs.com/timezone/",children:"moment-timezone"}),"\nand ",(0,r.jsx)(n.a,{href:"https://moment.github.io/luxon/#/",children:"luxon"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["You can specify either the ",(0,r.jsx)(n.a,{href:"#opt-dataTimezone",children:"dataTimezone"})," or the ",(0,r.jsx)(n.a,{href:"#opt-displayTimezone",children:"displayTimezone"})," or both."]}),"\n",(0,r.jsxs)(n.p,{children:["Depending on which external library you use you can pass either the ",(0,r.jsx)(n.code,{children:"momentTimezone"}),", ",(0,r.jsx)(n.code,{children:"dayjsTimezone"})," or ",(0,r.jsx)(n.code,{children:"luxonTimezone"}),"\nobjects. These objects can be imported from the mobiscroll bundle."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.a,{href:"#type-MbscTimezonePlugin",children:(0,r.jsx)(n.code,{children:"MbscTimezonePlugin"})})," type has the following properties:"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"createDate"}),": ",(0,r.jsx)(n.em,{children:"(s: any, year: string | number | Date | MbscTimezonedDate, month: number, date: number, h: number, min: number, sec: number, ms: number) => MbscTimezonedDate"})," -"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"parse"}),": ",(0,r.jsx)(n.em,{children:"(date: string | number, s: any) => MbscTimezonedDate"})," -"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"opt-width",children:"width"}),"\n",(0,r.jsx)(n.p,{children:"string | number"}),"\n",(0,r.jsx)(n.p,{children:"Sets the width of the component."}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]})]})}function h(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}function o(e){const n={a:"a",code:"code",em:"em",h3:"h3",li:"li",p:"p",ul:"ul",...(0,l.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h3,{id:"event-onCellClick",children:"onCellClick"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscCellClickEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsx)(n.p,{children:"Triggered when a cell is clicked on the calendar day, scheduler cell, or timeline cell."}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event object has the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"date"}),": ",(0,r.jsx)(n.em,{children:"Date"})," - The date of the clicked cell."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"domEvent"}),": ",(0,r.jsx)(n.em,{children:"Event"})," - The DOM event of the click."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"events"}),": ",(0,r.jsx)(n.em,{children:"Array<MbscCalendarEvent>"})," - The events for the clicked date."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resource"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - The id of the resource where the cell was clicked, if ",(0,r.jsx)(n.a,{href:"#opt-resources",children:"resources"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"selected"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies if the day is currently selected or not (before it was clicked)."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"source"}),": ",(0,r.jsx)(n.em,{children:"'calendar' | 'schedule' | 'timeline'"})," - The view where the cell was clicked."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"target"}),": ",(0,r.jsx)(n.em,{children:"HTMLElement"})," - The DOM element of the clicked cell."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onCellDoubleClick",children:"onCellDoubleClick"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscCellClickEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsx)(n.p,{children:"Triggered when a cell is double-clicked on the calendar day, scheduler cell, or timeline cell."}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"date"}),": ",(0,r.jsx)(n.em,{children:"Date"})," - The date of the clicked cell."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"domEvent"}),": ",(0,r.jsx)(n.em,{children:"Event"})," - The DOM event of the click."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"events"}),": ",(0,r.jsx)(n.em,{children:"Array<MbscCalendarEvent>"})," - The events for the clicked date."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resource"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - The id of the resource where the cell was clicked, if ",(0,r.jsx)(n.a,{href:"#opt-resources",children:"resources"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"selected"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies if the day is currently selected or not (before it was clicked)."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"source"}),": ",(0,r.jsx)(n.em,{children:"'calendar' | 'schedule' | 'timeline'"})," - The view where the cell was clicked."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"target"}),": ",(0,r.jsx)(n.em,{children:"HTMLElement"})," - The DOM element of the clicked cell."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onCellHoverIn",children:"onCellHoverIn"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscCellHoverEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsx)(n.p,{children:"Triggered when the mouse pointer hovers a day on the calendar view (does not apply for agenda view)."}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{chil
1dren:"args - The event argument with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"colors"}),": ",(0,r.jsx)(n.em,{children:"Array<MbscCalendarColor>"})," - The colors for the hovered cell."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"date"}),": ",(0,r.jsx)(n.em,{children:"Date"})," - The date of the hovered day."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"events"}),": ",(0,r.jsx)(n.em,{children:"Array<MbscCalendarEvent>"})," - The events for the hovered cell."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"invalids"}),": ",(0,r.jsx)(n.em,{children:"Array<MbscCalendarInvalid>"})," - The invalid dates for the hovered cell."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"labels"}),": ",(0,r.jsx)(n.em,{children:"Array<MbscCalendarLabel>"})," - If the cell has labels, contains the label objects for the hovered cell."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"marked"}),": ",(0,r.jsx)(n.em,{children:"Array<MbscCalendarMarked>"})," - If the cell is marked, contains the marked objects for the hovered cell."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"selected"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies if the cell is currently selected or not (in case of calendar view)."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"target"}),": ",(0,r.jsx)(n.em,{children:"HTMLElement"})," - The DOM element of the cell."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resource"}),": ",(0,r.jsx)(n.em,{children:"MbscResource"})," - The resource object for the hovered cell."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onCellHoverOut",children:"onCellHoverOut"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscCellHoverEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsx)(n.p,{children:"Triggered when the mouse pointer leaves a day on the calendar view (does not apply for agenda view)."}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"colors"}),": ",(0,r.jsx)(n.em,{children:"Array<MbscCalendarColor>"})," - The colors for the hovered cell."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"date"}),": ",(0,r.jsx)(n.em,{children:"Date"})," - The date of the hovered cell."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"events"}),": ",(0,r.jsx)(n.em,{children:"Array<MbscCalendarEvent>"})," - The events for the hovered cell."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"invalids"}),": ",(0,r.jsx)(n.em,{children:"Array<MbscCalendarInvalid>"})," - The invalid dates for the hovered cell."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"labels"}),": ",(0,r.jsx)(n.em,{children:"Array<MbscCalendarLabel>"})," - If the cell has labels, contains the label objects for the hovered cell."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"marked"}),": ",(0,r.jsx)(n.em,{children:"Array<MbscCalendarMarked>"})," - If the cell is marked, contains the marked objects for the hovered cell."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"selected"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies if the cell is currently selected or not (in case of calendar view)."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"target"}),": ",(0,r.jsx)(n.em,{children:"HTMLElement"})," - The DOM element of the cell."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resource"}),": ",(0,r.jsx)(n.em,{children:"MbscResource"})," - The resource object for the hovered cell."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onCellRightClick",children:"onCellRightClick"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscCellClickEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsx)(n.p,{children:"Triggered when a cell is right-clicked on the calendar, scheduler, or timeline grid ."}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"date"}),": ",(0,r.jsx)(n.em,{children:"Date"})," - The date of the clicked cell."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"domEvent"}),": ",(0,r.jsx)(n.em,{children:"Event"})," - The DOM event of the click."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"events"}),": ",(0,r.jsx)(n.em,{children:"Array<MbscCalendarEvent>"})," - The events for the clicked date."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resource"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - The id of the resource where the cell was clicked, if ",(0,r.jsx)(n.a,{href:"#opt-resources",children:"resources"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"selected"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies if the day is currently selected or not (before it was clicked)."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"source"}),": ",(0,r.jsx)(n.em,{children:"'calendar' | 'schedule' | 'timeline'"})," - The view where the cell was clicked."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"target"}),": ",(0,r.jsx)(n.em,{children:"HTMLElement"})," - The DOM element of the clicked cell."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onDestroy",children:"onDestroy"}),"\n",(0,r.jsx)(n.p,{children:"(args: any, inst: any) => void"}),"\n",(0,r.jsx)(n.p,{children:"Triggered when the component is destroyed."}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument object."}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onEventClick",children:"onEventClick"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscEventClickEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsx)(n.p,{children:"Triggered when an event is clicked."}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"date"}),": ",(0,r.jsx)(n.em,{children:"Date"})," - The date on which the event was clicked.\nIn case of the timeline view, this will be the first day of the event on the current view."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"domEvent"}),": ",(0,r.jsx)(n.em,{children:"Event"})," - The DOM event of the click."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"event"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The clicked calendar event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resource"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - The id of the resource where the event was clicked, if ",(0,r.jsx)(n.a,{href:"#opt-resources",children:"resources"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resourceObj"}),": ",(0,r.jsx)(n.em,{children:"MbscResource"})," - The resource where the event was clicked, if ",(0,r.jsx)(n.a,{href:"#opt-resources",children:"resources"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"slot"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - The id of the slot where the event was clicked, if ",(0,r.jsx)(n.a,{href:"#opt-slots",children:"slots"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"slotObj"}),": ",(0,r.jsx)(n.em,{children:"MbscSlot"})," - The slot where the event was clicked, if ",(0,r.jsx)(n.a,{href:"#opt-slots",children:"slots"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"source"}),": ",(0,r.jsx)(n.em,{children:"'agenda' | 'calendar' | 'schedule' | 'timeline' | 'popover'"})," - The view where the event was clicked."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"target"}),": ",(0,r.jsx)(n.em,{children:"HTMLElement"})," - The DOM element of the event."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onEventCreate",children:"onEventCreate"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscEventCreateEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsxs)(n.p,{children:["Triggered when an event is about to create and it is not yet rendered on its final position.\nEvent creation can be prevented by returning ",(0,r.jsx)(n.code,{children:"false"})," from the handler function."]}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"action"}),": ",(0,r.jsx)(n.em,{children:"'click' | 'drag' | 'externalDrop'"})," - The action which created the event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"domEvent"}),": ",(0,r.jsx)(n.em,{children:"Event"})," - The DOM event from the end of the gesture (mouseup or touchend)."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"event"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The newly created event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"originEvent"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The occurrence of the event which was dragged.\nWill be set only if the event was created by dragging a recurring event occurrence."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resourceObj"}),": ",(0,r.jsx)(n.em,{children:"MbscResource"})," - The resource where the event is being created, if ",(0,r.jsx)(n.a,{href:"#opt-resources",children:"resources"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"slotObj"}),": ",(0,r.jsx)(n.em,{children:"MbscSlot"})," - The slot where the event is being created, if ",(0,r.jsx)(n.a,{href:"#opt-slots",children:"slots"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"source"}),": ",(0,r.jsx)(n.em,{children:"'calendar' | 'timeline' | 'schedule'"})," - The view where the event is being created."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onEventCreateFailed",children:"onEventCreateFailed"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscEventCreateFailedEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsx)(n.p,{children:"Triggered when an event creation failed due to overlapping an invali
1d range or another event."}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"action"}),": ",(0,r.jsx)(n.em,{children:"'click' | 'drag' | 'externalDrop'"})," - The action which created the event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"event"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The newly created event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"invalid"}),": ",(0,r.jsx)(n.em,{children:"object"})," - The invalid object which the event overlapped."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"overlap"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The overlapped event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"originEvent"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The occurrence of the event which was dragged.\nWill be set only if the event was created by dragging a recurring event occurrence."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"source"}),": ",(0,r.jsx)(n.em,{children:"'calendar' | 'timeline' | 'schedule'"})," - The view where the event was created."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onEventCreated",children:"onEventCreated"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscEventCreatedEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsx)(n.p,{children:"Triggered when an event is created and it is rendered in its position."}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"action"}),": ",(0,r.jsx)(n.em,{children:"'click' | 'drag' | 'externalDrop'"})," - The action which created the event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"event"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The newly created event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"source"}),": ",(0,r.jsx)(n.em,{children:"'calendar' | 'timeline' | 'schedule'"})," - The view where the event was created."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"target"}),": ",(0,r.jsx)(n.em,{children:"HTMLElement"})," - The DOM element of the created event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resourceObj"}),": ",(0,r.jsx)(n.em,{children:"MbscResource"})," - The resource where the event is being created, if ",(0,r.jsx)(n.a,{href:"#opt-resources",children:"resources"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"slotObj"}),": ",(0,r.jsx)(n.em,{children:"MbscSlot"})," - The slot where the event is being created, if ",(0,r.jsx)(n.a,{href:"#opt-slots",children:"slots"})," are set."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onEventDelete",children:"onEventDelete"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscEventDeleteEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsxs)(n.p,{children:["Triggered when an event is about to be deleted and it is not yet removed from the view.\nEvent deletion can be performed with delete and backspace button on an active event.\nDeletion can be prevented by returning ",(0,r.jsx)(n.code,{children:"false"})," from the handler function."]}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"domEvent"}),": ",(0,r.jsx)(n.em,{children:"Event"})," - The DOM event from of the keydown action."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"event"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The event being deleted."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"events"}),": ",(0,r.jsx)(n.em,{children:"Array<MbscCalendarEvent>"})," - The events being deleted in case of multiple event selection."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"source"}),": ",(0,r.jsx)(n.em,{children:"'agenda' | 'calendar' | 'timeline' | 'schedule'"})," - The view where the event is being deleted."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onEventDeleted",children:"onEventDeleted"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscEventDeletedEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsx)(n.p,{children:"Triggered when an event is deleted and it is removed from the view."}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"event"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The deleted event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"events"}),": ",(0,r.jsx)(n.em,{children:"Array<MbscCalendarEvent>"})," - The deleted events in case of multiple event selection."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"source"}),": ",(0,r.jsx)(n.em,{children:"'agenda' | 'calendar' | 'timeline' | 'schedule'"})," - The view where the event was deleted."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onEventDoubleClick",children:"onEventDoubleClick"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscEventClickEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsx)(n.p,{children:"Triggered when an event is double-clicked."}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"date"}),": ",(0,r.jsx)(n.em,{children:"Date"})," - The date on which the event was clicked.\nIn case of the timeline view, this will be the first day of the event on the current view."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"domEvent"}),": ",(0,r.jsx)(n.em,{children:"Event"})," - The DOM event of the click."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"event"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The clicked calendar event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resource"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - The id of the resource where the event was clicked, if ",(0,r.jsx)(n.a,{href:"#opt-resources",children:"resources"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resourceObj"}),": ",(0,r.jsx)(n.em,{children:"MbscResource"})," - The resource where the event was clicked, if ",(0,r.jsx)(n.a,{href:"#opt-resources",children:"resources"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"slot"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - The id of the slot where the event was clicker, if ",(0,r.jsx)(n.a,{href:"#opt-slots",children:"slots"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"slotObj"}),": ",(0,r.jsx)(n.em,{children:"MbscResource"})," - The resource where the event was clicker, if ",(0,r.jsx)(n.a,{href:"#opt-slots",children:"slots"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"source"}),": ",(0,r.jsx)(n.em,{children:"'agenda' | 'calendar' | 'schedule' | 'timeline' | 'popover'"})," - The view where the event was clicked."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"target"}),": ",(0,r.jsx)(n.em,{children:"HTMLElement"})," - The DOM element of the event."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onEventDragEnd",children:"onEventDragEnd"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscEventDragEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsx)(n.p,{children:"Triggered when an event drag has ended."}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"domEvent"}),": ",(0,r.jsx)(n.em,{children:"Event"})," - The DOM event of the drag."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"event"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The dragged calendar event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resource"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - The id of the resource where the event was dragged, if ",(0,r.jsx)(n.a,{href:"#opt-resources",children:"resources"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resourceObj"}),": ",(0,r.jsx)(n.em,{children:"MbscResource"})," - The resource where the event was dragged, if ",(0,r.jsx)(n.a,{href:"#opt-resources",children:"resources"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"slot"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - The id of the slot where the event was dragged, if ",(0,r.jsx)(n.a,{href:"#opt-slots",children:"slots"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"slotObj"}),": ",(0,r.jsx)(n.em,{children:"MbscSlot"})," - The slot where the event was dragged, if ",(0,r.jsx)(n.a,{href:"#opt-slots",children:"slots"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"source"}),": ",(0,r.jsx)(n.em,{children:"'calendar' | 'schedule' | 'timeline'"})," - The view where the event was dragged."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onEventDragEnter",children:"onEventDragEnter"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscEventDragEvent) => void"}),"\n",(0,r.jsx)(n.p,{children:"Triggered when an event is dragged into the calendar/timeline/schedule view."}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["args - The event argument with the following properties:","\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"domEvent"}),": ",(0,r.jsx)(n.em,{children:"Event"})," - The DOM event of the drag."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"event"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The dragged calendar event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"source"}),": ",(0,r.jsx)(n.em,{children:"'calendar' | 'schedule' | 'timeline'"})," - The view where the event is dragged."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onEventDragLeave",children:"onEventDragLeave"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscEventDragEvent) => void"}),"\n",(0,r.jsx)(n.p,{children:"Triggered when an event is dragged out form the calendar/timeline/schedule view."}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["args - The event argument with the following properties:","\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"domEvent"}),": ",(0,r.jsx)(n.em,{children:"Event"})," - The DOM event of the drag."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"event"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The dragged calendar event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"source"}),": ",(0,r.jsx)(n.em,{children:"'calendar' | 'schedule' | 'timeline'"})," - The view where the event is dragged."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onEventDragStart",children:"onEventDragStart"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscEventDragEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsx)(n.p,{children:"Triggered when an event drag has started."}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"action"}),": ",(0,r.jsx)(n.em,{children:"'create' | 'resize' | 'move'"})," - The user action which triggered the event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"domEvent"}),": ",(0,r.jsx)(n.em,{children:"Event"})," - The DOM event of the drag."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"event"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The dragged calendar event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resource"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - The id of the resource where the event is dragged, if ",(0,r.jsx)(n.a,{href:"#opt-resources",children:"resources"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resourceObj"}),": ",(0,r.jsx)(n.em,{children:"MbscResource"})," - The resource where the event is dragged, if ",(0,r.jsx)(n.a,{href:"#opt-resources",children:"resources"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"slot"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - The id of the slot where the event is dragged, if ",(0,r.jsx)(n.a,{href:"#opt-slots",children:"slots"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"slotObj"}),": ",(0,r.jsx)(n.em,{children:"MbscSlot"})," - The slot where the event is dragged, if ",(0,r.jsx)(n.a,{href:"#opt-slots",children:"slots"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"source"}),": ",(0,r.jsx)(n.em,{children:"'calendar' | 'schedule' | 'timeline'"})," - The view where the event is dragged."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onEventHoverIn",children:"onEventHoverIn"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscEventClickEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsx)(n.p,{children:"Triggered when the mouse pointer hovers an event on the calendar."}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"date"}),": ",(0,r.jsx)(n.em,{children:"Date"})," - The date on which the event is hovered.\nIn case of the timeline view, this will be the first day of the event on the current view."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"domEvent"}),": ",(0,r.jsx)(n.em,{children:"Event"})," - The DOM event of the hover."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"event"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The hovered calendar event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resource"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - The id of the resource where the event is hovered, if ",(0,r.jsx)(n.a,{href:"#opt-resources",children:"resources"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resourceObj"}),": ",(0,r.jsx)(n.em,{children:"MbscResource"})," - The resource where the event is hovered, if ",(0,r.jsx)(n.a,{href:"#opt-resources",children:"resources"})," are set."]}),"\n",(0,r.jsxs)
1(n.li,{children:[(0,r.jsx)(n.code,{children:"slot"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - The id of the slot where the event is hovered, if ",(0,r.jsx)(n.a,{href:"#opt-slots",children:"slots"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"slotObj"}),": ",(0,r.jsx)(n.em,{children:"MbscSlot"})," - The slot where the event is hovered, if ",(0,r.jsx)(n.a,{href:"#opt-slots",children:"slots"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"source"}),": ",(0,r.jsx)(n.em,{children:"'agenda' | 'calendar' | 'schedule' | 'timeline' | 'popover'"})," - The view where the event is hovered."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"target"}),": ",(0,r.jsx)(n.em,{children:"HTMLElement"})," - The DOM element of the event."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onEventHoverOut",children:"onEventHoverOut"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscEventClickEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsx)(n.p,{children:"Triggered when the mouse pointer leaves an event on the calendar."}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"date"}),": ",(0,r.jsx)(n.em,{children:"Date"})," - The date on which the event was hovered.\nIn case of the timeline view, this will be the first day of the event on the current view."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"domEvent"}),": ",(0,r.jsx)(n.em,{children:"Event"})," - The DOM event of the hover."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"event"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The hovered calendar event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resource"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - The id of the resource where the event was hovered, if ",(0,r.jsx)(n.a,{href:"#opt-resources",children:"resources"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resourceObj"}),": ",(0,r.jsx)(n.em,{children:"MbscResource"})," - The resource where the event was hovered, if ",(0,r.jsx)(n.a,{href:"#opt-resources",children:"resources"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"slot"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - The id of the slot where the event was hovered, if ",(0,r.jsx)(n.a,{href:"#opt-slots",children:"slots"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"slotObj"}),": ",(0,r.jsx)(n.em,{children:"MbscSlot"})," - The slot where the event was hovered, if ",(0,r.jsx)(n.a,{href:"#opt-slots",children:"slots"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"source"}),": ",(0,r.jsx)(n.em,{children:"'agenda' | 'calendar' | 'schedule' | 'timeline' | 'popover'"})," - The view where the event was hovered."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"target"}),": ",(0,r.jsx)(n.em,{children:"HTMLElement"})," - The DOM element of the event."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onEventRightClick",children:"onEventRightClick"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscEventClickEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsx)(n.p,{children:"Triggered when an event is right-clicked."}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"date"}),": ",(0,r.jsx)(n.em,{children:"Date"})," - The date on which the event was clicked.\nIn case of the timeline view, this will be the first day of the event on the current view."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"domEvent"}),": ",(0,r.jsx)(n.em,{children:"Event"})," - The DOM event of the click."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"event"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The clicked calendar event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resource"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - The id of the resource where the event was clicked, if ",(0,r.jsx)(n.a,{href:"#opt-resources",children:"resources"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resourceObj"}),": ",(0,r.jsx)(n.em,{children:"MbscResource"})," - The resource where the event was clicked, if ",(0,r.jsx)(n.a,{href:"#opt-resources",children:"resources"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"slot"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - The id of the slot where the event was clicked, if ",(0,r.jsx)(n.a,{href:"#opt-slots",children:"slots"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"slotObj"}),": ",(0,r.jsx)(n.em,{children:"MbscSlot"})," - The slot where the event was clicked, if ",(0,r.jsx)(n.a,{href:"#opt-slots",children:"slots"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"source"}),": ",(0,r.jsx)(n.em,{children:"'agenda' | 'calendar' | 'schedule' | 'timeline' | 'popover'"})," - The view where the event was clicked."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"target"}),": ",(0,r.jsx)(n.em,{children:"HTMLElement"})," - The DOM element of the event."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onEventUpdate",children:"onEventUpdate"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscEventUpdateEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsxs)(n.p,{children:["Triggered when an event is about to update. Update can be prevented by returning ",(0,r.jsx)(n.code,{children:"false"})," from the handler function."]}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"domEvent"}),": ",(0,r.jsx)(n.em,{children:"Event"})," - The DOM event from the end of the gesture (mouseup or touchend)."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"event"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The updated event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"events"}),": ",(0,r.jsx)(n.em,{children:"Array<MbscCalendarEvent>"})," - The updated events.\nIt is set on recurring event delete, when ",(0,r.jsx)(n.a,{href:"#opt-selectMultipleEvents",children:"multiple event selection"})," is enabled."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"newEvent"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The newly created event.\nWill be set only if the dragged event was a recurring event occurrence."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"oldEvent"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The original event before the update."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"oldEvents"}),": ",(0,r.jsx)(n.em,{children:"Array<MbscCalendarEvent>"})," - The original events before the update.\nIt is set on recurring event delete, when ",(0,r.jsx)(n.a,{href:"#opt-selectMultipleEvents",children:"multiple event selection"})," is enabled."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"oldEventOccurrence"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The occurrence of the event which was dragged.\nWill be set only if the dragged event was a recurring event occurrence."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"oldResource"}),": number | string - The id of the resource from which the event was dragged."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"oldResourceObj"}),": ",(0,r.jsx)(n.em,{children:"MbscResource"})," - The resource from which the event was dragged."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"oldSlot"}),": number | string - The id of the slot from which the event was dragged."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"oldSlotObj"}),": ",(0,r.jsx)(n.em,{children:"MbscSlot"})," - The slot from which the event was dragged."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resource"}),": number | string - The id of the resource where the event was dropped."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resourceObj"}),": ",(0,r.jsx)(n.em,{children:"MbscResource"})," - The resource where the event was dropped."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"slot"}),": number | string - The id of the slot where the event was dropped."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"slotObj"}),": ",(0,r.jsx)(n.em,{children:"MbscSlot"})," - The slot where the event was dropped."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"source"}),": ",(0,r.jsx)(n.em,{children:"'calendar' | 'timeline' | 'schedule'"})," - The view where the event is being updated."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onEventUpdateFailed",children:"onEventUpdateFailed"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscEventUpdateFailedEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsx)(n.p,{children:"Triggered when an event update failed due to overlapping an invali
1d range or another event."}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"event"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The updated event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"invalid"}),": ",(0,r.jsx)(n.em,{children:"object"})," - The invalid object which the event overlapped."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"overlap"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The overlapped event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"newEvent"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The newly created event.\nWill be set only if the dragged event was a recurring event occurrence."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"oldEvent"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The original event before the update."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"oldEventOccurrence"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The occurrence of the event which was dragged.\nWill be set only if the dragged event was a recurring event occurrence."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"source"}),": ",(0,r.jsx)(n.em,{children:"'calendar' | 'timeline' | 'schedule'"})," - The view where the event was updated."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onEventUpdated",children:"onEventUpdated"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscEventUpdatedEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsx)(n.p,{children:"Triggered when an event is updated and is rendered in its new position.\nThis is where you update the event in your database or persistent storage."}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"event"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The updated event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"events"}),": ",(0,r.jsx)(n.em,{children:"Array<MbscCalendarEvent>"})," - The updated events.\nIt is set on recurring event delete, when ",(0,r.jsx)(n.a,{href:"#opt-selectMultipleEvents",children:"multiple event selection"})," is enabled."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"oldEvent"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The original event before the update."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"oldEvents"}),": ",(0,r.jsx)(n.em,{children:"Array<MbscCalendarEvent>"})," - The original events before the update.\nIt is set on recurring event delete, when ",(0,r.jsx)(n.a,{href:"#opt-selectMultipleEvents",children:"multiple event selection"})," is enabled."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resourceObj"}),": ",(0,r.jsx)(n.em,{children:"MbscResource"})," - The resource where the event is updated, if ",(0,r.jsx)(n.a,{href:"#opt-resources",children:"resources"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"slotObj"}),": ",(0,r.jsx)(n.em,{children:"MbscSlot"})," - The slot where the event is updated, if ",(0,r.jsx)(n.a,{href:"#opt-slots",children:"slots"})," are set."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"source"}),": ",(0,r.jsx)(n.em,{children:"'calendar' | 'timeline' | 'schedule'"})," - The view where the event was updated."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"target"}),": ",(0,r.jsx)(n.em,{children:"HTMLElement"})," - The DOM element of the updated event."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onInit",children:"onInit"}),"\n",(0,r.jsx)(n.p,{children:"(args: any, inst: any) => void"}),"\n",(0,r.jsx)(n.p,{children:"Triggered when the component is initialized."}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument object."}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onPageChange",children:"onPageChange"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscPageChangeEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsx)(n.p,{children:"Triggered when the calendar page is changed (with buttons or swipe)."}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"firstDay"}),": ",(0,r.jsx)(n.em,{children:"Date"})," - The first day of the displayed page."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"lastDay"}),": ",(0,r.jsx)(n.em,{children:"Date"})," - The last day of the displayed page, as an exclusive end date, pointing to 00:00 of the next day."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"month"}),": ",(0,r.jsx)(n.em,{children:"Date"})," - The first day of the visible month in case of month view."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onPageLoaded",children:"onPageLoaded"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscPageLoadedEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsx)(n.p,{children:"Triggered when the calendar page is changed (with buttons or swipe) and the view finished rendering."}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"firstDay"}),": ",(0,r.jsx)(n.em,{children:"Date"})," - The first day of the displayed page."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"lastDay"}),": ",(0,r.jsx)(n.em,{children:"Date"})," - The last day of the displayed page, as an exclusive end date, pointing to 00:00 of the next day."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"month"}),": ",(0,r.jsx)(n.em,{children:"Date"})," - The first day of the visible month in case of month view."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onPageLoading",children:"onPageLoading"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscPageLoadingEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsx)(n.p,{children:"Triggered before the markup of a calendar page is starting to render."}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"firstDay"}),": ",(0,r.jsx)(n.em,{children:"Date"})," - The first day of the displayed page."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"lastDay"}),": ",(0,r.jsx)(n.em,{children:"Date"})," - The last day of the displayed page, as an exclusive end date, pointing to 00:00 of the next day."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"month"}),": ",(0,r.jsx)(n.em,{children:"Date"})," - The first day of the visible month in case of month view."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onResourceClick",children:"onRes
1ourceClick"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscResourceClickEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsx)(n.p,{children:"Triggered when a resource cell is clicked on the scheduler or timeline."}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"date"}),": ",(0,r.jsx)(n.em,{children:"Date"})," - The date of the day on which the resource was clicked, when resources are grouped by day."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"domEvent"}),": ",(0,r.jsx)(n.em,{children:"Event"})," - The DOM event of the click."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resource"}),": ",(0,r.jsx)(n.em,{children:"MbscResource"})," - The resource associated with the clicked cell."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"source"}),": ",(0,r.jsx)(n.em,{children:"'schedule' | 'timeline'"})," - The view where the cell was clicked."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"target"}),": ",(0,r.jsx)(n.em,{children:"HTMLElement"})," - The DOM element of the clicked cell."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onResourceDoubleClick",children:"onResourceDoubleClick"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscResourceClickEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsx)(n.p,{children:"Triggered when a resource cell is double-clicked on the scheduler or timeline."}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"date"}),": ",(0,r.jsx)(n.em,{children:"Date"})," - The date of the day on which the resource was clicked, when resources are grouped by day."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"domEvent"}),": ",(0,r.jsx)(n.em,{children:"Event"})," - The DOM event of the click."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resource"}),": ",(0,r.jsx)(n.em,{children:"MbscResource"})," - The resource associated with the clicked cell."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"source"}),": ",(0,r.jsx)(n.em,{children:"'schedule' | 'timeline'"})," - The view where the cell was clicked."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"target"}),": ",(0,r.jsx)(n.em,{children:"HTMLElement"})," - The DOM element of the clicked cell."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onResourceHoverIn",children:"onResourceHoverIn"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscResourceHoverEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsx)(n.p,{children:"Triggered when the mouse pointer hovers a resource cell on the timeline or scheduler view."}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"date"}),": ",(0,r.jsx)(n.em,{children:"Date"})," - The date of the hovered resource cell in case of group by date."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resource"}),": ",(0,r.jsx)(n.em,{children:"MbscResource"})," - The hovered resource."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"source"}),": ",(0,r.jsx)(n.em,{children:"'schedule' | 'timeline'"})," - The view where the resource cell was hovered."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"target"}),": ",(0,r.jsx)(n.em,{children:"HTMLElement"})," - The DOM element of the resource cell."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onResourceHoverOut",children:"onRes
1ourceHoverOut"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscResourceHoverEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsx)(n.p,{children:"Triggered when the mouse pointer leaves a resource cell on the timeline or scheduler view."}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"date"}),": ",(0,r.jsx)(n.em,{children:"Date"})," - The date of the hovered resource cell in case of group by date."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resource"}),": ",(0,r.jsx)(n.em,{children:"MbscResource"})," - The hovered resource."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"source"}),": ",(0,r.jsx)(n.em,{children:"'schedule' | 'timeline'"})," - The view where the resource cell was hovered."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"target"}),": ",(0,r.jsx)(n.em,{children:"HTMLElement"})," - The DOM element of the resource cell."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onResourceRightClick",children:"onResourceRightClick"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscResourceClickEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsx)(n.p,{children:"Triggered when a resource cell is right-clicked on the scheduler or timeline."}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"date"}),": ",(0,r.jsx)(n.em,{children:"Date"})," - The date of the day on which the resource was clicked, when resources are grouped by day."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"domEvent"}),": ",(0,r.jsx)(n.em,{children:"Event"})," - The DOM event of the click."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resource"}),": ",(0,r.jsx)(n.em,{children:"MbscResource"})," - The resource associated with the clicked cell."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"source"}),": ",(0,r.jsx)(n.em,{children:"'schedule' | 'timeline'"})," - The view where the cell was clicked."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"target"}),": ",(0,r.jsx)(n.em,{children:"HTMLElement"})," - The DOM element of the clicked cell."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onSelectedDateChange",children:"onSelectedDateChange"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscSelectedDateChangeEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsxs)(n.p,{children:["Triggered when the selected date is changed, e.g. by clicking on a day on a calendar view, or by using the navigation arrows.\nYou can use this event in conjunction with the ",(0,r.jsx)(n.a,{href:"#opt-selectedDate",children:"selectedDate"})," option\nto customize where the Eventcalendar should navigate."]}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"date"}),": ",(0,r.jsx)(n.em,{children:"Date"})," - The newly selected date."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"event-onSelectedEventsChange",children:"onSelectedEventsChange"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscSelectedEventsChangeEvent, inst: EventcalendarBase) => void"}),"\n",(0,r.jsxs)(n.p,{children:["Triggered when an event is selected or deselected on the UI,\nwhen ",(0,r.jsx)(n.a,{href:"#opt-selectMultipleEvents",children:"multiple event selection"})," is enabled."]}),"\n",(0,r.jsxs)(n.p,{children:["You can also select events programmatically using the ",(0,r.jsx)(n.a,{href:"#opt-selectedEvents",children:"selectedEvents"})," option."]}),"\n",(0,r.jsx)(n.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"args - The event argument with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"events"}),": ",(0,r.jsx)(n.em,{children:"Array<MbscCalendarEvent>"})," - The selected events."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"inst - The component instance."}),"\n"]}),"\n"]})]})}function a(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}function x(e){const n={a:"a",code:"code",h3:"h3",li:"li",p:"p",strong:"strong",ul:"ul",...(0,l.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h3,{id:"localization-allDayText",children:"allDayText"}),"\n",(0,r.jsx)(n.p,{children:"string"}),"\n",(0,r.jsx)(n.p,{children:"Text for all day events."}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"'All-day'"})]}),"\n",(0,r.jsx)(n.h3,{id:"localization-amText",children:"amText"}),"\n",(0,r.jsx)(n.p,{children:"string"}),"\n",(0,r.jsx)(n.p,{children:"Text for AM."}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"'am'"})]}),"\n",(0,r.jsx)(n.h3,{id:"localization-calendarSystem",children:"calendarSystem"}),"\n",(0,r.jsx)(n.p,{children:"MbscCalendarSystem"}),"\n",(0,r.jsx)(n.p,{children:"Specifies the calendar system to be used. Supported calendars:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Gregorian - Gregorian calendar. This is the default calendar system."}),"\n",(0,r.jsx)(n.li,{children:"Jalali - Persian calendar. The Farsi language needs to be included to the package."}),"\n",(0,r.jsx)(n.li,{children:"Hijri - Hijri calendar. The Arabic language needs to be included to the package"}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"localization-dateFormat",children:"dateFormat"}),"\n",(0,r.jsx)(n.p,{children:"string"}),"\n",(0,r.jsx)(n.p,{children:"The format for parsed and displayed dates:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"M"})," - month of year (no leading zero)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"MM"})," - month of year (two digit)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"MMM"})," - month name short"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"MMMM"})," - month name long"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"D"})," - day of month (no leading zero)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"DD"})," - day of month (two digit)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"DDD"})," - day of week (short)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"DDDD"})," - day of week (long)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"YY"})," - year (two digit)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"YYYY"})," - year (four digit)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"'...'"})," - literal text"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"''"})," - single quote"]}),"\n",(0,r.jsx)(n.li,{children:"anything else - literal text"}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"'MM/DD/YYYY'"})]}),"\n",(0,r.jsx)(n.h3,{id:"localization-dateFormatFull",children:"dateFormatFull"}),"\n",(0,r.jsx)(n.p,{children:"string"}),"\n",(0,r.jsxs)(n.p,{children:["Human readable date format, used by screen readers to read out full dates.\nCharacters have the same meaning as in the ",(0,r.jsx)(n.a,{href:"#localization-dateFormat",children:"dateFormat"})," option."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"'DDDD, MMMM D, YYYY'"})]}),"\n",(0,r.jsx)(n.h3,{id:"localization-dateFormatLong",children:"dateFormatLong"}),"\n",(0,r.jsx)(n.p,{children:"string"}),"\n",(0,r.jsxs)(n.p,{children:["Long date format, used by the agenda view and timeline day headers.\nCharacters have the same meaning as in the ",(0,r.jsx)(n.a,{href:"#localization-dateFormat",children:"dateFormat"})," option."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"'D DDD MMM YYYY'"})]}),"\n",(0,r.jsx)(n.h3,{id:"localization-dayNames",children:"dayNames"}),"\n",(0,r.jsx)(n.p,{children:"Array<string>"}),"\n",(0,r.jsx)(n.p,{children:"The list of long day names, starting from Sunday."}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']"})]}),"\n",(0,r.jsx)(n.h3,{id:"localization-dayNamesMin",children:"dayNamesMin"}),"\n",(0,r.jsx)(n.p,{children:"Array<string>"}),"\n",(0,r.jsx)(n.p,{children:"The list of minimal day names, starting from Sunday."}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"['S', 'M', 'T', 'W', 'T', 'F', 'S']"})]}),"\n",(0,r.jsx)(n.h3,{id:"localization-dayNamesShort",children:"dayNamesShort"}),"\n",(0,r.jsx)(n.p,{children:"Array<string>"}),"\n",(0,r.jsx)(n.p,{children:"The list of abbreviated day names, starting from Sunday."}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']"})]}),"\n",(0,r.jsx)(n.h3,{id:"localization-firstDay",children:"firstDay"}),"\n",(0,r.jsx)(n.p,{children:"number"}),"\n",(0,r.jsx)(n.p,{children:"Set the first day of the week: Sunday is 0, Monday is 1, etc."}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"0"})]}),"\n",(0,r.jsx)(n.h3,{id:"localization-locale",children:"locale"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"#type-MbscLocale",children:"MbscLocale"})}),"\n",(0,r.jsxs)(n.p,{children:["Sets the language of the component. The locale object c
1ontains all the translations for a given language.\nThe built in language modules are listed below. If a language is not listed, it can be provided as a\n",(0,r.jsx)(n.a,{href:"https://mobiscroll.com/docs/core-concepts/localization#language-modules",children:"custom language module"}),"."]}),"\n",(0,r.jsx)(n.p,{children:"Supported values:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["Arabic: ",(0,r.jsx)(n.code,{children:"localeAr"}),", ",(0,r.jsx)(n.code,{children:"'ar'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Bulgarian: ",(0,r.jsx)(n.code,{children:"localeBg"}),", ",(0,r.jsx)(n.code,{children:"'bg'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Catalan: ",(0,r.jsx)(n.code,{children:"localeCa"}),", ",(0,r.jsx)(n.code,{children:"'ca'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Czech: ",(0,r.jsx)(n.code,{children:"localeCs"}),", ",(0,r.jsx)(n.code,{children:"'cs'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Chinese: ",(0,r.jsx)(n.code,{children:"localeZh"}),", ",(0,r.jsx)(n.code,{children:"'zh'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Croatian: ",(0,r.jsx)(n.code,{children:"localeHr"}),", ",(0,r.jsx)(n.code,{children:"'hr'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Danish: ",(0,r.jsx)(n.code,{children:"localeDa"}),", ",(0,r.jsx)(n.code,{children:"'da'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Dutch: ",(0,r.jsx)(n.code,{children:"localeNl"}),", ",(0,r.jsx)(n.code,{children:"'nl'"})]}),"\n",(0,r.jsxs)(n.li,{children:["English: ",(0,r.jsx)(n.code,{children:"localeEn"})," or ",(0,r.jsx)(n.code,{children:"undefined"}),", ",(0,r.jsx)(n.code,{children:"'en'"})]}),"\n",(0,r.jsxs)(n.li,{children:["English (UK): ",(0,r.jsx)(n.code,{children:"localeEnGB"}),", ",(0,r.jsx)(n.code,{children:"'en-GB'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Farsi: ",(0,r.jsx)(n.code,{children:"localeFa"}),", ",(0,r.jsx)(n.code,{children:"'fa'"})]}),"\n",(0,r.jsxs)(n.li,{children:["German: ",(0,r.jsx)(n.code,{children:"localeDe"}),", ",(0,r.jsx)(n.code,{children:"'de'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Greek: ",(0,r.jsx)(n.code,{children:"localeEl"}),", ",(0,r.jsx)(n.code,{children:"'el'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Spanish: ",(0,r.jsx)(n.code,{children:"localeEs"}),", ",(0,r.jsx)(n.code,{children:"'es'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Finnish: ",(0,r.jsx)(n.code,{children:"localeFi"}),", ",(0,r.jsx)(n.code,{children:"'fi'"})]}),"\n",(0,r.jsxs)(n.li,{children:["French: ",(0,r.jsx)(n.code,{children:"localeFr"}),", ",(0,r.jsx)(n.code,{children:"'fr'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Hebrew: ",(0,r.jsx)(n.code,{children:"localeHe"}),", ",(0,r.jsx)(n.code,{children:"'he'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Hindi: ",(0,r.jsx)(n.code,{children:"localeHi"}),", ",(0,r.jsx)(n.code,{children:"'hi'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Hungarian: ",(0,r.jsx)(n.code,{children:"localeHu"}),", ",(0,r.jsx)(n.code,{children:"'hu'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Italian: ",(0,r.jsx)(n.code,{children:"localeIt"}),", ",(0,r.jsx)(n.code,{children:"'it'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Japanese: ",(0,r.jsx)(n.code,{children:"localeJa"}),", ",(0,r.jsx)(n.code,{children:"'ja'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Korean: ",(0,r.jsx)(n.code,{children:"localeKo"}),", ",(0,r.jsx)(n.code,{children:"'ko'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Lithuanian: ",(0,r.jsx)(n.code,{children:"localeLt"}),", ",(0,r.jsx)(n.code,{children:"'lt'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Norwegian: ",(0,r.jsx)(n.code,{children:"localeNo"}),", ",(0,r.jsx)(n.code,{children:"'no'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Polish: ",(0,r.jsx)(n.code,{children:"localePl"}),", ",(0,r.jsx)(n.code,{children:"'pl'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Portuguese (Brazilian): ",(0,r.jsx)(n.code,{children:"localePtBR"}),", ",(0,r.jsx)(n.code,{children:"'pt-BR'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Portuguese (European): ",(0,r.jsx)(n.code,{children:"localePtPT"}),", ",(0,r.jsx)(n.code,{children:"'pt-PT'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Romanian: ",(0,r.jsx)(n.code,{children:"localeRo"}),", ",(0,r.jsx)(n.code,{children:"'ro'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Russian: ",(0,r.jsx)(n.code,{children:"localeRu"}),", ",(0,r.jsx)(n.code,{children:"'ru'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Russian (UA): ",(0,r.jsx)(n.code,{children:"localeRuUA"}),", ",(0,r.jsx)(n.code,{children:"'ru-UA'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Slovak: ",(0,r.jsx)(n.code,{children:"localeSk"}),", ",(0,r.jsx)(n.code,{children:"'sk'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Serbian: ",(0,r.jsx)(n.code,{children:"localeSr"}),", ",(0,r.jsx)(n.code,{children:"'sr'"})]}
1),"\n",(0,r.jsxs)(n.li,{children:["Swedish: ",(0,r.jsx)(n.code,{children:"localeSv"}),", ",(0,r.jsx)(n.code,{children:"'sv'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Thai: ",(0,r.jsx)(n.code,{children:"localeTh"}),", ",(0,r.jsx)(n.code,{children:"'th'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Turkish: ",(0,r.jsx)(n.code,{children:"localeTr"}),", ",(0,r.jsx)(n.code,{children:"'tr'"})]}),"\n",(0,r.jsxs)(n.li,{children:["Ukrainian: ",(0,r.jsx)(n.code,{children:"localeUa"}),", ",(0,r.jsx)(n.code,{children:"'ua'"})]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"localization-monthNames",children:"monthNames"}),"\n",(0,r.jsx)(n.p,{children:"Array<string>"}),"\n",(0,r.jsx)(n.p,{children:"The list of full month names."}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']"})]}),"\n",(0,r.jsx)(n.h3,{id:"localization-monthNamesShort",children:"monthNamesShort"}),"\n",(0,r.jsx)(n.p,{children:"Array<string>"}),"\n",(0,r.jsx)(n.p,{children:"The list of abbreviated month names."}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']"})]}),"\n",(0,r.jsx)(n.h3,{id:"localization-newEventText",children:"newEventText"}),"\n",(0,r.jsx)(n.p,{children:"string"}),"\n",(0,r.jsxs)(n.p,{children:["Title for the newly created event with the ",(0,r.jsx)(n.a,{href:"#opt-dragToCreate",children:"dragToCreate"})," and the\n",(0,r.jsx)(n.a,{href:"#opt-clickToCreate",children:"clickToCreate"})," action."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"'New event'"})]}),"\n",(0,r.jsx)(n.h3,{id:"localization-nextPageText",children:"nextPageText"}),"\n",(0,r.jsx)(n.p,{children:"string"}),"\n",(0,r.jsx)(n.p,{children:"Text for the next button in the calendar header, used as accessibility label."}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"'Next page'"})]}),"\n",(0,r.jsx)(n.h3,{id:"localization-pmText",children:"pmText"}),"\n",(0,r.jsx)(n.p,{children:"string"}),"\n",(0,r.jsx)(n.p,{children:"Text for PM."}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"'pm'"})]}),"\n",(0,r.jsx)(n.h3,{id:"localization-prevPageText",children:"prevPageText"}),"\n",(0,r.jsx)(n.p,{children:"string"}),"\n",(0,r.jsx)(n.p,{children:"Text for the previous button in the calendar header, used as accessibility label."}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"'Previous page'"})]}),"\n",(0,r.jsx)(n.h3,{id:"localization-rtl",children:"rtl"}),"\n",(0,r.jsx)(n.p,{children:"boolean"}),"\n",(0,r.jsx)(n.p,{children:"Enables right-to-left display."}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"false"})]}),"\n",(0,r.jsx)(n.h3,{id:"localization-timeFormat",children:"timeFormat"}),"\n",(0,r.jsx)(n.p,{children:"string"}),"\n",(0,r.jsx)(n.p,{children:"The format for parsed and displayed times:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"h"})," - 12 hour format (no leading zero)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"hh"})," - 12 hour format (leading zero)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"H"})," - 24 hour format (no leading zero)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"HH"})," - 24 hour format (leading zero)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"m"})," - minutes (no leading zero)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"mm"})," - minutes (leading zero)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"s"})," - seconds (no leading zero)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"ss"})," - seconds (leading zero)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"a"})," - lowercase am/pm"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"A"})," - uppercase AM/PM"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"'...'"})," - literal text"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"''"})," - single quote"]}),"\n",(0,r.jsx)(n.li,{children:"anything else - literal text"}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"'hh:mm A'"})]}),"\n",(0,r.jsx)(n.h3,{id:"localization-todayText",children:"todayText"}),"\n",(0,r.jsx)(n.p,{children:"string"}),"\n",(0,r.jsx)(n.p,{children:'Text for the "Today" button.'}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"'Today'"})]})]})}function j(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(x,{...e})}):x(e)}function u(e){const n={a:"a",code:"code",em:"em",h3:"h3",li:"li",p:"p",strong:"strong",ul:"ul",...(0,l.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h3,{id:"renderer-renderBufferAfter",children:"renderBufferAfter"}),"\n",(0,r.jsx)(n.p,{children:"(event: MbscCalendarEventData) => any"}),"\n",(0,r.jsxs)(n.p,{children:["Customize the buffer area that is displayed at the end of the scheduler and timeline events.\nThe buffer can be defined with the help of the ",(0,r.jsx)(n.code,{children:"bufferAfter"})," property of the ",(0,r.jsx)(n.a,{href:"#opt-data",children:"event data"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["The template will receive an event object as data.\nSome of the event specific details are computed, but there is also a reference to the ",(0,r.jsx)(n.strong,{children:"original"})," event they come from.\nThe following event specific properties are available:"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"allDay"}),": ",(0,r.jsx)(n.em,{children:"string"})," - The localized all-day text in case of all day events."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"end"}),": ",(0,r.jsx)(n.em,{children:"string"})," - The formatted end time, if the event is not all day."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"id"}),": ",(0,r.jsx)(n.em,{children:"string"})," - The id of the event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"isMultiDay"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - True if the event spans across multiple days."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"lastDay"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - True if it's rendered on the last day of a multiple event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"original"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The original event object."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"start"}),": ",(0,r.jsx)(n.em,{children:"string"})," - The formatted start time, if the event is not all day."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"title"}),": ",(0,r.jsx)(n.em,{children:"string"})," - The title of the event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"currentResource"}),": ",(0,r.jsx)(n.em,{children:"string | number"}
1)," - The resource of the row or column where the event is being rendered."]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"renderer-renderBufferBefore",children:"renderBufferBefore"}),"\n",(0,r.jsx)(n.p,{children:"(event: MbscCalendarEventData) => any"}),"\n",(0,r.jsxs)(n.p,{children:["Customize the buffer area that is displayed at the start of the scheduler and timeline events.\nThe buffer can be defined with the help of the ",(0,r.jsx)(n.code,{children:"bufferBefore"})," property of the ",(0,r.jsx)(n.a,{href:"#opt-data",children:"event data"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["The template will receive an event object as data.\nSome of the event specific details are computed, but there is also a reference to the ",(0,r.jsx)(n.strong,{children:"original"})," event they come from.\nThe following event specific properties are available:"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"allDay"}),": ",(0,r.jsx)(n.em,{children:"string"})," - The localized all-day text in case of all day events."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"end"}),": ",(0,r.jsx)(n.em,{children:"string"})," - The formatted end time, if the event is not all day."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"id"}),": ",(0,r.jsx)(n.em,{children:"string"})," - The id of the event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"isMultiDay"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - True if the event spans across multiple days."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"lastDay"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - True if it's rendered on the last day of a multiple event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"original"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The original event object."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"start"}),": ",(0,r.jsx)(n.em,{children:"string"})," - The formatted start time, if the event is not all day."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"title"}),": ",(0,r.jsx)(n.em,{children:"string"})," - The title of the event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"currentResource"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - The resource of the row or column where the event is being rendered."]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"renderer-renderCell",children:"renderCell"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscCalendarCellData) => any"}),"\n",(0,r.jsx)(n.p,{children:"Customize the cells of the Eventcalendar in scheduler and timeline views."}),"\n",(0,r.jsxs)(n.p,{children:["The template will receive an object as context, which can be used to display custom content in the cells.\nKeep the cell template simple, as it will be called and rendered ",(0,r.jsx)(n.strong,{children:"very frequently"})," during scroll and view changes."]}),"\n",(0,r.jsx)(n.p,{children:"The object passed to the template contains the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"colors"}),": ",(0,r.jsx)(n.em,{children:"Array<MbscCalendarColor>"})," - The list of colors for the current cell."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"date"}),": ",(0,r.jsx)(n.em,{children:"Date"})," \u2013 The current cell's date."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"events"}),": ",(0,r.jsx)(n.em,{children:"Array<MbscCalendarEvent>"})," - The list of events for the current cell."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"invalids"}),": ",(0,r.jsx)(n.em,{children:"Array<MbscCalendarInvalid>"})," - The list of invalids for the current cell."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resource"}),": ",(0,r.jsx)(n.em,{children:"MbscResource"})," \u2013 The resource object for the current cell."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"slot"}),": ",(0,r.jsx)(n.em,{children:"MbscSlot"})," - The slot object for the current cell."]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"renderer-renderDay",children:"renderDay"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscCalendarDayData) => any"}),"\n",(0,r.jsx)(n.p,{children:"Customize the day cells of the calendar view and the date header in case of scheduler and timeline views."}),"\n",(0,r.jsxs)(n.p,{children:["If you are looking to customize only the day cells content and don't want to bother with the styling of the event,\nin case of calendar and scheduler views you can use the ",(0,r.jsx)(n.a,{href:"#renderer-renderDayContent",children:"renderDayContent"})," option."]}),"\n",(0,r.jsx)(n.p,{children:"The following day specific details are available:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"date"}),": ",(0,r.jsx)(n.em,{children:"Date"})," - The date of the rendered day."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"selected"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - True if the date is selected (in case of the calendar view)."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"events"}),": ",(0,r.jsx)(n.em,{children:"Array<MbscCalendarEvent>"})," - The list of events for the day."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resource"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - The id of the resource in case of the scheduler (week and month views)\nwhen the events are grouped by resources."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"isActive"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - True for the current day (in case of the timeline view)."]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"renderer-renderDayContent",children:"renderDayContent"}),"\n",(0,r.jsx)(n.p,{children:"(args: MbscCalendarDayData) => any"}),"\n",(0,r.jsx)(n.p,{children:"Customize the day cells content of the event calendar. The Eventcalendar will take care of the styling and you can focus on\nwhat you show beside the day number."}),"\n",(0,r.jsxs)(n.p,{children:["If you are looking to fully customize the day (e.g. add custom hover effects) you will need to use the\n",(0,r.jsx)(n.a,{href:"#renderer-renderDay",children:"renderDay"})," option."]}),"\n",(0,r.jsx)(n.p,{children:"The following properties are available:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"date"}),": ",(0,r.jsx)(n.em,{children:"Date"})," - The date of the rendered day."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"selected"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - True if the date is selected (in case of the calendar view)."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"events"}),": ",(0,r.jsx)(n.em,{children:"Array<MbscCalendarEvent>"})," - The list of events for the day."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resource"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - The id of the resource in case of the scheduler (week and month views)\nwhen the events are grouped by resources."]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"renderer-renderHeader",children:"renderHeader"}
1),"\n",(0,r.jsx)(n.p,{children:"() => any"}),"\n",(0,r.jsx)(n.p,{children:"Customize the header of the event calendar.\nYou can use custom markup and the built in header components of the calendar."}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"renderer-renderResource",children:"renderResource"}),"\n",(0,r.jsxs)(n.p,{children:["(resource: ",(0,r.jsx)(n.a,{href:"#type-MbscResource",children:"MbscResource"}),", day: Date) => any"]}),"\n",(0,r.jsx)(n.p,{children:"Customize how the resources are rendered on the scheduler and timeline views."}),"\n",(0,r.jsx)(n.p,{children:"The following properties are available:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resource"}),": ",(0,r.jsx)(n.em,{children:"MbscResource"})," - The rendered resource."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"day"}),": ",(0,r.jsx)(n.em,{children:"Date"})," - The date on which the resource is rendered.\nAvailable when grouping by date in the scheduler view,\nor when vertical day resolution is used in the timeline view."]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"renderer-renderScheduleEvent",children:"renderScheduleEvent"}),"\n",(0,r.jsx)(n.p,{children:"(event: MbscCalendarEventData) => any"}),"\n",(0,r.jsx)(n.p,{children:"Customize the events that appear on the scheduler and timeline.\nThe Eventcalendar will take care of the positioning,\nbut everything else (like background color, hover effect, etc.) is left to you."}),"\n",(0,r.jsxs)(n.p,{children:["If you are looking to customize only the content (e.g. add custom elements) and don't want to bother with the styling of the event,\nyou can use the ",(0,r.jsx)(n.a,{href:"#renderer-renderScheduleEventContent",children:"renderScheduleEventContent"})," option."]}),"\n",(0,r.jsxs)(n.p,{children:["Some of the event specific details are computed, but there is also a reference to the ",(0,r.jsx)(n.strong,{children:"original"})," event they come from.\nThe following event specific properties are available:"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"allDay"}),": ",(0,r.jsx)(n.em,{children:"string"})," - The localized all-day text in case of all day events."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"end"}),": ",(0,r.jsx)(n.em,{children:"string"})," - The formatted end time, if the event is not all day."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"id"}),": ",(0,r.jsx)(n.em,{children:"string"})," - The id of the event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"isMultiDay"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - True if the event spans across multiple days."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"lastDay"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - True if it's rendered on the last day of a multiple event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"original"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The original event object."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"start"}),": ",(0,r.jsx)(n.em,{children:"string"})," - The formatted start time, if the event is not all day."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"title"}),": ",(0,r.jsx)(n.em,{children:"string"})," - The title of the event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"currentResource"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - The resource of the row or column where the event is being rendered."]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.h3,{id:"renderer-renderScheduleEventContent",children:"renderScheduleEventContent"}),"\n",(0,r.jsx)(n.p,{children:"(event: MbscCalendarEventData) => any"}),"\n",(0,r.jsx)(n.p,{children:"Customize the event content that appears on the scheduler and timeline.\nThe Eventcalendar will take care of styling and you can focus on what you show inside of the event."}),"\n",(0,r.jsxs)(n.p,{children:["If you are looking to fully customize the event (e.g. add custom hover effects) you will need to use\nthe ",(0,r.jsx)(n.a,{href:"#renderer-renderScheduleEvent",children:"renderScheduleEvent"})," option. In that case you will only get\nthe positioning done by the Eventcalendar and everything else is up to you."]}),"\n",(0,r.jsxs)(n.p,{children:["Some of the event specific details are computed, but there is also a reference to the ",(0,r.jsx)(n.strong,{children:"original"})," event they come from.\nThe following event specific properties are available:"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"allDay"}),": ",(0,r.jsx)(n.em,{children:"string"})," - The localized all-day text in case of all day events."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"end"}),": ",(0,r.jsx)(n.em,{children:"string"})," - The formatted end time, if the event is not all day."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"id"}),": ",(0,r.jsx)(n.em,{children:"string"})," - The id of the event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"isMultiDay"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - True if the event spans across multiple days."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"lastDay"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - True if it's rendered on the last day of a multiple event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"original"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarEvent"})," - The original event object."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"start"}),": ",(0,r.jsx)(n.em,{children:"string"})," - The formatted start time, if the event is not all day."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"title"}),": ",(0,r.jsx)(n.em,{children:"string"})," - The title of the event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"currentResource"}),": ",(0,r.jsx)(n.em,{children:"string | number"}
1)," - The resource of the row or column where the event is being rendered."]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Default value"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]})]})}function p(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}function m(e){const n={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...(0,l.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h3,{id:"type-MbscCalendarColor",children:"MbscCalendarColor"}),"\n",(0,r.jsx)(n.p,{children:"Interface"}),"\n",(0,r.jsx)(n.p,{children:"Properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"allDay"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the date you want to color is all day or not."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"background"}),": ",(0,r.jsx)(n.em,{children:"string"})," - Background color of the cell. It can be any valid CSS color (",(0,r.jsx)(n.code,{children:"'red'"}),", ",(0,r.jsx)(n.code,{children:"'#ff0000'"}),", ",(0,r.jsx)(n.code,{children:"'rgb(255, 0, 0)'"}),", etc.)."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"cellCssClass"}),": ",(0,r.jsx)(n.em,{children:"string"})," - CSS class for the day cell. Only applicable for the calendar view."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"cssClass"}),": ",(0,r.jsx)(n.em,{children:"string"})," - Specifies a custom CSS class for the color.\nUseful when customization is needed for the background of cells and time ranges.\nOnly applicable for the timeline and scheduler views."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"date"}),": ",(0,r.jsx)(n.em,{children:"string | object | Date"})," - Specifies a single date for the color"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"end"}),": ",(0,r.jsx)(n.em,{children:"string | object | Date"})," - Specifies the end date/time of a date/time range for the color"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"highlight"}),": ",(0,r.jsx)(n.em,{children:"string"})," - Highlight color of the day, can be any valid CSS color (",(0,r.jsx)(n.code,{children:"'red'"}),", ",(0,r.jsx)(n.code,{children:"'#ff0000'"}),", ",(0,r.jsx)(n.code,{children:"'rgb(255, 0, 0)'"}),", etc.)."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"recurring"}),": ",(0,r.jsxs)(n.em,{children:["string | ",(0,r.jsx)(n.a,{href:"#type-MbscRecurrenceRule",children:"MbscRecurrenceRule"})]})," - Specifies a recurrence rule for handling recurring days."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"recurringException"}),": ",(0,r.jsx)(n.em,{children:"string | object | Date | Array<string | object | Date>"})," - Exception dates of the recurring rule.\nUseful when specific dates need to be skipped from the rule."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"recurringExceptionRule"}),": ",(0,r.jsxs)(n.em,{children:["string | ",(0,r.jsx)(n.a,{href:"#type-MbscRecurrenceRule",children:"MbscRecurrenceRule"})]})," - Exception rule of the recurring rule.\nUseful when recurring dates need to be skipped from the rule."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resource"}),": ",(0,r.jsx)(n.em,{children:"string | number | Array<string | number>"})," - In case of the timeline and scheduler view of the Eventcalendar, specifies the ",(0,r.jsx)(n.a,{href:"#opt-resources",children:"resource"})," ids\nfor the color.\nThe color will be displayed only on the specified resource.\nIf there is no resource defined, it will be applied to every resource."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"slot"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - In case of the timeline view of the Eventcalendar, specifies the ",(0,r.jsx)(n.a,{href:"#opt-slot",children:"slot"})," id\nfor the color.\nThe color will be displayed only on the specified slot.\nIf there is no slot defined, it will be applied to every slot."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"start"}),": ",(0,r.jsx)(n.em,{children:"string | object | Date"})," - Specifies the start date/time of a date/time range for the color"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"textColor"}),": ",(0,r.jsx)(n.em,{children:"string"})," - A color applied on the text."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"title"}),": ",(0,r.jsx)(n.em,{children:"string"})," - A title that will be displayed on the item."]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"type-MbscCalendarEvent",children:"MbscCalendarEvent"}),"\n",(0,r.jsx)(n.p,{children:"Interface"}),"\n",(0,r.jsx)(n.p,{children:"Properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"allDay"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies if the event is all day or not."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"bufferAfter"}),": ",(0,r.jsx)(n.em,{children:"number"})," - Defines a buffer time in minutes that will be displayed after the end of the event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"bufferBefore"}),": ",(0,r.jsx)(n.em,{children:"number"})," - Defines a buffer time in minutes that will be displayed before the start of the event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"cellCssClass"}),": ",(0,r.jsx)(n.em,{children:"string"})," - CSS class for the day cell. Only applicable for the calendar view."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"color"}),": ",(0,r.jsx)(n.em,{children:"string"}
1)," - Background color of the event"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"cssClass"}),": ",(0,r.jsx)(n.em,{children:"string"})," - Specifies a custom CSS class that is applied to the event. Useful when customization is needed on the event level.\nFor example: setting the width for specific events."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"date"}),": ",(0,r.jsx)(n.em,{children:"string | object | Date"})," - Specifies a single date for the event"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"dragBetweenResources"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the event is movable across resources."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"dragBetweenSlots"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the event is movable across across slots."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"dragInTime"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the event is movable in time."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"editable"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies if an event is editable or not. If false, drag & drop and resize is not allowed."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"end"}),": ",(0,r.jsx)(n.em,{children:"string | object | Date"})," - Specifies the end date/time of a date/time range for the event"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"id"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - A unique id for the event. If not specified, the event will get a generated id."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"order"}),": ",(0,r.jsx)(n.em,{children:"number"})," - Specifies the order of the event in the array. Has precedence over the default ordering rules."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"overlap"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the event can be overlapped. Has precedence over the ",(0,r.jsx)(n.code,{children:"eventOverlap"}),"\nproperty of the resource and the ",(0,r.jsx)(n.a,{href:"#opt-eventOverlap",children:"eventOverlap"})," option."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"recurring"}),": ",(0,r.jsxs)(n.em,{children:["string | ",(0,r.jsx)(n.a,{href:"#type-MbscRecurrenceRule",children:"MbscRecurrenceRule"})]})," - Specifies a recurrence rule for handling recurring events."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"recurringException"}),": ",(0,r.jsx)(n.em,{children:"string | object | Date | Array<string | object | Date>"})," - Exception dates of the recurring rule.\nUseful when specific dates need to be skipped from the rule."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"recurringExceptionRule"}),": ",(0,r.jsxs)(n.em,{children:["string | ",(0,r.jsx)(n.a,{href:"#type-MbscRecurrenceRule",children:"MbscRecurrenceRule"})]})," - Exception rule of the recurring rule.\nUseful when recurring dates need to be skipped from the rule."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resize"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the event is resizable.\nHas precedence over the ",(0,r.jsx)(n.code,{children:"eventResize"})," property of the resource and\nthe ",(0,r.jsx)(n.a,{href:"#opt-dragToResize",children:"dragToResize"})," option."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"resource"}),": ",(0,r.jsx)(n.em,{children:"string | number | Array<string | number>"})," - In case of the timeline and scheduler view of the Eventcalendar, specifies the ",(0,r.jsx)(n.a,{href:"#opt-resources",children:"resource"})," ids\nfor the event.\nThe event will be displayed only on the specified resource.\nIf there is no resource defined, it will be displayed on every resource."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"slot"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - In case of the timeline view of the Eventcalendar, specifies the ",(0,r.jsx)(n.a,{href:"#opt-slot",children:"slot"})," id\nfor the event.\nThe event will be displayed only on the specified slot.\nIf there is no slot defined, it will be displayed on every slot."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"start"}),": ",(0,r.jsx)(n.em,{children:"string | object | Date"})," - Specifies the start date/time of a date/time range for the event"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"textColor"}),": ",(0,r.jsx)(n.em,{children:"string"})," - A color applied on the text."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"timezone"}),": ",(0,r.jsx)(n.em,{children:"string"})," - Timezone of the event"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"title"}),": ",(0,r.jsx)(n.em,{children:"string"})," - The title of the event."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"tooltip"}),": ",(0,r.jsx)(n.em,{children:"string"})," - The tooltip text of the event."]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"type-MbscCalendarInvalid",children:"MbscCalendarInvalid"}),"\n",(0,r.jsx)(n.p,{children:"Interface"}),"\n",(0,r.jsx)(n.p,{children:"Properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"allDay"}),": ",(0,r.jsx)(n.em,{children:"boolean"}
1)," - If true the specified invalid will cover the whole day."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"end"}),": ",(0,r.jsx)(n.em,{children:(0,r.jsx)(n.a,{href:"#type-MbscDateType",children:"MbscDateType"})})," - Specifies the end of the invalid range."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"recurring"}),": ",(0,r.jsxs)(n.em,{children:["string | ",(0,r.jsx)(n.a,{href:"#type-MbscRecurrenceRule",children:"MbscRecurrenceRule"})]})," - Recurrence rule for recurring invalid ranges."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"recurringException"}),": ",(0,r.jsxs)(n.em,{children:[(0,r.jsx)(n.a,{href:"#type-MbscDateType",children:"MbscDateType"})," | Array<",(0,r.jsx)(n.a,{href:"#type-MbscDateType",children:"MbscDateType"}),">"]})," - Specifies recurring exceptions.\nUseful when specific dates need to be skipped from the rule."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"recurringExceptionRule"}),": ",(0,r.jsxs)(n.em,{children:["string | ",(0,r.jsx)(n.a,{href:"#type-MbscRecurrenceRule",children:"MbscRecurrenceRule"})]})," - Specifies a recurrence exception rule.\nUseful when recurring dates need to be skipped from the rule."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"start"}),": ",(0,r.jsx)(n.em,{children:(0,r.jsx)(n.a,{href:"#type-MbscDateType",children:"MbscDateType"})})," - Specifies the start of the invalid range."]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"type-MbscDateType",children:"MbscDateType"}),"\n",(0,r.jsx)(n.p,{children:"string | Date | object"}),"\n",(0,r.jsx)(n.h3,{id:"type-MbscLocale",children:"MbscLocale"}),"\n",(0,r.jsx)(n.p,{children:"Interface"}),"\n",(0,r.jsx)(n.p,{children:"Properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"allDayText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"amText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"calendarSystem"}),": ",(0,r.jsx)(n.em,{children:"MbscCalendarSystem"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"cancelText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"clearText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"closeText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"dateFormat"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"dateFormatFull"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"dateFormatLong"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"dateText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"dateWheelFormat"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"dayNames"}),": ",(0,r.jsx)(n.em,{children:"Array<string>"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"dayNamesMin"}),": ",(0,r.jsx)(n.em,{children:"Array<string>"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"dayNamesShort"}),": ",(0,r.jsx)(n.em,{children:"Array<string>"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"daySuffix"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"dayText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"eventText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"eventsText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"filterEmptyText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"filterPlaceholderText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"firstDay"}),": ",(0,r.jsx)(n.em,{children:"number"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"fromText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"hourText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"minuteText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"monthNames"}),": ",(0,r.jsx)(n.em,{children:"Array<string>"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"monthNamesShort"}),": ",(0,r.jsx)(n.em,{children:"Array<string>"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"monthSuffix"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"monthText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"moreEventsPluralText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"moreEventsText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"nextMonthText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"nextYearText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"noEventsText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"nowText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"pmText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"prevMonthText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"prevYearText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"rangeEndHelp"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"rangeEndLabel"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"rangeStartHelp"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"rangeStartLabel"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"rtl"}),": ",(0,r.jsx)(n.em,{children:"boolean"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"secondText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"selectedPluralText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"selectedText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"setText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"timeFormat"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"timeText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"timeWheels"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"toText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"todayText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"weekText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"yearSuffix"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"yearText"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"type-MbscRecurrenceRule",children:"MbscRecurrenceRule"}),"\n",(0,r.jsx)(n.p,{children:"Interface"}),"\n",(0,r.jsx)(n.p,{children:"Properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"count"}),": ",(0,r.jsx)(n.em,{children:"number"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"day"}),": ",(0,r.jsx)(n.em,{children:"number | Array<number>"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"from"}),": ",(0,r.jsx)(n.em,{children:(0,r.jsx)(n.a,{href:"#type-MbscDateType",children:"MbscDateType"})})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"interval"}),": ",(0,r.jsx)(n.em,{children:"number"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"month"}),": ",(0,r.jsx)(n.em,{children:"number | Array<number>"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"pos"}),": ",(0,r.jsx)(n.em,{children:"number"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"repeat"}),": ",(0,r.jsx)(n.em,{children:'"daily" | "weekly" | "monthly" | "yearly"'})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"until"}),": ",(0,r.jsx)(n.em,{children:(0,r.jsx)(n.a,{href:"#type-MbscDateType",children:"MbscDateType"})})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"weekDays"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"weekStart"}),": ",(0,r.jsx)(n.em,{children:"string"})]}),"\n"]}
1),"\n",(0,r.jsx)(n.h3,{id:"type-MbscResource",children:"MbscResource"}),"\n",(0,r.jsx)(n.p,{children:"Interface"}),"\n",(0,r.jsx)(n.p,{children:"Properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"background"}),": ",(0,r.jsx)(n.em,{children:"string"})," - Specifies the background color of the resource row or column."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"children"}),": ",(0,r.jsxs)(n.em,{children:["Array<",(0,r.jsx)(n.a,{href:"#type-MbscResource",children:"MbscResource"}),">"]})," - Child resources."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"collapsed"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies the displayed state of the child resource group."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"color"}),": ",(0,r.jsx)(n.em,{children:"string"})," - Specifies the default event color of the resource.\nIf an event has an explicit color set, the resource color will be overridden.\nIf the color is not set, the events of the resource will inherit the default calendar color."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"cssClass"}),": ",(0,r.jsx)(n.em,{children:"string"})," - Specifies a css class for the resource row or column."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"eventCreation"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Disables event creation on specific resources by setting it to false. Defaults to true."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"eventDragBetweenResources"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the events in this resource are movable across resources.\nIt applies for scheduler and timeline views.\nHas precedence over the ",(0,r.jsx)(n.a,{href:"#opt-dragBetweenResources",children:"dragBetweenResources"})," option."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"eventDragBetweenSlots"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the events in this slot are movable across slots.\nHas precedence over the ",(0,r.jsx)(n.a,{href:"#opt-dragBetweenSlots",children:"dragBetweenSlots"})," option."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"eventDragInTime"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the events in this resource are movable in time.\nHas precedence over the ",(0,r.jsx)(n.a,{href:"#opt-dragInTime",children:"dragInTime"})," option."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"eventOverlap"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the events in this resource can be overlapped.\nHas precedence over the ",(0,r.jsx)(n.a,{href:"#opt-eventOverlap",children:"eventOverlap"})," option."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"eventResize"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the events in this resource are resizable.\nHas precedence over the ",(0,r.jsx)(n.a,{href:"#opt-dragToResize",children:"dragToResize"})," option."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"fixed"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the resource is fixed to the top.\nIt applies for timeline view if ",(0,r.jsx)(n.code,{children:"resolutionVertical"})," in ",(0,r.jsx)(n.a,{href:"#opt-view",children:"view"})," option is not given, or it's value is set to ",(0,r.jsx)(n.code,{children:"none"}),".\nConsider that the fixed resources always have to be the first elements of the array in a sequence\n(no non-fixed resources inserted in between) so that the dra & rop and event creation functionalities to work properly."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"id"}),": ",(0,r.jsx)(n.em,{children:"string | number"})," - The id of the resource."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"name"}),": ",(0,r.jsx)(n.em,{children:"string"})," - Specifies the name of the resource."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"reorder"}),": ",(0,r.jsx)(n.em,{children:"boolean"})," - Specifies whether the resource can be dragged and reordered.\nIt applies for timeline view if ",(0,r.jsx)(n.code,{children:"resourceReorder"})," in ",(0,r.jsx)(n.a,{href:"#opt-view",children:"view"})," option is enabled."]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"MbscResource"})," supports custom properties in the form:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"[x:string]: any\n"})}),"\n",(0,r.jsx)(n.h3,{id:"type-MbscResponsiveOptions",children:"MbscResponsiveOptions<MbscEventcalendarOptions>"}),"\n",(0,r.jsx)(n.p,{children:"Interface"}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"MbscResponsiveOptions<MbscEventcalendarOptions>"})," supports custom properties in the form:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"[key:string]: MbscEventcalendarOptions & {breakpoint?: number}\n"})}),"\n",(0,r.jsxs)(n.p,{children:["The keys are the names of the breakpoints, and the values are objects containing the options for the given breakpoint.\nThe ",(0,r.jsx)(n.code,{children:"breakpoint"})," property, when present, specifies the min-width in pixels. The options will take into effect from that width."]}),"\n",(0,r.jsx)(n.admonition,{type:"info",children:(0,r.jsx)(n.p,{children:"The available width is queried from the container element of the component and not the browsers viewport like in css media queries"})}),"\n",(0,r.jsx)(n.p,{children:"There are five predefined breakpoints:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"xsmall"})," - min-width: 0px"]}
1),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"small"})," - min-width: 576px"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"medium"})," - min-width: 768px"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"large"})," - min-width: 992px"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"xlarge"})," - min-width: 1200px"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"type-MbscTimezonePlugin",children:"MbscTimezonePlugin"}),"\n",(0,r.jsx)(n.p,{children:"Interface"}),"\n",(0,r.jsx)(n.p,{children:"Properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"createDate"}),": ",(0,r.jsx)(n.em,{children:"(s: any, year: string | number | Date | MbscTimezonedDate, month: number, date: number, h: number, min: number, sec: number, ms: number) => MbscTimezonedDate"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"parse"}),": ",(0,r.jsx)(n.em,{children:"(date: string | number, s: any) => MbscTimezonedDate"})]}),"\n"]})]})}function f(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}var v=s(8895);const g={sidebar_position:4,sidebar_label:"Scheduler",displayed_sidebar:"jquerySidebar",description:"Configure the Mobiscroll Eventcalendar Scheduler view in jQuery \u2014 a time-grid layout for daily, weekly, or multi-day slot-based scheduling."},b="Scheduler",w={},y=[{value:"Overview",id:"overview",level:2},{value:"Showing the Scheduler",id:"showing-the-scheduler",level:2},{value:"View combination",id:"view-combination",level:3},{value:"Configuring the view",id:"configuring-the-view",level:3},{value:"Row height",id:"row-height",level:3},{value:"Column width",id:"column-width",level:3},{value:"Customizing weekday column widths",id:"customizing-weekday-column-widths",level:4},{value:"Customizing resource column widths",id:"customizing-resource-column-widths",level:4},{value:"Hide empty columns",id:"hide-empty-columns",level:3},{value:"Hide invalid columns",id:"hide-invalid-columns",level:3},{value:"Resources",id:"resources",level:2},{value:"Resource grouping",id:"resource-grouping",level:3},{value:"Resource order",id:"resource-order",level:3},{value:"Responsiveness",id:"responsiveness",level:2},{value:"Templating",id:"templating",level:2},{value:"The cell",id:"the-cell",level:3},{value:"The event, their content and buffer areas",id:"the-event-their-content-and-buffer-areas",level:3},{value:"The date header",id:"the-date-header",level:3},{value:"The resource header",id:"the-resource-header",level:3},{value:"The scheduler header",id:"the-scheduler-header",level:3},{value:"Event order",id:"event-order",level:2},{value:"Event data order",id:"event-data-order",level:3},{value:"Event layout",id:"event-layout",level:3},{value:"API",id:"api",level:2},{value:"Options",id:"options",level:3},{value:"Events",id:"events",level:3},{value:"Localization",id:"localization",level:3},{value:"Renderers",id:"renderers",level:3},{value:"Types",id:"types",level:3}];function T(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",ul:"ul",...(0,l.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"scheduler",children:"Scheduler"})}),"\n",(0,r.jsxs)(n.p,{children:["Use the ",(0,r.jsx)(n.a,{href:"https://demo.mobiscroll.com/scheduler",children:"Scheduler view"})," which features a time grid - vertically scrollable ",(0,r.jsx)(n.a,{href:"https://demo.mobiscroll.com/scheduler/show-hide-hours-days",children:"daily, weekly and monthly views"})," with built in ",(0,r.jsx)(n.a,{href:"https://demo.mobiscroll.com/scheduler/resource-view",children:"resource support"}),", ",(0,r.jsx)(n.a,{href:"#templating",children:"templating"})," and more."]}),"\n",(0,r.jsx)(n.h2,{id:"overview",children:"Overview"}),"\n",(0,r.jsxs)(n.p,{children:["The Scheduler displays a time grid with its related events. It can be configured as a ",(0,r.jsx)(n.a,{href:"https://demo.mobiscroll.com/scheduler/show-hide-hours-days",children:"daily, weekly or monthly schedule"}),". ",(0,r.jsx)(n.a,{href:"https://demo.mobiscroll.com/scheduler/work-week-hours",children:"Work hours and work days"})," along with ",(0,r.jsx)(n.a,{href:"https://demo.mobiscroll.com/scheduler/time-off-blocked-ranges",children:"disabled time-spans, breaks"})," can be added. Use it for ",(0,r.jsx)(n.a,{href:"https://demo.mobiscroll.com/scheduler/doctors-appointment",children:"advanced scheduling tasks"})," with built-in drag & drop."]}),"\n",(0,r.jsxs)(n.p,{children:["The capabilities like ",(0,r.jsx)(n.a,{href:"/jquery/core-concepts/recurrence",children:"recurring events"}),", ",(0,r.jsx)(n.a,{href:"#opt-data",children:"all-day, multi-day events"}),", ",(0,r.jsx)(n.a,{href:"#responsiveness",children:"responsiveness"})," are supported by the Scheduler."]}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.img,{alt:"Scheduler overview",src:s(77407).A+"",width:"809",height:"510"})}),"\n",(0,r.jsx)(n.h2,{id:"showing-the-scheduler",children:"Showing the Scheduler"}),"\n",(0,r.jsx)(n.h3,{id:"view-combination",children:"View combination"}),"\n",(0,r.jsxs)(n.p,{children:["The four views - ",(0,r.jsx)(n.a,{href:"./scheduler",children:"scheduler"}),", ",(0,r.jsx)(n.a,{href:"./calendar",children:"calendar"}),", ",(0,r.jsx)(n.a,{href:"./timeline",children:"timeline"}),", ",(0,r.jsx)(n.a,{href:"./agenda",children:"agenda"})," - can be used alone or combined with each-other to create the perfect user experience on mobile, desktop and on everything in-between."]}),"\n",(0,r.jsx)(n.p,{children:"For example, the daily Scheduler can also be c
1ombined with the Calendar week view. The view option will look like the following:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-javascript",metastring:"title='Daily Scheduler combined with Weekly Calendar'",children:"$('#scheduler').mobiscroll().eventcalendar({\n view: {\n calendar: {\n type: 'week'\n },\n schedule: {\n type: 'day'\n }\n }\n});\n"})}),"\n",(0,r.jsx)(n.h3,{id:"configuring-the-view",children:"Configuring the view"}),"\n",(0,r.jsxs)(n.p,{children:["The Scheduler view can be configured through the ",(0,r.jsx)(n.code,{children:"view"})," option. Below are listed the ",(0,r.jsx)(n.code,{children:"schedule"})," object properties which can help you fine-tune this view."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-javascript",metastring:"title='Example'",children:"$('#scheduler').mobiscroll().eventcalendar({\n view: {\n schedule: {\n type: 'week',\n startDay: 1,\n endDay: 5,\n startTime: '09:00',\n endTime: '17:00',\n timeCellStep: 60,\n timeLabelStep: 60,\n currentTimeIndicator: true\n }\n }\n});\n"})}),"\n",(0,r.jsx)("div",{className:"option-list",children:(0,r.jsx)(d,{})}),"\n",(0,r.jsx)(n.h3,{id:"row-height",children:"Row height"}),"\n",(0,r.jsx)(n.p,{children:"There might be cases when you would like to change the height of the schedule cell. You can use the following CSS classes for this purpose:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:".mbsc-schedule-time-wrapper,\n.mbsc-schedule-item {\n height: 20px;\n}\n"})}),"\n",(0,r.jsx)(n.h3,{id:"column-width",children:"Column width"}),"\n",(0,r.jsx)(n.p,{children:"CSS classes offer the flexibility to adjust column widths, allowing you to fully customize the layout of both resource columns and day columns.\nYou can choose to customize them together or separately, giving you the freedom to create a design that suits your specific needs."}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",metastring:'title="Setting general column width"',children:".mbsc-schedule-col-width {\n width: 100px;\n}\n"})}),"\n",(0,r.jsx)(n.h4,{id:"customizing-weekday-column-widths",children:"Customizing weekday column widths"}),"\n",(0,r.jsx)(n.p,{children:"Each weekday column has a predefined CSS class that allows setting different widths for them:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:".mbsc-schedule-column-mon"})," (Monday)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:".mbsc-schedule-column-tue"})," (Tuesday)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:".mbsc-schedule-column-wed"})," (Wednesday)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:".mbsc-schedule-column-thu"})," (Thursday)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:".mbsc-schedule-column-fri"})," (Friday)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:".mbsc-schedule-column-sat"})," (Saturday)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:".mbsc-schedule-column-sun"})," (Sunday)"]}),"\n"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",metastring:'title="Adjusting width for Monday"',children:".mbsc-schedule-column-mon {\n width: 150px;\n}\n"})}),"\n",(0,r.jsx)(n.h4,{id:"customizing-resource-column-widths",children:"Customizing resource column widths"}),"\n",(0,r.jsxs)(n.p,{children:["Resource column widths can be adjusted by assigning a custom CSS class to resources using the ",(0,r.jsx)("code",{children:"cssClass"})," property."]}),"\n",(0,r.jsxs)(n.p,{children:["Check out how to change resource column widths in ",(0,r.jsx)(n.a,{href:"https://demo.mobiscroll.com/scheduler/content-dependent-resource-width",children:"this example"}),"."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="Assigning a class to a resource"',children:"resources: [\n { id: 1, name: 'Resource 1', cssClass: 'resource-column-small' },\n { id: 2, name: 'Resource 2', cssClass: 'resource-column-large' }\n]\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",metastring:'title="Define styles for the resource classes"',children:".resource-column-small {\n width: 80px;\n}\n\n.resource-column-large {\n width: 160px;\n}\n"})}),"\n",(0,r.jsx)(n.admonition,{type:"info",children:(0,r.jsxs)(n.p,{children:["If you override both resource and day column widths, make sure column groups (day or resource, depending on the ",(0,r.jsx)(n.a,{href:"#opt-groupBy",children:(0,r.jsx)(n.code,{children:"groupBy"})})," option)\nare wide enough to contain their child elements, or specify a ",(0,r.jsx)(n.code,{children:"min-width"})," for the group column instead of a fixed width."]})}),"\n",(0,r.jsx)(n.h3,{id:"hide-empty-columns",children:"Hide empty columns"}),"\n",(0,r.jsxs)(n.p,{children:["Columns without any events can be hidden by setting ",(0,r.jsx)(n.code,{children:"hideEmptyColumns"})," to ",(0,r.jsx)(n.code,{children:"true"})," under the ",(0,r.jsx)(n.a,{href:"#configuring-the-view",children:"view"})," configuration."]}),"\n",(0,r.jsx)(n.h3,{id:"hide-invalid-columns",children:"Hide invalid columns"}),"\n",(0,r.jsxs)(n.p,{children:["Fully invalid columns can be hidden by setting ",(0,r.jsx)(n.code,{children:"hideInvalidColumns"})," to ",(0,r.jsx)(n.code,{children:"true"})," under the ",(0,r.jsx)(n.a,{href:"#configuring-the-view",children:"view"})," configuration."]}),"\n",(0,r.jsx)(n.admonition,{type:"info",children:(0,r.jsxs)(n.p,{children:["A column is considered fully invalid if it contains ",(0,r.jsx)(n.a,{href:"#opt-invalid",children:"invalid"})," periods defined with ",(0,r.jsx)(n.code,{children:"allDay"}),", date values,\nor a single time range that covers a full day or multiple days."]})}),"\n",(0,r.jsx)(n.h2,{id:"resources",children:"Resources"}),"\n",(0,r.jsx)(n.h3,{id:"resource-grouping",children:"Resource grouping"}),"\n",(0,r.jsxs)(n.p,{children:["The Scheduler view can display multiple ",(0,r.jsx)(n.a,{href:"resources",children:"resources"})," inside a single instance. By default the displayed resources will be grouped by the given resources and the grouping can be changed with the ",(0,r.jsx)(n.a,{href:"#opt-groupBy",children:(0,r.jsx)(n.code,{children:"groupBy"})})," option, which also supports grouping by date."]}),"\n",(0,r.jsxs)("div",{className:"img-row",children:[(0,r.jsxs)("div",{className:"pdg-img",children:[(0,r.jsx)("img",{width:"1000",height:"595",src:s(6636).A}),(0,r.jsx)("label",{className:"img-label",children:"Resources grouped by date"})]}),(0,r.jsxs)("div",{className:"pdg-img",children:[(0,r.jsx)("img",{width:"1000",height:"616",src:s(65192).A}),(0,r.jsx)("label",{className:"img-label",children:"Resources grouped by resource"})]}),(0,r.jsxs)("div",{className:"pdg-img",children:[(0,r.jsx)("img",{width:"1000",height:"577",src:s(74647).A}),(0,r.jsx)("label",{className:"img-label",children:"Resources grouped by day view"})]})]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-javascript",metastring:'title="Grouping resources by date"',children:"$('#scheduler').mboiscroll().eventcalendar({\n // highlight-next-line\n groupBy: 'date',\n resources: [{\n id: 1,\n name: 'Ryan',\n color: '#f7c4b4'\n }, {\n id: 2,\n name: 'Kate',\n color: '#c6f1c9'\n }, {\n id: 3,\n name: 'John',\n color: '#e8d0ef'\n }]\n});\n"})}),"\n",(0,r.jsxs)(n.p,{children:["The color property controls the default event color of the resource. If an event doesn't have a specified color it will inherit from the resource. The ",(0,r.jsx)(n.a,{href:"agenda",children:"agenda"})," and ",(0,r.jsx)(n.a,{href:"calendar",children:"calendar view"})," events and labels will also inherit the resource color."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.a,{href:"#opt-data",children:"Events"}),", ",(0,r.jsx)(n.a,{href:"#opt-colors",children:"colors"}),", ",(0,r.jsx)(n.a,{href:"#opt-invalids",children:"invalids"})," can be tied to a single or multiple resources. This can be done with the ",(0,r.jsx)(n.code,{children:"resource"})," property of the objects, where the id of the resource should be passed. It can be a single value where the element would be linked to a single resource or in case of an array the element will show up at all of the specified resources. If no resource property is specified to the color/event/invalid object then the element will show up in every resource group."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-javascript",metastring:'title="Invalid rule tied to a single resource"',children:"$('#scheduler').mboiscroll().eventcalendar({\n invalid: [{\n // highlight-next-line\n resource: 1, // this invali
1d will be displayed only in resource group where id is 1\n start: '13:00',\n end: '12:00',\n recurring: { repeat: 'weekly', weekDays: 'MO,TU,WE,TH,FR' },\n title: 'Lunch break'\n }]\n});\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-javascript",metastring:'title="Event tied to multiple resources"',children:"$('#scheduler').mboiscroll().eventcalendar({\n data: [{\n // highlight-next-line\n resource: [2, 3] // this event will be displayed in resource groups where id is 2 and 3\n start: new Date(2021, 5, 23),\n end: new Date(2021, 5, 30),\n title: 'Conference',\n allDay: true,\n }]\n});\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-javascript",metastring:'title="Color rule for all the resources (resource not specified)"',children:"$('#scheduler').mboiscroll().eventcalendar({\n colors: [{\n // highlight-next-line\n // this color will display at every resource group\n start: new Date(2021, 5, 12, 16),\n end: new Date(2021, 5, 12, 17),\n color: \"green\",\n }]\n});\n"})}),"\n",(0,r.jsx)(n.h3,{id:"resource-order",children:"Resource order"}),"\n",(0,r.jsx)(n.p,{children:"The initial order in which the resources appear on the scheduler follows the order of the array passed to the component. If the initial order needs to be changed, sort the resource array before passing it to the event calendar."}),"\n",(0,r.jsx)(n.p,{children:"For dynamic sorting during runtime, sort the resource array and pass the updated array to the calendar."}),"\n",(0,r.jsx)(n.h2,{id:"responsiveness",children:"Responsiveness"}),"\n",(0,r.jsxs)(n.p,{children:["The Scheduler is ",(0,r.jsx)(n.a,{href:"https://demo.mobiscroll.com/scheduler/responsive-day-week-schedule#",children:"fully responsive"}),". It adapts to the available space and fills the screen to look good everywhere. While you don't have to worry about the width the height can be manually adjusted with the ",(0,r.jsx)(n.a,{href:"#opt-height",children:"height"})," option. This specifies different options for different container widths, in a form of an object, where the keys are the name of the breakpoints, and the values are objects containing the options for the given breakpoint."]}),"\n",(0,r.jsxs)(n.p,{children:["Use the ",(0,r.jsx)(n.a,{href:"#opt-responsive",children:"responsive"})," option to configure how the calendar behaves on different sized screens.\nThe responsive option is equipped with five breakpoints:"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"xsmall"})," (up to 575px),"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"small"})," (up to 767px),"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"medium"})," (up to 991px),"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"large"})," (up to 1199px),"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"xlarge"})," (from 1200px)."]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Also, custom breakpoints can be added if necessary:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"my-custom-breakpoint: { breakpoint: 600 }"})," (from 600px up to the next breakpoint)."]}),"\n"]}),"\n",(0,r.jsx)(n.admonition,{type:"info",children:(0,r.jsx)(n.p,{children:"The available width is queried from the container element of the component and not the browsers viewport like in css media queries."})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-javascript",metastring:"title='Responsive configuration with the view option'",children:"$('#scheduler').mobiscroll().eventcalendar({\n responsive: {\n xsmall: {\n view: { schedule: { type: 'day' }}\n },\n custom: { // Custom breakpoint, you can use multiple if needed, but each must have a unique name.\n breakpoint: 600,\n view: { schedule: { type: 'week' }}\n }\n }\n});\n"})}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.img,{alt:"Scheduler responsive behavior",src:s(47263).A+"",width:"1003",height:"612"})}),"\n",(0,r.jsx)(n.h2,{id:"templating",children:"Templating"}),"\n",(0,r.jsxs)(n.p,{children:["The display of Scheduler can be customized with different ",(0,r.jsx)(n.a,{href:"#renderers",children:"render functions"}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"the-cell",children:"The cell"}),"\n",(0,r.jsxs)(n.p,{children:["Use the ",(0,r.jsx)(n.a,{href:"#renderer-renderCell",children:"renderCell"})," option to fully customize the Scheduler cells. Customize how the cell look and what they show. The renderer function gets an object with properties like date, events, colors, invalids, and resource, which can be used to display custom content."]}),"\n",(0,r.jsx)(n.admonition,{type:"info",children:(0,r.jsx)(n.p,{children:"Since cells are rendered frequently while scrolling, keep the customization lightweight for best performance."})}),"\n",(0,r.jsxs)(n.p,{children:["Check out how you can style the cell in ",(0,r.jsx)(n.a,{href:"https://demo.mobiscroll.com/scheduler/cell-content-template#",children:"this example"})," or just play with the slider below to see the differences."]}),"\n","\n",(0,r.jsxs)(v.ImgComparisonSlider,{className:"slider-example-split-line slider-with-animated-handle",children:[(0,r.jsxs)("figure",{slot:"first",className:"before",children:[(0,r.jsx)("img",{width:"1480",height:"975",src:s(5724).A}),(0,r.jsx)("figcaption",{children:"Default template"})]}),(0,r.jsxs)("figure",{slot:"second",className:"after",children:[(0,r.jsx)("img",{width:"1479",height:"975",src:s(49956).A}),(0,r.jsx)("figcaption",{children:"Custom template"})]}),(0,r.jsx)("svg",{slot:"handle",className:"custom-animated-handle",xmlns:"http://www.w3.org/2000/svg",width:"100",viewBox:"-8 -3 16 6",children:(0,r.jsx)("path",{stroke:"#011742",d:"M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2",strokeWidth:"1",fill:"#011742",vectorEffect:"non-scaling-stroke"})})]}),"\n","\n",(0,r.jsx)(n.h3,{id:"the-event-their-content-and-buffer-areas",children:"The event, their content and buffer areas"}),"\n",(0,r.jsx)(n.p,{children:"The events can be customized in two ways:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["You can use the ",(0,r.jsx)(n.a,{href:"#renderer-renderScheduleEvent",children:"renderScheduleEvent"})," option to customize the events that appear on the Scheduler. It should return the markup of the event. The Eventcalendar will take care of the positioning, but anything else you want to show is up to you - like a title, description, color the background or show any content."]}),"\n",(0,r.jsxs)(n.li,{children:["If you are looking to customize only the content and don't want to bother with the styling of the event, you can use the ",(0,r.jsx)(n.a,{href:"#renderer-renderScheduleEventContent",children:"renderScheduleEventContent"})," option. Mobiscroll will position the event to the right place and will render essential information like the color of the event, the time and if it's an all day event or not. The title, description and any other fields you want to show (like participants or an avatar) will be coming from your custom function."]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["The buffers can be customized through the ",(0,r.jsx)(n.a,{href:"#renderer-renderBufferBefore",children:"renderBufferBefore"})," and ",(0,r.jsx)(n.a,{href:"#renderer-renderBufferAfter",children:"renderBufferAfter"})," options. These can help you visualise delays or added minutes for tasks. For example travel time for meetings/appointments, check in/check out for flights."]}),"\n",(0,r.jsxs)(n.p,{children:["Check out how you can style event, their content and buffer areas in ",(0,r.jsx)(n.a,{href:"https://demo.mobiscroll.com/scheduler/customizing-events#",children:"this example"})," or just play with the slider below to see the differences."]}),"\n","\n",(0,r.jsxs)(v.ImgComparisonSlider,{className:"slider-example-split-line slider-with-animated-handle",children:[(0,r.jsxs)("figure",{slot:"first",className:"before",children:[(0,r.jsx)("img",{width:"1480",height:"975",src:s(43449).A}),(0,r.jsx)("figcaption",{children:"Default template"})]}),(0,r.jsxs)("figure",{slot:"second",className:"after",children:[(0,r.jsx)("img",{width:"1479",height:"975",src:s(18305).A}),(0,r.jsx)("figcaption",{children:"Custom template"})]}),(0,r.jsx)("svg",{slot:"handle",className:"custom-animated-handle",xmlns:"http://www.w3.org/2000/svg",width:"100",viewBox:"-8 -3 16 6",children:(0,r.jsx)("path",{stroke:"#011742",d:"M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2",strokeWidth:"1",fill:"#011742",vectorEffect:"non-scaling-stroke"})})]}),"\n","\n",(0,r.jsx)(n.h3,{id:"the-date-header",children:"The date header"}),"\n",(0,r.jsx)(n.p,{children:"There are two approaches you can take:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["Customize the date headers of the Scheduler with the ",(0,r.jsx)(n.a,{href:"#renderer-renderDay",children:"renderDay"})," option by adding relevant content, labels or completely change how they look. It takes a function that should return the desired markup. The Eventcalendar will take care of the positioning, but everything else (like background color, hover effect, etc.) is left to you. The render function will receive an object as parameter. This data can be used to show day specific things on the Scheduler."]}),"\n",(0,r.jsxs)(n.li,{children:["If you are looking to customize only the content and don't want to bother with the styling of the event, you can use the ",(0,r.jsx)(n.a,{href:"#renderer-renderDayContent",children:"renderDayContent"}
1)," option. You will get the styling taken care of by the Eventcalendar, and you can focus on what you show besides the day number. The template will receive an object as data. This data can be used to show day specific things on the Scheduler."]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["Check out how you can style the date header in ",(0,r.jsx)(n.a,{href:"https://demo.mobiscroll.com/scheduler/date-header-template#",children:"this example"})," or just play with the slider below to see the differences."]}),"\n","\n",(0,r.jsxs)(v.ImgComparisonSlider,{className:"slider-example-split-line slider-with-animated-handle",children:[(0,r.jsxs)("figure",{slot:"first",className:"before",children:[(0,r.jsx)("img",{width:"1480",height:"575",src:s(83017).A}),(0,r.jsx)("figcaption",{children:"Default template"})]}),(0,r.jsxs)("figure",{slot:"second",className:"after",children:[(0,r.jsx)("img",{width:"1480",height:"575",src:s(74209).A}),(0,r.jsx)("figcaption",{children:"Custom template"})]}),(0,r.jsx)("svg",{slot:"handle",className:"custom-animated-handle",xmlns:"http://www.w3.org/2000/svg",width:"100",viewBox:"-8 -3 16 6",children:(0,r.jsx)("path",{stroke:"#011742",d:"M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2",strokeWidth:"1",fill:"#011742",vectorEffect:"non-scaling-stroke"})})]}),"\n","\n",(0,r.jsx)(n.h3,{id:"the-resource-header",children:"The resource header"}),"\n",(0,r.jsxs)(n.p,{children:["Use the ",(0,r.jsx)(n.a,{href:"#renderer-renderResource",children:"renderResource"})," option to customize the resource template of the Scheduler. Customize how the resource headers look and what they show. Utilize properties passed in the ",(0,r.jsx)(n.a,{href:"#opt-resources",children:"resources"})," array. It takes a function that should return the desired markup. In the returned markup, you can use custom html as well."]}),"\n",(0,r.jsxs)(n.p,{children:["Check out how you can style the resources in ",(0,r.jsx)(n.a,{href:"https://demo.mobiscroll.com/scheduler/custom-resource-header-template#",children:"this example"})," or just play with the slider below to see the differences."]}),"\n","\n",(0,r.jsxs)(v.ImgComparisonSlider,{className:"slider-example-split-line slider-with-animated-handle",children:[(0,r.jsxs)("figure",{slot:"first",className:"before",children:[(0,r.jsx)("img",{width:"1480",height:"753",src:s(61749).A}),(0,r.jsx)("figcaption",{children:"Default template"})]}),(0,r.jsxs)("figure",{slot:"second",className:"after",children:[(0,r.jsx)("img",{width:"1480",height:"753",src:s(97421).A}),(0,r.jsx)("figcaption",{children:"Custom template"})]}),(0,r.jsx)("svg",{slot:"handle",className:"custom-animated-handle",xmlns:"http://www.w3.org/2000/svg",width:"100",viewBox:"-8 -3 16 6",children:(0,r.jsx)("path",{stroke:"#011742",d:"M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2",strokeWidth:"1",fill:"#011742",vectorEffect:"non-scaling-stroke"})})]}),"\n","\n",(0,r.jsx)(n.h3,{id:"the-scheduler-header",children:"The scheduler header"}),"\n",(0,r.jsxs)(n.p,{children:["Customize how the header of the Scheduler looks and how the components are arranged with the ",(0,r.jsx)(n.a,{href:"#renderer-renderHeader",children:"renderHeader"})," option. It takes a function that should return the desired markup. In the returned markup, you can use custom html as well as the built in header components of the calendar."]}),"\n",(0,r.jsxs)(n.p,{children:["While fully customizing the header is very usefull, sometimes it's desireable to customize only parts of it. In this case you can take advantage of the default header's ",(0,r.jsx)(n.a,{href:"/jquery/eventcalendar/templating#header-templating",children:"building blocks"}),". These components let you put toghether the header you want, while you don't have to worry about the functionality behind them."]}),"\n",(0,r.jsxs)(n.p,{children:["Check out how you can style the Scheduler header in ",(0,r.jsx)(n.a,{href:"https://demo.mobiscroll.com/scheduler/customizing-header#",children:"this example"})," or just play with the slider below to see the differences."]}),"\n","\n",(0,r.jsxs)(v.ImgComparisonSlider,{className:"slider-example-split-line slider-with-animated-handle",children:[(0,r.jsxs)("figure",{slot:"first",className:"before",children:[(0,r.jsx)("img",{width:"1480",height:"625",src:s(56452).A}),(0,r.jsx)("figcaption",{children:"Default template"})]}),(0,r.jsxs)("figure",{slot:"second",className:"after",children:[(0,r.jsx)("img",{width:"1480",height:"625",src:s(65660).A}),(0,r.jsx)("figcaption",{children:"Custom template"})]}),(0,r.jsx)("svg",{slot:"handle",className:"custom-animated-handle",xmlns:"http://www.w3.org/2000/svg",width:"100",viewBox:"-8 -3 16 6",children:(0,r.jsx)("path",{stroke:"#011742",d:"M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2",strokeWidth:"1",fill:"#011742",vectorEffect:"non-scaling-stroke"})})]}),"\n","\n",(0,r.jsx)(n.h2,{id:"event-order",children:"Event order"}),"\n",(0,r.jsx)(n.p,{children:"The rendered event order is determined by the following two concepts:"}),"\n",(0,r.jsxs)(n.ol,{children:["\n",(0,r.jsx)(n.li,{children:"Event data order"}),"\n",(0,r.jsx)(n.li,{children:"Event layout"}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"The combination of these concepts results in the final rendered event order."}),"\n",(0,r.jsx)(n.h3,{id:"event-data-order",children:"Event data order"}),"\n",(0,r.jsx)(n.p,{children:"The sequence in which events are processed before being passed to the layout algorithm. The default ordering rules are as follows:"}),"\n",(0,r.jsxs)(n.ol,{children:["\n",(0,r.jsx)(n.li,{children:"All-day events are placed at the top."}),"\n",(0,r.jsx)(n.li,{children:"Non-all-day events follow, sorted by their start times."}),"\n",(0,r.jsx)(n.li,{children:"Events with the same start time are further ordered alphabetically by their titles."}),"\n"]}
1),"\n",(0,r.jsxs)(n.p,{children:["This default order can be modified using the ",(0,r.jsx)(n.code,{children:"order"})," property in the event ",(0,r.jsx)(n.a,{href:"#opt-data",children:"event data"}),". The order property takes precedence over the default rules. If two events have the same order value, the default rules apply. For more complex ordering requirements, the ",(0,r.jsx)(n.a,{href:"#opt-eventOrder",children:"eventOrder"})," option can be used. This option accepts a function that compares two events and returns an order (-1 or 1)."]}),"\n",(0,r.jsx)(n.h3,{id:"event-layout",children:"Event layout"}),"\n",(0,r.jsx)(n.p,{children:"The event layout process determines the visual positioning and dimensions of events. This is a built-in functionality and cannot be altered externally. The layout algorithm processes the sorted event list and calculates each event's position and size. The algorithm follows these steps:"}),"\n",(0,r.jsxs)(n.ol,{children:["\n",(0,r.jsx)(n.li,{children:"The first event is placed in the first position of the event track."}),"\n",(0,r.jsx)(n.li,{children:"If two or more events overlap in their start/end times, the later event is placed in the next event track, positioned below or next to the previous event."}),"\n",(0,r.jsx)(n.li,{children:"If a subsequent event does not overlap with any already added events, it is placed back in the first event track."}),"\n",(0,r.jsx)(n.li,{children:"This process continues until all events are positioned within their respective columns or rows."}),"\n"]}),"\n",(0,r.jsxs)("div",{className:"option-list",children:[(0,r.jsx)(n.h2,{id:"api",children:"API"}),(0,r.jsx)(n.p,{children:"Here is a comprehensive list of all the specific options, events and methods of the Scheduler view."}),(0,r.jsx)("div",{className:"calendar-api-header",children:(0,r.jsx)(n.h3,{id:"options",children:"Options"})}),(0,r.jsx)(n.p,{children:"Explore the following API options that help you easily configure the Scheduler."}),(0,r.jsx)(h,{}),(0,r.jsx)("div",{className:"calendar-api-header",children:(0,r.jsx)(n.h3,{id:"events",children:"Events"})}),(0,r.jsx)(n.p,{children:"The Scheduler ships with different event hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code."}),(0,r.jsx)(a,{}),(0,r.jsx)("div",{className:"calendar-api-header",children:(0,r.jsx)(n.h3,{id:"localization",children:"Localization"})}),(0,r.jsx)(n.p,{children:"The Scheduler is fully localized. This covers date and time format, button copy, rtl and more."}),(0,r.jsx)(j,{}),(0,r.jsx)("div",{className:"calendar-api-header",children:(0,r.jsx)(n.h3,{id:"renderers",children:"Renderers"})}),(0,r.jsx)(n.p,{children:"The display of the Scheduler can be customized with different\xa0render functions."}),(0,r.jsx)(p,{}),(0,r.jsx)(n.h3,{id:"types",children:"Types"}),(0,r.jsx)(f,{})]})]})}function D(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(T,{...e})}):T(e)}},8895(e,n,s){"use strict";var i=this&&this.__createBinding||(Object.create?function(e,n,s,i){void 0===i&&(i=s),Object.defineProperty(e,i,{enumerable:!0,get:function(){return n[s]}})}:function(e,n,s,i){void 0===i&&(i=s),e[i]=n[s]}),r=this&&this.__setModuleDefault||(Object.create?function(e,n){Object.defineProperty(e,"default",{enumerable:!0,value:n})}:function(e,n){e.default=n}),l=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var n={};if(null!=e)for(var s in e)"default"!==s&&Object.prototype.hasOwnProperty.call(e,s)&&i(n,e,s);return r(n,e),n};Object.defineProperty(n,"__esModule",{value:!0}),n.ImgComparisonSlider=void 0;const t=s(96540);"undefined"!=typeof document&&Promise.resolve().then(()=>l(s(19749))),n.ImgComparisonSlider=(0,t.forwardRef)(({children:e,onSlide:n,value:s,className:i,...r},l)=>{const d=(0,t.useRef)();return(0,t.useEffect)(()=>{void 0!==s&&(d.current.value=parseFloat(s.toString()))},[s,d]),(0,t.useEffect)(()=>{n&&d.current.addEventListener("slide",n)},[]),(0,t.useImperativeHandle)(l,()=>d.current,[d]),(0,t.createElement)("img-comparison-slider",Object.assign({class:i?`${i} rendered`:"rendered",tabIndex:0,ref:d},r),e)})},19749(){(()=>{"use strict";var e={792:(e,n,s)=>{s.d(n,{Z:()=>l});var i=s(609),r=s.n(i)()(function(e){return e[1]});
vendor: 9,752 bytes, line 1
1r.push([e.id,':host{--divider-width: 1px;--divider-color: #fff;--divider-shadow: none;--default-handle-width: 50px;--default-handle-color: #fff;--default-handle-opacity: 1;--default-handle-shadow: none;--handle-position-start: 50%;position:relative;display:inline-block;overflow:hidden;line-height:0;direction:ltr}@media screen and (-webkit-min-device-pixel-ratio: 0)and (min-resolution: 0.001dpcm){:host{outline-offset:1px}}:host(:focus){outline:2px solid -webkit-focus-ring-color}::slotted(*){-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.first{position:absolute;left:0;top:0;right:0;line-height:normal;font-size:100%;max-height:100%;height:100%;width:100%;--exposure: 50%;--keyboard-transition-time: 0ms;--default-transition-time: 0ms;--transition-time: var(--default-transition-time)}.first .first-overlay-container{position:relative;clip-path:inset(0 var(--exposure) 0 0);transition:clip-path var(--transition-time);height:100%}.first .first-overlay{overflow:hidden;height:100%}.first.focused{will-change:clip-path}.first.focused .first-overlay-container{will-change:clip-path}.second{position:relative}.handle-container{transform:translateX(50%);position:absolute;top:0;right:var(--exposure);height:100%;transition:right var(--transition-time),bottom var(--transition-time)}.focused .handle-container{will-change:right}.divider{position:absolute;height:100%;width:100%;left:0;top:0;display:flex;align-items:center;justify-content:center;flex-direction:column}.divider:after{content:" ";display:block;height:100%;border-left-width:var(--divider-width);border-left-style:solid;border-left-color:var(--divider-color);box-shadow:var(--divider-shadow)}.handle{position:absolute;top:var(--handle-position-start);pointer-events:none;box-sizing:border-box;margin-left:1px;transform:translate(calc(-50% - 0.5px), -50%);line-height:0}.default-handle{width:var(--default-handle-width);opacity:var(--default-handle-opacity);transition:all 1s;filter:drop-shadow(var(--default-handle-shadow))}.default-handle path{stroke:var(--default-handle-color)}.vertical .first-overlay-container{clip-path:inset(0 0 var(--exposure) 0)}.vertical .handle-container{transform:translateY(50%);height:auto;top:unset;bottom:var(--exposure);width:100%;left:0;flex-direction:row}.vertical .divider:after{height:1px;width:100%;border-top-width:var(--divider-width);border-top-style:solid;border-top-color:var(--divider-color);border-left:0}.vertical .handle{top:auto;left:var(--handle-position-start);transform:translate(calc(-50% - 0.5px), -50%) rotate(90deg)}',""]);const l=r},609:e=>{e.exports=function(e){var n=[];return n.toString=function(){return this.map(function(n){var s=e(n);return n[2]?"@media ".concat(n[2]," {").concat(s,"}"):s}).join("")},n.i=function(e,s,i){"string"==typeof e&&(e=[[null,e,""]]);var r={};if(i)for(var l=0;l<this.length;l++){var t=this[l][0];null!=t&&(r[t]=!0)}for(var d=0;d<e.length;d++){var c=[].concat(e[d]);i&&r[c[0]]||(s&&(c[2]?c[2]="".concat(s," and ").concat(c[2]):c[2]=s),n.push(c))}},n}}},n={};function s(i){var r=n[i];if(void 0!==r)return r.exports;var l=n[i]={id:i,exports:{}};return e[i](l,l.exports,s),l.exports}s.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return s.d(n,{a:n}),n},s.d=(e,n)=>{for(var i in n)s.o(n,i)&&!s.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},s.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),(()=>{var e=s(792);const n="rendered",i=(e,n)=>{const s=e.getBoundingClientRect();let i,r;return"mousedown"===n.type?(i=n.clientX,r=n.clientY):(i=n.touches[0].clientX,r=n.touches[0].clientY),i>=s.x&&i<=s.x+s.width&&r>=s.y&&r<=s.y+s.height};let r;const l={ArrowLeft:-1,ArrowRight:1},t=["horizontal","vertical"],d=e=>({x:e.touches[0].pageX,y:e.touches[0].pageY}),c=e=>({x:e.pageX,y:e.pageY}),h="undefined"!=typeof window&&(null===window||void 0===window?void 0:window.HTMLElement);"undefined"!=typeof window&&(window.document&&(r=document.createElement("template"),r.innerHTML='<div class="second" id="second"> <slot name="second"><slot name="before"></slot></slot> </div> <div class="first" id="first"> <div class="first-overlay"> <div class="first-overlay-container" id="firstImageContainer"> <slot name="first"><slot name="after"></slot></slot> </div> </div> <div class="handle-container"> <div class="divider"></div> <div class="handle" id="handle"> <slot name="handle"> <svg xmlns="http://www.w3.org/2000/svg" class="default-handle" viewBox="-8 -3 16 6"> <path d="M -5 -2 L -7 0 L -5 2 M 5 -2 L 7 0 L 5 2" fill="none" vector-effect="non-scaling-stroke"/> </svg> </slot> </div> </div> </div> '),window.customElements.define("img-comparison-slider",class extends h{constructor(){super(),this.exposure=this.hasAttribute("value")?parseFloat(this.getAttribute("value")):50,this.slideOnHover=!1,this.slideDirection="horizontal",this.keyboard="enabled",this.isMouseDown=!1,this.animationDirection=0,this.isFocused=!1,this.dragByHandle=!1,this.onMouseMove=e=>{if(this.isMouseDown||this.slideOnHover){const n=c(e);this.slideToPage(n)}},this.bodyUserSelectStyle="",this.bodyWebkitUserSelectStyle="",this.onMouseDown=e=>{if(this.slideOnHover)return;if(this.handle&&!i(this.handleElement,e))return;e.preventDefault(),window.addEventListener("mousemove",this.onMouseMove),window.addEventListener("mouseup",this.onWindowMouseUp),this.isMouseDown=!0,this.enableTransition();const n=c(e);this.slideToPage(n),this.focus(),this.bodyUserSelectStyle=window.document.body.style.userSelect,this.bodyWebkitUserSelectStyle=window.document.body.style.webkitUserSelect,window.document.body.style.userSelect="none",window.document.body.style.webkitUserSelect="none"},this.onWindowMouseUp=()=>{this.isMouseDown=!1,window.document.body.style.userSelect=this.bodyUserSelectStyle,window.document.body.style.webkitUserSelect=this.bodyWebkitUserSelectStyle,window.removeEventListener("mousemove",this.onMouseMove),window.removeEventListener("mouseup",this.onWindowMouseUp)},this.touchStartPoint=null,this.isTouchComparing=!1,this.hasTouchMoved=!1,this.onTouchStart=e=>{this.dragByHandle&&!i(this.handleElement,e)||(this.touchStartPoint=d(e),this.isFocused&&(this.enableTransition(),this.slideToPage(this.touchStartPoint)))},this.onTouchMove=e=>{if(null===this.touchStartPoint)return;const n=d(e);if(this.isTouchComparing)return this.slideToPage(n),e.preventDefault(),!1;if(!this.hasTouchMoved){const s=Math.abs(n.y-this.touchStartPoint.y),i=Math.abs(n.x-this.touchStartPoint.x);if("horizontal"===this.slideDirection&&s<i||"vertical"===this.slideDirection&&s>i)return this.isTouchComparing=!0,this.focus(),this.slideToPage(n),e.preventDefault(),!1;this.hasTouchMoved=!0}},this.onTouchEnd=()=>{this.isTouchComparing=!1,this.hasTouchMoved=!1,this.touchStartPoint=null},this.onBlur=()=>{this.stopSlideAnimation(),this.isFocused=!1,this.firstElement.classList.remove("focused")},this.onFocus=()=>{this.isFocused=!0,this.firstElement.classList.add("focused")},this.onKeyDown=e=>{if("disabled"===this.keyboard)return;const n=l[e.key];this.animationDirection!==n&&void 0!==n&&(this.animationDirection=n,this.startSlideAnimation())},this.onKeyUp=e=>{if("disabled"===this.keyboard)return;const n=l[e.key];void 0!==n&&this.animationDirection===n&&this.stopSlideAnimation()},this.resetDimensions=()=>{this.imageWidth=this.offsetWidth,this.imageHeight=this.offsetHeight};const n=this.attachShadow({mode:"open"}),s=new CSSStyleSheet;s.replaceSync(e.Z),n.adoptedStyleSheets=[s],n.appendChild(r.content.cloneNode(!0)),this.firstElement=n.getElementById("first"),this.handleElement=n.getElementById("handle")}set handle(e){this.dragByHandle="false"!==e.toString().toLowerCase()}get handle(){return this.dragByHandle}get value(){return this.exposure}set value(e){const n=parseFloat(e);n!==this.exposure&&(this.exposure=n,this.enableTransition(),this.setExposure())}get hover(){return this.slideOnHover}set hover(e){this.slideOnHover="false"!==e.toString().toLowerCase(),this.removeEventListener("mousemove",this.onMouseMove),this.slideOnHover&&this.addEventListener("mousemove",this.onMouseMove)}get direction(){return this.slideDirection}set direction(e){this.slideDirection=e.toString().toLowerCase(),this.slide(0),this.firstElement.classList.remove(...t),t.includes(this.slideDirection)&&this.firstElement.classList.add(this.slideDirection)}static get observedAttributes(){return["hover","direction"]}connectedCallback(){this.hasAttribute("tabindex")||(this.tabIndex=0),this.addEventListener("dragstart",e=>(e.preventDefault(),!1)),new ResizeObserver(this.resetDimensions).observe(this),this.setExposure(0),this.keyboard=this.hasAttribute("keyboard")&&"disabled"===this.getAttribute("keyboard")?"disabled":"enabled",this.addEventListener("keydown",this.onKeyDown),this.addEventListener("keyup",this.onKeyUp),this.addEventListener("focus",this.onFocus),this.addEventListener("blur",this.onBlur),this.addEventListener("touchstart",this.onTouchStart,{passive:!0}),this.addEventListener("touchmove",this.onTouchMove,{passive:!1}),this.addEventListener("touchend",this.onTouchEnd),this.addEventListener("mousedown",this.onMouseDown),this.handle=this.hasAttribute("handle")?this.getAttribute("handle"):this.dragByHandle,this.hover=this.hasAttribute("hover")?this.getAttribute("hover"):this.slideOnHover,this.direction=this.hasAttribute("direction")?this.getAttribute("direction"):this.slideDirection,this.resetDimensions(),this.classList.contains(n)||this.classList.add(n)}disconnectedCallback(){this.transitionTimer&&window.clearTimeout(this.transitionTimer)}attributeChangedCallback(e,n,s){"hover"===e&&(this.hover=s),"direction"===e&&(this.direction=s),"ke
1yboard"===e&&(this.keyboard="disabled"===s?"disabled":"enabled")}setExposure(e=0){var n;this.exposure=(n=this.exposure+e)<0?0:n>100?100:n,this.firstElement.style.setProperty("--exposure",100-this.exposure+"%")}slide(e=0){this.setExposure(e);const n=new Event("slide");this.dispatchEvent(n)}slideToPage(e){"horizontal"===this.slideDirection&&this.slideToPageX(e.x),"vertical"===this.slideDirection&&this.slideToPageY(e.y)}slideToPageX(e){const n=e-this.getBoundingClientRect().left-window.scrollX;this.exposure=n/this.imageWidth*100,this.slide(0)}slideToPageY(e){const n=e-this.getBoundingClientRect().top-window.scrollY;this.exposure=n/this.imageHeight*100,this.slide(0)}enableTransition(){this.firstElement.style.setProperty("--transition-time","100ms"),this.transitionTimer=window.setTimeout(()=>{this.firstElement.style.setProperty("--transition-time","var(--default-transition-time)"),this.transitionTimer=null},100)}startSlideAnimation(){let e=null,n=this.animationDirection;this.firstElement.style.setProperty("--transition-time","var(--keyboard-transition-time)");const s=i=>{if(0===this.animationDirection||n!==this.animationDirection)return;null===e&&(e=i);const r=(i-e)/16.666666666666668*this.animationDirection;this.slide(r),setTimeout(()=>window.requestAnimationFrame(s),0),e=i};window.requestAnimationFrame(s)}stopSlideAnimation(){this.animationDirection=0,this.firstElement.style.setProperty("--transition-time","var(--default-transition-time)")}}))})()})()},49956(e,n,s){"use strict";s.d(n,{A:()=>i});const i=s.p+"assets/images/cell-templating-scheduler-843707fe5b98dcf52d8baa947a91154a.png"},74209(e,n,s){"use strict";s.d(n,{A:()=>i});const i=s.p+"assets/images/date-header-template-scheduler-97077d74d1235673ca95f2f901f12c35.png"},18305(e,n,s){"use strict";s.d(n,{A:()=>i});const i=s.p+"assets/images/event-buffer-templating-scheduler-23d1e79fa3fb86fe6579b2111ac1343b.png"},6636(e,n,s){"use strict";s.d(n,{A:()=>i});const i=s.p+"assets/images/groupbydate-2db71d6e417ebc75912acbf51b265d64.png"},74647(e,n,s){"use strict";s.d(n,{A:()=>i});const i=s.p+"assets/images/groupbydayview-b65289b31d7637202f664209951a93a7.png"},65192(e,n,s){"use strict";s.d(n,{A:()=>i});const i=s.p+"assets/images/groupbyresource-af49d023e4114c796534e8093566b2ab.png"},65660(e,n,s){"use strict";s.d(n,{A:()=>i});const i=s.p+"assets/images/header-template-scheduler-52a6d336051e7f7c7f23d9fc5bb62778.png"},5724(e,n,s){"use strict";s.d(n,{A:()=>i});const i=s.p+"assets/images/normal-cell-templating-scheduler-d4f68549ca936c6571360a99833acdc7.png"},83017(e,n,s){"use strict";s.d(n,{A:()=>i});const i=s.p+"assets/images/normal-date-header-template-scheduler-096f150520283d6a1690caaeb84bd141.png"},43449(e,n,s){"use strict";s.d(n,{A:()=>i});const i=s.p+"assets/images/normal-event-buffer-templating-scheduler-02aaae12a079fdc273e5782b390228ac.png"},56452(e,n,s){"use strict";s.d(n,{A:()=>i});const i=s.p+"assets/images/normal-header-template-scheduler-a3408458dcecbcd3fce881e0d0c17108.png"},61749(e,n,s){"use strict";s.d(n,{A:()=>i});const i=s.p+"assets/images/normal-resource-template-scheduler-af6af4959df2b24747f1f885de0978ad.png"},97421(e,n,s){"use strict";s.d(n,{A:()=>i});const i=s.p+"assets/images/resource-template-scheduler-1b53062f089944d8aa0843b511b29ec9.png"},77407(e,n,s){"use strict";s.d(n,{A:()=>i});const i=s.p+"assets/images/scheduler-overview-f2d7816ce8948c9da3f8c397d439b318.png"},47263(e,n,s){"use strict";s.d(n,{A:()=>i});const i=s.p+"assets/images/scheduler-responsive-0f2b3fad602c6513b7e80ae36a4071ef.gif"},28453(e,n,s){"use strict";s.d(n,{R:()=>t,x:()=>d});var i=s(96540);const r={},l=i.createContext(r);function t(e){const n=i.useContext(l);return i.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:t(e.components),i.createElement(l.Provider,{value:n},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.