inviton-powerduck 0.0.178 → 0.0.180

package/components/input/plugins/daterangepicker/jquery.daterangepicker.ts

@@ -260,6 +260,16 @@ import { globalState } from '../../../../app/global-state';
 		},
 	};
 
+	const MS_PER_DAY = 86_400_000;
+
+	// 1970 01 01 bol štvrtok. Pre weekday v rozsahu 0..6 kde 0 nedeľa:
+	const weekdayFromEpochDay = (epochDay: number) => (epochDay + 4) % 7; // 0 št 1 pia 2 so 3 ne 4 po 5 ut 6 st
+	// ak chceš 0 nedeľa:
+	const weekdaySun0 = (epochDay: number) => (epochDay + 4 + 3) % 7; // posun na nedeľu
+
+	const toEpochDayUTC = (msUTC: number) => Math.floor(msUTC / MS_PER_DAY);
+	const fromEpochDayUTC = (epochDay: number) => epochDay * MS_PER_DAY;
+
 	const dateNow = () => Temporal.Now.plainDateTimeISO();
 	const ensureTemporal = (date: Temporal.PlainDateTime | number | string): Temporal.PlainDateTime => {
 		if (date == null) {
@@ -432,6 +442,7 @@ import { globalState } from '../../../../app/global-state';
 		customValueLabel: string
 		customValues: any[]
 		getCellHtml?: (args: DaterangePickerArgsCustomCellRenderArgs) => string;
+		enableSwipeDebug: boolean; // Enable mouse dragging to simulate touch swipe (for debugging)
 		showDateFilter?: (date: Temporal.PlainDateTime, day: number) => string | number
 	}
 
@@ -440,7 +451,21 @@ import { globalState } from '../../../../app/global-state';
 			opt = {} as any
 		}
 
+		const getStartMs = () => {
+			if (opt.start) {
+				return opt.start[utcEpochMilliseconds]();
+			}
 
+			return 0;
+		}
+
+		const getEndMs = () => {
+			if (opt.end) {
+				return opt.end[utcEpochMilliseconds]();
+			}
+
+			return 0;
+		}
 
 		opt = $.extend(
 			true,
@@ -508,6 +533,7 @@ import { globalState } from '../../../../app/global-state';
 				customArrowNextSymbol: null,
 				monthSelect: false,
 				yearSelect: false,
+				enableSwipeDebug: location.href.includes('localhost'), // Enable mouse dragging to simulate touch swipe (for debugging)
 			},
 			opt,
 		);
@@ -531,6 +557,10 @@ import { globalState } from '../../../../app/global-state';
 			singleMonth = ($(window).width() < 480) as any;
 		}
 
+		if (($(window).width() < 480)) {
+			singleMonth = true;
+		}
+
 		if (singleMonth) {
 			opt.stickyMonths = false;
 		}
@@ -573,22 +603,6 @@ import { globalState } from '../../../../app/global-state';
 			open(0);
 		}
 
