Release v2.1.0

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Yury Uvarov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

build/index.html

@@ -5,7 +5,7 @@
 		<meta charset="UTF-8">
 		<meta name="viewport" content="initial-scale=1,width=device-width">
 		<meta name="format-detection" content="telephone=no">
-		<title>Vanilla JS Calendar - A lightweight date and time picker written in pure JavaScript.</title>
+		<title>Vanilla JS Calendar - A lightweight date and time picker written in pure JavaScript using TypeScript.</title>
 		<style>
 			body {
 				box-sizing: border-box;

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@uvarov.frontend/vanilla-calendar",
-	"version": "2.0.0",
+	"version": "2.1.0",
 	"description": "Vanilla JS calendar without using additional packages. A lightweight date and time picker written in pure JavaScript using TypeScript.",
 	"homepage": "https://vanilla-calendar.frontend.uvarov.tech/",
 	"keywords": [
@@ -23,12 +23,15 @@
 		"url": "https://github.com/uvarov-frontend/vanilla-calendar.git"
 	},
 	"author": {
-		"name": "Yuri Uvarov",
+		"name": "Yury Uvarov",
 		"email": "[email protected]",
 		"url": "https://frontend.uvarov.tech"
 	},
 	"license": "MIT",
 	"main": "./build/vanilla-calendar.min.js",
+	"style": "./build/vanilla-calendar.min.css",
+	"source": "./src/scripts/vanilla-calendar.ts",
+	"types": "./src/index.d.ts",
 	"scripts": {
 		"dev": "webpack",
 		"start": "webpack serve",
@@ -50,6 +53,9 @@
 		"html-webpack-harddisk-plugin": "^2.0.0",
 		"html-webpack-plugin": "^5.5.0",
 		"mini-css-extract-plugin": "^2.6.1",
+		"postcss": "^8.4.18",
+		"postcss-loader": "^7.0.1",
+		"postcss-preset-env": "^7.8.2",
 		"sass": "^1.55.0",
 		"sass-loader": "^13.1.0",
 		"terser-webpack-plugin": "^5.3.6",
@@ -58,5 +64,17 @@
 		"webpack": "^5.74.0",
 		"webpack-cli": "^4.10.0",
 		"webpack-dev-server": "^4.11.1"
+	},
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
 	}
 }

postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+	plugins: [
+		[
+			'postcss-preset-env',
+		],
+	],
+};

src/index.d.ts

@@ -0,0 +1,70 @@
+import { FormatDateString } from './types';
+
+export interface IOptions {
+	type?: string;
+	date?: {
+		min?: string;
+		max?: string;
+		today?: Date;
+	};
+	settings?: {
+		lang?: string;
+		iso8601?: boolean;
+		range?: {
+			min?: FormatDateString,
+			max?: FormatDateString,
+			disabled?: FormatDateString[] | null,
+			enabled?: FormatDateString[] | null,
+		};
+		selection?: {
+			day?: boolean | 'single' | 'multiple' | 'multiple-ranged';
+			month?: boolean;
+			year?: boolean;
+			time?: boolean | number;
+			controlTime?: 'all' | 'range';
+			stepHours?: number;
+			stepMinutes?: number;
+		};
+		selected?: {
+			dates?: FormatDateString[] | undefined | null;
+			month?: number | null;
+			year?: number | null;
+			holidays?: FormatDateString[] | null;
+			time?: string | null;
+		};
+		visibility?: {
+			templateHeader?: string;
+			monthShort?: boolean;
+			weekNumbers?: boolean;
+			weekend?: boolean;
+			today?: boolean;
+			disabled?: boolean;
+		};
+	};
+	locale?: {
+		months?: string[] | [];
+		weekday?: string[] | [];
+	};
+	actions?: {
+		clickDay?: ((e: MouseEvent, dates: string[] | undefined) => void) | null;
+		clickMonth?: ((e: MouseEvent, month: number) => void) | null;
+		clickYear?: ((e: MouseEvent, year: number) => void) | null;
+		changeTime?: ((e: Event, time: string, hours: string, minutes: string, keeping: string) => void) | null;
+	};
+	popups?: {
+		[date in FormatDateString]: {
+			modifier: string | null;
+			html: string;
+		} | null;
+	} | null;
+}
+
+declare class VanillaCalendar {
+	constructor(selector: string | HTMLElement, option?: Partial<IOptions>)
+
+	update: () => void;
+
+	init: () => void;
+}
+
+export default VanillaCalendar;

