add "self" to actions

demo/pages/input/main.ts

@@ -15,12 +15,12 @@ import '@src/styles/themes/dark.css';
 const configInput: IOptions = {
 	input: true,
 	actions: {
-		changeToInput(e, calendar, dates) {
-			if (!dates) return;
-			if (dates[0]) {
-				calendar.HTMLInputElement.value = dates[0];
+		changeToInput(e, calendar, self) {
+			if (!self.selectedDates || !self.HTMLInputElement) return;
+			if (self.selectedDates[0]) {
+				self.HTMLInputElement.value = self.selectedDates[0];
 			} else {
-				calendar.HTMLInputElement.value = '';
+				self.HTMLInputElement.value = '';
 			}
 			calendar.hide();
 		},
@@ -30,12 +30,12 @@ const configInput: IOptions = {
 const configDiv: IOptions = {
 	input: true,
 	actions: {
-		changeToInput(e, calendar, dates) {
-			if (!dates) return;
-			if (dates[0]) {
-				calendar.HTMLInputElement.innerHTML = dates[0];
+		changeToInput(e, calendar, self) {
+			if (!self.selectedDates || !self.HTMLInputElement) return;
+			if (self.selectedDates[0]) {
+				self.HTMLInputElement.innerHTML = self.selectedDates[0];
 			} else {
-				calendar.HTMLInputElement.innerHTML = '';
+				self.HTMLInputElement.innerHTML = '';
 			}
 			calendar.hide();
 		},

demo/pages/multiple/main.ts

@@ -17,6 +17,7 @@ const config: IOptions = {
 	settings: {
 		selection: {
 			day: 'multiple-ranged',
+			cancelableDay: false,
 		},
 		selected: {
 			month: 3,

package/index.d.ts

@@ -2,7 +2,7 @@ import * as T from './types';
 
 export type Options = T.IOptions;
 export type TypesCalendar = T.TypesCalendar;
-export type Date = T.IDate;
+export type Dates = T.IDates;
 export type Range = T.IRange;
 export type Selection = T.ISelection;
 export type Selected = T.ISelected;
@@ -13,14 +13,14 @@ export type Popups = T.IPopups;
 export type CSSClasses = T.ICSSClasses;
 export type DOMTemplates = T.IDOMTemplates;
 
-export default class VanillaCalendar {
+export default class VanillaCalendar implements T.IVanillaCalendar {
 	constructor(selector: HTMLElement | string, options?: Partial<T.IOptions>);
 
 	input: boolean;
 	type: T.TypesCalendar;
 	months: number;
 	jumpMonths: number;
-	date: T.IDate;
+	date: T.IDates;
 	settings: {
 		lang: string;
 		iso8601: boolean;
@@ -50,12 +50,12 @@ export default class VanillaCalendar {
 	readonly selectedDates: T.FormatDateString[];
 	readonly selectedHolidays: T.FormatDateString[];
 	readonly selectedMonth: number;
-	readonly selectedYea: number;
-	readonly selectedHours: string;
-	readonly selectedMinutes: string;
-	readonly selectedKeeping: string;
-	readonly selectedTime: string;
-	readonly userTime: boolean;
+	readonly selectedYear: number;
+	readonly selectedHours?: string;
+	readonly selectedMinutes?: string;
+	readonly selectedKeeping?: string;
+	readonly selectedTime?: string;
+	readonly userTime?: boolean;
 	readonly currentType: T.TypesCalendar;
 	readonly correctMonths: number;
 	readonly viewYear: number;

package/src/scripts/default.ts

@@ -11,7 +11,7 @@ export default class DefaultOptionsCalendar {
 	type: T.TypesCalendar = 'default';
 	months = 2;
 	jumpMonths = 1;
-	date: T.IDate = {
+	date: T.IDates = {
 		min: '1970-01-01',
 		max: '2470-12-31',
 		today: new Date(),

package/src/scripts/handles/handleClickArrow.ts

@@ -15,7 +15,7 @@ const handleClickArrow = (self: VanillaCalendar, event: MouseEvent) => {
 		createYears(self, event.target as HTMLElement);
 	}
 
-	if (self.actions.clickArrow) self.actions.clickArrow(event, self.selectedYear as number, self.selectedMonth as number);
+	if (self.actions.clickArrow) self.actions.clickArrow(event, self);
 };
 
 export default handleClickArrow;

package/src/scripts/handles/handleClickDay.ts

@@ -20,18 +20,14 @@ const handleClickDay = (self: VanillaCalendar, event: MouseEvent) => {
 	daySelectionActions[self.settings.selection.day]();
 	self.selectedDates?.sort((a, b) => +new Date(a) - +new Date(b));
 
-	if (self.actions.clickDay) self.actions.clickDay(event, self.selectedDates);
+	if (self.actions.clickDay) self.actions.clickDay(event, self);
 
 	const isInitAsInput = self.input && self.HTMLInputElement && self.HTMLElement;
 	if (isInitAsInput && self.actions.changeToInput) {
 		self.actions.changeToInput(
 			event,
 			actionsInput(self),
-			self.selectedDates,
-			self.selectedTime,
-			self.selectedHours,
-			self.selectedMinutes,
-			self.selectedKeeping,
+			self,
 		);
 	}
 

package/src/scripts/handles/handleClickMonthOrYear.ts

@@ -14,8 +14,8 @@ type HandleCSSClasses = {
 
 const handleItemClick = (self: VanillaCalendar, event: MouseEvent, type: HandleType, CSSClasses: HandleCSSClasses, itemEl: HTMLElement) => {
 	const actionByType = {
-		year: () => self.actions.clickYear?.(event, self.selectedYear as number, self.selectedMonth as number),
-		month: () => self.actions.clickMonth?.(event, self.selectedMonth as number, self.selectedYear as number),
+		year: () => self.actions.clickYear?.(event, self),
+		month: () => self.actions.clickMonth?.(event, self),
 	};
 	const selectByType = {
 		year: () => {

package/src/scripts/handles/handleClickWeekNumber.ts

@@ -12,7 +12,7 @@ const handleClickWeekNumber = (self: VanillaCalendar, event: MouseEvent) => {
 	const yearWeek = Number(weekNumberEl.dataset.calendarYearWeek);
 	const daysOfThisWeek = [...daysToWeeks].filter((day) => Number((day as HTMLElement).dataset.calendarWeekNumber) === weekNumberValue);
 
-	self.actions.clickWeekNumber(event, weekNumberValue, daysOfThisWeek, yearWeek);
+	self.actions.clickWeekNumber(event, weekNumberValue, daysOfThisWeek, yearWeek, self);
 };
 
 export default handleClickWeekNumber;

package/src/scripts/helpers/actionsInput.ts

@@ -3,14 +3,13 @@ import VanillaCalendar from '@src/vanilla-calendar';
 const actionsInput = (self: VanillaCalendar) => ({
 	hide() {
 		self.HTMLElement.classList.add(self.CSSClasses.calendarHidden);
-		if (self.actions.hideCalendar) self.actions.hideCalendar(self.HTMLInputElement as HTMLInputElement, self.HTMLElement);
+		if (self.actions.hideCalendar) self.actions.hideCalendar(self);
 	},
 	show() {
 		self.HTMLElement.classList.remove(self.CSSClasses.calendarHidden);
-		if (self.actions.showCalendar) self.actions.showCalendar(self.HTMLInputElement as HTMLInputElement, self.HTMLElement);
+		if (self.actions.showCalendar) self.actions.showCalendar(self);
 	},
-	HTMLInputElement: self.HTMLInputElement as HTMLInputElement,
-	HTMLElement: self.HTMLElement,
+	self,
 });
 
 export default actionsInput;

package/src/scripts/methods/changeTime.ts

@@ -25,27 +25,9 @@ const setTime = (self: VanillaCalendar, e: Event, value: string, type: TypeTime)
 
 	self.selectedTime = `${self.selectedHours}:${self.selectedMinutes}${self.selectedKeeping ? ` ${self.selectedKeeping}` : ''}`;
 
-	if (self.actions.changeTime) {
-		self.actions.changeTime(
-			e,
-			self.selectedTime,
-			self.selectedHours,
-			self.selectedMinutes,
-			self.selectedKeeping,
-		);
-	}
-
-	if (self.input && self.HTMLInputElement && self.actions.changeToInput) {
-		self.actions.changeToInput(
-			e,
-			actionsInput(self),
-			self.selectedDates,
-			self.selectedTime,
-			self.selectedHours,
-			self.selectedMinutes,
-			self.selectedKeeping,
-		);
-	}
+	if (self.actions.changeTime) self.actions.changeTime(e, self);
+
+	if (self.input && self.HTMLInputElement && self.actions.changeToInput) self.actions.changeToInput(e, actionsInput(self), self);
 };
 
 const changeRange = (self: VanillaCalendar, range: HTMLInputElement, input: HTMLInputElement, btnKeepingTime: HTMLButtonElement | null, type: TypeTime, max: number) => {

package/src/scripts/methods/createDays.ts

@@ -104,7 +104,7 @@ const createDay = (
 	setDayModifier(self, year, dayEl, dayBtnEl, dayWeekID, date, otherMonth);
 
 	daysEl.append(dayEl);
-	if (self.actions.getDays) self.actions.getDays(day, date, dayEl, dayBtnEl);
+	if (self.actions.getDays) self.actions.getDays(day, date, dayEl, dayBtnEl, self);
 };
 
 const prevMonth = (self: VanillaCalendar, daysEl: HTMLElement, selectedYear: number, selectedMonth: number, firstDayWeek: number) => {

package/src/vanilla-calendar.ts

@@ -6,7 +6,7 @@ import init from '@scripts/init';
 import destroy from '@scripts/destroy';
 import messages from '@scripts/helpers/getMessages';
 
-export default class VanillaCalendar extends DefaultOptionsCalendar {
+export default class VanillaCalendar extends DefaultOptionsCalendar implements T.IVanillaCalendar {
 	constructor(selector: HTMLElement | string, options?: Partial<T.IOptions>) {
 		super();
 

package/types.ts

@@ -5,7 +5,7 @@ export type FormatDateString = `${number}-${MM}-${DD}`;
 
 export type TypesCalendar = 'default' | 'multiple' | 'month' | 'year';
 
-export interface IDate {
+export interface IDates {
 	min: FormatDateString;
 	max: FormatDateString;
 	today: Date;
@@ -67,29 +67,23 @@ export interface ILocale {
 }
 
 export interface IActions {
-	clickDay: ((e: MouseEvent, dates: FormatDateString[] | undefined) => void) | null;
-	clickWeekNumber: ((e: MouseEvent, number: number, days: HTMLElement[], year: number) => void) | null;
-	clickMonth: ((e: MouseEvent, month: number, year: number) => void) | null;
-	clickYear: ((e: MouseEvent, year: number, month: number) => void) | null;
-	clickArrow: ((e: MouseEvent, year: number, month: number) => void) | null;
-	changeTime: ((e: Event, time: string, hours: string, minutes: string, keeping: string) => void) | null;
+	clickDay: ((e: MouseEvent, self: IVanillaCalendar) => void) | null;
+	clickWeekNumber: ((e: MouseEvent, number: number, days: HTMLElement[], year: number, self: IVanillaCalendar) => void) | null;
+	clickMonth: ((e: MouseEvent, self: IVanillaCalendar) => void) | null;
+	clickYear: ((e: MouseEvent, self: IVanillaCalendar) => void) | null;
+	clickArrow: ((e: MouseEvent, self: IVanillaCalendar) => void) | null;
+	changeTime: ((e: Event, self: IVanillaCalendar) => void) | null;
 	changeToInput: ((
 		e: Event,
 		calendar: {
 			hide(): void;
 			show(): void;
-			HTMLInputElement: HTMLInputElement;
-			HTMLElement: HTMLElement;
 		},
-		dates?: FormatDateString[],
-		time?: string,
-		hours?: string,
-		minutes?: string,
-		keeping?: string
+		self: IVanillaCalendar,
 	) => void) | null;
-	getDays: ((day: number, date: FormatDateString, HTMLElement: HTMLElement, HTMLButtonElement: HTMLButtonElement) => void) | null;
-	hideCalendar: ((HTMLInputElement: HTMLInputElement, HTMLElement: HTMLElement) => void) | null;
-	showCalendar: ((HTMLInputElement: HTMLInputElement, HTMLElement: HTMLElement) => void) | null;
+	getDays: ((day: number, date: FormatDateString, HTMLElement: HTMLElement, HTMLButtonElement: HTMLButtonElement, self: IVanillaCalendar) => void) | null;
+	hideCalendar: ((self: IVanillaCalendar) => void) | null;
+	showCalendar: ((self: IVanillaCalendar) => void) | null;
 }
 
 export type IPopup = {
@@ -185,7 +179,7 @@ export interface IOptions {
 	type?: TypesCalendar;
 	months?: number;
 	jumpMonths?: number;
-	date?: Partial<IDate>;
+	date?: Partial<IDates>;
 	settings?: Partial<{
 		lang: string;
 		iso8601: boolean;
@@ -200,3 +194,52 @@ export interface IOptions {
 	CSSClasses?: Partial<ICSSClasses>;
 	DOMTemplates?: Partial<IDOMTemplates>;
 }
+
+export interface IVanillaCalendar {
+	input: boolean;
+	type: TypesCalendar;
+	months: number;
+	jumpMonths: number;
+	date: IDates;
+	settings: {
+		lang: string;
+		iso8601: boolean;
+		range: IRange;
+		selection: ISelection;
+		selected: ISelected;
+		visibility: IVisibility;
+	};
+	locale: ILocale;
+	actions: IActions;
+	popups: IPopups;
+	CSSClasses: ICSSClasses;
+	DOMTemplates: IDOMTemplates;
+
+	reset: () => void;
+	update: () => void;
+	init: () => void;
+	destroy: () => void;
+
+	readonly HTMLElement: HTMLElement;
+	readonly HTMLOriginalElement: HTMLElement;
+	readonly HTMLInputElement?: HTMLInputElement;
+	readonly rangeMin: FormatDateString;
+	readonly rangeMax: FormatDateString;
+	readonly rangeDisabled: FormatDateString[];
+	readonly rangeEnabled: FormatDateString[];
+	readonly selectedDates: FormatDateString[];
+	readonly selectedHolidays: FormatDateString[];
+	readonly selectedMonth: number;
+	readonly selectedYear: number;
+	readonly selectedHours?: string;
+	readonly selectedMinutes?: string;
+	readonly selectedKeeping?: string;
+	readonly selectedTime?: string;
+	readonly userTime?: boolean;
+	readonly currentType: TypesCalendar;
+	readonly correctMonths: number;
+	readonly viewYear: number;
+	readonly dateMin: Date;
+	readonly dateMax: Date;
+	readonly isInit: boolean;
+}