-		const getStartMs = () => {
-			if (opt.start) {
-				return opt.start[utcEpochMilliseconds]();
-			}
-
-			return 0;
-		}
-
-		const getEndMs = () => {
-			if (opt.end) {
-				return opt.end[utcEpochMilliseconds]();
-			}
-
-			return 0;
-		}
-
 		// expose some api
 		$(this).data('dateRangePicker', {
 			setStart(d1) {
@@ -652,7 +666,7 @@ import { globalState } from '../../../../app/global-state';
 		return this;
 
 		function isModalDisplayMode() {
-			return (box != null && box.hasClass('date-range-picker-modalmode')) || $(window).width() <= 992;
+			return (box != null && box.hasClass('date-range-picker-modalmode'))
 		}
 
 		function IsOwnDatePickerClicked(evt, selfObj) {
@@ -827,6 +841,302 @@ import { globalState } from '../../../../app/global-state';
 				showSelectedDays();
 			}
 
+			// Add swipe support for mobile date navigation with preview
+			// Debug: Set enableSwipeDebug: true in options to enable mouse dragging simulation
+			const enableSwipe = opt.isTouchDevice || opt.enableSwipeDebug;
+
+			if (enableSwipe) {
+				let touchStartX = 0;
+				let touchStartY = 0;
+				let touchEndX = 0;
+				let touchEndY = 0;
+				let isSwiping = false;
+				let swipeDirection: 'left' | 'right' | null = null;
+				const monthWrapperInner = box.find('.month-wrapper-inner');
+				let previewMonthContainer: JQuery<HTMLElement> = null;
+
+				const createPreviewMonth = (direction: 'left' | 'right') => {
+					// Clean up any existing preview
+					if (previewMonthContainer) {
+						previewMonthContainer.remove();
+						previewMonthContainer = null;
+					}
+
+					let previewDate: Temporal.PlainDateTime;
+
+					if (direction === 'right') {
+						// Swiping right shows previous month
+						previewDate = prevMonth(opt.month1);
+						if (isMonthOutOfBounds(previewDate)) return;
+					} else {
+						// Swipe left shows next month
+						previewDate = opt.singleDate || opt.singleMonth
+							? nextMonth(opt.month1)
+							: nextMonth(opt.month2);
+						if (isMonthOutOfBounds(previewDate)) return;
+					}
+
+					// Clone the entire month-wrapper-inner to get exact same structure
+					previewMonthContainer = monthWrapperInner.clone();
+					previewMonthContainer.removeClass().addClass('swipe-preview-month-wrapper-inner month-wrapper-inner-common');
+
+					// Update only the first month's content (since we're showing single month preview)
+					const monthName = nameMonth(previewDate.month);
+					previewMonthContainer.find('.month1 .month-name').html(`${monthName}${opt.hideYearInMonthName ? '' : ` ${previewDate.year}`}`);
+					previewMonthContainer.find('.month1 tbody').html(createMonthHTML(previewDate));
+
+					// Hide month2 if it exists in the clone
+					previewMonthContainer.find('.month2').hide();
+					previewMonthContainer.find('.gap').hide();
+
+					// Calculate exact pixel position to avoid gaps
+					const containerWidth = monthWrapperInner.outerWidth(true); // Include margins
+					const leftPosition = direction === 'right' ? -containerWidth : containerWidth;
+
+					// Position preview based on swipe direction - use exact pixel positioning
+					previewMonthContainer.css({
+						position: 'absolute',
+						top: monthWrapperInner.position().top + 'px',
+						left: leftPosition + 'px',
+						width: monthWrapperInner.outerWidth() + 'px',
+						pointerEvents: 'none',
+						transform: 'translateX(0)', // Start with no transform offset
+						'margin-top': monthWrapperInner.css('margin-top'),
+						'margin-bottom': monthWrapperInner.css('margin-bottom'),
+						'margin-left': '0',
+						'margin-right': '0'
+					});
+
+					// Append as sibling to monthWrapperInner (same parent)
+					monthWrapperInner.parent().append(previewMonthContainer);
+				};
+
+				// Setup container for swipe - add overflow hidden and relative positioning
+				const monthWrapper = box.find('.month-wrapper');
+				monthWrapper.css({
+					'overflow': 'hidden',
+					'position': 'relative'
+				});
+
+				// Helper function to handle start event (touch or mouse)
+				const handleDragStart = (clientX: number, clientY: number) => {
+					touchStartX = clientX;
+					touchStartY = clientY;
+					touchEndX = clientX;
+					touchEndY = clientY;
+					isSwiping = false;
+					swipeDirection = null;
+
+					// Remove transition for immediate response
+					monthWrapperInner.css('transition', 'none');
+					if (previewMonthContainer) {
+						previewMonthContainer.css('transition', 'none');
+					}
+				};
+
+				box.find('.month-wrapper').on('touchstart', (e) => {
+					const touch = e.touches?.[0] || (e as any).originalEvent?.touches?.[0];
+					if (touch) {
+						handleDragStart(touch.clientX, touch.clientY);
+					}
+				});
+
+				// Mouse drag support (debug mode)
+				if (opt.enableSwipeDebug) {
+					let isMouseDown = false;
+
+					box.find('.month-wrapper').on('mousedown', (e) => {
+						isMouseDown = true;
+						handleDragStart(e.clientX, e.clientY);
+						e.preventDefault(); // Prevent text selection
+					});
+
+					$(document).on('mouseup', () => {
+						if (isMouseDown && isSwiping) {
+							isMouseDown = false;
+							// Trigger the same end logic as touchend
+							box.find('.month-wrapper').trigger('dragend');
+						}
+						isMouseDown = false;
+					});
+
+					box.find('.month-wrapper').on('mousemove', (e) => {
+						if (!isMouseDown) return;
+
+						touchEndX = e.clientX;
+						touchEndY = e.clientY;
+
+						const deltaX = touchEndX - touchStartX;
+						const deltaY = touchEndY - touchStartY;
+						const absDeltaX = Math.abs(deltaX);
+						const absDeltaY = Math.abs(deltaY);
+
+						// Only apply visual feedback if horizontal swipe is dominant
+						if (absDeltaX > absDeltaY && absDeltaX > 10) {
+							if (!isSwiping) {
+								isSwiping = true;
+								swipeDirection = deltaX > 0 ? 'right' : 'left';
+								createPreviewMonth(swipeDirection);
+							}
+
+							// Apply transform to show dragging effect - both move at same speed
+							monthWrapperInner.css('transform', `translateX(${deltaX}px)`);
+
+							// Move preview container in sync at the same speed
+							if (previewMonthContainer) {
+								const baseOffset = swipeDirection === 'right' ? '-100%' : '100%';
+								previewMonthContainer.css({
+									'left': baseOffset,
+									'transform': `translateX(${deltaX}px)`
+								});
+							}
+
+							e.preventDefault();
+						}
+					});
+				}
+
+				box.find('.month-wrapper').on('touchmove', (e) => {
+					const touch = e.touches?.[0] || (e as any).originalEvent?.touches?.[0];
+					if (touch) {
+						touchEndX = touch.clientX;
+						touchEndY = touch.clientY;
+
+						const deltaX = touchEndX - touchStartX;
+						const deltaY = touchEndY - touchStartY;
+						const absDeltaX = Math.abs(deltaX);
+						const absDeltaY = Math.abs(deltaY);
+
+						// Only apply visual feedback if horizontal swipe is dominant
+						if (absDeltaX > absDeltaY && absDeltaX > 10) {
+							if (!isSwiping) {
+								isSwiping = true;
+								swipeDirection = deltaX > 0 ? 'right' : 'left';
+								createPreviewMonth(swipeDirection);
+							}
+
+							// Apply transform to show dragging effect - both move at same speed
+							monthWrapperInner.css('transform', `translateX(${deltaX}px)`);
+
+							// Move preview container in sync at the same speed
+							if (previewMonthContainer) {
+								// Preview starts at -100% (left) or 100% (right) of container width
+								// As we drag, it moves the same distance as the main calendar
+								const baseOffset = swipeDirection === 'right' ? '-100%' : '100%';
+								previewMonthContainer.css({
+									'left': baseOffset,
+									'transform': `translateX(${deltaX}px)`
+								});
+							}
+
+							// Prevent default scrolling when swiping horizontally
+							e.preventDefault();
+						}
+					}
+				});
+
+				// Shared drag end logic for both touch and mouse
+				const handleDragEnd = () => {
+					const deltaX = touchEndX - touchStartX;
+					const deltaY = touchEndY - touchStartY;
+					const absDeltaX = Math.abs(deltaX);
+					const absDeltaY = Math.abs(deltaY);
+
+					// Calculate if user dragged past 40% of the width
+					const containerWidth = monthWrapperInner.width();
+					const dragThreshold = containerWidth * 0.4;
+					const shouldChangeMonth = isSwiping && absDeltaX > dragThreshold && absDeltaX > absDeltaY;
+
+					if (shouldChangeMonth) {
+						// Add smooth transition for the slide completion
+						monthWrapperInner.css('transition', 'transform 0.3s ease-out');
+						if (previewMonthContainer) {
+							previewMonthContainer.css('transition', 'transform 0.3s ease-out');
+						}
+
+						// Complete the slide animation
+						const fullDistance = deltaX > 0 ? containerWidth : -containerWidth;
+						monthWrapperInner.css('transform', `translateX(${fullDistance}px)`);
+						if (previewMonthContainer) {
+							previewMonthContainer.css('transform', `translateX(${fullDistance}px)`);
+						}
+
+						// After animation, change the month and reset
+						setTimeout(() => {
+							if (deltaX > 0) {
+								// Swipe right - go to previous month
+								const prevButton = box.find('.month1 .prev');
+								if (prevButton.length > 0) {
+									if (!opt.stickyMonths) {
+										gotoPrevMonth(prevButton[0]);
+									} else {
+										gotoPrevMonth_stickily(prevButton[0]);
+									}
+								}
+							} else {
+								// Swipe left - go to next month
+								const nextButton = opt.singleDate || opt.singleMonth
+									? box.find('.month1 .next')
+									: box.find('.month2 .next');
+								if (nextButton.length > 0) {
+									if (!opt.stickyMonths) {
+										gotoNextMonth(nextButton[0]);
+									} else {
+										gotoNextMonth_stickily(nextButton[0]);
+									}
+								}
+							}
+
+							// Clean up
+							monthWrapperInner.css({
+								'transition': 'none',
+								'transform': 'translateX(0)'
+							});
+							if (previewMonthContainer) {
+								previewMonthContainer.remove();
+								previewMonthContainer = null;
+							}
+						}, 300);
+					} else {
+						// Snap back to original position
+						monthWrapperInner.css('transition', 'transform 0.3s ease-out');
+						monthWrapperInner.css('transform', 'translateX(0)');
+
+						if (previewMonthContainer) {
+							previewMonthContainer.css('transition', 'transform 0.3s ease-out');
+							previewMonthContainer.css('transform', 'translateX(0)');
+
+							setTimeout(() => {
+								if (previewMonthContainer) {
+									previewMonthContainer.remove();
+									previewMonthContainer = null;
+								}
+							}, 300);
+						}
+					}
+
+					// Reset values
+					touchStartX = 0;
+					touchStartY = 0;
+					touchEndX = 0;
+					touchEndY = 0;
+					isSwiping = false;
+					swipeDirection = null;
+				};
+
+				// Attach touchend handler
+				box.find('.month-wrapper').on('touchend', () => {
+					handleDragEnd();
+				});
+
+				// Attach dragend handler for mouse (debug mode)
+				if (opt.enableSwipeDebug) {
+					box.find('.month-wrapper').on('dragend', () => {
+						handleDragEnd();
+					});
+				}
+			}
+
 			box.attr('unselectable', 'on')
 				.css('user-select', 'none')
 				.bind('selectstart', (e) => {
@@ -1001,12 +1311,7 @@ import { globalState } from '../../../../app/global-state';
 
 			const winWidth = $(window).width();
 			const timeEnabled = opt.time.enabled == true;
-
-			if (winWidth <= 992 && opt.alwaysOpen != true) {
-				setModalDisplayMode();
-			} else {
-				setDisplayMode();
-			}
+			setDisplayMode();
 
 			if ($(window).height() < 550 && winWidth < DaterangePickerConfig.calendarsOneColThreshold && !timeEnabled) {
 				singleMonth = true;
@@ -1516,6 +1821,76 @@ import { globalState } from '../../../../app/global-state';
 			return true;
 		}
 
+		function isValidTimeDate(date: Date) {
+			// --- lokálne inliny bez sub-metód ---
+			// prevod PlainDate na epochDay (UTC) bez časovej zóny
+			const epochDay = (y, m, d) => Math.floor(Date.UTC(y, m - 1, d) / MS_PER_DAY);
+
+			// pomocné vyčítanie čísla dňa z Temporal.PlainDateTime-like objektu
+			const d_epoch = epochDay(date.getFullYear(), date.getMonth() + 1, date.getDate());
+
+			// hranice
+			const hasStartDate = !!opt.startDate;
+			const hasEndDate = !!opt.endDate;
+			const startDate_epoch = hasStartDate ? epochDay(opt.startDate.year, opt.startDate.month, opt.startDate.day) : 0;
+			const endDate_epoch = hasEndDate ? epochDay(opt.endDate.year, opt.endDate.month, opt.endDate.day) : 0;
+
+			// 1) mimo absolútnych hraníc
+			if (hasStartDate && d_epoch < startDate_epoch) return false;
+			if (hasEndDate && d_epoch > endDate_epoch) return false;
+
+			// Ak ešte nie je zvolený koniec a nie je singleDate, platia ďalšie pravidlá
+			if (opt.start && !opt.end && !opt.singleDate) {
+				const s = opt.start;
+				const s_epoch = epochDay(s.year, s.month, s.day);
+
+				// 2) minDays / maxDays (počítané ako rozdiel v celých dňoch)
+				if (opt.maxDays > 0) {
+					const diff = Math.abs(d_epoch - s_epoch);
+					if (diff > opt.maxDays) return false;
+				}
+				if (opt.minDays > 0) {
+					const diff = Math.abs(d_epoch - s_epoch);
+					if (diff < opt.minDays) return false;
+				}
+
+				// 3) forward / backward
+				if (opt.selectForward && d_epoch < s_epoch) return false;
+				if (opt.selectBackward && d_epoch > s_epoch) return false;
+
+				// 4) disabled days cez beforeShowDay medzi start a date
+				//    Prechádzame smerom k start po 1 dni, ale bez volania ak je to zbytočné.
+				if (opt.beforeShowDay && typeof opt.beforeShowDay === 'function') {
+					// krok +1 alebo -1 podľa smeru
+					const step = d_epoch === s_epoch ? 0 : (d_epoch > s_epoch ? -1 : +1);
+					if (step !== 0) {
+						let cur = d_epoch;
+						// pôvodná logika mala while (countDays(...) > 1):
+						// tu to čítaj ako "kým je medzi nimi aspoň 2-dňová vzdialenosť"
+						while (Math.abs(cur - s_epoch) > 1) {
+							cur += step;
+
+							// z cur vyrobíme PlainDateTime len vtedy keď ho naozaj voláme
+							// inferuj rok-mesiac-deň cez dočasný Date, bez extra helperov
+							const ms = cur * MS_PER_DAY;
+							const tmp = new Date(ms);
+							const y = tmp.getUTCFullYear();
+							const m = tmp.getUTCMonth() + 1;
+							const d = tmp.getUTCDate();
+
+							// PlainDateTime s nulovým časom pre kompatibilitu s existujúcim hookom
+							const pdt = Temporal.PlainDateTime.from({ year: y, month: m, day: d, hour: 0, minute: 0, second: 0, millisecond: 0 });
+
+							const arr: any = opt.beforeShowDay(pdt);
+							if (arr && arr[0] === false) return false;
+						}
+					}
+				}
+			}
+
+			return true;
+		}
+
 		function updateSelectableRange() {
 			box.find('.day.invalid.tmp').removeClass('tmp invalid').addClass('valid');
 			if (opt.start && !opt.end) {
@@ -1835,54 +2210,69 @@ import { globalState } from '../../../../app/global-state';
 		}
 
 		function showSelectedDays() {
-			if (!opt.start && !opt.end) { return; }
-
-			box.find('.day').each(function (this: any) {
-				let time = parseInt($(this).attr('time'));
-				let start = opt.start;
-				let end = opt.end;
-				if (opt.time.enabled) {
-					time = startOfDay(time)[utcEpochMilliseconds]();
-					start = startOfDay(start);
-					end = startOfDay(end);
-				}
-
-				if (
-					(opt.start && opt.end && end[utcEpochMilliseconds]() >= time && start[utcEpochMilliseconds]() <= time)
-					|| (opt.start && !opt.end && DateUtils.formatDate(start, 'yyyyMMdd') == DateUtils.formatDate(time, 'yyyyMMdd'))
-				) {
-					$(this).addClass('checked');
-				} else {
-					$(this).removeClass('checked');
-				}
-
-				// add first-date-selected class name to the first date selected
-				if (opt.start && DateUtils.formatDate(start, 'yyyyMMdd') == DateUtils.formatDate(time, 'yyyyMMdd')) {
-					$(this).addClass('first-date-selected');
+			const tz = 'UTC';
+			const toStartOfDayMs = (dt: Temporal.PlainDateTime) =>
+				dt.with({ hour: 0, minute: 0, second: 0, millisecond: 0 })
+					.toZonedDateTime(tz).epochMilliseconds;
+
+			const toEndOfDayMs = (dt: Temporal.PlainDateTime) =>
+				dt.with({ hour: 23, minute: 59, second: 59, millisecond: 999 })
+					.toZonedDateTime(tz).epochMilliseconds;
+
+			const hasStart = !!opt.start;
+			const hasEnd = !!opt.end;
+			const startDayStartMs = hasStart ? toStartOfDayMs(opt.start) : NaN;
+			const startDayEndMs = hasStart ? toEndOfDayMs(opt.start) : NaN;
+			const endDayStartMs = hasEnd ? toStartOfDayMs(opt.end) : NaN;
+			const endDayEndMs = hasEnd ? toEndOfDayMs(opt.end) : NaN;
+
+			const rangeStartMs = hasStart ? startDayStartMs : NaN;
+			const rangeEndMs = hasEnd ? endDayEndMs : startDayEndMs; // ak nie je end, berie sa len deň start
+
+			const $days = box.find('.day');
+			for (let i = 0; i < $days.length; i++) {
+				const el = $days[i];
+				const timeAttr = (el as HTMLElement).getAttribute('time');
+				if (!timeAttr) continue;
+
+				const timeMs = Number(timeAttr); // očakáva sa epoch ms
+
+				const isInRange =
+					hasStart && hasEnd
+						? (timeMs >= rangeStartMs && timeMs <= rangeEndMs)
+						: hasStart
+							? (timeMs >= startDayStartMs && timeMs <= startDayEndMs)
+							: false;
+
+				const isStartDay = hasStart && timeMs >= startDayStartMs && timeMs <= startDayEndMs;
+				const isEndDay = hasEnd && timeMs >= endDayStartMs && timeMs <= endDayEndMs;
+
+				const $el = $(el);
+				$el.toggleClass('checked', isInRange || isStartDay || isEndDay);
+				$el.toggleClass('first-date-selected', isStartDay);
+				$el.toggleClass('last-date-selected', isEndDay);
+			}
+
+			// ——— výpočet pre .week-number ———
+			const startWeekNum = Number(opt.startWeek);
+			const $weeks = box.find('.week-number');
+			for (let i = 0; i < $weeks.length; i++) {
+				const el = $weeks[i];
+				const w = Number((el as HTMLElement).getAttribute('data-start-time'));
+				if (w === startWeekNum) {
+					$(el).addClass('week-number-selected');
 				} else {
-					$(this).removeClass('first-date-selected');
-				}
-
-				// add last-date-selected
-				if (opt.end && DateUtils.formatDate(end, 'yyyyMMdd') == DateUtils.formatDate(time, 'yyyyMMdd')) {
-					$(this).addClass('last-date-selected');
-				} else {
-					$(this).removeClass('last-date-selected');
-				}
-			});
-
-			box.find('.week-number').each(function (this: any) {
-				if ($(this).attr('data-start-time') == opt.startWeek) {
-					$(this).addClass('week-number-selected');
+					$(el).removeClass('week-number-selected');
 				}
-			});
+			}
 		}
 
 		function showMonth(date: Temporal.PlainDateTime, month: 'month1' | 'month2') {
 			const monthName = nameMonth(date.month);
 			var selectableMonthElement = generateSelectableMonthElement(date, month);
 			var selectableYearElement = generateSelectableYearElement(date, month);
-			box.find(`.${month} .month-name`).html(`${opt.monthSelect ? selectableMonthElement : monthName}${opt.hideYearInMonthName ? '' : ` ${opt.yearSelect ? selectableYearElement : date.year}`}`);
+			const html = `${opt.monthSelect ? selectableMonthElement : monthName}${opt.hideYearInMonthName ? '' : ` ${opt.yearSelect ? selectableYearElement : date.year}`}`;
+			box.find(`.${month} .month-name`).first().html(html);
 			box.find(`.${month} tbody`).html(createMonthHTML(date));
 			opt[month] = date;
 			updateSelectableRange();
@@ -1982,7 +2372,8 @@ import { globalState } from '../../../../app/global-state';
 			return data;
 		}
 		function generateSelect(name: string, data: Array<{ value: number, text: string | number, selected: boolean, disabled: boolean }>): string {
-			var select = '<span class="select-wrapper"><select class="drp-date-switch month-name ' + name + '" name="' + name + '">';
+			const selectedItem = data.find(p => p.selected == true);
+			var select = '<span class="select-wrapper">' + (selectedItem != null ? '<span class="select-wrapper-selected-month">' + selectedItem.text + '</span>' : '') + '<select class="drp-date-switch month-name ' + name + '" name="' + name + '">';
 			var current: string | number = '';
 
 			for (var i = 0, l = data.length; i < l; i++) {
@@ -2087,13 +2478,13 @@ import { globalState } from '../../../../app/global-state';
 				return;
 			}
 
-            let afterAnimFired = false
+			let afterAnimFired = false
 			const afterAnim = function () {
-                if (afterAnimFired) {
-                    return;
-                }
+				if (afterAnimFired) {
+					return;
+				}
 
-                afterAnimFired = true;
+				afterAnimFired = true;
 				box.hide();
 				$(self).data('date-picker-opened', false);
 				$(self).trigger('datepicker-closed', {
@@ -2110,8 +2501,8 @@ import { globalState } from '../../../../app/global-state';
 				box.addClass('pd-dropdown-close-animation');
 				const timeout = setTimeout(afterAnim, 450)
 				box.one('animationend', () => {
-						clearTimeout(timeout)
-						afterAnim()
+					clearTimeout(timeout)
+					afterAnim()
 				});
 			}
 
@@ -2204,7 +2595,7 @@ import { globalState } from '../../../../app/global-state';
 			let arrowNext = '&gt;';
 			if (opt.customArrowNextSymbol) { arrowNext = opt.customArrowNextSymbol; }
 
-			html += `<div class="month-wrapper"><div class="month-wrapper-inner">`
+			html += `<div class="month-wrapper"><div class="month-wrapper-inner month-wrapper-inner-common">`
 				+ `   <table class="month1" cellspacing="0" border="0" cellpadding="0">`
 				+ `       <thead>`
 				+ `           <tr class="caption">`
@@ -2445,98 +2836,148 @@ import { globalState } from '../../../../app/global-state';
 		}
 
 		function createMonthHTML(d: Temporal.PlainDateTime) {
-			const days: DaterangePickerArgsCustomCellRenderDay[] = [];
-			d = d.with({ day: 1 });
-			const lastMonth = d.subtract({ days: 1 });
-			const now = dateNow();
-
-			let dayOfWeek = getJsDateDay(d);
-			if ((dayOfWeek === 0) && (opt.startOfWeek === 'monday')) {
-				// add one week
-				dayOfWeek = 7;
-			}
-
-			if (dayOfWeek > 0) {
-				for (let i: number = dayOfWeek; i > 0; i--) {
-					let day = d.subtract({ milliseconds: 86400000 * i });
-					let valid = isValidTime(day);
-					if (opt.startDate && compare_day(day, opt.startDate) < 0) {
-						valid = false;
-					} else if (opt.endDate && compare_day(day, opt.endDate) > 0) {
-						valid = false;
-					}
+			// vstup prevedieme len raz na UTC Date bez časovej zóny
+			// beriem prvý deň v mesiaci
+			const y = d.year, m = d.month; // 1..12
+			const firstMs = Date.UTC(y, m - 1, 1);
+			const firstEpochDay = toEpochDayUTC(firstMs);
+
+			// start týždňa
+			const weekStartsMonday = opt.startOfWeek === 'monday';
+			const dowSun0 = weekdaySun0(firstEpochDay); // 0 nedeľa 1 pondelok ...
+			const backDays = weekStartsMonday ? ((dowSun0 + 6) % 7) : dowSun0;
+			const gridStartEpochDay = firstEpochDay - backDays;
+
+			// hranice iba ako čísla dní
+			const hasStart = !!opt.startDate;
+			const hasEnd = !!opt.endDate;
+			const startEpochDay = hasStart ? toEpochDayUTC(Date.UTC(opt.startDate.year, opt.startDate.month - 1, opt.startDate.day)) : 0;
+			const endEpochDay = hasEnd ? toEpochDayUTC(Date.UTC(opt.endDate.year, opt.endDate.month - 1, opt.endDate.day)) : 0;
+
+			// dnes
+			const now = dateNow(); // očakávam Temporal.PlainDateTime
+			const nowEpochDay = toEpochDayUTC(Date.UTC(now.year, now.month - 1, now.day));
+
+			// pomocná mutovateľná Date v UTC. Nepoužívaj ju na porovnávanie. Iba ak potrebuješ time alebo hooky
+			const tmp = new Date(firstMs);
+
+			// zisti mesiac pre typ bunky rýchlo
+			// posledný deň mesiaca
+			const nextMonthMs = Date.UTC(y, m, 1);
+			const thisMonthEndEpochDay = toEpochDayUTC(nextMonthMs - 1); // posledný deň
+
+			let sawToMonth = false;
+			let weekCount = 0;
+			const html: string[] = [];
 
-					days.push({
-						date: day,
-						type: 'lastMonth',
-						day: day.day,
-						time: day[utcEpochMilliseconds](),
-						valid,
-					});
-				}
-			}
+			for (let week = 0; week < 6; week++) {
+				const rowStart = gridStartEpochDay + week * 7;
 
-			const toMonth = d.month;
-			for (let i: number = 0; i < 40; i++) {
-				let today = d.add({ milliseconds: (86400000 * i) });
-				let valid = isValidTime(today);
-				if (opt.startDate && compare_day(today, opt.startDate) < 0) {
-					valid = false;
-				} else if (opt.endDate && compare_day(today, opt.endDate) > 0) {
-					valid = false;
-				}
+				// ak prvá bunka riadku je po mesiaci a už sme mali toMonth ukonči
+				if (week > 0 && rowStart > thisMonthEndEpochDay && sawToMonth) break;
 
-				days.push({
-					date: today,
-					type: today.month == toMonth ? 'toMonth' : 'nextMonth',
-					day: today.day,
-					time: today[utcEpochMilliseconds](),
-					valid,
-				});
-			}
+				html.push('<tr>');
 
-			const html = [];
-			for (let week = 0; week < 6; week++) {
-				if (days[week * 7].type == 'nextMonth') {
-					break;
-				}
+				for (let wd = 0; wd < 7; wd++) {
+					const epochDay = rowStart + wd;
 
-				html.push('<tr>');
+					// čísla na rýchle rozhodnutia
+					const inMonth = epochDay >= firstEpochDay && epochDay <= thisMonthEndEpochDay;
+					if (inMonth) sawToMonth = true;
 
-				for (var day: any = 0; day < 7; day++) {
-					const _day: any = (opt.startOfWeek == 'monday') ? day + 1 : day;
-					const today = days[week * 7 + _day];
-					const highlightToday = (Temporal.PlainDateTime.compare(today.date.toPlainDate(), now.toPlainDate()) == 0);
-					today.extraClass = '';
-					today.tooltip = '';
-
-					if (today.valid && opt.beforeShowDay && typeof opt.beforeShowDay == 'function') {
-						const _r = opt.beforeShowDay(today.date);
-						today.valid = _r[0];
-						today.extraClass = _r[1] || '';
-						today.tooltip = _r[2] || '';
-						if (today.tooltip !== '') { today.extraClass += ' has-tooltip '; }
+					const type = inMonth ? 'toMonth' : (epochDay < firstEpochDay ? 'lastMonth' : 'nextMonth');
+
+					// validácia bez Temporal
+					let valid = true;
+					if (hasStart && epochDay < startEpochDay) valid = false;
+					if (valid && hasEnd && epochDay > endEpochDay) valid = false;
+					if (valid) {
+						// pre isValidTime potrebujeme skutočný čas. Použijeme tmp iba raz
+						tmp.setTime(fromEpochDayUTC(epochDay));
+						// ak vieš spraviť rýchlu vetvu pre isValidTime z čísel, urob to. Inak toto:
+						valid = isValidTimeDate(tmp);
 					}
 
-					const todayDivAttr = {
-						'time': today.time,
-						'data-tooltip': today.tooltip,
-						'class': `day ${today.type} ${today.extraClass} ${today.valid ? 'valid' : 'invalid'} ${highlightToday ? 'real-today' : ''}`,
-					};
+					// week number bunku vlož ešte pred TD dňa
+					if (wd === 0 && opt.showWeekNumbers) {
+						tmp.setTime(fromEpochDayUTC(epochDay));
+						const wn = opt.getWeekNumber ? opt.getWeekNumber(Temporal.PlainDate.from({
+							year: tmp.getUTCFullYear(),
+							month: tmp.getUTCMonth() + 1,
+							day: tmp.getUTCDate()
+						}) as any) : '';
+						html.push('<td><div class="week-number" data-start-time="', String(tmp.getTime()), '">', String(wn), '</div></td>');
+					}
 
-					if (day === 0 && opt.showWeekNumbers) {
-						html.push(`<td><div class="week-number" data-start-time="${today.time}">${opt.getWeekNumber(today.date)}</div></td>`);
+					// hook beforeShowDay len ak valid
+					let extraClass = '';
+					let tooltip = '';
+					if (valid && opt.beforeShowDay) {
+						// vytvor Temporal iba tu kde to naozaj treba
+						const tpd = Temporal.PlainDate.from(epochDayToYMD(epochDay));
+						const tdt = Temporal.PlainDateTime.from({ ...tpd, hour: 0, minute: 0, second: 0, millisecond: 0 });
+						const _r = opt.beforeShowDay(tdt);
+						valid = !!_r[0];
+						if (_r[1]) extraClass = _r[1];
+						if (_r[2]) tooltip = _r[2];
 					}
+					if (tooltip !== '') extraClass += ' has-tooltip';
+
+					const isToday = epochDay === nowEpochDay;
+
+					// priprava údajov pre TD a vnútro
+					// tmp nastavíme na koniec dňa aby bol time konzistentný ak to tak používaš
+					tmp.setTime(fromEpochDayUTC(epochDay));
+					const ms = tmp.getTime();
+					const dayNumber = utcDayOfMonth(tmp);
+
+					const divClass =
+						'day ' + type +
+						(extraClass ? ' ' + extraClass : '') +
+						(valid ? ' valid' : ' invalid') +
+						(isToday ? ' real-today' : '');
+
+					const tdAttrs = attributesCallbacks({}, opt.dayTdAttrs, {
+						date: null, // ak front nepotrebuje Temporal ušetríš. Inak si sem vieš dohnať PlainDate len na klikanie
+						type,
+						day: dayNumber,
+						time: ms,
+						valid,
+						extraClass,
+						tooltip
+					} as any);
+
+					const inner = getInnerDayHtml(
+						{ 'time': String(ms), 'data-tooltip': tooltip, 'class': divClass },
+						{ day: dayNumber, type, time: ms, valid } as any
+					);
 
-					html.push(`<td ${attributesCallbacks(
-						{},
-						opt.dayTdAttrs,
-						today,
-					)}>${getInnerDayHtml(todayDivAttr, today)}</td>`);
+					html.push('<td ', tdAttrs, '>', inner, '</td>');
 				}
+
+				weekCount += 1;
 				html.push('</tr>');
 			}
+
+			while (weekCount < 6) {
+				html.push('<tr><td colspan="7"><div color="transparent" class="day" time="-1" style="visibility:hidden;">42</div></td></tr>');
+				weekCount += 1;
+			}
+
 			return html.join('');
+
+			// pomôcky
+			function utcDayOfMonth(dt: Date) { return dt.getUTCDate(); }
+
+			function epochDayToYMD(epochDay: number) {
+				const ms = fromEpochDayUTC(epochDay);
+				tmp.setTime(ms);
+				return {
+					year: tmp.getUTCFullYear(),
+					month: tmp.getUTCMonth() + 1,
+					day: tmp.getUTCDate()
+				};
+			}
 		}
 
 		function getInnerDayHtml(attributes: any, today: any) {