src/index.html

@@ -5,7 +5,7 @@
 		<meta charset="UTF-8">
 		<meta name="viewport" content="initial-scale=1,width=device-width">
 		<meta name="format-detection" content="telephone=no">
-		<title>Vanilla JS Calendar - A lightweight date and time picker written in pure JavaScript.</title>
+		<title>Vanilla JS Calendar - A lightweight date and time picker written in pure JavaScript using TypeScript.</title>
 		<style>
 			body {
 				box-sizing: border-box;

src/index.ts

@@ -1,4 +1,4 @@
-import { IWindow } from './scripts/types';
+import { IWindow } from './types';
 import VanillaCalendar from './scripts/vanilla-calendar';
 import './styles/vanilla-calendar.scss';
 

src/scripts/methods/changeMonth.ts

@@ -1,4 +1,4 @@
-import { IVanillaCalendar } from '../types';
+import { IVanillaCalendar } from 'src/types';
 import controlArrows from './controlArrows';
 import createDays from './createDays';
 import createHeader from './createHeader';

src/scripts/methods/clickCalendar.ts

@@ -1,4 +1,4 @@
-import { IVanillaCalendar } from '../types';
+import { FormatDateString, IVanillaCalendar } from 'src/types';
 import changeMonth from './changeMonth';
 import createDays from './createDays';
 import createMonths from './createMonths';
@@ -30,26 +30,26 @@ const clickCalendar = (self: IVanillaCalendar) => {
 		const clickDaySingle = () => {
 			if (!self.selectedDates || !dayBtnEl || !dayBtnEl.dataset.calendarDay) return;
 			if (dayBtnEl.classList.contains('vanilla-calendar-day__btn_selected')) {
-				self.selectedDates.splice(self.selectedDates.indexOf(dayBtnEl.dataset.calendarDay), 1);
+				self.selectedDates.splice(self.selectedDates.indexOf(dayBtnEl.dataset.calendarDay as FormatDateString), 1);
 			} else {
 				self.selectedDates = [];
-				self.selectedDates.push(dayBtnEl.dataset.calendarDay);
+				self.selectedDates.push(dayBtnEl.dataset.calendarDay as FormatDateString);
 			}
 		};
 
 		const clickDayMultiple = () => {
 			if (!self.selectedDates || !dayBtnEl || !dayBtnEl.dataset.calendarDay) return;
 			if (dayBtnEl.classList.contains('vanilla-calendar-day__btn_selected')) {
-				self.selectedDates.splice(self.selectedDates.indexOf(dayBtnEl.dataset.calendarDay), 1);
+				self.selectedDates.splice(self.selectedDates.indexOf(dayBtnEl.dataset.calendarDay as FormatDateString), 1);
 			} else {
-				self.selectedDates.push(dayBtnEl.dataset.calendarDay);
+				self.selectedDates.push(dayBtnEl.dataset.calendarDay as FormatDateString);
 			}
 		};
 
 		const clickDayMultipleRanged = () => {
 			if (!self.selectedDates || !dayBtnEl || !dayBtnEl.dataset.calendarDay) return;
 			if (self.selectedDates.length > 1) self.selectedDates = [];
-			self.selectedDates.push(dayBtnEl.dataset.calendarDay);
+			self.selectedDates.push(dayBtnEl.dataset.calendarDay as FormatDateString);
 
 			if (!self.selectedDates[1]) return;
 

src/scripts/methods/controlArrows.ts

@@ -1,4 +1,4 @@
-import { IVanillaCalendar } from '../types';
+import { IVanillaCalendar } from 'src/types';
 
 const controlArrows = (self: IVanillaCalendar) => {
 	if (!['default', 'year'].includes(self.currentType)) return;

src/scripts/methods/controlTime.ts

@@ -1,4 +1,4 @@
-import { IVanillaCalendar } from '../types';
+import { IVanillaCalendar } from 'src/types';
 import transformTime12 from './transformTime12';
 import transformTime24 from './transformTime24';
 

src/scripts/methods/createDOM.ts

@@ -1,4 +1,4 @@
-import { IVanillaCalendar } from '../types';
+import { IVanillaCalendar } from 'src/types';
 
 const createDOM = (self: IVanillaCalendar) => {
 	const calendarElement = (self.HTMLElement as HTMLElement);

src/scripts/methods/createDays.ts

@@ -1,4 +1,4 @@
-import { IVanillaCalendar } from '../types';
+import { FormatDateString, IVanillaCalendar } from 'src/types';
 import createPopup from './createPopup';
 import createWeekNumbers from './createWeekNumbers';
 import generateDate from './generateDate';
@@ -53,14 +53,14 @@ const createDays = (self: IVanillaCalendar) => {
 		}
 
 		// if selected day
-		if (self.selectedDates && self.selectedDates.indexOf(date) === 0) {
+		if (self.selectedDates && self.selectedDates.indexOf(date as FormatDateString) === 0) {
 			dayBtnEl.classList.add('vanilla-calendar-day__btn_selected');
-		} else if (self.selectedDates && self.selectedDates[0] && (self.selectedDates.indexOf(date) === self.selectedDates.length - 1)) {
+		} else if (self.selectedDates && self.selectedDates[0] && (self.selectedDates.indexOf(date as FormatDateString) === self.selectedDates.length - 1)) {
 			dayBtnEl.classList.add('vanilla-calendar-day__btn_selected');
-		} else if (self.selectedDates && self.selectedDates.indexOf(date) > 0 && self.settings.selection.day === 'multiple-ranged') {
+		} else if (self.selectedDates && self.selectedDates.indexOf(date as FormatDateString) > 0 && self.settings.selection.day === 'multiple-ranged') {
 			dayBtnEl.classList.add('vanilla-calendar-day__btn_selected');
 			dayBtnEl.classList.add('vanilla-calendar-day__btn_intermediate');
-		} else if (self.selectedDates && self.selectedDates.indexOf(date) > 0) {
+		} else if (self.selectedDates && self.selectedDates.indexOf(date as FormatDateString) > 0) {
 			dayBtnEl.classList.add('vanilla-calendar-day__btn_selected');
 		}
 
@@ -131,7 +131,7 @@ const createDays = (self: IVanillaCalendar) => {
 		for (let i = 0; i < firstDayWeek; i++) {
 			day += 1;
 
-			const date = `${year}-${month}-${day}`;
+			const date = `${year}-${month}-${day}` as FormatDateString;
 			const dayIDCurrent = new Date(Date.UTC(self.selectedYear, self.selectedMonth, day - 1));
 			const prevMonthID = dayIDCurrent.getUTCMonth() - 1;
 			const dayID = new Date(Date.UTC(self.selectedYear, prevMonthID, day)).getUTCDay();
@@ -169,7 +169,7 @@ const createDays = (self: IVanillaCalendar) => {
 
 		for (let i = 1; i <= nextDays; i++) {
 			const day = i < 10 ? `0${i}` : String(i);
-			const date = `${year}-${month}-${day}`;
+			const date = `${year}-${month}-${day}` as FormatDateString;
 			const dayIDCurrent = new Date(Date.UTC(self.selectedYear, self.selectedMonth, i));
 			const nextMonthID = dayIDCurrent.getUTCMonth() + 1;
 			const dayID = new Date(Date.UTC(self.selectedYear, nextMonthID, i)).getUTCDay();

src/scripts/methods/createHeader.ts

@@ -1,4 +1,4 @@
-import { IVanillaCalendar } from '../types';
+import { IVanillaCalendar } from 'src/types';
 
 const createHeader = (self: IVanillaCalendar) => {
 	const headerContent = (self.HTMLElement as HTMLElement).querySelector('.vanilla-calendar-header__content');

src/scripts/methods/createMonths.ts

@@ -1,4 +1,4 @@
-import { IVanillaCalendar } from '../types';
+import { IVanillaCalendar } from 'src/types';
 import createDOM from './createDOM';
 import createHeader from './createHeader';
 

src/scripts/methods/createPopup.ts

@@ -1,4 +1,4 @@
-import { IVanillaCalendar } from '../types';
+import { FormatDateString, IVanillaCalendar } from 'src/types';
 
 const createPopup = (self: IVanillaCalendar, daysEl: HTMLElement) => {
 	if (!self.popups) return;
@@ -9,9 +9,11 @@ const createPopup = (self: IVanillaCalendar, daysEl: HTMLElement) => {
 			const dayBtnEl = daysEl.querySelector(`[data-calendar-day="${day}"]`);
 
 			if (dayBtnEl) {
-				const dayInfo = self.popups[day];
-				dayBtnEl.classList.add(dayInfo.modifier);
-				(dayBtnEl.parentNode as HTMLElement).innerHTML += `<div class="vanilla-calendar-day__popup">${dayInfo.html}</div>`;
+				const dayInfo = self.popups[day as FormatDateString];
+				if (dayInfo) {
+					if (dayInfo.modifier) dayBtnEl.classList.add(dayInfo.modifier);
+					(dayBtnEl.parentNode as HTMLElement).innerHTML += `<div class="vanilla-calendar-day__popup">${dayInfo.html}</div>`;
+				}
 			}
 		}
 	}

src/scripts/methods/createTime.ts

@@ -1,4 +1,4 @@
-import { IVanillaCalendar } from '../types';
+import { IVanillaCalendar } from 'src/types';
 import controlTime from './controlTime';
 import transformTime24 from './transformTime24';
 

src/scripts/methods/createWeek.ts

@@ -1,4 +1,4 @@
-import { IVanillaCalendar } from '../types';
+import { IVanillaCalendar } from 'src/types';
 
 const createWeek = (self: IVanillaCalendar) => {
 	const weekday = [...self.locale.weekday];

src/scripts/methods/createWeekNumbers.ts

@@ -1,4 +1,4 @@
-import { IVanillaCalendar } from '../types';
+import { IVanillaCalendar } from 'src/types';
 import getWeekNumber from './getWeekNumber';
 
 const createWeekNumbers = (self: IVanillaCalendar, firstDayWeek: number, daysSelectedMonth: number) => {

src/scripts/methods/createYears.ts

@@ -1,4 +1,4 @@
-import { IVanillaCalendar } from '../types';
+import { IVanillaCalendar } from 'src/types';
 import controlArrows from './controlArrows';
 import createDOM from './createDOM';
 import createHeader from './createHeader';

src/scripts/methods/generateDate.ts

@@ -1,3 +1,5 @@
+import { FormatDateString } from 'src/types';
+
 const generateDate = (date: Date) => {
 	const year = date.getUTCFullYear();
 	let month: number | string = date.getUTCMonth() + 1;
@@ -6,7 +8,7 @@ const generateDate = (date: Date) => {
 	month = month < 10 ? `0${month}` : month;
 	day = day < 10 ? `0${day}` : day;
 
-	return `${year}-${month}-${day}`;
+	return `${year}-${month}-${day}` as FormatDateString;
 };
 
 export default generateDate;

src/scripts/methods/getLocale.ts

@@ -1,4 +1,4 @@
-import { IVanillaCalendar } from '../types';
+import { IVanillaCalendar } from 'src/types';
 
 const getLocale = (self: IVanillaCalendar) => {
 	if (self.settings.lang === 'define') return;

src/scripts/methods/initCalendar.ts

@@ -1,6 +1,6 @@
+import { IVanillaCalendar } from 'src/types';
 import updateCalendar from './updateCalendar';
 import clickCalendar from './clickCalendar';
-import { IVanillaCalendar } from '../types';
 
 const initCalendar = (self: IVanillaCalendar) => {
 	if (!self.HTMLElement) return;

src/scripts/methods/setVariablesDates.ts

@@ -1,4 +1,4 @@
-import { IVanillaCalendar } from '../types';
+import { IVanillaCalendar } from 'src/types';
 import transformTime12 from './transformTime12';
 
 const setVariablesDates = (self: IVanillaCalendar) => {

src/scripts/methods/updateCalendar.ts

@@ -1,4 +1,4 @@
-import { IVanillaCalendar } from '../types';
+import { IVanillaCalendar } from 'src/types';
 import controlArrows from './controlArrows';
 import createDays from './createDays';
 import createDOM from './createDOM';