UNPKG

@quasar/quasar-ui-qcalendar

Version:

QCalendar - Day/Month/Week Calendars, Popups, Date Pickers, Schedules, Agendas, Planners and Tasks for your Vue Apps

345 lines (344 loc) 13 kB
import { Ref, PropType } from 'vue'; import { createNativeLocaleFormatter, validateNumber, Timestamp } from '../utils/Timestamp'; import { type CommonProps } from './useCommon'; import { type ColumnProps } from './useColumn'; import { type CellWidthProps } from './useCellWidth'; import { type TimesProps } from './useTimes'; import { type MaxDaysProps } from './useMaxDays'; import { type NavigationProps } from './useKeyboard'; export interface Scope { scope: any; } export interface Resource { [key: string]: any; } export interface ScopeForSlot { timestamp: Timestamp; timeStartPos: (_time: string, _clamp?: boolean) => number | false; timeDurationHeight: (_minutes: number) => number; columnIndex?: number; activeDate?: boolean; disabled?: boolean; shortWeekdayLabel?: boolean; droppable?: boolean; } export interface ScopeForSlotX { timestamp: Timestamp; timeStartPosX: (_time: string, _clamp?: boolean) => number | false; timeDurationWidth: (_minutes: number) => number; index?: number; } export interface IntervalProps extends CommonProps, ColumnProps, CellWidthProps, MaxDaysProps, TimesProps, NavigationProps { view: 'day' | 'week' | 'month' | 'month-interval'; shortIntervalLabel?: boolean; intervalHeight: number | string; intervalMinutes: number | string; intervalStart: number | string; intervalCount: number | string; intervalStyle?: (_scope: Scope) => any; intervalClass?: (_scope: Scope) => string; weekdayStyle?: (_scope: Scope) => any; weekdayClass?: (_scope: Scope) => string; showIntervalLabel?: (_timestamp: Timestamp) => any; hour24Format?: boolean; timeClicksClamped?: boolean; dateHeader: 'stacked' | 'inline' | 'inverted'; } export declare const useIntervalProps: { readonly view: { readonly type: PropType<IntervalProps["view"]>; readonly validator: (v: string) => boolean; readonly default: "day"; }; readonly shortIntervalLabel: BooleanConstructor; readonly intervalHeight: { readonly type: PropType<IntervalProps["intervalHeight"]>; readonly default: 40; readonly validator: typeof validateNumber; }; readonly intervalMinutes: { readonly type: PropType<IntervalProps["intervalMinutes"]>; readonly default: 60; readonly validator: typeof validateNumber; }; readonly intervalStart: { readonly type: PropType<IntervalProps["intervalStart"]>; readonly default: 0; readonly validator: typeof validateNumber; }; readonly intervalCount: { readonly type: PropType<IntervalProps["intervalCount"]>; readonly default: 24; readonly validator: typeof validateNumber; }; readonly intervalStyle: { readonly type: PropType<IntervalProps["intervalStyle"]>; readonly default: null; }; readonly intervalClass: { readonly type: PropType<IntervalProps["intervalClass"]>; readonly default: null; }; readonly weekdayStyle: { readonly type: PropType<IntervalProps["weekdayStyle"]>; readonly default: null; }; readonly weekdayClass: { readonly type: PropType<IntervalProps["weekdayClass"]>; readonly default: null; }; readonly showIntervalLabel: { readonly type: PropType<IntervalProps["showIntervalLabel"]>; readonly default: null; }; readonly hour24Format: BooleanConstructor; readonly timeClicksClamped: BooleanConstructor; readonly dateHeader: { readonly type: PropType<IntervalProps["dateHeader"]>; readonly default: "stacked"; readonly validator: (v: string) => boolean; }; }; export interface SchedulerProps extends IntervalProps { view: 'day' | 'week' | 'month' | 'month-interval'; modelResources?: Resource[]; resourceKey: string; resourceLabel: string; resourceHeight: number | string; resourceMinHeight: number | string; resourceStyle?: (_timestamp: Timestamp) => any; resourceClass?: (_scope: Scope) => string; weekdayStyle?: (_scope: Scope) => any; weekdayClass?: (_scope: Scope) => string; dayStyle?: (_scope: Scope) => any; dayClass?: (_scope: Scope) => string; dateHeader: 'stacked' | 'inline' | 'inverted'; } export declare const useSchedulerProps: { readonly view: { readonly type: PropType<SchedulerProps["view"]>; readonly validator: (v: string) => boolean; readonly default: "day"; }; readonly modelResources: { readonly type: PropType<SchedulerProps["modelResources"]>; }; readonly resourceKey: { readonly type: PropType<SchedulerProps["resourceKey"]>; readonly default: "id"; }; readonly resourceLabel: { readonly type: PropType<SchedulerProps["resourceLabel"]>; readonly default: "label"; }; readonly resourceHeight: { readonly type: PropType<SchedulerProps["resourceHeight"]>; readonly default: 0; readonly validator: typeof validateNumber; }; readonly resourceMinHeight: { readonly type: PropType<SchedulerProps["resourceMinHeight"]>; readonly default: 70; readonly validator: typeof validateNumber; }; readonly resourceStyle: { readonly type: PropType<SchedulerProps["resourceStyle"]>; readonly default: null; }; readonly resourceClass: { readonly type: PropType<SchedulerProps["resourceClass"]>; readonly default: null; }; readonly weekdayStyle: { readonly type: PropType<SchedulerProps["weekdayStyle"]>; readonly default: null; }; readonly weekdayClass: { readonly type: PropType<SchedulerProps["weekdayClass"]>; readonly default: null; }; readonly dayStyle: { readonly type: PropType<SchedulerProps["dayStyle"]>; readonly default: null; }; readonly dayClass: { readonly type: PropType<SchedulerProps["dayClass"]>; readonly default: null; }; readonly dateHeader: { readonly type: PropType<SchedulerProps["dateHeader"]>; readonly default: "stacked"; readonly validator: (v: string) => boolean; }; }; export interface AgendaProps extends IntervalProps { view: 'day' | 'week' | 'month' | 'month-interval'; leftColumnOptions?: any[]; rightColumnOptions?: any[]; columnOptionsId?: string; columnOptionsLabel?: string; dayStyle?: (_scope: Scope) => any; dayClass?: (_scope: Scope) => string; dayHeight: number | string; dayMinHeight: number | string; } export declare const useAgendaProps: { readonly view: { readonly type: PropType<AgendaProps["view"]>; readonly validator: (v: string) => boolean; readonly default: "day"; }; readonly leftColumnOptions: { readonly type: PropType<AgendaProps["leftColumnOptions"]>; }; readonly rightColumnOptions: { readonly type: PropType<AgendaProps["rightColumnOptions"]>; }; readonly columnOptionsId: { readonly type: PropType<AgendaProps["columnOptionsId"]>; }; readonly columnOptionsLabel: { readonly type: PropType<AgendaProps["columnOptionsLabel"]>; }; readonly weekdayStyle: { readonly type: PropType<AgendaProps["weekdayStyle"]>; readonly default: null; }; readonly weekdayClass: { readonly type: PropType<AgendaProps["weekdayClass"]>; readonly default: null; }; readonly dayStyle: { readonly type: PropType<AgendaProps["dayStyle"]>; readonly default: null; }; readonly dayClass: { readonly type: PropType<AgendaProps["dayClass"]>; readonly default: null; }; readonly dateHeader: { readonly type: PropType<AgendaProps["dateHeader"]>; readonly default: "stacked"; readonly validator: (v: string) => boolean; }; readonly dayHeight: { readonly type: PropType<AgendaProps["dayHeight"]>; readonly default: 0; readonly validator: typeof validateNumber; }; readonly dayMinHeight: { readonly type: PropType<AgendaProps["dayMinHeight"]>; readonly default: 40; readonly validator: typeof validateNumber; }; }; export interface ResourceProps extends IntervalProps { modelResources?: Resource[]; resourceKey: string; resourceLabel: string; resourceHeight: number | string; resourceMinHeight: number | string; resourceStyle?: (_scope: any) => any; resourceClass?: (_scope: any) => string; cellWidth: number | string; intervalHeaderHeight: number | string; noSticky?: boolean; } export declare const useResourceProps: { readonly modelResources: { readonly type: PropType<ResourceProps["modelResources"]>; }; readonly resourceKey: { readonly type: PropType<ResourceProps["resourceKey"]>; readonly default: "id"; }; readonly resourceLabel: { readonly type: PropType<ResourceProps["resourceLabel"]>; readonly default: "label"; }; readonly resourceHeight: { readonly type: PropType<ResourceProps["resourceHeight"]>; readonly default: 0; readonly validator: typeof validateNumber; }; readonly resourceMinHeight: { readonly type: PropType<ResourceProps["resourceMinHeight"]>; readonly default: 70; readonly validator: typeof validateNumber; }; readonly resourceStyle: { readonly type: PropType<ResourceProps["resourceStyle"]>; readonly default: null; }; readonly resourceClass: { readonly type: PropType<ResourceProps["resourceClass"]>; readonly default: null; }; readonly cellWidth: { readonly type: PropType<ResourceProps["cellWidth"]>; readonly default: 100; }; readonly intervalHeaderHeight: { readonly type: PropType<ResourceProps["intervalHeaderHeight"]>; readonly default: 20; readonly validator: typeof validateNumber; }; readonly noSticky: PropType<ResourceProps["noSticky"]>; }; export interface UseIntervalReturn { parsedIntervalStart: Ref<number>; parsedIntervalMinutes: Ref<number>; parsedIntervalCount: Ref<number>; parsedIntervalHeight: Ref<number>; parsedCellWidth: Ref<number>; parsedStartMinute: Ref<number>; bodyHeight: Ref<number>; bodyWidth: Ref<number>; parsedWeekStart: Ref<Timestamp>; parsedWeekEnd: Ref<Timestamp>; days: Ref<Timestamp[]>; intervals: Ref<Timestamp[][]>; intervalFormatter: Ref<(_tms: Timestamp, _short: boolean) => string>; ariaDateTimeFormatter: Ref<ReturnType<typeof createNativeLocaleFormatter>>; arrayHasDateTime: (_arr: string[], _timestamp: Timestamp) => boolean; checkIntervals: (_arr: string[], _timestamp: Timestamp) => { firstDay: boolean; betweenDays: boolean; lastDay: boolean; }; getIntervalClasses: (_interval: Timestamp, _selectedDays?: string[], _startEndDays?: string[]) => Record<string, boolean>; getResourceClasses: (_interval: Timestamp, _selectedDays: string[], _startEndDays: string[]) => string[]; showIntervalLabelDefault: (_interval: Timestamp) => boolean; showResourceLabelDefault: (_resource: any) => void; styleDefault: ({ scope }: { scope: any; }) => {}; getTimestampAtEventInterval: (_e: MouseEvent & TouchEvent, _day: Timestamp, _clamp?: boolean, _now?: Timestamp) => Timestamp; getTimestampAtEvent: (_e: MouseEvent & TouchEvent, _day: Timestamp, _clamp?: boolean, _now?: Timestamp) => Timestamp; getTimestampAtEventX: (_e: MouseEvent & TouchEvent, _day: Timestamp, _clamp?: boolean, _now?: Timestamp) => Timestamp; getScopeForSlot: (_day: Timestamp, _columnIndex: number) => ScopeForSlot; getScopeForSlotX: (_day: Timestamp, _columnIndex: number) => ScopeForSlotX; scrollToTime: (_time: string, _duration?: number) => boolean; scrollToTimeX: (_time: string, _duration?: number) => boolean; timeDurationHeight: (_minutes: number) => number; timeDurationWidth: (_minutes: number) => number; heightToMinutes: (_height: number) => number; widthToMinutes: (_width: number) => number; timeStartPos: (_time: string, _clamp?: boolean) => number | false; timeStartPosX: (_time: string, _clamp?: boolean) => number | false; } export default function useInterval(props: IntervalProps & AgendaProps & SchedulerProps & ResourceProps & ColumnProps & CommonProps, { times, scrollArea, parsedStart, parsedEnd, maxDays, size, headerColumnRef, }: { times: { now: Timestamp; today: Timestamp; }; scrollArea: Ref<HTMLElement | null>; parsedStart: Ref<Timestamp>; parsedEnd: Ref<Timestamp>; maxDays: Ref<number>; size: { width: number; height: number; }; headerColumnRef: Ref<HTMLElement | null>; }): UseIntervalReturn;