jb-calendar
Version:
jalali calendar interface web component
101 lines (100 loc) • 3.7 kB
TypeScript
import { Direction, InputType, JBCalendarData, JBCalendarDateRestrictions, JBCalendarValue } from "./types";
export * from './types.js';
export declare enum JBCalendarSections {
day = "DAY",
month = "MONTH",
year = "YEAR"
}
export type { JBCalendarValue };
export declare class JBCalendarWebComponent extends HTMLElement {
#private;
/**
* @public change month labels to desired user label base on language or culture
*/
setMonthList(inputType: InputType, monthList: string[]): void;
get defaultCalendarData(): {
jalali: {
year: number;
month: number;
};
gregorian: {
year: number;
month: number;
};
};
set defaultCalendarData(value: {
jalali: {
year: number;
month: number;
};
gregorian: {
year: number;
month: number;
};
});
dateRestrictions: JBCalendarDateRestrictions;
data: JBCalendarData;
private elements;
get value(): JBCalendarValue;
set value(value: JBCalendarValue);
get activeSection(): JBCalendarSections;
set activeSection(value: JBCalendarSections);
get inputType(): InputType;
set inputType(value: InputType);
get showPersianNumber(): boolean;
set showPersianNumber(value: boolean);
get cssDirection(): Direction;
get direction(): Direction;
set direction(dir: Direction);
constructor();
connectedCallback(): void;
initCalendarLayout(): void;
/**
* @public its public because we cant detect css dir change by js so we have to let user change it manually
* @description set elements direction base on current css direction or seated direction.
* @param dir
*/
setupStyleBaseOnCssDirection(dir?: Direction): void;
fillDayOfWeek(): void;
setCalendarData(): void;
callOnLoadEvent(): void;
callOnInitEvent(): void;
initWebComponent(): void;
registerEventHandlers(): void;
onDayWrapperTouchStart(e: TouchEvent): void;
onDayWrapperTouchMove(e: TouchEvent): void;
onDayWrapperTouchEnd(e: TouchEvent): void;
onYearWrapperTouchStart(e: TouchEvent): void;
onYearWrapperTouchMove(e: TouchEvent): void;
onYearWrapperTouchEnd(e: TouchEvent): void;
moveBackToPos(dom: HTMLElement): void;
createDataHandler(): {
set: (obj: any, prop: string, value: number | number[]) => boolean;
};
createDateRestrictionHandler(): {
set: (obj: any, prop: string, value: number) => boolean;
};
initProps(): void;
selectToday(): void;
select(year: number, month: number, day: number): void;
initCalendar(): void;
fillYearList(): void;
fillYearListDom(startYear: number, endYear: number, type: "current" | "prev" | "next"): void;
createYearDom(year: number): HTMLDivElement;
fillMonthDaysDom(year: number, month: number, type: "current" | "prev" | "next"): void;
fillMonthDays(): void;
checkIsDayDisable(dayDate: Date): {
min: boolean;
max: boolean;
readonly isAllValid: any;
};
createEmptyDayDom(): HTMLDivElement;
createDayDom(dayNumber: number, year: number, month: number, isToday: boolean, isSelected: boolean, isDisable: boolean): HTMLDivElement;
onDayClicked(year: number, month: number, dayNumber: number): void;
onNextButtonClicked(): void;
onPrevButtonClicked(): void;
onNavigatorTitleYearClicked(): void;
onNavigatorTitleMonthClicked(): void;
onInputTypeChange(): void;
localizeString(string: string): string;
}