preline/src/plugins/datepicker/vanilla-datepicker-pro.ts

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

import { Calendar } from 'vanilla-calendar-pro';
import { Options, Reset, Styles } from 'vanilla-calendar-pro/types';

class CustomVanillaCalendar extends Calendar {
	constructor(selector: HTMLElement | string, options?: Partial<Options>) {
		super(selector, options);

		const parentSet = this.set;

		this.set = (options: Options, resetOptions?: Partial<Reset>) => {
			if (parentSet) parentSet.call(this, options, resetOptions);

			if (options.selectedTime && this.onChangeTime) {
				this.onChangeTime(this, null, true);
			}
			if (options.selectedMonth && this.onClickMonth) {
				this.onClickMonth(this, null);
			}
			if (options.selectedYear && this.onClickYear) {
				this.onClickYear(this, null);
			}
		};
	}

	static get defaultStyles() {
		return {
			calendar: 'vc',
			controls: 'vc-controls',
			grid: 'vc-grid',
			column: 'vc-column',
			header: 'vc-header',
			headerContent: 'vc-header__content',
			month: 'vc-month',
			year: 'vc-year',
			arrowPrev: 'vc-arrow vc-arrow_prev',
			arrowNext: 'vc-arrow vc-arrow_next',
			wrapper: 'vc-wrapper',
			content: 'vc-content',
			months: 'vc-months',
			monthsMonth: 'vc-months__month',
			years: 'vc-years',
			yearsYear: 'vc-years__year',
			week: 'vc-week',
			weekDay: 'vc-week__day',
			weekNumbers: 'vc-week-numbers',
			weekNumbersTitle: 'vc-week-numbers__title',
			weekNumbersContent: 'vc-week-numbers__content',
			weekNumber: 'vc-week-number',
			dates: 'vc-dates',
			date: 'vc-date',
			dateBtn: 'vc-date__btn',
			datePopup: 'vc-date__popup',
			dateRangeTooltip: 'vc-date-range-tooltip',
			time: 'vc-time',
			timeContent: 'vc-time__content',
			timeHour: 'vc-time__hour',
			timeMinute: 'vc-time__minute',
			timeKeeping: 'vc-time__keeping',
			timeRanges: 'vc-time__ranges',
			timeRange: 'vc-time__range',
		};
	}

	public logInfo() {
		console.log('This log is from CustomVanillaCalendar!', this);
	}
}
export default CustomVanillaCalendar;