vue-persian-calendar-datepicker
Version:
A Vue 3 Persian calendar and datepicker with official Iranian holidays, Jalali, Hijri, and Gregorian date support.
226 lines (225 loc) • 6.82 kB
TypeScript
interface CalendarDay {
day: number;
display: string;
isToday: boolean;
isSelected: boolean;
isFriday: boolean;
isHoliday: boolean;
isDisabled: boolean;
weekDay: number;
events?: {
persianEvents: string[];
hijriEvents: string[];
};
}
interface ColorScheme {
inputBg?: string;
inputText?: string;
inputBorder?: string;
inputBorderHover?: string;
inputBorderFocus?: string;
inputFocusShadow?: string;
iconColor?: string;
iconColorHover?: string;
clearColor?: string;
clearColorHover?: string;
popupBg?: string;
popupBorder?: string;
popupShadow?: string;
navBtnBg?: string;
navBtnBgHover?: string;
navBtnText?: string;
yearMonthText?: string;
quickBtnBg?: string;
quickBtnBgHover?: string;
quickBtnText?: string;
dayNameText?: string;
dayNameBg?: string;
dayBg?: string;
dayText?: string;
dayBgHover?: string;
todayBg?: string;
todayText?: string;
selectedBg?: string;
selectedText?: string;
fridayText?: string;
holidayText?: string;
disabledOpacity?: number;
eventDotColor?: string;
footerBorderColor?: string;
footerText?: string;
}
interface Props {
modelValue?: string | number[] | null;
placeholder?: string;
format?: string;
disabled?: boolean;
readonly?: boolean;
clearable?: boolean;
position?: 'bottom' | 'top' | 'auto';
from?: number[];
to?: number[];
fontFamily?: string;
defaultDate?: number[] | string | null;
showTodayButton?: boolean;
showCloseButton?: boolean;
showOccasions?: boolean;
theme?: 'light' | 'dark' | 'auto' | '';
lightColors?: ColorScheme;
darkColors?: ColorScheme;
}
declare function __VLS_template(): {
attrs: Partial<{}>;
slots: {
input?(_: {
displayValue: string;
togglePopup: () => void;
clearDate: () => void;
isOpen: boolean;
}): any;
'input-field'?(_: {
displayValue: string;
togglePopup: () => void;
onFocus: () => void;
onBlur: () => void;
}): any;
icon?(_: {
togglePopup: () => void;
}): any;
'clear-button'?(_: {
clearDate: () => void;
displayValue: string;
}): any;
popup?(_: {
closePopup: () => void;
selectToday: () => void;
calendarDays: CalendarDay[];
selectDate: (day: CalendarDay) => void;
currentYear: number;
currentMonth: number;
formattedSelectedDate: string;
}): any;
'popup-header'?(_: {
currentYear: number;
currentMonth: number;
handleNextYear: () => void;
handlePrevYear: () => void;
handleNextMonth: () => void;
handlePrevMonth: () => void;
persianMonthName: (month: number) => string;
}): any;
'year-selector'?(_: {
currentYear: number;
handleNextYear: () => void;
handlePrevYear: () => void;
}): any;
'next-year-icon'?(_: {}): any;
'year-display'?(_: {
year: number;
}): any;
'prev-year-icon'?(_: {}): any;
'month-selector'?(_: {
currentMonth: number;
monthName: string;
handleNextMonth: () => void;
handlePrevMonth: () => void;
}): any;
'next-month-icon'?(_: {}): any;
'month-display'?(_: {
month: number;
monthName: string;
}): any;
'prev-month-icon'?(_: {}): any;
'quick-actions'?(_: {
selectToday: () => void;
closePopup: () => void;
}): any;
'today-button'?(_: {
selectToday: () => void;
}): any;
'close-button'?(_: {
closePopup: () => void;
}): any;
'day-names'?(_: {
dayNames: string[];
}): any;
'day-name'?(_: {
day: string;
index: number;
}): any;
'calendar-grid'?(_: {
calendarDays: CalendarDay[];
selectDate: (day: CalendarDay) => void;
getDayClasses: (day: CalendarDay) => {
'calendar-day': boolean;
today: boolean;
selected: boolean;
friday: boolean;
holiday: boolean;
disabled: boolean;
empty: boolean;
'has-event': boolean | undefined;
};
}): any;
'day-cell'?(_: {
day: CalendarDay;
index: number;
}): any;
'popup-footer'?(_: {
selectedDate: number[] | null;
formattedSelectedDate: string;
}): any;
'selected-date-text'?(_: {
formattedDate: string;
}): any;
};
refs: {
wrapperRef: HTMLDivElement;
inputRef: HTMLInputElement;
};
rootEl: HTMLDivElement;
};
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
declare const __VLS_component: import('vue').DefineComponent<Props, {
setDate: (date: number[] | string | null) => void;
setDateFromGregorian: (gregorianDate: number[] | string) => void;
getSelectedDate: () => number[] | null;
selectToday: () => void;
clearDate: () => void;
openPopup: () => void;
closePopup: () => void;
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
change: (value: number[] | null) => any;
close: () => any;
"update:modelValue": (value: number[] | null) => any;
open: () => any;
}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
onChange?: ((value: number[] | null) => any) | undefined;
onClose?: (() => any) | undefined;
"onUpdate:modelValue"?: ((value: number[] | null) => any) | undefined;
onOpen?: (() => any) | undefined;
}>, {
fontFamily: string;
defaultDate: number[] | string | null;
showOccasions: boolean;
theme: "light" | "dark" | "auto" | "";
modelValue: string | number[] | null;
placeholder: string;
format: string;
disabled: boolean;
readonly: boolean;
clearable: boolean;
position: "bottom" | "top" | "auto";
showTodayButton: boolean;
showCloseButton: boolean;
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
wrapperRef: HTMLDivElement;
inputRef: HTMLInputElement;
}, HTMLDivElement>;
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S;
};
};