@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
TypeScript
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;