@sbh321/qcalendar

import { App, Component, ComponentPublicInstance, ComponentOptions } from 'vue' import { LooseDictionary } from './ts-helpers' export interface QCalendar extends ComponentPublicInstance { /** * v-model; When set as `YYYY-MM-DD`, the calendar will display the current view on this date. If empty, then it will be changed to the current date which will be emitted */ modelValue : string /** * Tells QCalendar (wrapper) which calendar component to use */ mode : 'day' | 'month' | 'agenda' | 'resource' | 'scheduler' | 'task' /** * The type of calendar view to be displayed */ view? : 'month' | 'month-interval' | 'week' | 'day' | 'month-scheduler' | 'week-scheduler' | 'day-scheduler' | 'month-agenda' | 'week-agenda' | 'day-agenda' | 'month-resource' | 'week-resource' | 'day-resource' /** * Places a calendar in dark mode */ dark? : boolean /** * Places a border around the calendar */ bordered? : boolean /** * This is the currently displayed date (highlighted). If not set, then the current date is used */ now? : string /** * The normal weekdays array looks like this `[0,1,2,3,4,5,6]` where 0=Sunday, 1=Monday, etc. A week that starts on Monday, would look like this: `[1,2,3,4,5,6,0]` and a 5-day workweek would look like this: `[1,2,3,4,5]` */ weekdays? : NumberArray /** * Turns off automatical generation of aria labels for timestamps */ noAria? : boolean /** * This controls whether the `q-active-date` css class is set when a user clicks on a date label (button) */ noActiveDate? : boolean /** * An array of string dates in the form `YYYY-MM-DD` that will be disabled. If an array is contained within the array with a start and end date, it will be treated as a range */ disabledDays? : StringArray /** * A date in the form `YYYY-MM-DD` where all dates before, and including, will be disabled */ disabledBefore? : string /** * A date in the form `YYYY-MM-DD` where all dates after, and including, will be disabled */ disabledAfter? : string /** * Used to change the locale of the calendar */ locale? : string /** * The number of days to be displayed. Applicable only for custom-interval, scheduler and agenda views. Do not use with `week` or `month` views (set to 0 if setting the view dynamically) */ maxDays? : string /** * Hide the calendar header. */ hideHeader? : boolean /** * Displays the weekday label in short format. For instance, 'Monday' would become 'Mon' */ shortWeekdayLabel? : boolean /** * Turns on animation */ animated? : boolean /** * Turns on sticky resources and intervals */ sticky? : boolean /** * Sets day cell width and turns on sticky mode. Width must be css measurement */ cellWidth? : string /** * When animated property is true, transition to use for previous calendar view */ transitionPrev? : string /** * When animated property is true, transition to use for next calendar view */ transitionNext? : string /** * Causes the returning timestamp time to be clamped to the interval it is in */ timeClicksClamped? : boolean /** * The function to handle dragover events */ dragOverFunc? : Function /** * The function to handle drop events */ dropFunc? : Function /** * Turns off the internal scrollbar. Useful if you want to handle your own scrolling */ noScroll? : boolean /** * Turns on the column-header-before scoped slot */ columnHeaderBefore? : boolean /** * Turns on the column-header-after scoped slot */ columnHeaderAfter? : boolean /** * Applicable only for day view. Show the same day x number of times in columns. Scoped slots get this data as index in passed object */ columnCount? : number | string /** * Applicable only for day view. This is the starting index. This allows you to create a paging system (next/prev) when using column-count property */ columnIndexStart? : number | string /** * Makes interval labels short */ shortIntervalLabel? : boolean /** * The maximum height in pixels for the interval height */ intervalHeight? : number | string /** * The maximum width in pixels for the interval width */ intervalWidth? : number | string /** * Gets called to provide custom styling of an interval */ intervalStyle? : Function /** * The number of minutes in an interval */ intervalMinutes? : number | string /** * The number intervals to use. If interval-minutes is set to 30 then you would set interval count to 48 – double that of regular */ intervalCount? : number | string /** * The starting interval */ intervalStart? : number | string /** * Show intervals in 24 hour format */ hour24Format? : boolean /** * The maximum height in pixels for the day height. Using 0 will make the rows variable height based on content. */ dayHeight? : number | string /** * Overrides the padding to be used for a day element. You can use any CSS padding format */ dayPadding? : string /** * Gets called to provide custom styling of a day */ dayStyle? : Function /** * Gets called to provide custom styling (via classes) of a day */ dayClass? : Function /** * The minimum number of weeks to be displayed */ minWeeks? : number | string /** * Makes the month label short. January becomes Jan... */ shortMonthLabel? : boolean /** * Show work weeks */ showWorkWeeks? : boolean /** * Do not display the day button in the header */ noDefaultHeaderBtn? : boolean /** * Do not display the day text in the header */ noDefaultHeaderText? : boolean /** * Shows the month label - this occurs on the 1st of the month */ showMonthLabel? : boolean /** * Show the day of the year - this occurs in the top right of each day element. If show-month-label is true, then that day is skipped */ showDayOfYearLabel? : boolean /** * By default, outside days are disabled in month view. Use the property to enable them. */ enableOutsideDays? : boolean /** * Do not display the labels of outside days */ noOutsideDays? : boolean /** * An array of objects with a single key of label. You can add other keys if you like, which will be passed back on the appropriate scoped slots */ resources : ResourceObjectArray /** * The key from the `resources` object that will be displayed */ resourceKey? : string /** * The maximum height in pixels for the resource height */ resourceHeight? : number | string /** * Gets called to provide custom styling of a resource */ resourceStyle? : Function /** * An array of two dates in format `YYYY-MM-DD` for selection purposes. Interval-based calendars use `YYYY-MM-DD HH:mm` */ selectedStartEndDates? : StringArray /** * Changes the style `selected-start-end-dates` selection when in `mini-mode`. Typically, set this to `true` on `mousedown` and `false` on `mouseup` */ hover? : boolean /** * An array of string dates in the form `YYYY-MM-DD` that will be selected. Interval-based calendars use `YYYY-MM-DD HH:mm` */ selectedDates? : StringArray /** * When `true` puts the calendar into mini-mode. When `auto`, then the property `breakpoint` is used to determine when the calendar will be put into mini-mode */ miniMode? : boolean | 'auto' /** * This property is used when `mini-mode` is set with `auto` */ breakpoint? : 'xs' | 'sm' | 'md' | 'lg' | 'xl' /** * This property is used change the size of the month label button. This property is ignored when `mini-mode` is set to true */ monthLabelSize? : 'xs' | 'sm' | 'md' | 'lg' | 'xl' /** * An array of objects used to add columns to the left side of the agenda. Each object must have an id and label key or define the id object key using the `column-options-id` and the label using the `column-options-label` properties. The value of the id should be unique for each object. The object is passed to slots */ leftColumnOptions? : ColumnObjectArray /** * An array of objects used to add columns to the right side of the agenda. Each object must have an id and label key or define the id object key using the `column-options-id` and the label using the `column-options-label` properties. The value of the id should be unique for each object. The object is passed to slots */ rightColumnOptions? : ColumnObjectArray /** * The key in the object to use for `left-column-options` or `right-column-options` properties to define the id, otherwise `id` will be used */ columnOptionsId? : string /** * The key in the object to use for `left-column-options` or `right-column-options` properties to define the label, otherwise `label` will be used */ columnOptionsLabel? : string /** * Triggers component to display previous (ex: day, week, month) */ prev (): void /** * Triggers component to display next (ex: day, week, month) */ next (): void /** * Triggers component to move for count iterations, depending on positive (forwards) or negative (backwards) value * @param count The amount of iterations to move (negative for backwards, positive for forwards). If value is 0, emits `today's date` to v-model */ move (count? : number): void /** * Emits `today's date` to v-model */ moveToToday (): void /** * Update various values to be consistent with current date */ updateCurrent (): void /** * Calculates the starting y position of the passed in time * @param time The time for which a position is needed in 24-hour format (HH:mm) * @param clamp Clamp negative values to 0 * @returns The absolute y starting position, but `false` on invalid time parameter */ timeStartPos (time? : string, clamp? : boolean): number /** * Calculates the starting x position of the passed in time * @param time The time for which a position is needed in 24-hour format (HH:mm) * @returns The absolute x starting position */ timeStartPosX (time? : string): number /** * Given a duration (in minutes), will return the css height value * @param duration The number of minutes for the event to calculate it's height * @returns The height (in pixels) to be used for the event */ timeDurationHeight (duration? : number | string): number /** * Given a duration (in minutes), will return the css width value * @param duration The number of minutes for the event to calculate it's width * @returns The height (in pixels) to be used for the event */ timeDurationWidth (duration? : number | string): number /** * When on an interval view, scroll to the passed in time (y position) * @param time The time in which to scoll to. If the time is already visible on the viewport, this function will have no affect. */ scrollToTime (time? : string): void /** * When on an resource interval view, scroll to the passed in time (x position) * @param time The time in which to scoll to. If the time is already visible on the viewport, this function will have no affect. */ scrollToTimeX (time? : string): void } export interface QCalendarAgenda extends ComponentPublicInstance { /** * When set as `YYYY-MM-DD`, the calendar will display the current view on this date. If empty, then it will be changed to the current date which will be emitted. Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive */ modelValue : string /** * The type of calendar view to be displayed */ view? : StringArray /** * This is the currently displayed date (highlighted). If not set, then the current date is used */ now? : string /** * The normal weekdays array looks like this `[0,1,2,3,4,5,6]` where 0=Sunday, 1=Monday, etc. A week that starts on Monday, would look like this: `[1,2,3,4,5,6,0]` and a 5-day workweek would look like this: `[1,2,3,4,5]` */ weekdays? : NumberArray /** * Shows the current date button as either a circle, rounded or a square */ dateType? : 'round' | 'rounded' | 'square' /** * Determines the weekday (ie: Sunday, Monday, etc) alignment */ weekdayAlign? : 'left' | 'center' | 'right' /** * Determines the date (ie: 2, 3, etc) alignment */ dateAlign? : 'left' | 'center' | 'right' /** * Determines how the date header will be displayed */ dateHeader? : 'stacked' | 'inline' | 'inverted' /** * Places a border around the calendar */ bordered? : boolean /** * Places the calendar into dark mode */ dark? : boolean /** * Turns off aria strings in the calendar */ noAria? : boolean /** * This controls whether the `q-active-date` css class is set when a user clicks on a date label (button) */ noActiveDate? : boolean /** * Displays the weekday label in short format. For instance, 'Monday' would become 'Mon' */ shortWeekdayLabel? : boolean /** * Do not display the weekday text in the header */ noDefaultHeaderText? : boolean /** * Do not display the date button in the header */ noDefaultHeaderBtn? : boolean /** * The minimal number of weekday characters when truncation occurs */ minWeekdayLength? : number | string /** * The breakpoint widths where weekday truncation occurs (needs 2 values) */ weekdayBreakpoints? : NumberArray /** * Used to change the locale of the calendar. Any acceptable locale can be used that is recognized by the browser. If the locale fails, then 'en-US' is the fallback */ locale? : string /** * Turns on animated transitions */ animated? : boolean /** * When animated property is true, transition to use for previous calendar display */ transitionPrev? : string /** * When animated property is true, transition to use for next calendar display */ transitionNext? : string /** * The function to handle dragenter events */ dragEnterFunc? : Function /** * The function to handle dragover events. You must call in your `e.preventDefault()` for Drag and Drop to work properly */ dragOverFunc? : Function /** * The function to handle dragleave events */ dragLeaveFunc? : Function /** * The function to handle drop events */ dropFunc? : Function /** * An array of string dates in the form `YYYY-MM-DD` that will be selected. Interval-based calendars use `YYYY-MM-DD HH:mm` */ selectedDates? : StringArray /** * An array of two dates in format `YYYY-MM-DD` for selection purposes. Interval-based calendars use `YYYY-MM-DD HH:mm` */ selectedStartEndDates? : StringArray /** * Allows certain cells within the calendar to be hovered */ hoverable? : boolean /** * Allows certain cells within the calendar to receive focus */ focusable? : boolean /** * Describes what can become focusable */ focusType? : StringArray /** * Gets called to provide custom styling of a weekday */ weekdayStyle? : Function /** * Gets called to provide custom styling (via classes) of a weekday */ weekdayClass? : Function /** * The maximum height in pixels for the day height. Using 0 will make the rows variable height based on content. */ dayHeight? : number | string /** * The minimum height to be used */ dayMinHeight? : number | string /** * The number of days to be displayed. Do not use with `week` or `month` views (set to 0 if setting the view dynamically) */ maxDays? : string | number /** * Sets day cell width and turns on sticky mode. Width must be css measurement */ cellWidth? : string /** * Allows keyboard navigation */ useNavigation? : boolean /** * Triggers the calendar to show the previous view */ prev (): void /** * Triggers the calendar to show the next view */ next (): void /** * Triggers component to move for count iterations, depending on positive (forwards) or negative (backwards) value */ move (): void /** * Emits `today's date` to v-model */ moveToToday (): void /** * Update various values to be consistent with current date */ updateCurrent (): void /** * Calculates the starting y position of the passed in time * @param time The time for which a position is needed in 24-hour format (HH:mm) * @param clamp Clamp negative values to 0 * @returns The absolute y starting position, but `false` on invalid time parameter */ timeStartPos (time? : string, clamp? : boolean): number /** * Given a duration (in minutes), will return the css height value * @param duration The number of minutes for the event to calculate it's height * @returns The height (in pixels) to be used for the event */ timeDurationHeight (duration? : number | string): number /** * When on an interval view, scroll to the passed in time (y position) * @param time The time in which to scoll to. If the time is already visible on the viewport, this function will have no affect. */ scrollToTime (time? : string): void } export interface QCalendarDay extends ComponentPublicInstance { /** * When set as `YYYY-MM-DD`, the calendar will display the current view on this date. If empty, then it will be changed to the current date which will be emitted. Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive */ modelValue : string /** * The type of calendar view to be displayed */ view? : StringArray /** * This is the currently displayed date (highlighted). If not set, then the current date is used */ now? : string /** * The normal weekdays array looks like this `[0,1,2,3,4,5,6]` where 0=Sunday, 1=Monday, etc. A week that starts on Monday, would look like this: `[1,2,3,4,5,6,0]` and a 5-day workweek would look like this: `[1,2,3,4,5]` */ weekdays? : NumberArray /** * Shows the current date button as either a circle, rounded or a square */ dateType? : 'round' | 'rounded' | 'square' /** * Determines the weekday (ie: Sunday, Monday, etc) alignment */ weekdayAlign? : 'left' | 'center' | 'right' /** * Determines the date (ie: 2, 3, etc) alignment */ dateAlign? : 'left' | 'center' | 'right' /** * Determines how the date header will be displayed */ dateHeader? : 'stacked' | 'inline' | 'inverted' /** * Places a border around the calendar */ bordered? : boolean /** * Places the calendar into dark mode */ dark? : boolean /** * Turns off aria strings in the calendar */ noAria? : boolean /** * This controls whether the `q-active-date` css class is set when a user clicks on a date label (button) */ noActiveDate? : boolean /** * Displays the weekday label in short format. For instance, 'Monday' would become 'Mon' */ shortWeekdayLabel? : boolean /** * Do not display the weekday text in the header */ noDefaultHeaderText? : boolean /** * Do not display the date button in the header */ noDefaultHeaderBtn? : boolean /** * The minimal number of weekday characters when truncation occurs */ minWeekdayLength? : number | string /** * The breakpoint widths where weekday truncation occurs (needs 2 values) */ weekdayBreakpoints? : NumberArray /** * Used to change the locale of the calendar. Any acceptable locale can be used that is recognized by the browser. If the locale fails, then 'en-US' is the fallback */ locale? : string /** * Turns on animated transitions */ animated? : boolean /** * When animated property is true, transition to use for previous calendar display */ transitionPrev? : string /** * When animated property is true, transition to use for next calendar display */ transitionNext? : string /** * The function to handle dragenter events */ dragEnterFunc? : Function /** * The function to handle dragover events. You must call in your `e.preventDefault()` for Drag and Drop to work properly */ dragOverFunc? : Function /** * The function to handle dragleave events */ dragLeaveFunc? : Function /** * The function to handle drop events */ dropFunc? : Function /** * An array of string dates in the form `YYYY-MM-DD` that will be selected. Interval-based calendars use `YYYY-MM-DD HH:mm` */ selectedDates? : StringArray /** * An array of two dates in format `YYYY-MM-DD` for selection purposes. Interval-based calendars use `YYYY-MM-DD HH:mm` */ selectedStartEndDates? : StringArray /** * Allows certain cells within the calendar to be hovered */ hoverable? : boolean /** * Allows certain cells within the calendar to receive focus */ focusable? : boolean /** * Describes what can become focusable */ focusType? : StringArray /** * Gets called to provide custom styling of a weekday */ weekdayStyle? : Function /** * Gets called to provide custom styling (via classes) of a weekday */ weekdayClass? : Function /** * The maximum height in pixels for the day height. Using 0 will make the rows variable height based on content. */ dayHeight? : number | string /** * The minimum height to be used */ dayMinHeight? : number | string /** * The number of days to be displayed. Do not use with `week` or `month` views (set to 0 if setting the view dynamically) */ maxDays? : string | number /** * Sets day cell width and turns on sticky mode. Width must be css measurement */ cellWidth? : string /** * Allows keyboard navigation */ useNavigation? : boolean /** * Triggers the calendar to show the previous view */ prev (): void /** * Triggers the calendar to show the next view */ next (): void /** * Triggers component to move for count iterations, depending on positive (forwards) or negative (backwards) value */ move (): void /** * Emits `today's date` to v-model */ moveToToday (): void /** * Update various values to be consistent with current date */ updateCurrent (): void /** * Calculates the starting y position of the passed in time * @param time The time for which a position is needed in 24-hour format (HH:mm) * @param clamp Clamp negative values to 0 * @returns The absolute y starting position, but `false` on invalid time parameter */ timeStartPos (time? : string, clamp? : boolean): number /** * Given a duration (in minutes), will return the css height value * @param duration The number of minutes for the event to calculate it's height * @returns The height (in pixels) to be used for the event */ timeDurationHeight (duration? : number | string): number /** * When on an interval view, scroll to the passed in time (y position) * @param time The time in which to scoll to. If the time is already visible on the viewport, this function will have no affect. */ scrollToTime (time? : string): void } export interface QCalendarMonth extends ComponentPublicInstance { /** * When set as `YYYY-MM-DD`, the calendar will display the current view on this date. If empty, then it will be changed to the current date which will be emitted. Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive */ modelValue : string /** * This is the currently displayed date (highlighted). If not set, then the current date is used */ now? : string /** * The normal weekdays array looks like this `[0,1,2,3,4,5,6]` where 0=Sunday, 1=Monday, etc. A week that starts on Monday, would look like this: `[1,2,3,4,5,6,0]` and a 5-day workweek would look like this: `[1,2,3,4,5]` */ weekdays? : NumberArray /** * Shows the current date button as either a circle, rounded or a square */ dateType? : 'round' | 'rounded' | 'square' /** * Determines the weekday (ie: Sunday, Monday, etc) alignment */ weekdayAlign? : 'left' | 'center' | 'right' /** * Determines the date (ie: 2, 3, etc) alignment */ dateAlign? : 'left' | 'center' | 'right' /** * Determines how the date header will be displayed */ dateHeader? : 'stacked' | 'inline' | 'inverted' /** * Places a border around the calendar */ bordered? : boolean /** * Places the calendar into dark mode */ dark? : boolean /** * Turns off aria strings in the calendar */ noAria? : boolean /** * This controls whether the `q-active-date` css class is set when a user clicks on a date label (button) */ noActiveDate? : boolean /** * Displays the weekday label in short format. For instance, 'Monday' would become 'Mon' */ shortWeekdayLabel? : boolean /** * Do not display the weekday text in the header */ noDefaultHeaderText? : boolean /** * Do not display the date button in the header */ noDefaultHeaderBtn? : boolean /** * The minimal number of weekday characters when truncation occurs */ minWeekdayLength? : number | string /** * The breakpoint widths where weekday truncation occurs (needs 2 values) */ weekdayBreakpoints? : NumberArray /** * Used to change the locale of the calendar. Any acceptable locale can be used that is recognized by the browser. If the locale fails, then 'en-US' is the fallback */ locale? : string /** * Turns on animated transitions */ animated? : boolean /** * When animated property is true, transition to use for previous calendar display */ transitionPrev? : string /** * When animated property is true, transition to use for next calendar display */ transitionNext? : string /** * The function to handle dragenter events */ dragEnterFunc? : Function /** * The function to handle dragover events. You must call in your `e.preventDefault()` for Drag and Drop to work properly */ dragOverFunc? : Function /** * The function to handle dragleave events */ dragLeaveFunc? : Function /** * The function to handle drop events */ dropFunc? : Function /** * An array of string dates in the form `YYYY-MM-DD` that will be selected. Interval-based calendars use `YYYY-MM-DD HH:mm` */ selectedDates? : StringArray /** * An array of two dates in format `YYYY-MM-DD` for selection purposes. Interval-based calendars use `YYYY-MM-DD HH:mm` */ selectedStartEndDates? : StringArray /** * Allows certain cells within the calendar to be hovered */ hoverable? : boolean /** * Allows certain cells within the calendar to receive focus */ focusable? : boolean /** * Describes what can become focusable */ focusType? : StringArray /** * Gets called to provide custom styling of a weekday */ weekdayStyle? : Function /** * Gets called to provide custom styling (via classes) of a weekday */ weekdayClass? : Function /** * The maximum height in pixels for the day height. Using 0 will make the rows variable height based on content. */ dayHeight? : number | string /** * The minimum height to be used */ dayMinHeight? : number | string /** * The number of days to be displayed */ maxDays? : string | number /** * Sets day cell width and turns on sticky mode. Width must be css measurement */ cellWidth? : string /** * Allows keyboard navigation */ useNavigation? : boolean /** * Triggers the calendar to show the previous view */ prev (): void /** * Triggers the calendar to show the next view */ next (): void /** * Triggers component to move for count iterations, depending on positive (forwards) or negative (backwards) value */ move (): void /** * Emits `today's date` to v-model */ moveToToday (): void /** * Update various values to be consistent with current date */ updateCurrent (): void /** * Calculates the starting y position of the passed in time * @param time The time for which a position is needed in 24-hour format (HH:mm) * @param clamp Clamp negative values to 0 * @returns The absolute y starting position, but `false` on invalid time parameter */ timeStartPos (time? : string, clamp? : boolean): number /** * Given a duration (in minutes), will return the css height value * @param duration The number of minutes for the event to calculate it's height * @returns The height (in pixels) to be used for the event */ timeDurationHeight (duration? : number | string): number /** * When on an interval view, scroll to the passed in time (y position) * @param time The time in which to scoll to. If the time is already visible on the viewport, this function will have no affect. */ scrollToTime (time? : string): void } export interface QCalendarResource extends ComponentPublicInstance { /** * When set as `YYYY-MM-DD`, the calendar will display the current view on this date. If empty, then it will be changed to the current date which will be emitted. Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive */ modelValue : string /** * This is the currently displayed date (highlighted). If not set, then the current date is used */ now? : string /** * The normal weekdays array looks like this `[0,1,2,3,4,5,6]` where 0=Sunday, 1=Monday, etc. A week that starts on Monday, would look like this: `[1,2,3,4,5,6,0]` and a 5-day workweek would look like this: `[1,2,3,4,5]` */ weekdays? : NumberArray /** * Shows the current date button as either a circle, rounded or a square */ dateType? : 'round' | 'rounded' | 'square' /** * Determines the weekday (ie: Sunday, Monday, etc) alignment */ weekdayAlign? : 'left' | 'center' | 'right' /** * Determines the date (ie: 2, 3, etc) alignment */ dateAlign? : 'left' | 'center' | 'right' /** * Determines how the date header will be displayed */ dateHeader? : 'stacked' | 'inline' | 'inverted' /** * Places a border around the calendar */ bordered? : boolean /** * Places the calendar into dark mode */ dark? : boolean /** * Turns off aria strings in the calendar */ noAria? : boolean /** * This controls whether the `q-active-date` css class is set when a user clicks on a date label (button) */ noActiveDate? : boolean /** * Displays the weekday label in short format. For instance, 'Monday' would become 'Mon' */ shortWeekdayLabel? : boolean /** * Do not display the weekday text in the header */ noDefaultHeaderText? : boolean /** * Do not display the date button in the header */ noDefaultHeaderBtn? : boolean /** * The minimal number of weekday characters when truncation occurs */ minWeekdayLength? : number | string /** * The breakpoint widths where weekday truncation occurs (needs 2 values) */ weekdayBreakpoints? : NumberArray /** * Used to change the locale of the calendar. Any acceptable locale can be used that is recognized by the browser. If the locale fails, then 'en-US' is the fallback */ locale? : string /** * Turns on animated transitions */ animated? : boolean /** * When animated property is true, transition to use for previous calendar display */ transitionPrev? : string /** * When animated property is true, transition to use for next calendar display */ transitionNext? : string /** * The function to handle dragenter events */ dragEnterFunc? : Function /** * The function to handle dragover events. You must call in your `e.preventDefault()` for Drag and Drop to work properly */ dragOverFunc? : Function /** * The function to handle dragleave events */ dragLeaveFunc? : Function /** * The function to handle drop events */ dropFunc? : Function /** * An array of string dates in the form `YYYY-MM-DD` that will be selected. Interval-based calendars use `YYYY-MM-DD HH:mm` */ selectedDates? : StringArray /** * An array of two dates in format `YYYY-MM-DD` for selection purposes. Interval-based calendars use `YYYY-MM-DD HH:mm` */ selectedStartEndDates? : StringArray /** * Allows certain cells within the calendar to be hovered */ hoverable? : boolean /** * Allows certain cells within the calendar to receive focus */ focusable? : boolean /** * Describes what can become focusable */ focusType? : StringArray /** * Gets called to provide custom styling of a weekday */ weekdayStyle? : Function /** * Gets called to provide custom styling (via classes) of a weekday */ weekdayClass? : Function /** * The maximum height in pixels for the day height. Using 0 will make the rows variable height based on content. */ dayHeight? : number | string /** * The minimum height to be used */ dayMinHeight? : number | string /** * The number of days to be displayed */ maxDays? : string | number /** * Sets day cell width and turns on sticky mode. Width must be css measurement */ cellWidth? : string /** * Allows keyboard navigation */ useNavigation? : boolean /** * Triggers the calendar to show the previous view */ prev (): void /** * Triggers the calendar to show the next view */ next (): void /** * Triggers component to move for count iterations, depending on positive (forwards) or negative (backwards) value */ move (): void /** * Emits `today's date` to v-model */ moveToToday (): void /** * Update various values to be consistent with current date */ updateCurrent (): void /** * Calculates the starting y position of the passed in time * @param time The time for which a position is needed in 24-hour format (HH:mm) * @param clamp Clamp negative values to 0 * @returns The absolute y starting position, but `false` on invalid time parameter */ timeStartPos (time? : string, clamp? : boolean): number /** * Given a duration (in minutes), will return the css height value * @param duration The number of minutes for the event to calculate it's height * @returns The height (in pixels) to be used for the event */ timeDurationHeight (duration? : number | string): number /** * When on an interval view, scroll to the passed in time (y position) * @param time The time in which to scoll to. If the time is already visible on the viewport, this function will have no affect. */ scrollToTime (time? : string): void } export interface QCalendarScheduler extends ComponentPublicInstance { /** * When set as `YYYY-MM-DD`, the calendar will display the current view on this date. If empty, then it will be changed to the current date which will be emitted. Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive */ modelValue : string /** * This is the currently displayed date (highlighted). If not set, then the current date is used */ now? : string /** * The normal weekdays array looks like this `[0,1,2,3,4,5,6]` where 0=Sunday, 1=Monday, etc. A week that starts on Monday, would look like this: `[1,2,3,4,5,6,0]` and a 5-day workweek would look like this: `[1,2,3,4,5]` */ weekdays? : NumberArray /** * Shows the current date button as either a circle, rounded or a square */ dateType? : 'round' | 'rounded' | 'square' /** * Determines the weekday (ie: Sunday, Monday, etc) alignment */ weekdayAlign? : 'left' | 'center' | 'right' /** * Determines the date (ie: 2, 3, etc) alignment */ dateAlign? : 'left' | 'center' | 'right' /** * Determines how the date header will be displayed */ dateHeader? : 'stacked' | 'inline' | 'inverted' /** * Places a border around the calendar */ bordered? : boolean /** * Places the calendar into dark mode */ dark? : boolean /** * Turns off aria strings in the calendar */ noAria? : boolean /** * This controls whether the `q-active-date` css class is set when a user clicks on a date label (button) */ noActiveDate? : boolean /** * Displays the weekday label in short format. For instance, 'Monday' would become 'Mon' */ shortWeekdayLabel? : boolean /** * Do not display the weekday text in the header */ noDefaultHeaderText? : boolean /** * Do not display the date button in the header */ noDefaultHeaderBtn? : boolean /** * The minimal number of weekday characters when truncation occurs */ minWeekdayLength? : number | string /** * The breakpoint widths where weekday truncation occurs (needs 2 values) */ weekdayBreakpoints? : NumberArray /** * Used to change the locale of the calendar. Any acceptable locale can be used that is recognized by the browser. If the locale fails, then 'en-US' is the fallback */ locale? : string /** * Turns on animated transitions */ animated? : boolean /** * When animated property is true, transition to use for previous calendar display */ transitionPrev? : string /** * When animated property is true, transition to use for next calendar display */ transitionNext? : string /** * The function to handle dragenter events */ dragEnterFunc? : Function /** * The function to handle dragover events. You must call in your `e.preventDefault()` for Drag and Drop to work properly */ dragOverFunc? : Function /** * The function to handle dragleave events */ dragLeaveFunc? : Function /** * The function to handle drop events */ dropFunc? : Function /** * An array of string dates in the form `YYYY-MM-DD` that will be selected. Interval-based calendars use `YYYY-MM-DD HH:mm` */ selectedDates? : StringArray /** * An array of two dates in format `YYYY-MM-DD` for selection purposes. Interval-based calendars use `YYYY-MM-DD HH:mm` */ selectedStartEndDates? : StringArray /** * Allows certain cells within the calendar to be hovered */ hoverable? : boolean /** * Allows certain cells within the calendar to receive focus */ focusable? : boolean /** * Describes what can become focusable */ focusType? : StringArray /** * Gets called to provide custom styling of a weekday */ weekdayStyle? : Function /** * Gets called to provide custom styling (via classes) of a weekday */ weekdayClass? : Function /** * The maximum height in pixels for the day height. Using 0 will make the rows variable height based on content. */ dayHeight? : number | string /** * The minimum height to be used */ dayMinHeight? : number | string /** * The number of days to be displayed. Do not use with `week` or `month` views (set to 0 if setting the view dynamically) */ maxDays? : string | number /** * Sets day cell width and turns on sticky mode. Width must be css measurement */ cellWidth? : string /** * Allows keyboard navigation */ useNavigation? : boolean /** * Triggers the calendar to show the previous view */ prev (): void /** * Triggers the calendar to show the next view */ next (): void /** * Triggers component to move for count iterations, depending on positive (forwards) or negative (backwards) value */ move (): void /** * Emits `today's date` to v-model */ moveToToday (): void /** * Update various values to be consistent with current date */ updateCurrent (): void /** * Calculates the starting y position of the passed in time * @param time The time for which a position is needed in 24-hour format (HH:mm) * @param clamp Clamp negative values to 0 * @returns The absolute y starting position, but `false` on invalid time parameter */ timeStartPos (time? : string, clamp? : boolean): number /** * Given a duration (in minutes), will return the css height value * @param duration The number of minutes for the event to calculate it's height * @returns The height (in pixels) to be used for the event */ timeDurationHeight (duration? : number | string): number /** * When on an interval view, scroll to the passed in time (y position) * @param time The time in which to scoll to. If the time is already visible on the viewport, this function will have no affect. */ scrollToTime (time? : string): void } export interface QCalendarTask extends ComponentPublicInstance { /** * When set as `YYYY-MM-DD`, the calendar will display the current view on this date. If empty, then it will be changed to the current date which will be emitted. Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive */ modelValue : string /** * An array of Tasks that will be displayed */ modelTasks : TaskObjectArray /** * An array of title items, each will be displayed via a slot in the title area */ modelTitle? : TitleObjectArray /** * An array of footer items, each will be displayed via a slot in the footer (summary) area */ modelFooter? : FooterObjectArray /** * The key in an object to use as the ID (must be unique) */ taskKey? : number | string /** * Tells the calendar how to display the data */ view : 'day' | 'week' | 'month' /** * The number of views to show. For instance, if the property `view` was `week`, then setting this property to 2 would show 2 weeks. */ viewCount? : number /** * The number of pixels needed for the tasks column */ taskWidth? : number /** * This is the currently displayed date (highlighted). If not set, then the current date is used */ now? : string /** * The normal weekdays array looks like this `[0,1,2,3,4,5,6]` where 0=Sunday, 1=Monday, etc. A week that starts on Monday, would look like this: `[1,2,3,4,5,6,0]` and a 5-day workweek would look like this: `[1,2,3,4,5]` */ weekdays? : NumberArray /** * Shows the current date button as either a circle, rounded or a square */ dateType? : 'round' | 'rounded' | 'square' /** * Determines the weekday (ie: Sunday, Monday, etc) alignment */ weekdayAlign? : 'left' | 'center' | 'right' /** * Determines the date (ie: 2, 3, etc) alignment */ dateAlign? : 'left' | 'center' | 'right' /** * Determines how the date header will be displayed */ dateHeader? : 'stacked' | 'inline' | 'inverted' /** * Places a border around the calendar */ bordered? : boolean /** * Places the calendar into dark mode */ dark? : boolean /** * Turns off automatical generation of aria labels for timestamps */ noAria? : boolean /** * This controls whether the `q-active-date` css class is set when a user clicks on a date label (button) */ noActiveDate? : boolean /** * Displays the weekday label in short format. For instance, 'Monday' would become 'Mon' */ shortWeekdayLabel? : boolean /** * Do not display the weekday text in the header */ noDefaultHeaderText? : boolean /** * Do not display the date button in the header */ noDefaultHeaderBtn? : boolean /** * The minimal number of weekday characters when truncation occurs */ minWeekdayLabel? : number | string /** * The breakpoint widths where weekday truncation occurs (needs 2 values) */ weekdayBreakpoints? : NumberArray /** * Used to change the locale of the calendar. Any acceptable locale can be used that is recognized by the browser. If the locale fails, then 'en-US' is the fallback */ locale? : string /** * Turns on animated transitions */ animated? : boolean /** * When animated property is true, transition to use for previous calendar display */ transitionPrev? : string /** * When animated property is true, transition to use for next calendar display */ transitionNext? : string /** * An array of string dates in the form `YYYY-MM-DD` that will be disabled. If an array is contained within the array with a start and end date, it will be treated as a range */ disabledDays? : StringArray /** * A date in the form `YYYY-MM-DD` where all dates before, and including, will be disabled */ disabledBefore? : string /** * A date in the form `YYYY-MM-DD` where all dates after, and including, will be disabled */ disabledAfter? : string /** * Similar to `weekdays` property, except values included in this array are automatically made disabled */ disabledWeekdays? : NumberArray /** * The function to handle dragenter events */ dragEnterFunc? : Function /** * The function to handle dragover events. You must call in your `e.preventDefault()` for Drag and Drop to work properly */ dragOverFunc? : Function /** * The function to handle dragleave events */ dragLeaveFunc? : Function /** * The function to handle drop events */ dropFunc? : Function /** * An array of string dates in the form `YYYY-MM-DD` that will be selected. Interval-based calendars use `YYYY-MM-DD HH:mm` */ selectedDates? : StringArray /** * An array of two dates in format `YYYY-MM-DD` for selection purposes. Interval-based calendars use `YYYY-MM-DD HH:mm` */ selectedStartEndDates? : StringArray /** * Allows certain cells within the calendar to be hovered */ hoverable? : boolean /** * Allows certain cells within the calendar to receive focus */ focusable? : boolean /** * Describes what can become focusable */ focusType? : StringArray /** * Gets called to provide custom styling of a weekday */ weekdayStyle? : Function /** * Gets called to provide custom styling (via classes) of a weekday */ weekdayClass? : Function /** * The maximum height in pixels for the day height. Using 0 will make the rows variable height based on content. */ dayHeight? : number | string /** * The minimum height to be used */ dayMinHeight? : number | string /** * The number of days to be displayed. Do not use with `week` or `month` views (set to 0 if setting the view dynamically) */ maxDays? : string | number /** * Sets day cell width and turns on sticky mode. Width is assumed to be in pixels */ cellWidth? : string | number /** * Allows keyboard navigation */ useNavigation? : boolean /** * Triggers the calendar to show the previous view */ prev (): void /** * Triggers the calendar to show the next view */ next (): void /** * Triggers component to move for count iterations, depending on positive (forward) or negative (backward) value */ move (): void /** * Emits today's date to v-model */ moveToToday (): void /** * Update various values to be consistent with current date */ updateCurrent (): void } /** * Returns today's date in YYYY-MM-DD format * @returns Returns today's date in YYYY-MM-DD format */ export function today (): string /** * Ret