@open-rlb/ng-bootstrap 3.3.16 → 3.3.18

package/fesm2022/open-rlb-ng-bootstrap.mjs

@@ -3,7 +3,7 @@ import { input, booleanAttribute, output, viewChild, ChangeDetectionStrategy, Co
 import * as i2$1 from '@angular/router';
 import { RouterLink, RouterLinkActive, RouterModule } from '@angular/router';
 import { Collapse, Carousel, Dropdown, Modal, Toast, Offcanvas, ScrollSpy, Popover, Tooltip } from 'bootstrap';
-import { NgTemplateOutlet, NgClass, formatDate, TitleCasePipe, JsonPipe, CommonModule } from '@angular/common';
+import { NgTemplateOutlet, formatDate, NgClass, TitleCasePipe, JsonPipe, CommonModule } from '@angular/common';
 import { Subject, of, map, shareReplay, take, filter, switchMap, Subscription, debounceTime, distinctUntilChanged, Observable, lastValueFrom, takeUntil } from 'rxjs';
 import * as i2 from '@angular/cdk/layout';
 import * as i1 from '@angular/forms';
@@ -2513,10 +2513,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             args: [{ selector: 'rlb-fab', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent], template: "<button rlb-button [color]=\"color()\" [disabled]=\"disabled()\" [outline]=\"outline()\"\n  class=\"fab-button d-flex align-items-center justify-content-center\" [class]=\"[sizeClass(), positionClass()]\">\n  <ng-content></ng-content>\n</button>", styles: [".fab-button{border-radius:50%;box-shadow:0 4px 12px #00000040;z-index:1050;transition:transform .2s ease,box-shadow .2s ease;padding:0}.fab-button:hover{transform:scale(1.08);box-shadow:0 6px 18px #00000059}.fab-button:active{transform:scale(.95)}:host{width:fit-content;display:block}.fab-xs{width:32px;height:32px;font-size:1rem}.fab-sm{width:44px;height:44px;font-size:1.2rem}.fab-md{width:56px;height:56px;font-size:1.4rem}.fab-lg{width:68px;height:68px;font-size:1.7rem}.fab-bottom-right{bottom:24px;right:24px}.fab-bottom-left{bottom:24px;left:24px}.fab-top-right{top:24px;right:24px}.fab-top-left{top:24px;left:24px}\n"] }]
         }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], outline: [{ type: i0.Input, args: [{ isSignal: true, alias: "outline", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
 
-function isSameDay(a, b) {
-    return a.yearUTC === b.yearUTC &&
-        a.monthUTC === b.monthUTC &&
-        a.dayUTC === b.dayUTC;
+const MS_PER_DAY = 86_400_000;
+/**
+ * NOTE on date-tz: the getters (`.hour`, `.minute`, `.day`, `.dayOfWeek`, ...)
+ * and `toString()` are timezone-aware (they add `timezoneOffset` to the raw
+ * timestamp), but the mutators `set()`, `add()` and `stripSecMillis()` are
+ * timezone-NAIVE — they decompose/recompose the raw timestamp as if it were
+ * UTC. So `set(0, 'hour')` zeroes the UTC hour, not the local one.
+ *
+ * For calendar layout we need timezone-aware day math, so the helpers below
+ * derive day boundaries and intra-day offsets from the tz-aware side of the
+ * library instead of from `set()/add()`.
+ */
+/** Returns the IANA timezone resolved from the browser/runtime. */
+function getBrowserTimezone() {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone;
+}
+/** Epoch ms of local midnight (in `timezone`) of the day containing `d`. */
+function startOfDayTs(d, timezone) {
+    const local = d.cloneToTimezone(timezone);
+    const localMs = local.timestamp + local.timezoneOffset;
+    return Math.floor(localMs / MS_PER_DAY) * MS_PER_DAY - local.timezoneOffset;
+}
+/** Minutes elapsed since local midnight (in `timezone`) for `d`. */
+function minutesSinceMidnight(d, timezone) {
+    const local = d.cloneToTimezone(timezone);
+    return local.hour * 60 + local.minute;
+}
+/** Local-midnight instance (in `timezone`) for the day at index `offsetDays` from `d`. */
+function dayAt(d, timezone, offsetDays = 0) {
+    const baseMidnight = startOfDayTs(d, timezone);
+    // Re-floor after the raw day shift so DST transitions can't drift the result.
+    const shifted = new DateTz(baseMidnight + offsetDays * MS_PER_DAY, timezone);
+    return new DateTz(startOfDayTs(shifted, timezone), timezone);
+}
+function isSameDay(a, b, timezone) {
+    const tz = timezone ?? getBrowserTimezone();
+    return startOfDayTs(a, tz) === startOfDayTs(b, tz);
 }
 function addDays(date, days) {
     return new DateTz(date.add(days, 'day'));
@@ -2525,20 +2558,12 @@ function startOfMonth(date) {
     const d = new DateTz(date);
     return d.set(1, 'day');
 }
-// export function endOfMonth(date: IDateTz): DateTz {
-// 	const d = new DateTz(date.timestamp, 'UTC');
-// 	return d.add(1, 'month').set(1, 'day').add(-1, 'day');
-// }
-function isToday(date) {
-    const today = getToday();
-    return date.yearUTC === today.yearUTC &&
-        date.monthUTC === today.monthUTC &&
-        date.dayUTC === today.dayUTC;
+function isToday(date, timezone) {
+    const tz = timezone ?? getBrowserTimezone();
+    return startOfDayTs(date, tz) === startOfDayTs(getToday(tz), tz);
 }
-function getToday() {
-    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-    const today = DateTz.now(timezone);
-    return today;
+function getToday(timezone) {
+    return DateTz.now(timezone ?? getBrowserTimezone());
 }
 
 class DateTzPipe {
@@ -2560,6 +2585,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             args: [{ name: 'dtz' }]
         }] });
 
+class DayOfWeekPipe {
+    /**
+     * @param value IDateTz
+     * @param format 'long' (Friday), 'short' (Fri), 'narrow' (F)
+     * @param locale Language, default = 'en-US'
+     */
+    transform(value, format = 'long', locale = 'en-US') {
+        if (!value || typeof value.timestamp !== 'number') {
+            return '';
+        }
+        let pattern = 'EEEE';
+        if (format === 'short')
+            pattern = 'EEE';
+        if (format === 'narrow')
+            pattern = 'EEEEE';
+        try {
+            return formatDate(value.timestamp, pattern, locale, value.timezone || undefined);
+        }
+        catch (error) {
+            console.error('DayOfWeekPipe error:', error);
+            return '';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: DayOfWeekPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: DayOfWeekPipe, isStandalone: true, name: "dayOfWeek" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: DayOfWeekPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'dayOfWeek' }]
+        }] });
+
 class CalendarEventComponent {
     constructor() {
         this.event = input.required(...(ngDevMode ? [{ debugName: "event" }] : /* istanbul ignore next */ []));
@@ -2622,43 +2678,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             args: [{ selector: 'rlb-calendar-event', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, DateTzPipe], template: "<div [ngClass]=\"classes()\" (click)=\"onClick($event)\">\n\n  @if (!event().isOverflowIndicator) {\n  <strong>{{ event().title }}</strong>\n  <div class=\"small opacity-75\">\n    {{ event().start | dtz:'HH:mm' }} - {{ event().end | dtz:'HH:mm' }}\n  </div>\n  }\n\n  @if (event().isOverflowIndicator) {\n  +{{ event().overlapCount }} more\n  }\n</div>", styles: [":host{display:block;height:100%;overflow:hidden;border-radius:var(--bs-border-radius-sm);padding:0 1px;box-sizing:border-box;transition:box-shadow .2s}:host:hover{z-index:50;box-shadow:0 .5rem 1rem #00000026!important}.calendar-event{height:100%;width:100%;padding:2px 4px;font-size:.75rem;line-height:1.2;border-radius:var(--bs-border-radius-sm);cursor:pointer}.calendar-event.overflow-indicator{display:flex;align-items:center;justify-content:center;font-weight:600;border-style:dashed!important}.calendar-event.mode-week{height:100%;padding:2px 4px;font-size:.75rem;line-height:1.2}.calendar-event.mode-month{height:20px!important;padding:0 4px;line-height:20px;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.calendar-event.mode-month.rounded-bottom-0{border-bottom-right-radius:0;border-bottom-left-radius:0}.calendar-event.mode-month.rounded-top-0{border-top-right-radius:0;border-top-left-radius:0}\n"] }]
         }], propDecorators: { event: [{ type: i0.Input, args: [{ isSignal: true, alias: "event", required: true }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: true }] }], eventClick: [{ type: i0.Output, args: ["event-click"] }], eventContainerClick: [{ type: i0.Output, args: ["event-container-click"] }] } });
 
-class DayOfWeekPipe {
-    /**
-     * @param value IDateTz
-     * @param format 'long' (Friday), 'short' (Fri), 'narrow' (F)
-     * @param locale Language, default = 'en-US'
-     */
-    transform(value, format = 'long', locale = 'en-US') {
-        if (!value || typeof value.timestamp !== 'number') {
-            return '';
-        }
-        let pattern = 'EEEE';
-        if (format === 'short')
-            pattern = 'EEE';
-        if (format === 'narrow')
-            pattern = 'EEEEE';
-        try {
-            return formatDate(value.timestamp, pattern, locale, value.timezone || undefined);
-        }
-        catch (error) {
-            console.error('DayOfWeekPipe error:', error);
-            return '';
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: DayOfWeekPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: DayOfWeekPipe, isStandalone: true, name: "dayOfWeek" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: DayOfWeekPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'dayOfWeek' }]
-        }] });
-
 class CalendarWeekGridComponent {
     constructor() {
         this.view = input.required(...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
         this.currentDate = input.required(...(ngDevMode ? [{ debugName: "currentDate" }] : /* istanbul ignore next */ []));
         this.events = input([], ...(ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []));
         this.intervals = input([], ...(ngDevMode ? [{ debugName: "intervals" }] : /* istanbul ignore next */ []));
+        this.timezone = input.required(...(ngDevMode ? [{ debugName: "timezone" }] : /* istanbul ignore next */ []));
         this.layout = input.required(...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
         this.eventClick = output({ alias: 'event-click' });
         this.eventContainerClick = output({ alias: 'event-container-click' });
@@ -2686,6 +2712,10 @@ class CalendarWeekGridComponent {
         effect(() => {
             this.processAllEvents(this.events());
         });
+        // Keep the "now" line in the calendar timezone.
+        effect(() => {
+            this.now.set(getToday(this.timezone()));
+        });
     }
     ngAfterViewInit() {
         this.updateScrollbarWidth();
@@ -2721,13 +2751,12 @@ class CalendarWeekGridComponent {
         const rawMinutesFromStart = (newTopPx / this.layout().rowHeight) * 60;
         const snappedMinutes = Math.round(rawMinutesFromStart / this.SNAP_MINUTES) * this.SNAP_MINUTES;
         const validMinutes = Math.max(0, snappedMinutes);
-        const newStart = new DateTz$1(newDay)
-            .set(0, 'hour')
-            .set(0, 'minute')
-            .add(validMinutes, 'minute')
-            .stripSecMillis();
+        // Local midnight of the target day + dropped offset (tz-aware).
+        const tz = this.timezone();
+        const newStartTs = startOfDayTs(newDay, tz) + validMinutes * 60 * 1000;
+        const newStart = new DateTz$1(newStartTs, tz).stripSecMillis();
         const durationMs = movedEvent.end.timestamp - movedEvent.start.timestamp;
-        const newEnd = new DateTz$1(newStart.timestamp + durationMs).stripSecMillis();
+        const newEnd = new DateTz$1(newStart.timestamp + durationMs, tz).stripSecMillis();
         if (newStart.timestamp !== movedEvent.start.timestamp) {
             const updatedEvent = {
                 ...movedEvent,
@@ -2738,13 +2767,10 @@ class CalendarWeekGridComponent {
         }
     }
     getEventsForDay(day) {
-        const dayTs = new DateTz$1(day.timestamp, 'UTC').set(0, 'hour').set(0, 'minute').stripSecMillis().timestamp;
-        return this.processedEvents().get(dayTs) || [];
+        return this.processedEvents().get(startOfDayTs(day, this.timezone())) || [];
     }
     calculateEventTop(event) {
-        const startOfDay = new DateTz$1(event.start).set(0, 'hour').set(0, 'minute').stripSecMillis();
-        const diffMs = event.start.timestamp - startOfDay.timestamp;
-        const diffMinutes = diffMs / (1000 * 60);
+        const diffMinutes = minutesSinceMidnight(event.start, this.timezone());
         return (diffMinutes / 60) * this.layout().rowHeight;
     }
     calculateEventHeight(event) {
@@ -2759,13 +2785,13 @@ class CalendarWeekGridComponent {
         return ((hours * 60) + minutes) / 60 * this.layout().rowHeight;
     }
     isToday(date) {
-        return isToday(date);
+        return isToday(date, this.timezone());
     }
     startNowTimer() {
         if (this.nowInterval)
             return;
         this.nowInterval = setInterval(() => {
-            this.now.set(getToday());
+            this.now.set(getToday(this.timezone()));
         }, 60 * 1000); // every minute
     }
     stopNowTimer() {
@@ -2791,16 +2817,13 @@ class CalendarWeekGridComponent {
         return `var(--bs-${interval.color || 'success'})`;
     }
     buildWeekGrid(currentDate) {
-        const dayOfWeek = currentDate.dayOfWeek; // 0 = Sunday, 1 = Monday ...
-        // Week init (monday)
-        const start = new DateTz$1(currentDate.timestamp, 'UTC')
-            .add(-(dayOfWeek - 1), 'day') // clone or create new for start date
-            .set(0, 'hour')
-            .set(0, 'minute')
-            .stripSecMillis();
+        const tz = this.timezone();
+        const dayOfWeek = currentDate.cloneToTimezone(tz).dayOfWeek; // 0 = Sunday, 1 = Monday ...
+        // Offset (in days) from currentDate back to the week's Monday.
+        const mondayOffset = 1 - dayOfWeek; // Sun(0) -> +1, Mon(1) -> 0, Tue(2) -> -1 ...
         const newDays = [];
         for (let i = 0; i < 7; i++) {
-            newDays.push(new DateTz$1(start.timestamp, 'UTC').add(i, 'day'));
+            newDays.push(dayAt(currentDate, tz, mondayOffset + i));
         }
         this.days.set(newDays);
         this.startNowTimer();
@@ -2821,37 +2844,32 @@ class CalendarWeekGridComponent {
     }
     processAllEvents(events) {
         const eventsByDay = new Map();
+        const tz = this.timezone();
         for (const event of events) {
-            const originalStart = new DateTz$1(event.start).stripSecMillis();
-            const originalEnd = new DateTz$1(event.end).stripSecMillis();
-            let currentChunkStart = new DateTz$1(originalStart);
-            while (currentChunkStart.timestamp < originalEnd.timestamp) {
-                const startOfNextDay = new DateTz$1(currentChunkStart)
-                    .set(0, 'hour')
-                    .set(0, 'minute')
-                    .add(1, 'day')
-                    .stripSecMillis();
-                const chunkEndTimestamp = Math.min(originalEnd.timestamp, startOfNextDay.timestamp);
-                const chunkEnd = new DateTz$1(chunkEndTimestamp);
-                const currentDayStart = new DateTz$1(currentChunkStart)
-                    .set(0, 'hour')
-                    .set(0, 'minute')
-                    .stripSecMillis();
-                const dayTimestamp = currentDayStart.timestamp;
+            const originalStartTs = new DateTz$1(event.start).stripSecMillis().timestamp;
+            const originalEndTs = new DateTz$1(event.end).stripSecMillis().timestamp;
+            let chunkStartTs = originalStartTs;
+            while (chunkStartTs < originalEndTs) {
+                const chunkInst = new DateTz$1(chunkStartTs, tz);
+                // tz-aware day boundaries (set()/add() would be UTC-naive here).
+                const dayStartTs = startOfDayTs(chunkInst, tz);
+                const startOfNextDayTs = dayAt(chunkInst, tz, 1).timestamp;
+                const chunkEndTs = Math.min(originalEndTs, startOfNextDayTs);
                 const visualEvent = {
                     ...event,
-                    start: currentChunkStart,
-                    end: chunkEnd,
-                    isContinuedBefore: currentChunkStart.timestamp > originalStart.timestamp,
-                    isContinuedAfter: chunkEnd.timestamp < originalEnd.timestamp,
+                    // Chunks live in the calendar timezone, so labels and positions agree.
+                    start: new DateTz$1(chunkStartTs, tz),
+                    end: new DateTz$1(chunkEndTs, tz),
+                    isContinuedBefore: chunkStartTs > originalStartTs,
+                    isContinuedAfter: chunkEndTs < originalEndTs,
                     left: 0,
                     width: 0
                 };
-                if (!eventsByDay.has(dayTimestamp)) {
-                    eventsByDay.set(dayTimestamp, []);
+                if (!eventsByDay.has(dayStartTs)) {
+                    eventsByDay.set(dayStartTs, []);
                 }
-                eventsByDay.get(dayTimestamp).push(visualEvent);
-                currentChunkStart = startOfNextDay;
+                eventsByDay.get(dayStartTs).push(visualEvent);
+                chunkStartTs = startOfNextDayTs;
             }
         }
         const newProcessedEvents = new Map();
@@ -2957,8 +2975,8 @@ class CalendarWeekGridComponent {
                 resultEvents.push({
                     id: -9999,
                     title: `+${hiddenEvents.length} more`,
-                    start: new DateTz$1(minStart),
-                    end: new DateTz$1(maxEnd),
+                    start: new DateTz$1(minStart, this.timezone()),
+                    end: new DateTz$1(maxEnd, this.timezone()),
                     color: 'light',
                     left: visibleColsCount * colWidth,
                     width: colWidth,
@@ -2985,12 +3003,12 @@ class CalendarWeekGridComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CalendarWeekGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: CalendarWeekGridComponent, isStandalone: true, selector: "rlb-calendar-week-grid", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: true, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, intervals: { classPropertyName: "intervals", publicName: "intervals", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { eventClick: "event-click", eventContainerClick: "event-container-click", eventChange: "event-change" }, viewQueries: [{ propertyName: "scrollBodyRef", first: true, predicate: ["scrollBody"], descendants: true, isSignal: true }, { propertyName: "headerRowRef", first: true, predicate: ["headerRow"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"calendar-wrapper d-flex flex-column\">\n\n  <!--  HEADER WRAPPER -->\n  <div #headerRow class=\"header-container overflow-hidden flex-shrink-0 border-bottom bg-body-tertiary\"\n    [style.padding-right.px]=\"scrollbarWidth()\">\n\n    <div class=\"header-row d-flex\" [style.min-height.rem]=\"layout().minHeaderHeight\">\n\n      <div class=\"time-gutter border-end flex-shrink-0\"></div>\n\n      <div class=\"days-header d-flex flex-grow-1\">\n        @for (day of days(); track day.timestamp) {\n        <div class=\"day-cell text-center p-2 border-end\" [class.text-primary]=\"isToday(day)\"\n          [class.fw-bold]=\"isToday(day)\" [class.bg-primary]=\"isToday(day)\">\n          <div class=\"small text-uppercase text-body-secondary\">{{ day | dayOfWeek: 'short' }}</div>\n          <div class=\"h5 m-0\">{{ day | dtz:'DD' }}</div>\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  <!-- BODY WRAPPER  -->\n  <div #scrollBody class=\"calendar-body flex-grow-1 overflow-auto bg-body position-relative\"\n    (scroll)=\"onBodyScroll($event)\" [style.max-height.rem]=\"layout().maxBodyHeight\">\n\n    <div class=\"body-row d-flex position-relative\">\n\n      <!-- SIDEBAR (Sticky Left) -->\n      <div class=\"time-sidebar sticky-start flex-shrink-0 border-end\">\n        @for (time of timeSlots(); track time; let i = $index) {\n        <div class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n          [style.height.px]=\"layout().rowHeight\">\n          @if (i !== 0) {\n          <span style=\"transform: translateY(-50%)\">\n            {{ time }}\n          </span>\n          }\n        </div>\n        }\n      </div>\n\n      <!-- GRID AND EVENTS -->\n      <div class=\"grid-layer flex-grow-1 position-relative\">\n\n        <!-- LAYER 1: Grid -->\n        <div class=\"background-grid position-absolute w-100 h-100 top-0 start-0 z-0\">\n          @for (time of timeSlots(); track time) {\n          <div class=\"grid-row border-bottom\" [style.height.px]=\"layout().rowHeight\">\n          </div>\n          }\n        </div>\n\n        <!-- Layer 1.5: Intervals (background highlights) -->\n        <div class=\"intervals-container d-flex h-100 w-100 position-absolute top-0 start-0 z-0\" style=\"z-index: 0; pointer-events: none;\">\n          @for (day of days(); track day.timestamp) {\n          <div class=\"day-column position-relative border-end h-100\">\n            @for (interval of getIntervalsForDay(day); track $index) {\n            <div class=\"calendar-interval position-absolute w-100\"\n              [style.top.px]=\"getIntervalTop(interval)\"\n              [style.height.px]=\"getIntervalHeight(interval)\"\n              [style.background-color]=\"getIntervalColor(interval)\">\n            </div>\n            }\n          </div>\n          }\n        </div>\n\n        <!-- Layer 2: Events -->\n        <div class=\"events-container d-flex h-100 w-100 position-relative z-1\" cdkDropListGroup>\n          @for (day of days(); track day.timestamp) {\n          <div class=\"day-column position-relative border-end h-100\" cdkDropList [cdkDropListSortingDisabled]=\"true\"\n            [cdkDropListData]=\"day\" (cdkDropListDropped)=\"onEventDrop($event)\" (click)=\"eventClick.emit(undefined)\">\n            @for (event of getEventsForDay(day); track trackByEventId($index, event)) {\n            <rlb-calendar-event [view]=\"view()\" [event]=\"event\" [style.top.px]=\"calculateEventTop(event)\"\n              [style.height.px]=\"calculateEventHeight(event)\" [style.left.%]=\"event.left\" [style.width.%]=\"event.width\"\n              (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\" cdkDrag\n              [cdkDragData]=\"event\" [cdkDragDisabled]=\"event.isOverflowIndicator\" class=\"position-absolute\">\n              <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n            </rlb-calendar-event>\n            }\n            @if (isToday(day)) {\n            <div class=\"now-line\" [style.top.px]=\"getNowTop()\">\n            </div>\n            }\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.calendar-wrapper{background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);overflow:hidden;height:100%}.header-container{background-color:var(--bs-body-bg);z-index:102;box-shadow:0 4px 6px -4px #0000001a}.header-row{width:fit-content;min-width:100%}.time-gutter{width:60px;border-color:var(--bs-border-color)!important}.day-cell{border-color:var(--bs-border-color)!important;flex:1 1 0px;width:0;min-width:120px;overflow:hidden}.day-cell:last-child{border-right:none!important}.calendar-body{scroll-behavior:auto}.body-row{width:fit-content;min-width:100%}.sticky-start{position:sticky;left:0;z-index:50;background-color:var(--bs-body-bg)}.time-sidebar{width:60px;border-color:var(--bs-border-color)!important}.grid-row{border-color:var(--bs-border-color)!important;box-sizing:border-box}.grid-row:after{content:\"\";position:absolute;width:100%;border-bottom:1px dotted currentColor;opacity:.15;top:50%;left:0;pointer-events:none}.day-column{border-color:var(--bs-border-color)!important;flex:1 1 0px;width:0;min-width:120px}.day-column:last-child{border-right:none!important}.now-line{position:absolute;left:0;right:0;height:2px;background-color:var(--bs-danger);z-index:10;pointer-events:none}.now-line:before{content:\"\";position:absolute;left:-5px;top:-4px;width:10px;height:10px;background-color:var(--bs-danger);border-radius:50%}.calendar-interval{opacity:.1;pointer-events:none;border-radius:0}.intervals-container .day-column{flex:1 1 0px;width:0;min-width:120px}.intervals-container .day-column:last-child{border-right:none!important}.z-0{z-index:0}.z-1{z-index:1}\n"], dependencies: [{ kind: "directive", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: CalendarEventComponent, selector: "rlb-calendar-event", inputs: ["event", "view"], outputs: ["event-click", "event-container-click"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "pipe", type: DateTzPipe, name: "dtz" }, { kind: "pipe", type: DayOfWeekPipe, name: "dayOfWeek" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: CalendarWeekGridComponent, isStandalone: true, selector: "rlb-calendar-week-grid", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: true, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, intervals: { classPropertyName: "intervals", publicName: "intervals", isSignal: true, isRequired: false, transformFunction: null }, timezone: { classPropertyName: "timezone", publicName: "timezone", isSignal: true, isRequired: true, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { eventClick: "event-click", eventContainerClick: "event-container-click", eventChange: "event-change" }, viewQueries: [{ propertyName: "scrollBodyRef", first: true, predicate: ["scrollBody"], descendants: true, isSignal: true }, { propertyName: "headerRowRef", first: true, predicate: ["headerRow"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"calendar-wrapper d-flex flex-column\">\n\n  <!--  HEADER WRAPPER -->\n  <div #headerRow class=\"header-container overflow-hidden flex-shrink-0 border-bottom bg-body-tertiary\"\n    [style.padding-right.px]=\"scrollbarWidth()\">\n\n    <div class=\"header-row d-flex\" [style.min-height.rem]=\"layout().minHeaderHeight\">\n\n      <div class=\"time-gutter border-end flex-shrink-0\"></div>\n\n      <div class=\"days-header d-flex flex-grow-1\">\n        @for (day of days(); track day.timestamp) {\n        <div class=\"day-cell text-center p-2 border-end\" [class.text-primary]=\"isToday(day)\"\n          [class.fw-bold]=\"isToday(day)\" [class.bg-primary]=\"isToday(day)\">\n          <div class=\"small text-uppercase text-body-secondary\">{{ day | dayOfWeek: 'short' }}</div>\n          <div class=\"h5 m-0\">{{ day | dtz:'DD' }}</div>\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  <!-- BODY WRAPPER  -->\n  <div #scrollBody class=\"calendar-body flex-grow-1 overflow-auto bg-body position-relative\"\n    (scroll)=\"onBodyScroll($event)\" [style.max-height.rem]=\"layout().maxBodyHeight\">\n\n    <div class=\"body-row d-flex position-relative\">\n\n      <!-- SIDEBAR (Sticky Left) -->\n      <div class=\"time-sidebar sticky-start flex-shrink-0 border-end\">\n        @for (time of timeSlots(); track time; let i = $index) {\n        <div class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n          [style.height.px]=\"layout().rowHeight\">\n          @if (i !== 0) {\n          <span style=\"transform: translateY(-50%)\">\n            {{ time }}\n          </span>\n          }\n        </div>\n        }\n      </div>\n\n      <!-- GRID AND EVENTS -->\n      <div class=\"grid-layer flex-grow-1 position-relative\">\n\n        <!-- LAYER 1: Grid -->\n        <div class=\"background-grid position-absolute w-100 h-100 top-0 start-0 z-0\">\n          @for (time of timeSlots(); track time) {\n          <div class=\"grid-row border-bottom\" [style.height.px]=\"layout().rowHeight\">\n          </div>\n          }\n        </div>\n\n        <!-- Layer 1.5: Intervals (background highlights) -->\n        <div class=\"intervals-container d-flex h-100 w-100 position-absolute top-0 start-0 z-0\" style=\"z-index: 0; pointer-events: none;\">\n          @for (day of days(); track day.timestamp) {\n          <div class=\"day-column position-relative border-end h-100\">\n            @for (interval of getIntervalsForDay(day); track $index) {\n            <div class=\"calendar-interval position-absolute w-100\"\n              [style.top.px]=\"getIntervalTop(interval)\"\n              [style.height.px]=\"getIntervalHeight(interval)\"\n              [style.background-color]=\"getIntervalColor(interval)\">\n            </div>\n            }\n          </div>\n          }\n        </div>\n\n        <!-- Layer 2: Events -->\n        <div class=\"events-container d-flex h-100 w-100 position-relative z-1\" cdkDropListGroup>\n          @for (day of days(); track day.timestamp) {\n          <div class=\"day-column position-relative border-end h-100\" cdkDropList [cdkDropListSortingDisabled]=\"true\"\n            [cdkDropListData]=\"day\" (cdkDropListDropped)=\"onEventDrop($event)\" (click)=\"eventClick.emit(undefined)\">\n            @for (event of getEventsForDay(day); track trackByEventId($index, event)) {\n            <rlb-calendar-event [view]=\"view()\" [event]=\"event\" [style.top.px]=\"calculateEventTop(event)\"\n              [style.height.px]=\"calculateEventHeight(event)\" [style.left.%]=\"event.left\" [style.width.%]=\"event.width\"\n              (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\" cdkDrag\n              [cdkDragData]=\"event\" [cdkDragDisabled]=\"event.isOverflowIndicator\" class=\"position-absolute\">\n              <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n            </rlb-calendar-event>\n            }\n            @if (isToday(day)) {\n            <div class=\"now-line\" [style.top.px]=\"getNowTop()\">\n            </div>\n            }\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.calendar-wrapper{background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);overflow:hidden;height:100%}.header-container{background-color:var(--bs-body-bg);z-index:102;box-shadow:0 4px 6px -4px #0000001a}.header-row{width:fit-content;min-width:100%}.time-gutter{width:60px;border-color:var(--bs-border-color)!important}.day-cell{border-color:var(--bs-border-color)!important;flex:1 1 0px;width:0;min-width:120px;overflow:hidden}.day-cell:last-child{border-right:none!important}.calendar-body{scroll-behavior:auto}.body-row{width:fit-content;min-width:100%}.sticky-start{position:sticky;left:0;z-index:50;background-color:var(--bs-body-bg)}.time-sidebar{width:60px;border-color:var(--bs-border-color)!important}.grid-row{border-color:var(--bs-border-color)!important;box-sizing:border-box}.grid-row:after{content:\"\";position:absolute;width:100%;border-bottom:1px dotted currentColor;opacity:.15;top:50%;left:0;pointer-events:none}.day-column{border-color:var(--bs-border-color)!important;flex:1 1 0px;width:0;min-width:120px}.day-column:last-child{border-right:none!important}.now-line{position:absolute;left:0;right:0;height:2px;background-color:var(--bs-danger);z-index:10;pointer-events:none}.now-line:before{content:\"\";position:absolute;left:-5px;top:-4px;width:10px;height:10px;background-color:var(--bs-danger);border-radius:50%}.calendar-interval{opacity:.1;pointer-events:none;border-radius:0}.intervals-container .day-column{flex:1 1 0px;width:0;min-width:120px}.intervals-container .day-column:last-child{border-right:none!important}.z-0{z-index:0}.z-1{z-index:1}\n"], dependencies: [{ kind: "directive", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: CalendarEventComponent, selector: "rlb-calendar-event", inputs: ["event", "view"], outputs: ["event-click", "event-container-click"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "pipe", type: DateTzPipe, name: "dtz" }, { kind: "pipe", type: DayOfWeekPipe, name: "dayOfWeek" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CalendarWeekGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rlb-calendar-week-grid', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkDropListGroup, CdkDropList, CalendarEventComponent, CdkDrag, CdkDragPlaceholder, DateTzPipe, DayOfWeekPipe], template: "<div class=\"calendar-wrapper d-flex flex-column\">\n\n  <!--  HEADER WRAPPER -->\n  <div #headerRow class=\"header-container overflow-hidden flex-shrink-0 border-bottom bg-body-tertiary\"\n    [style.padding-right.px]=\"scrollbarWidth()\">\n\n    <div class=\"header-row d-flex\" [style.min-height.rem]=\"layout().minHeaderHeight\">\n\n      <div class=\"time-gutter border-end flex-shrink-0\"></div>\n\n      <div class=\"days-header d-flex flex-grow-1\">\n        @for (day of days(); track day.timestamp) {\n        <div class=\"day-cell text-center p-2 border-end\" [class.text-primary]=\"isToday(day)\"\n          [class.fw-bold]=\"isToday(day)\" [class.bg-primary]=\"isToday(day)\">\n          <div class=\"small text-uppercase text-body-secondary\">{{ day | dayOfWeek: 'short' }}</div>\n          <div class=\"h5 m-0\">{{ day | dtz:'DD' }}</div>\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  <!-- BODY WRAPPER  -->\n  <div #scrollBody class=\"calendar-body flex-grow-1 overflow-auto bg-body position-relative\"\n    (scroll)=\"onBodyScroll($event)\" [style.max-height.rem]=\"layout().maxBodyHeight\">\n\n    <div class=\"body-row d-flex position-relative\">\n\n      <!-- SIDEBAR (Sticky Left) -->\n      <div class=\"time-sidebar sticky-start flex-shrink-0 border-end\">\n        @for (time of timeSlots(); track time; let i = $index) {\n        <div class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n          [style.height.px]=\"layout().rowHeight\">\n          @if (i !== 0) {\n          <span style=\"transform: translateY(-50%)\">\n            {{ time }}\n          </span>\n          }\n        </div>\n        }\n      </div>\n\n      <!-- GRID AND EVENTS -->\n      <div class=\"grid-layer flex-grow-1 position-relative\">\n\n        <!-- LAYER 1: Grid -->\n        <div class=\"background-grid position-absolute w-100 h-100 top-0 start-0 z-0\">\n          @for (time of timeSlots(); track time) {\n          <div class=\"grid-row border-bottom\" [style.height.px]=\"layout().rowHeight\">\n          </div>\n          }\n        </div>\n\n        <!-- Layer 1.5: Intervals (background highlights) -->\n        <div class=\"intervals-container d-flex h-100 w-100 position-absolute top-0 start-0 z-0\" style=\"z-index: 0; pointer-events: none;\">\n          @for (day of days(); track day.timestamp) {\n          <div class=\"day-column position-relative border-end h-100\">\n            @for (interval of getIntervalsForDay(day); track $index) {\n            <div class=\"calendar-interval position-absolute w-100\"\n              [style.top.px]=\"getIntervalTop(interval)\"\n              [style.height.px]=\"getIntervalHeight(interval)\"\n              [style.background-color]=\"getIntervalColor(interval)\">\n            </div>\n            }\n          </div>\n          }\n        </div>\n\n        <!-- Layer 2: Events -->\n        <div class=\"events-container d-flex h-100 w-100 position-relative z-1\" cdkDropListGroup>\n          @for (day of days(); track day.timestamp) {\n          <div class=\"day-column position-relative border-end h-100\" cdkDropList [cdkDropListSortingDisabled]=\"true\"\n            [cdkDropListData]=\"day\" (cdkDropListDropped)=\"onEventDrop($event)\" (click)=\"eventClick.emit(undefined)\">\n            @for (event of getEventsForDay(day); track trackByEventId($index, event)) {\n            <rlb-calendar-event [view]=\"view()\" [event]=\"event\" [style.top.px]=\"calculateEventTop(event)\"\n              [style.height.px]=\"calculateEventHeight(event)\" [style.left.%]=\"event.left\" [style.width.%]=\"event.width\"\n              (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\" cdkDrag\n              [cdkDragData]=\"event\" [cdkDragDisabled]=\"event.isOverflowIndicator\" class=\"position-absolute\">\n              <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n            </rlb-calendar-event>\n            }\n            @if (isToday(day)) {\n            <div class=\"now-line\" [style.top.px]=\"getNowTop()\">\n            </div>\n            }\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.calendar-wrapper{background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);overflow:hidden;height:100%}.header-container{background-color:var(--bs-body-bg);z-index:102;box-shadow:0 4px 6px -4px #0000001a}.header-row{width:fit-content;min-width:100%}.time-gutter{width:60px;border-color:var(--bs-border-color)!important}.day-cell{border-color:var(--bs-border-color)!important;flex:1 1 0px;width:0;min-width:120px;overflow:hidden}.day-cell:last-child{border-right:none!important}.calendar-body{scroll-behavior:auto}.body-row{width:fit-content;min-width:100%}.sticky-start{position:sticky;left:0;z-index:50;background-color:var(--bs-body-bg)}.time-sidebar{width:60px;border-color:var(--bs-border-color)!important}.grid-row{border-color:var(--bs-border-color)!important;box-sizing:border-box}.grid-row:after{content:\"\";position:absolute;width:100%;border-bottom:1px dotted currentColor;opacity:.15;top:50%;left:0;pointer-events:none}.day-column{border-color:var(--bs-border-color)!important;flex:1 1 0px;width:0;min-width:120px}.day-column:last-child{border-right:none!important}.now-line{position:absolute;left:0;right:0;height:2px;background-color:var(--bs-danger);z-index:10;pointer-events:none}.now-line:before{content:\"\";position:absolute;left:-5px;top:-4px;width:10px;height:10px;background-color:var(--bs-danger);border-radius:50%}.calendar-interval{opacity:.1;pointer-events:none;border-radius:0}.intervals-container .day-column{flex:1 1 0px;width:0;min-width:120px}.intervals-container .day-column:last-child{border-right:none!important}.z-0{z-index:0}.z-1{z-index:1}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: true }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: true }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], intervals: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervals", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], eventClick: [{ type: i0.Output, args: ["event-click"] }], eventContainerClick: [{ type: i0.Output, args: ["event-container-click"] }], eventChange: [{ type: i0.Output, args: ["event-change"] }], scrollBodyRef: [{ type: i0.ViewChild, args: ['scrollBody', { isSignal: true }] }], headerRowRef: [{ type: i0.ViewChild, args: ['headerRow', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: true }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: true }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], intervals: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervals", required: false }] }], timezone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timezone", required: true }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], eventClick: [{ type: i0.Output, args: ["event-click"] }], eventContainerClick: [{ type: i0.Output, args: ["event-container-click"] }], eventChange: [{ type: i0.Output, args: ["event-change"] }], scrollBodyRef: [{ type: i0.ViewChild, args: ['scrollBody', { isSignal: true }] }], headerRowRef: [{ type: i0.ViewChild, args: ['headerRow', { isSignal: true }] }] } });
 
 const MAX_EVENTS_PER_CELL = 3;
 const DAYS_IN_GRID = 42; // 6 weeks * 7 days
@@ -3000,6 +3018,7 @@ class CalendarMonthGridComponent {
         this.currentDate = input.required(...(ngDevMode ? [{ debugName: "currentDate" }] : /* istanbul ignore next */ []));
         this.events = input([], ...(ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []));
         this.intervals = input([], ...(ngDevMode ? [{ debugName: "intervals" }] : /* istanbul ignore next */ []));
+        this.timezone = input.required(...(ngDevMode ? [{ debugName: "timezone" }] : /* istanbul ignore next */ []));
         this.layout = input.required(...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
         this.eventClick = output({ alias: 'event-click' });
         this.eventContainerClick = output({ alias: 'event-container-click' });
@@ -3043,7 +3062,7 @@ class CalendarMonthGridComponent {
     }
     // --- Helpers ---
     isToday(date) {
-        return isToday(date);
+        return isToday(date, this.timezone());
     }
     hasInterval(date) {
         const dayOfWeek = new DateTz(date).dayOfWeek;
@@ -3066,21 +3085,18 @@ class CalendarMonthGridComponent {
     }
     // --- Core Logic ---
     buildMonthGrid() {
-        // 1. Calculate Grid Boundaries
-        const current = new DateTz(this.currentDate());
-        // Find the first day of the month
-        const startOfMonth = new DateTz(current).set(1, 'day').set(0, 'hour').set(0, 'minute').stripSecMillis();
-        // Calculate offset to find the start of the grid (e.g. Monday)
-        const dayOfWeek = startOfMonth.dayOfWeek; // 0 = Sun, 1 = Mon...
-        // Adjust logic based on your locale start of week (assuming Monday start here)
+        const tz = this.timezone();
+        // 1. Calculate Grid Boundaries (tz-aware; set()/add() would be UTC-naive)
+        const current = this.currentDate().cloneToTimezone(tz);
+        // First day of the month at local midnight
+        const firstOfMonth = dayAt(current, tz, -(current.day - 1));
+        // Calculate offset to find the start of the grid (Monday-first)
+        const dayOfWeek = firstOfMonth.dayOfWeek; // 0 = Sun, 1 = Mon...
         const offset = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
-        const gridStart = new DateTz(startOfMonth).add(-offset, 'day');
         // 2. Generate Days
         const days = [];
-        let iter = new DateTz(gridStart);
         for (let i = 0; i < DAYS_IN_GRID; i++) {
-            days.push(iter);
-            iter = new DateTz(iter).add(1, 'day');
+            days.push(dayAt(firstOfMonth, tz, i - offset));
         }
         // Header is just the first week
         this.weekDaysHeader.set(days.slice(0, 7));
@@ -3135,6 +3151,7 @@ class CalendarMonthGridComponent {
      * Places events into rows so that long events maintain their vertical position across days.
      */
     calculateEventSlots(days, events) {
+        const tz = this.timezone();
         const dayMap = new Map();
         days.forEach(d => dayMap.set(d.timestamp, []));
         // Sort: Longest events first, then by start time
@@ -3148,25 +3165,18 @@ class CalendarMonthGridComponent {
         const gridStartTs = days[0].timestamp;
         const lastDay = days[days.length - 1];
         // End of grid is the start of the next day after the last cell
-        const gridEndTs = new DateTz(lastDay).add(1, 'day').timestamp;
+        const gridEndTs = dayAt(lastDay, tz, 1).timestamp;
         for (const event of sortedEvents) {
-            // Normalize start to beginning of day
-            const evtStart = new DateTz(event.start).set(0, 'hour').set(0, 'minute').stripSecMillis();
-            const evtEndRaw = new DateTz(event.end).stripSecMillis();
-            // Normalize end.
-            // If ends at 00:00, it effectively ends at the previous day visually.
-            // Else, round up to the end of that day.
-            let evtEnd;
-            const isMidnight = evtEndRaw.hour === 0 && evtEndRaw.minute === 0;
-            if (evtEndRaw.timestamp > evtStart.timestamp && isMidnight) {
-                evtEnd = evtEndRaw; // Keeps it clean for comparison, effectively 00:00 of next day
-            }
-            else {
-                // Round to start of next day to cover full day
-                evtEnd = new DateTz(evtEndRaw).set(0, 'hour').set(0, 'minute').add(1, 'day').stripSecMillis();
-            }
+            // tz-aware day-floors (set()/add() would be UTC-naive).
+            const evtStartTs = startOfDayTs(event.start, tz);
+            // Normalize end. If it ends exactly at local 00:00, it visually ends on the
+            // previous day; otherwise round up to the start of the next day.
+            const endsAtMidnight = minutesSinceMidnight(event.end, tz) === 0;
+            const evtEndTs = (event.end.timestamp > evtStartTs && endsAtMidnight)
+                ? startOfDayTs(event.end, tz)
+                : dayAt(event.end, tz, 1).timestamp;
             // Skip if completely outside grid
-            if (evtEnd.timestamp <= gridStartTs || evtStart.timestamp >= gridEndTs) {
+            if (evtEndTs <= gridStartTs || evtStartTs >= gridEndTs) {
                 continue;
             }
             // Find which grid indices this event occupies
@@ -3174,7 +3184,7 @@ class CalendarMonthGridComponent {
             for (let i = 0; i < days.length; i++) {
                 const dTs = days[i].timestamp;
                 // Check intersection: [DayStart, DayEnd) overlaps [EventStart, EventEnd)
-                if (dTs >= evtStart.timestamp && dTs < evtEnd.timestamp) {
+                if (dTs >= evtStartTs && dTs < evtEndTs) {
                     daysIndices.push(i);
                 }
             }
@@ -3211,15 +3221,17 @@ class CalendarMonthGridComponent {
                 }
                 const isFirstRenderDay = (i === 0);
                 const isLastRenderDay = (i === daysIndices.length - 1);
+                // `dayInTz` is the grid cell, already in the calendar timezone.
+                const dayInTz = days[idx];
+                const currentDayEnd = dayAt(dayInTz, tz, 1);
                 // Visual flags for rounding corners
-                const isContinuedBefore = !isFirstRenderDay || (evtStart.timestamp < days[daysIndices[0]].timestamp);
-                const currentDayEndTs = new DateTz(dTs).add(1, 'day').timestamp;
-                const isContinuedAfter = !isLastRenderDay || (evtEnd.timestamp > currentDayEndTs);
+                const isContinuedBefore = !isFirstRenderDay || (evtStartTs < days[daysIndices[0]].timestamp);
+                const isContinuedAfter = !isLastRenderDay || (evtEndTs > currentDayEnd.timestamp);
                 const eventView = {
                     ...event,
                     // Override start/end for the specific cell (crucial for DnD to know the cell context)
-                    start: new DateTz(dTs),
-                    end: new DateTz(currentDayEndTs),
+                    start: new DateTz(dayInTz),
+                    end: new DateTz(currentDayEnd),
                     originalStart: event.start,
                     originalEnd: event.end,
                     isContinuedBefore,
@@ -3255,12 +3267,12 @@ class CalendarMonthGridComponent {
         this.eventChange.emit(updatedEvent);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CalendarMonthGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: CalendarMonthGridComponent, isStandalone: true, selector: "rlb-calendar-month-grid", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: true, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, intervals: { classPropertyName: "intervals", publicName: "intervals", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { eventClick: "event-click", eventContainerClick: "event-container-click", eventChange: "event-change" }, viewQueries: [{ propertyName: "scrollBodyRef", first: true, predicate: ["scrollBody"], descendants: true, isSignal: true }, { propertyName: "headerRowRef", first: true, predicate: ["headerRow"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"d-flex flex-column w-100 bg-body user-select-none month-view-root\">\n  <!-- 1. Header Row (Fixed) -->\n  <div #headerRow class=\"d-flex flex-shrink-0 border-bottom bg-body-tertiary overflow-hidden\"\n    [style.min-height.rem]=\"layout().minHeaderHeight\" [style.padding-right.px]=\"scrollbarWidth()\">\n    @for (day of weekDaysHeader(); track day) {\n    <div class=\"flex-fill text-center py-2 border-end fw-bold text-secondary text-uppercase w-0 my-auto h6\">\n      {{ day | dayOfWeek:'short' }}\n    </div>\n    }\n  </div>\n\n  <!-- SCROLL CONTAINER -->\n  <div #scrollBody class=\"calendar-scroller flex-grow-1 overflow-auto bg-body position-relative\"\n    [style.max-height.rem]=\"layout().maxBodyHeight\" (scroll)=\"onBodyScroll($event)\">\n\n    <!-- 2. Grid Body (Scrollable) -->\n    <div class=\"d-flex flex-column flex-grow-1 border-start min-height-0\">\n\n      <div class=\"d-flex flex-column\" cdkDropListGroup>\n        @for (week of weeks(); track week) {\n        <div class=\"d-flex border-bottom min-h-row\" style=\"flex: 1 0 auto;\" [style.min-height.px]=\"layout().rowHeight\">\n          @for (slot of week; track slot) {\n          <div class=\"flex-fill border-end p-1 d-flex flex-column position-relative\" style=\"width: 0\"\n            [class.bg-light]=\"!isCurrentMonth(slot.date)\"\n            [class.has-interval]=\"hasInterval(slot.date)\"\n            [style.--interval-color]=\"getIntervalColor(slot.date)\"\n            cdkDropList [cdkDropListData]=\"slot.date\"\n            (cdkDropListDropped)=\"onEventDrop($event)\" (click)=\"eventClick.emit(undefined)\">\n            <!-- Date Number -->\n            <div class=\"d-flex justify-content-center mb-1\">\n              <span class=\"day-number d-flex align-items-center justify-content-center\"\n                [class.today]=\"isToday(slot.date)\">\n                {{ slot.date | dtz:'DD' }}\n              </span>\n            </div>\n            <!-- Events Stack -->\n            <div class=\"d-flex flex-column gap-1 w-100\">\n              @for (event of slot.events; track trackByEvent($index, event)) {\n              <!-- Spacer -->\n              @if (event.isSpacer) {\n              <div class=\"event-spacer\"></div>\n              }\n              <!-- Event -->\n              @if (!event.isSpacer) {\n              <rlb-calendar-event [event]=\"event\" class=\"w-100\" cdkDrag [cdkDragData]=\"event\"\n                (event-click)=\"eventClick.emit($event)\" [view]=\"view()\">\n                <!-- Drag Preview (Optional but nice) -->\n                <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n                <ng-template cdkDragPreview matchSize class=\"rlb-calendar-drag-preview\">\n                  <rlb-calendar-event [event]=\"event\" [view]=\"view()\" style=\"box-sizing: border-box;\">\n                  </rlb-calendar-event>\n                </ng-template>\n              </rlb-calendar-event>\n              }\n              }\n            </div>\n            <!-- Overflow (+N more) -->\n            @if (slot.hasOverflow) {\n            <div class=\"mt-1 small text-secondary text-center cursor-pointer p-1 rounded hover-bg\"\n              (click)=\"$event.stopPropagation(); eventContainerClick.emit(slot.overflowEvents)\">\n              +{{ slot.overflowCount }} more\n            </div>\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n    </div>\n\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.min-height-0{min-height:0!important}.border-end:last-child{border-right:0!important}.day-number{width:24px;height:24px;border-radius:50%;font-size:.85rem;font-weight:500;transition:background-color .2s}.day-number.today{background-color:var(--bs-primary);color:#fff}.event-spacer{height:20px;width:100%;pointer-events:none}.hover-bg:hover{background-color:var(--bs-secondary-bg-subtle)}.cursor-pointer{cursor:pointer}.has-interval{background-image:linear-gradient(to right,color-mix(in srgb,var(--interval-color) 12%,transparent) 0%,transparent 100%);border-left:3px solid var(--interval-color)!important}.cdk-drag-preview{box-shadow:0 .5rem 1rem #0000004d;border-radius:var(--bs-border-radius-sm)}\n"], dependencies: [{ kind: "directive", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: CalendarEventComponent, selector: "rlb-calendar-event", inputs: ["event", "view"], outputs: ["event-click", "event-container-click"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "pipe", type: DateTzPipe, name: "dtz" }, { kind: "pipe", type: DayOfWeekPipe, name: "dayOfWeek" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: CalendarMonthGridComponent, isStandalone: true, selector: "rlb-calendar-month-grid", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: true, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, intervals: { classPropertyName: "intervals", publicName: "intervals", isSignal: true, isRequired: false, transformFunction: null }, timezone: { classPropertyName: "timezone", publicName: "timezone", isSignal: true, isRequired: true, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { eventClick: "event-click", eventContainerClick: "event-container-click", eventChange: "event-change" }, viewQueries: [{ propertyName: "scrollBodyRef", first: true, predicate: ["scrollBody"], descendants: true, isSignal: true }, { propertyName: "headerRowRef", first: true, predicate: ["headerRow"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"d-flex flex-column w-100 bg-body user-select-none month-view-root\">\n  <!-- 1. Header Row (Fixed) -->\n  <div #headerRow class=\"d-flex flex-shrink-0 border-bottom bg-body-tertiary overflow-hidden\"\n    [style.min-height.rem]=\"layout().minHeaderHeight\" [style.padding-right.px]=\"scrollbarWidth()\">\n    @for (day of weekDaysHeader(); track day) {\n    <div class=\"flex-fill text-center py-2 border-end fw-bold text-secondary text-uppercase w-0 my-auto h6\">\n      {{ day | dayOfWeek:'short' }}\n    </div>\n    }\n  </div>\n\n  <!-- SCROLL CONTAINER -->\n  <div #scrollBody class=\"calendar-scroller flex-grow-1 overflow-auto bg-body position-relative\"\n    [style.max-height.rem]=\"layout().maxBodyHeight\" (scroll)=\"onBodyScroll($event)\">\n\n    <!-- 2. Grid Body (Scrollable) -->\n    <div class=\"d-flex flex-column flex-grow-1 border-start min-height-0\">\n\n      <div class=\"d-flex flex-column\" cdkDropListGroup>\n        @for (week of weeks(); track week) {\n        <div class=\"d-flex border-bottom min-h-row\" style=\"flex: 1 0 auto;\" [style.min-height.px]=\"layout().rowHeight\">\n          @for (slot of week; track slot) {\n          <div class=\"flex-fill border-end p-1 d-flex flex-column position-relative\" style=\"width: 0\"\n            [class.bg-light]=\"!isCurrentMonth(slot.date)\"\n            [class.has-interval]=\"hasInterval(slot.date)\"\n            [style.--interval-color]=\"getIntervalColor(slot.date)\"\n            cdkDropList [cdkDropListData]=\"slot.date\"\n            (cdkDropListDropped)=\"onEventDrop($event)\" (click)=\"eventClick.emit(undefined)\">\n            <!-- Date Number -->\n            <div class=\"d-flex justify-content-center mb-1\">\n              <span class=\"day-number d-flex align-items-center justify-content-center\"\n                [class.today]=\"isToday(slot.date)\">\n                {{ slot.date | dtz:'DD' }}\n              </span>\n            </div>\n            <!-- Events Stack -->\n            <div class=\"d-flex flex-column gap-1 w-100\">\n              @for (event of slot.events; track trackByEvent($index, event)) {\n              <!-- Spacer -->\n              @if (event.isSpacer) {\n              <div class=\"event-spacer\"></div>\n              }\n              <!-- Event -->\n              @if (!event.isSpacer) {\n              <rlb-calendar-event [event]=\"event\" class=\"w-100\" cdkDrag [cdkDragData]=\"event\"\n                (event-click)=\"eventClick.emit($event)\" [view]=\"view()\">\n                <!-- Drag Preview (Optional but nice) -->\n                <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n                <ng-template cdkDragPreview matchSize class=\"rlb-calendar-drag-preview\">\n                  <rlb-calendar-event [event]=\"event\" [view]=\"view()\" style=\"box-sizing: border-box;\">\n                  </rlb-calendar-event>\n                </ng-template>\n              </rlb-calendar-event>\n              }\n              }\n            </div>\n            <!-- Overflow (+N more) -->\n            @if (slot.hasOverflow) {\n            <div class=\"mt-1 small text-secondary text-center cursor-pointer p-1 rounded hover-bg\"\n              (click)=\"$event.stopPropagation(); eventContainerClick.emit(slot.overflowEvents)\">\n              +{{ slot.overflowCount }} more\n            </div>\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n    </div>\n\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.min-height-0{min-height:0!important}.border-end:last-child{border-right:0!important}.day-number{width:24px;height:24px;border-radius:50%;font-size:.85rem;font-weight:500;transition:background-color .2s}.day-number.today{background-color:var(--bs-primary);color:#fff}.event-spacer{height:20px;width:100%;pointer-events:none}.hover-bg:hover{background-color:var(--bs-secondary-bg-subtle)}.cursor-pointer{cursor:pointer}.has-interval{background-image:linear-gradient(to right,color-mix(in srgb,var(--interval-color) 12%,transparent) 0%,transparent 100%);border-left:3px solid var(--interval-color)!important}.cdk-drag-preview{box-shadow:0 .5rem 1rem #0000004d;border-radius:var(--bs-border-radius-sm)}\n"], dependencies: [{ kind: "directive", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: CalendarEventComponent, selector: "rlb-calendar-event", inputs: ["event", "view"], outputs: ["event-click", "event-container-click"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "pipe", type: DateTzPipe, name: "dtz" }, { kind: "pipe", type: DayOfWeekPipe, name: "dayOfWeek" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CalendarMonthGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rlb-calendar-month-grid', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkDropListGroup, CdkDropList, CalendarEventComponent, CdkDrag, CdkDragPlaceholder, CdkDragPreview, DateTzPipe, DayOfWeekPipe], template: "<div class=\"d-flex flex-column w-100 bg-body user-select-none month-view-root\">\n  <!-- 1. Header Row (Fixed) -->\n  <div #headerRow class=\"d-flex flex-shrink-0 border-bottom bg-body-tertiary overflow-hidden\"\n    [style.min-height.rem]=\"layout().minHeaderHeight\" [style.padding-right.px]=\"scrollbarWidth()\">\n    @for (day of weekDaysHeader(); track day) {\n    <div class=\"flex-fill text-center py-2 border-end fw-bold text-secondary text-uppercase w-0 my-auto h6\">\n      {{ day | dayOfWeek:'short' }}\n    </div>\n    }\n  </div>\n\n  <!-- SCROLL CONTAINER -->\n  <div #scrollBody class=\"calendar-scroller flex-grow-1 overflow-auto bg-body position-relative\"\n    [style.max-height.rem]=\"layout().maxBodyHeight\" (scroll)=\"onBodyScroll($event)\">\n\n    <!-- 2. Grid Body (Scrollable) -->\n    <div class=\"d-flex flex-column flex-grow-1 border-start min-height-0\">\n\n      <div class=\"d-flex flex-column\" cdkDropListGroup>\n        @for (week of weeks(); track week) {\n        <div class=\"d-flex border-bottom min-h-row\" style=\"flex: 1 0 auto;\" [style.min-height.px]=\"layout().rowHeight\">\n          @for (slot of week; track slot) {\n          <div class=\"flex-fill border-end p-1 d-flex flex-column position-relative\" style=\"width: 0\"\n            [class.bg-light]=\"!isCurrentMonth(slot.date)\"\n            [class.has-interval]=\"hasInterval(slot.date)\"\n            [style.--interval-color]=\"getIntervalColor(slot.date)\"\n            cdkDropList [cdkDropListData]=\"slot.date\"\n            (cdkDropListDropped)=\"onEventDrop($event)\" (click)=\"eventClick.emit(undefined)\">\n            <!-- Date Number -->\n            <div class=\"d-flex justify-content-center mb-1\">\n              <span class=\"day-number d-flex align-items-center justify-content-center\"\n                [class.today]=\"isToday(slot.date)\">\n                {{ slot.date | dtz:'DD' }}\n              </span>\n            </div>\n            <!-- Events Stack -->\n            <div class=\"d-flex flex-column gap-1 w-100\">\n              @for (event of slot.events; track trackByEvent($index, event)) {\n              <!-- Spacer -->\n              @if (event.isSpacer) {\n              <div class=\"event-spacer\"></div>\n              }\n              <!-- Event -->\n              @if (!event.isSpacer) {\n              <rlb-calendar-event [event]=\"event\" class=\"w-100\" cdkDrag [cdkDragData]=\"event\"\n                (event-click)=\"eventClick.emit($event)\" [view]=\"view()\">\n                <!-- Drag Preview (Optional but nice) -->\n                <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n                <ng-template cdkDragPreview matchSize class=\"rlb-calendar-drag-preview\">\n                  <rlb-calendar-event [event]=\"event\" [view]=\"view()\" style=\"box-sizing: border-box;\">\n                  </rlb-calendar-event>\n                </ng-template>\n              </rlb-calendar-event>\n              }\n              }\n            </div>\n            <!-- Overflow (+N more) -->\n            @if (slot.hasOverflow) {\n            <div class=\"mt-1 small text-secondary text-center cursor-pointer p-1 rounded hover-bg\"\n              (click)=\"$event.stopPropagation(); eventContainerClick.emit(slot.overflowEvents)\">\n              +{{ slot.overflowCount }} more\n            </div>\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n    </div>\n\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.min-height-0{min-height:0!important}.border-end:last-child{border-right:0!important}.day-number{width:24px;height:24px;border-radius:50%;font-size:.85rem;font-weight:500;transition:background-color .2s}.day-number.today{background-color:var(--bs-primary);color:#fff}.event-spacer{height:20px;width:100%;pointer-events:none}.hover-bg:hover{background-color:var(--bs-secondary-bg-subtle)}.cursor-pointer{cursor:pointer}.has-interval{background-image:linear-gradient(to right,color-mix(in srgb,var(--interval-color) 12%,transparent) 0%,transparent 100%);border-left:3px solid var(--interval-color)!important}.cdk-drag-preview{box-shadow:0 .5rem 1rem #0000004d;border-radius:var(--bs-border-radius-sm)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: true }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: true }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], intervals: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervals", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], eventClick: [{ type: i0.Output, args: ["event-click"] }], eventContainerClick: [{ type: i0.Output, args: ["event-container-click"] }], eventChange: [{ type: i0.Output, args: ["event-change"] }], scrollBodyRef: [{ type: i0.ViewChild, args: ['scrollBody', { isSignal: true }] }], headerRowRef: [{ type: i0.ViewChild, args: ['headerRow', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: true }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: true }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], intervals: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervals", required: false }] }], timezone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timezone", required: true }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], eventClick: [{ type: i0.Output, args: ["event-click"] }], eventContainerClick: [{ type: i0.Output, args: ["event-container-click"] }], eventChange: [{ type: i0.Output, args: ["event-change"] }], scrollBodyRef: [{ type: i0.ViewChild, args: ['scrollBody', { isSignal: true }] }], headerRowRef: [{ type: i0.ViewChild, args: ['headerRow', { isSignal: true }] }] } });
 
 class CalendarDayGridComponent {
     constructor() {
@@ -3268,6 +3280,7 @@ class CalendarDayGridComponent {
         this.currentDate = input.required(...(ngDevMode ? [{ debugName: "currentDate" }] : /* istanbul ignore next */ []));
         this.events = input([], ...(ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []));
         this.intervals = input([], ...(ngDevMode ? [{ debugName: "intervals" }] : /* istanbul ignore next */ []));
+        this.timezone = input.required(...(ngDevMode ? [{ debugName: "timezone" }] : /* istanbul ignore next */ []));
         this.layout = input.required(...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
         this.eventClick = output({ alias: 'event-click' });
         this.eventContainerClick = output({ alias: 'event-container-click' });
@@ -3289,6 +3302,10 @@ class CalendarDayGridComponent {
         effect(() => {
             this.processAllEvents(this.events(), this.currentDate());
         });
+        // Keep the "now" line in the calendar timezone.
+        effect(() => {
+            this.now.set(getToday(this.timezone()));
+        });
     }
     ngAfterViewInit() { }
     ngOnDestroy() {
@@ -3307,13 +3324,12 @@ class CalendarDayGridComponent {
         const rawMinutesFromStart = (newTopPx / this.layout().rowHeight) * 60;
         const snappedMinutes = Math.round(rawMinutesFromStart / this.SNAP_MINUTES) * this.SNAP_MINUTES;
         const validMinutes = Math.max(0, snappedMinutes);
-        const newStart = new DateTz$1(newDay)
-            .set(0, 'hour')
-            .set(0, 'minute')
-            .add(validMinutes, 'minute')
-            .stripSecMillis();
+        // Local midnight of the target day + dropped offset (tz-aware).
+        const tz = this.timezone();
+        const newStartTs = startOfDayTs(newDay, tz) + validMinutes * 60 * 1000;
+        const newStart = new DateTz$1(newStartTs, tz).stripSecMillis();
         const durationMs = movedEvent.end.timestamp - movedEvent.start.timestamp;
-        const newEnd = new DateTz$1(newStart.timestamp + durationMs).stripSecMillis();
+        const newEnd = new DateTz$1(newStart.timestamp + durationMs, tz).stripSecMillis();
         if (newStart.timestamp !== movedEvent.start.timestamp) {
             const updatedEvent = {
                 ...movedEvent,
@@ -3324,16 +3340,9 @@ class CalendarDayGridComponent {
         }
     }
     calculateEventTop(event) {
-        const startOfDay = new DateTz$1(this.day()).set(0, 'hour').set(0, 'minute').stripSecMillis();
-        // Use event.start directly, but ensure we are calculating relative to THIS day
-        // If event starts on previous day, we should clamp?
-        // Logic from week grid handles "chunks", here we assume processAllEvents has given us the chunk for this day.
-        let eventStart = event.start;
-        if (eventStart.timestamp < startOfDay.timestamp) {
-            eventStart = startOfDay;
-        }
-        const diffMs = eventStart.timestamp - startOfDay.timestamp;
-        const diffMinutes = diffMs / (1000 * 60);
+        // processAllEvents already clamped the event to this day, so its start is
+        // within [00:00, 24:00) of the day. Minutes-since-local-midnight is tz-aware.
+        const diffMinutes = minutesSinceMidnight(event.start, this.timezone());
         return (diffMinutes / 60) * this.layout().rowHeight;
     }
     calculateEventHeight(event) {
@@ -3350,12 +3359,12 @@ class CalendarDayGridComponent {
         return ((hours * 60) + minutes) / 60 * this.layout().rowHeight;
     }
     isToday(date) {
-        return isToday(date);
+        return isToday(date, this.timezone());
     }
     startNowTimer() {
         this.stopNowTimer(); // clear existing if any
         this.nowInterval = setInterval(() => {
-            this.now.set(getToday());
+            this.now.set(getToday(this.timezone()));
         }, 60 * 1000); // every minute
     }
     stopNowTimer() {
@@ -3380,7 +3389,8 @@ class CalendarDayGridComponent {
         return `var(--bs-${interval.color || 'success'})`;
     }
     buildDayGrid(currentDate) {
-        this.day.set(new DateTz$1(currentDate.timestamp, 'UTC'));
+        // Anchor the day to local midnight in the calendar timezone.
+        this.day.set(dayAt(currentDate, this.timezone(), 0));
         this.startNowTimer();
     }
     buildTimeSlots() {
@@ -3400,29 +3410,23 @@ class CalendarDayGridComponent {
     processAllEvents(events, day) {
         if (!day)
             return;
-        // Filter events for this day
-        const dayStart = new DateTz$1(day).set(0, 'hour').set(0, 'minute').stripSecMillis();
-        const dayEnd = new DateTz$1(day).set(0, 'hour').set(0, 'minute').add(1, 'day').stripSecMillis();
+        const tz = this.timezone();
+        // tz-aware day boundaries (set()/add() would be UTC-naive here).
+        const dayStartTs = startOfDayTs(day, tz);
+        const dayEndTs = dayAt(day, tz, 1).timestamp;
         const dayEvents = [];
         for (const event of events) {
             // Check overlap with the day
-            if (event.end.timestamp > dayStart.timestamp && event.start.timestamp < dayEnd.timestamp) {
-                let visualStart = event.start;
-                let visualEnd = event.end;
-                let isContinuedBefore = false;
-                let isContinuedAfter = false;
-                if (visualStart.timestamp < dayStart.timestamp) {
-                    visualStart = dayStart;
-                    isContinuedBefore = true;
-                }
-                if (visualEnd.timestamp > dayEnd.timestamp) {
-                    visualEnd = dayEnd;
-                    isContinuedAfter = true;
-                }
+            if (event.end.timestamp > dayStartTs && event.start.timestamp < dayEndTs) {
+                const isContinuedBefore = event.start.timestamp < dayStartTs;
+                const isContinuedAfter = event.end.timestamp > dayEndTs;
+                const visualStartTs = Math.max(event.start.timestamp, dayStartTs);
+                const visualEndTs = Math.min(event.end.timestamp, dayEndTs);
                 dayEvents.push({
                     ...event,
-                    start: visualStart,
-                    end: visualEnd,
+                    // Chunks live in the calendar timezone, so labels and positions agree.
+                    start: new DateTz$1(visualStartTs, tz),
+                    end: new DateTz$1(visualEndTs, tz),
                     isContinuedBefore,
                     isContinuedAfter,
                     left: 0,
@@ -3516,12 +3520,12 @@ class CalendarDayGridComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CalendarDayGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: CalendarDayGridComponent, isStandalone: true, selector: "rlb-calendar-day-grid", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: true, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, intervals: { classPropertyName: "intervals", publicName: "intervals", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { eventClick: "event-click", eventContainerClick: "event-container-click", eventChange: "event-change" }, viewQueries: [{ propertyName: "scrollBodyRef", first: true, predicate: ["scrollBody"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (day()) {\n<div class=\"calendar-wrapper d-flex flex-column\">\n  <!--  HEADER WRAPPER -->\n  <!-- For day view, we just show the date at top? Or maybe just keep it simple with body since main header has date -->\n  <!-- Mimicking structure of Week View but single column -->\n  <div class=\"header-container overflow-hidden flex-shrink-0 border-bottom bg-body-tertiary\">\n    <div class=\"header-row d-flex\" [style.min-height.rem]=\"layout().minHeaderHeight\">\n      <div class=\"time-gutter border-end flex-shrink-0\"></div>\n      <div class=\"day-cell p-2 flex-grow-1\" [class.text-primary]=\"isToday(day())\" [class.fw-bold]=\"isToday(day())\"\n        [class.bg-primary]=\"isToday(day())\">\n        <div class=\"small text-uppercase text-body-secondary h-100 d-flex align-items-center justify-content-center\">{{\n          day() | dayOfWeek: 'long' }}</div>\n      </div>\n    </div>\n  </div>\n  <!-- BODY WRAPPER  -->\n  <div #scrollBody class=\"calendar-body flex-grow-1 overflow-auto bg-body position-relative\"\n    [style.max-height.rem]=\"layout().maxBodyHeight\">\n    <div class=\"body-row d-flex position-relative\">\n      <!-- SIDEBAR (Sticky Left) -->\n      <div class=\"time-sidebar sticky-start flex-shrink-0 border-end\">\n        @for (time of timeSlots(); track time; let i = $index) {\n        <div class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n          [style.height.px]=\"layout().rowHeight\">\n          @if (i !== 0) {\n          <span style=\"transform: translateY(-50%)\">\n            {{ time }}\n          </span>\n          }\n        </div>\n        }\n      </div>\n      <!-- GRID AND EVENTS -->\n      <div class=\"grid-layer flex-grow-1 position-relative\">\n        <!-- LAYER 1: Grid -->\n        <div class=\"background-grid position-absolute w-100 h-100 top-0 start-0 z-0\">\n          @for (time of timeSlots(); track time) {\n          <div class=\"grid-row border-bottom\" [style.height.px]=\"layout().rowHeight\">\n          </div>\n          }\n        </div>\n        <!-- Layer 1.5: Intervals (background highlights) -->\n        <div class=\"intervals-container position-absolute w-100 h-100 top-0 start-0\" style=\"z-index: 0; pointer-events: none;\">\n          @for (interval of getIntervalsForDay(); track $index) {\n          <div class=\"calendar-interval position-absolute w-100\"\n            [style.top.px]=\"getIntervalTop(interval)\"\n            [style.height.px]=\"getIntervalHeight(interval)\"\n            [style.background-color]=\"getIntervalColor(interval)\">\n          </div>\n          }\n        </div>\n\n        <!-- Layer 2: Events -->\n        <div class=\"events-container d-flex h-100 w-100 position-relative z-1\" cdkDropListGroup>\n          <div class=\"day-column position-relative h-100 w-100\" cdkDropList [cdkDropListSortingDisabled]=\"true\"\n            [cdkDropListData]=\"day()\" (cdkDropListDropped)=\"onEventDrop($event)\" (click)=\"eventClick.emit(undefined)\">\n            @for (event of processedEvents(); track trackByEventId($index, event)) {\n            <rlb-calendar-event [view]=\"view()\" [event]=\"event\" [style.top.px]=\"calculateEventTop(event)\"\n              [style.height.px]=\"calculateEventHeight(event)\" [style.left.%]=\"event.left\" [style.width.%]=\"event.width\"\n              (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\" cdkDrag\n              [cdkDragData]=\"event\" class=\"position-absolute\">\n              <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n            </rlb-calendar-event>\n            }\n            @if (isToday(day())) {\n            <div class=\"now-line\" [style.top.px]=\"getNowTop()\">\n            </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n}\n", styles: [":host{display:block;height:100%}.calendar-wrapper{background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);overflow:hidden;height:100%}.header-container{background-color:var(--bs-body-bg);z-index:102}.header-row{width:100%}.time-gutter{width:60px;border-color:var(--bs-border-color)!important}.day-cell{border-color:var(--bs-border-color)!important}.calendar-body{scroll-behavior:auto}.body-row{width:100%}.sticky-start{position:sticky;left:0;z-index:50;background-color:var(--bs-body-bg)}.time-sidebar{width:60px;border-color:var(--bs-border-color)!important}.grid-row{border-color:var(--bs-border-color)!important;box-sizing:border-box}.grid-row:after{content:\"\";position:absolute;width:100%;border-bottom:1px dotted currentColor;opacity:.15;top:50%;left:0;pointer-events:none}.now-line{position:absolute;left:0;right:0;height:2px;background-color:var(--bs-danger);z-index:10;pointer-events:none}.now-line:before{content:\"\";position:absolute;left:-5px;top:-4px;width:10px;height:10px;background-color:var(--bs-danger);border-radius:50%}.calendar-interval{opacity:.1;pointer-events:none;border-radius:0}.z-0{z-index:0}.z-1{z-index:1}\n"], dependencies: [{ kind: "directive", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: CalendarEventComponent, selector: "rlb-calendar-event", inputs: ["event", "view"], outputs: ["event-click", "event-container-click"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "pipe", type: DayOfWeekPipe, name: "dayOfWeek" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: CalendarDayGridComponent, isStandalone: true, selector: "rlb-calendar-day-grid", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: true, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, intervals: { classPropertyName: "intervals", publicName: "intervals", isSignal: true, isRequired: false, transformFunction: null }, timezone: { classPropertyName: "timezone", publicName: "timezone", isSignal: true, isRequired: true, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { eventClick: "event-click", eventContainerClick: "event-container-click", eventChange: "event-change" }, viewQueries: [{ propertyName: "scrollBodyRef", first: true, predicate: ["scrollBody"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (day()) {\n<div class=\"calendar-wrapper d-flex flex-column\">\n  <!--  HEADER WRAPPER -->\n  <!-- For day view, we just show the date at top? Or maybe just keep it simple with body since main header has date -->\n  <!-- Mimicking structure of Week View but single column -->\n  <div class=\"header-container overflow-hidden flex-shrink-0 border-bottom bg-body-tertiary\">\n    <div class=\"header-row d-flex\" [style.min-height.rem]=\"layout().minHeaderHeight\">\n      <div class=\"time-gutter border-end flex-shrink-0\"></div>\n      <div class=\"day-cell p-2 flex-grow-1\" [class.text-primary]=\"isToday(day())\" [class.fw-bold]=\"isToday(day())\"\n        [class.bg-primary]=\"isToday(day())\">\n        <div class=\"small text-uppercase text-body-secondary h-100 d-flex align-items-center justify-content-center\">{{\n          day() | dayOfWeek: 'long' }}</div>\n      </div>\n    </div>\n  </div>\n  <!-- BODY WRAPPER  -->\n  <div #scrollBody class=\"calendar-body flex-grow-1 overflow-auto bg-body position-relative\"\n    [style.max-height.rem]=\"layout().maxBodyHeight\">\n    <div class=\"body-row d-flex position-relative\">\n      <!-- SIDEBAR (Sticky Left) -->\n      <div class=\"time-sidebar sticky-start flex-shrink-0 border-end\">\n        @for (time of timeSlots(); track time; let i = $index) {\n        <div class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n          [style.height.px]=\"layout().rowHeight\">\n          @if (i !== 0) {\n          <span style=\"transform: translateY(-50%)\">\n            {{ time }}\n          </span>\n          }\n        </div>\n        }\n      </div>\n      <!-- GRID AND EVENTS -->\n      <div class=\"grid-layer flex-grow-1 position-relative\">\n        <!-- LAYER 1: Grid -->\n        <div class=\"background-grid position-absolute w-100 h-100 top-0 start-0 z-0\">\n          @for (time of timeSlots(); track time) {\n          <div class=\"grid-row border-bottom\" [style.height.px]=\"layout().rowHeight\">\n          </div>\n          }\n        </div>\n        <!-- Layer 1.5: Intervals (background highlights) -->\n        <div class=\"intervals-container position-absolute w-100 h-100 top-0 start-0\" style=\"z-index: 0; pointer-events: none;\">\n          @for (interval of getIntervalsForDay(); track $index) {\n          <div class=\"calendar-interval position-absolute w-100\"\n            [style.top.px]=\"getIntervalTop(interval)\"\n            [style.height.px]=\"getIntervalHeight(interval)\"\n            [style.background-color]=\"getIntervalColor(interval)\">\n          </div>\n          }\n        </div>\n\n        <!-- Layer 2: Events -->\n        <div class=\"events-container d-flex h-100 w-100 position-relative z-1\" cdkDropListGroup>\n          <div class=\"day-column position-relative h-100 w-100\" cdkDropList [cdkDropListSortingDisabled]=\"true\"\n            [cdkDropListData]=\"day()\" (cdkDropListDropped)=\"onEventDrop($event)\" (click)=\"eventClick.emit(undefined)\">\n            @for (event of processedEvents(); track trackByEventId($index, event)) {\n            <rlb-calendar-event [view]=\"view()\" [event]=\"event\" [style.top.px]=\"calculateEventTop(event)\"\n              [style.height.px]=\"calculateEventHeight(event)\" [style.left.%]=\"event.left\" [style.width.%]=\"event.width\"\n              (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\" cdkDrag\n              [cdkDragData]=\"event\" class=\"position-absolute\">\n              <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n            </rlb-calendar-event>\n            }\n            @if (isToday(day())) {\n            <div class=\"now-line\" [style.top.px]=\"getNowTop()\">\n            </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n}\n", styles: [":host{display:block;height:100%}.calendar-wrapper{background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);overflow:hidden;height:100%}.header-container{background-color:var(--bs-body-bg);z-index:102}.header-row{width:100%}.time-gutter{width:60px;border-color:var(--bs-border-color)!important}.day-cell{border-color:var(--bs-border-color)!important}.calendar-body{scroll-behavior:auto}.body-row{width:100%}.sticky-start{position:sticky;left:0;z-index:50;background-color:var(--bs-body-bg)}.time-sidebar{width:60px;border-color:var(--bs-border-color)!important}.grid-row{border-color:var(--bs-border-color)!important;box-sizing:border-box}.grid-row:after{content:\"\";position:absolute;width:100%;border-bottom:1px dotted currentColor;opacity:.15;top:50%;left:0;pointer-events:none}.now-line{position:absolute;left:0;right:0;height:2px;background-color:var(--bs-danger);z-index:10;pointer-events:none}.now-line:before{content:\"\";position:absolute;left:-5px;top:-4px;width:10px;height:10px;background-color:var(--bs-danger);border-radius:50%}.calendar-interval{opacity:.1;pointer-events:none;border-radius:0}.z-0{z-index:0}.z-1{z-index:1}\n"], dependencies: [{ kind: "directive", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: CalendarEventComponent, selector: "rlb-calendar-event", inputs: ["event", "view"], outputs: ["event-click", "event-container-click"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "pipe", type: DayOfWeekPipe, name: "dayOfWeek" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CalendarDayGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rlb-calendar-day-grid', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkDropListGroup, CdkDropList, CalendarEventComponent, CdkDrag, CdkDragPlaceholder, DayOfWeekPipe], template: "@if (day()) {\n<div class=\"calendar-wrapper d-flex flex-column\">\n  <!--  HEADER WRAPPER -->\n  <!-- For day view, we just show the date at top? Or maybe just keep it simple with body since main header has date -->\n  <!-- Mimicking structure of Week View but single column -->\n  <div class=\"header-container overflow-hidden flex-shrink-0 border-bottom bg-body-tertiary\">\n    <div class=\"header-row d-flex\" [style.min-height.rem]=\"layout().minHeaderHeight\">\n      <div class=\"time-gutter border-end flex-shrink-0\"></div>\n      <div class=\"day-cell p-2 flex-grow-1\" [class.text-primary]=\"isToday(day())\" [class.fw-bold]=\"isToday(day())\"\n        [class.bg-primary]=\"isToday(day())\">\n        <div class=\"small text-uppercase text-body-secondary h-100 d-flex align-items-center justify-content-center\">{{\n          day() | dayOfWeek: 'long' }}</div>\n      </div>\n    </div>\n  </div>\n  <!-- BODY WRAPPER  -->\n  <div #scrollBody class=\"calendar-body flex-grow-1 overflow-auto bg-body position-relative\"\n    [style.max-height.rem]=\"layout().maxBodyHeight\">\n    <div class=\"body-row d-flex position-relative\">\n      <!-- SIDEBAR (Sticky Left) -->\n      <div class=\"time-sidebar sticky-start flex-shrink-0 border-end\">\n        @for (time of timeSlots(); track time; let i = $index) {\n        <div class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n          [style.height.px]=\"layout().rowHeight\">\n          @if (i !== 0) {\n          <span style=\"transform: translateY(-50%)\">\n            {{ time }}\n          </span>\n          }\n        </div>\n        }\n      </div>\n      <!-- GRID AND EVENTS -->\n      <div class=\"grid-layer flex-grow-1 position-relative\">\n        <!-- LAYER 1: Grid -->\n        <div class=\"background-grid position-absolute w-100 h-100 top-0 start-0 z-0\">\n          @for (time of timeSlots(); track time) {\n          <div class=\"grid-row border-bottom\" [style.height.px]=\"layout().rowHeight\">\n          </div>\n          }\n        </div>\n        <!-- Layer 1.5: Intervals (background highlights) -->\n        <div class=\"intervals-container position-absolute w-100 h-100 top-0 start-0\" style=\"z-index: 0; pointer-events: none;\">\n          @for (interval of getIntervalsForDay(); track $index) {\n          <div class=\"calendar-interval position-absolute w-100\"\n            [style.top.px]=\"getIntervalTop(interval)\"\n            [style.height.px]=\"getIntervalHeight(interval)\"\n            [style.background-color]=\"getIntervalColor(interval)\">\n          </div>\n          }\n        </div>\n\n        <!-- Layer 2: Events -->\n        <div class=\"events-container d-flex h-100 w-100 position-relative z-1\" cdkDropListGroup>\n          <div class=\"day-column position-relative h-100 w-100\" cdkDropList [cdkDropListSortingDisabled]=\"true\"\n            [cdkDropListData]=\"day()\" (cdkDropListDropped)=\"onEventDrop($event)\" (click)=\"eventClick.emit(undefined)\">\n            @for (event of processedEvents(); track trackByEventId($index, event)) {\n            <rlb-calendar-event [view]=\"view()\" [event]=\"event\" [style.top.px]=\"calculateEventTop(event)\"\n              [style.height.px]=\"calculateEventHeight(event)\" [style.left.%]=\"event.left\" [style.width.%]=\"event.width\"\n              (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\" cdkDrag\n              [cdkDragData]=\"event\" class=\"position-absolute\">\n              <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n            </rlb-calendar-event>\n            }\n            @if (isToday(day())) {\n            <div class=\"now-line\" [style.top.px]=\"getNowTop()\">\n            </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n}\n", styles: [":host{display:block;height:100%}.calendar-wrapper{background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);overflow:hidden;height:100%}.header-container{background-color:var(--bs-body-bg);z-index:102}.header-row{width:100%}.time-gutter{width:60px;border-color:var(--bs-border-color)!important}.day-cell{border-color:var(--bs-border-color)!important}.calendar-body{scroll-behavior:auto}.body-row{width:100%}.sticky-start{position:sticky;left:0;z-index:50;background-color:var(--bs-body-bg)}.time-sidebar{width:60px;border-color:var(--bs-border-color)!important}.grid-row{border-color:var(--bs-border-color)!important;box-sizing:border-box}.grid-row:after{content:\"\";position:absolute;width:100%;border-bottom:1px dotted currentColor;opacity:.15;top:50%;left:0;pointer-events:none}.now-line{position:absolute;left:0;right:0;height:2px;background-color:var(--bs-danger);z-index:10;pointer-events:none}.now-line:before{content:\"\";position:absolute;left:-5px;top:-4px;width:10px;height:10px;background-color:var(--bs-danger);border-radius:50%}.calendar-interval{opacity:.1;pointer-events:none;border-radius:0}.z-0{z-index:0}.z-1{z-index:1}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: true }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: true }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], intervals: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervals", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], eventClick: [{ type: i0.Output, args: ["event-click"] }], eventContainerClick: [{ type: i0.Output, args: ["event-container-click"] }], eventChange: [{ type: i0.Output, args: ["event-change"] }], scrollBodyRef: [{ type: i0.ViewChild, args: ['scrollBody', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: true }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: true }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], intervals: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervals", required: false }] }], timezone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timezone", required: true }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], eventClick: [{ type: i0.Output, args: ["event-click"] }], eventContainerClick: [{ type: i0.Output, args: ["event-container-click"] }], eventChange: [{ type: i0.Output, args: ["event-change"] }], scrollBodyRef: [{ type: i0.ViewChild, args: ['scrollBody', { isSignal: true }] }] } });
 
 class CalendarGrid {
     constructor() {
@@ -3529,6 +3533,7 @@ class CalendarGrid {
         this.currentDate = input.required(...(ngDevMode ? [{ debugName: "currentDate" }] : /* istanbul ignore next */ []));
         this.events = input([], ...(ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []));
         this.intervals = input([], ...(ngDevMode ? [{ debugName: "intervals" }] : /* istanbul ignore next */ []));
+        this.timezone = input.required(...(ngDevMode ? [{ debugName: "timezone" }] : /* istanbul ignore next */ []));
         this.layout = input.required(...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
         this.eventClick = output({ alias: 'event-click' });
         this.eventContainerClick = output({ alias: 'event-container-click' });
@@ -3536,7 +3541,7 @@ class CalendarGrid {
     }
     ngOnDestroy() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CalendarGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: CalendarGrid, isStandalone: true, selector: "rlb-calendar-grid", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: true, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, intervals: { classPropertyName: "intervals", publicName: "intervals", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { eventClick: "event-click", eventContainerClick: "event-container-click", eventChange: "event-change" }, ngImport: i0, template: "@switch (view()) {\n@case ('week') {\n<rlb-calendar-week-grid [view]=\"view()\" [currentDate]=\"currentDate()\" [events]=\"events()\" [intervals]=\"intervals()\" [layout]=\"layout()\"\n  (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\"\n  (event-change)=\"eventChange.emit($event)\" />\n}\n@case ('month') {\n<rlb-calendar-month-grid [view]=\"view()\" [currentDate]=\"currentDate()\" [events]=\"events()\" [intervals]=\"intervals()\" [layout]=\"layout()\"\n  (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\"\n  (event-change)=\"eventChange.emit($event)\" />\n}\n@case ('day') {\n<rlb-calendar-day-grid [view]=\"view()\" [currentDate]=\"currentDate()\" [events]=\"events()\" [intervals]=\"intervals()\" [layout]=\"layout()\"\n  (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\"\n  (event-change)=\"eventChange.emit($event)\" />\n}\n@default {\nnot implemented yet\n}\n}\n", styles: [""], dependencies: [{ kind: "component", type: CalendarWeekGridComponent, selector: "rlb-calendar-week-grid", inputs: ["view", "currentDate", "events", "intervals", "layout"], outputs: ["event-click", "event-container-click", "event-change"] }, { kind: "component", type: CalendarMonthGridComponent, selector: "rlb-calendar-month-grid", inputs: ["view", "currentDate", "events", "intervals", "layout"], outputs: ["event-click", "event-container-click", "event-change"] }, { kind: "component", type: CalendarDayGridComponent, selector: "rlb-calendar-day-grid", inputs: ["view", "currentDate", "events", "intervals", "layout"], outputs: ["event-click", "event-container-click", "event-change"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: CalendarGrid, isStandalone: true, selector: "rlb-calendar-grid", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: true, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, intervals: { classPropertyName: "intervals", publicName: "intervals", isSignal: true, isRequired: false, transformFunction: null }, timezone: { classPropertyName: "timezone", publicName: "timezone", isSignal: true, isRequired: true, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { eventClick: "event-click", eventContainerClick: "event-container-click", eventChange: "event-change" }, ngImport: i0, template: "@switch (view()) {\n@case ('week') {\n<rlb-calendar-week-grid [view]=\"view()\" [currentDate]=\"currentDate()\" [events]=\"events()\" [intervals]=\"intervals()\" [timezone]=\"timezone()\" [layout]=\"layout()\"\n  (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\"\n  (event-change)=\"eventChange.emit($event)\" />\n}\n@case ('month') {\n<rlb-calendar-month-grid [view]=\"view()\" [currentDate]=\"currentDate()\" [events]=\"events()\" [intervals]=\"intervals()\" [timezone]=\"timezone()\" [layout]=\"layout()\"\n  (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\"\n  (event-change)=\"eventChange.emit($event)\" />\n}\n@case ('day') {\n<rlb-calendar-day-grid [view]=\"view()\" [currentDate]=\"currentDate()\" [events]=\"events()\" [intervals]=\"intervals()\" [timezone]=\"timezone()\" [layout]=\"layout()\"\n  (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\"\n  (event-change)=\"eventChange.emit($event)\" />\n}\n@default {\nnot implemented yet\n}\n}\n", styles: [""], dependencies: [{ kind: "component", type: CalendarWeekGridComponent, selector: "rlb-calendar-week-grid", inputs: ["view", "currentDate", "events", "intervals", "timezone", "layout"], outputs: ["event-click", "event-container-click", "event-change"] }, { kind: "component", type: CalendarMonthGridComponent, selector: "rlb-calendar-month-grid", inputs: ["view", "currentDate", "events", "intervals", "timezone", "layout"], outputs: ["event-click", "event-container-click", "event-change"] }, { kind: "component", type: CalendarDayGridComponent, selector: "rlb-calendar-day-grid", inputs: ["view", "currentDate", "events", "intervals", "timezone", "layout"], outputs: ["event-click", "event-container-click", "event-change"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CalendarGrid, decorators: [{
             type: Component,
@@ -3544,8 +3549,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         CalendarWeekGridComponent,
                         CalendarMonthGridComponent,
                         CalendarDayGridComponent,
-                    ], template: "@switch (view()) {\n@case ('week') {\n<rlb-calendar-week-grid [view]=\"view()\" [currentDate]=\"currentDate()\" [events]=\"events()\" [intervals]=\"intervals()\" [layout]=\"layout()\"\n  (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\"\n  (event-change)=\"eventChange.emit($event)\" />\n}\n@case ('month') {\n<rlb-calendar-month-grid [view]=\"view()\" [currentDate]=\"currentDate()\" [events]=\"events()\" [intervals]=\"intervals()\" [layout]=\"layout()\"\n  (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\"\n  (event-change)=\"eventChange.emit($event)\" />\n}\n@case ('day') {\n<rlb-calendar-day-grid [view]=\"view()\" [currentDate]=\"currentDate()\" [events]=\"events()\" [intervals]=\"intervals()\" [layout]=\"layout()\"\n  (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\"\n  (event-change)=\"eventChange.emit($event)\" />\n}\n@default {\nnot implemented yet\n}\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: true }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: true }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], intervals: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervals", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], eventClick: [{ type: i0.Output, args: ["event-click"] }], eventContainerClick: [{ type: i0.Output, args: ["event-container-click"] }], eventChange: [{ type: i0.Output, args: ["event-change"] }] } });
+                    ], template: "@switch (view()) {\n@case ('week') {\n<rlb-calendar-week-grid [view]=\"view()\" [currentDate]=\"currentDate()\" [events]=\"events()\" [intervals]=\"intervals()\" [timezone]=\"timezone()\" [layout]=\"layout()\"\n  (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\"\n  (event-change)=\"eventChange.emit($event)\" />\n}\n@case ('month') {\n<rlb-calendar-month-grid [view]=\"view()\" [currentDate]=\"currentDate()\" [events]=\"events()\" [intervals]=\"intervals()\" [timezone]=\"timezone()\" [layout]=\"layout()\"\n  (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\"\n  (event-change)=\"eventChange.emit($event)\" />\n}\n@case ('day') {\n<rlb-calendar-day-grid [view]=\"view()\" [currentDate]=\"currentDate()\" [events]=\"events()\" [intervals]=\"intervals()\" [timezone]=\"timezone()\" [layout]=\"layout()\"\n  (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\"\n  (event-change)=\"eventChange.emit($event)\" />\n}\n@default {\nnot implemented yet\n}\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: true }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: true }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], intervals: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervals", required: false }] }], timezone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timezone", required: true }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], eventClick: [{ type: i0.Output, args: ["event-click"] }], eventContainerClick: [{ type: i0.Output, args: ["event-container-click"] }], eventChange: [{ type: i0.Output, args: ["event-change"] }] } });
 
 class MonthFormatterPipe {
     constructor() {
@@ -3578,6 +3583,7 @@ class CalendarHeaderComponent {
     constructor() {
         this.view = input('month', ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
         this.currentDate = input.required(...(ngDevMode ? [{ debugName: "currentDate" }] : /* istanbul ignore next */ []));
+        this.timezone = input.required(...(ngDevMode ? [{ debugName: "timezone" }] : /* istanbul ignore next */ []));
         this.dateChange = output();
         this.viewChange = output();
     }
@@ -3621,7 +3627,7 @@ class CalendarHeaderComponent {
         switch (this.view()) {
             case 'week':
             default:
-                const today = getToday();
+                const today = getToday(this.timezone());
                 this.dateChange.emit(today);
                 break;
         }
@@ -3630,7 +3636,7 @@ class CalendarHeaderComponent {
         this.viewChange.emit(view);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CalendarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: CalendarHeaderComponent, isStandalone: true, selector: "rlb-calendar-header", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dateChange: "dateChange", viewChange: "viewChange" }, ngImport: i0, template: "<div class=\"d-flex justify-content-between align-items-center mb-3\">\n\t<div class=\"d-flex gap-1\">\n\t\t<button rlb-button outline (click)=\"prev()\">\n\t\t\t<i class=\"bi bi-chevron-left\"></i>\n\t\t</button>\n\t\t<button rlb-button outline (click)=\"today()\">Today</button>\n\t\t<button rlb-button outline (click)=\"next()\">\n\t\t\t<i class=\"bi-chevron-right\"></i>\n\t\t</button>\n\t</div>\n\n\t<h5 class=\"mb-0\">{{ currentDate() | dtz:'DD MM yyyy' | monthFormatter }} {{ currentDate().timezone }}</h5>\n\n\t<rlb-dropdown>\n\t\t<button rlb-button outline rlb-dropdown>{{ view() | titlecase }}</button>\n\t\t<ul rlb-dropdown-menu [placement]=\"'right'\">\n\t\t\t<li rlb-dropdown-item (click)=\"setView('day')\">Day</li>\n\t\t\t<li rlb-dropdown-item (click)=\"setView('week')\">Week</li>\n\t\t\t<li rlb-dropdown-item (click)=\"setView('month')\">Month</li>\n\t\t</ul>\n\t</rlb-dropdown>\n</div>", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "component", type: DropdownComponent, selector: "rlb-dropdown", inputs: ["direction"] }, { kind: "directive", type: DropdownDirective, selector: "a[rlb-dropdown], button[rlb-dropdown], span[rlb-badge][rlb-dropdown]", inputs: ["offset", "auto-close"], outputs: ["status-changed"] }, { kind: "component", type: DropdownContainerComponent, selector: "ul[rlb-dropdown-menu], rlb-dropdown-container", inputs: ["placement", "placement-sm", "placement-md", "placement-lg", "placement-xl", "placement-xxl"] }, { kind: "component", type: DropdownMenuItemComponent, selector: "li[rlb-dropdown-item]", inputs: ["active", "disabled", "header", "divider", "link", "text-wrap"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: DateTzPipe, name: "dtz" }, { kind: "pipe", type: MonthFormatterPipe, name: "monthFormatter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: CalendarHeaderComponent, isStandalone: true, selector: "rlb-calendar-header", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: true, transformFunction: null }, timezone: { classPropertyName: "timezone", publicName: "timezone", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dateChange: "dateChange", viewChange: "viewChange" }, ngImport: i0, template: "<div class=\"d-flex justify-content-between align-items-center mb-3\">\n\t<div class=\"d-flex gap-1\">\n\t\t<button rlb-button outline (click)=\"prev()\">\n\t\t\t<i class=\"bi bi-chevron-left\"></i>\n\t\t</button>\n\t\t<button rlb-button outline (click)=\"today()\">Today</button>\n\t\t<button rlb-button outline (click)=\"next()\">\n\t\t\t<i class=\"bi-chevron-right\"></i>\n\t\t</button>\n\t</div>\n\n\t<h5 class=\"mb-0\">{{ currentDate() | dtz:'DD MM yyyy' | monthFormatter }} {{ currentDate().timezone }}</h5>\n\n\t<rlb-dropdown>\n\t\t<button rlb-button outline rlb-dropdown>{{ view() | titlecase }}</button>\n\t\t<ul rlb-dropdown-menu [placement]=\"'right'\">\n\t\t\t<li rlb-dropdown-item (click)=\"setView('day')\">Day</li>\n\t\t\t<li rlb-dropdown-item (click)=\"setView('week')\">Week</li>\n\t\t\t<li rlb-dropdown-item (click)=\"setView('month')\">Month</li>\n\t\t</ul>\n\t</rlb-dropdown>\n</div>", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "component", type: DropdownComponent, selector: "rlb-dropdown", inputs: ["direction"] }, { kind: "directive", type: DropdownDirective, selector: "a[rlb-dropdown], button[rlb-dropdown], span[rlb-badge][rlb-dropdown]", inputs: ["offset", "auto-close"], outputs: ["status-changed"] }, { kind: "component", type: DropdownContainerComponent, selector: "ul[rlb-dropdown-menu], rlb-dropdown-container", inputs: ["placement", "placement-sm", "placement-md", "placement-lg", "placement-xl", "placement-xxl"] }, { kind: "component", type: DropdownMenuItemComponent, selector: "li[rlb-dropdown-item]", inputs: ["active", "disabled", "header", "divider", "link", "text-wrap"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: DateTzPipe, name: "dtz" }, { kind: "pipe", type: MonthFormatterPipe, name: "monthFormatter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CalendarHeaderComponent, decorators: [{
             type: Component,
@@ -3644,7 +3650,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         DateTzPipe,
                         MonthFormatterPipe,
                     ], template: "<div class=\"d-flex justify-content-between align-items-center mb-3\">\n\t<div class=\"d-flex gap-1\">\n\t\t<button rlb-button outline (click)=\"prev()\">\n\t\t\t<i class=\"bi bi-chevron-left\"></i>\n\t\t</button>\n\t\t<button rlb-button outline (click)=\"today()\">Today</button>\n\t\t<button rlb-button outline (click)=\"next()\">\n\t\t\t<i class=\"bi-chevron-right\"></i>\n\t\t</button>\n\t</div>\n\n\t<h5 class=\"mb-0\">{{ currentDate() | dtz:'DD MM yyyy' | monthFormatter }} {{ currentDate().timezone }}</h5>\n\n\t<rlb-dropdown>\n\t\t<button rlb-button outline rlb-dropdown>{{ view() | titlecase }}</button>\n\t\t<ul rlb-dropdown-menu [placement]=\"'right'\">\n\t\t\t<li rlb-dropdown-item (click)=\"setView('day')\">Day</li>\n\t\t\t<li rlb-dropdown-item (click)=\"setView('week')\">Week</li>\n\t\t\t<li rlb-dropdown-item (click)=\"setView('month')\">Month</li>\n\t\t</ul>\n\t</rlb-dropdown>\n</div>" }]
-        }], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: true }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], viewChange: [{ type: i0.Output, args: ["viewChange"] }] } });
+        }], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: true }] }], timezone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timezone", required: true }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], viewChange: [{ type: i0.Output, args: ["viewChange"] }] } });
 
 const DEFAULT_CALENDAR_LAYOUT = {
     rowHeight: 110,
@@ -3890,6 +3896,7 @@ class CalendarComponent {
         this.events = model([], { ...(ngDevMode ? { debugName: "events" } : /* istanbul ignore next */ {}), alias: 'events' });
         this.currentDate = model(getToday(), { ...(ngDevMode ? { debugName: "currentDate" } : /* istanbul ignore next */ {}), alias: 'current-date' });
         // currentDateChange = output<IDateTz>({ alias: 'current-date-change' });
+        this.timezone = input(getBrowserTimezone(), { ...(ngDevMode ? { debugName: "timezone" } : /* istanbul ignore next */ {}), alias: 'timezone' });
         this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), alias: 'loading', transform: booleanAttribute });
         this.showToolbar = input(true, { ...(ngDevMode ? { debugName: "showToolbar" } : /* istanbul ignore next */ {}), alias: 'show-toolbar',
             transform: booleanAttribute });
@@ -4073,7 +4080,7 @@ class CalendarComponent {
             .pipe(take(1));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CalendarComponent, deps: [{ token: ModalService }, { token: UniqueIdService }, { token: ToastService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: CalendarComponent, isStandalone: true, selector: "rlb-calendar", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "current-date", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "show-toolbar", isSignal: true, isRequired: false, transformFunction: null }, intervals: { classPropertyName: "intervals", publicName: "intervals", isSignal: true, isRequired: false, transformFunction: null }, manageEvents: { classPropertyName: "manageEvents", publicName: "manage-events", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { view: "viewChange", events: "eventsChange", currentDate: "current-dateChange", dateChange: "date-change", viewChange: "view-change", eventClick: "event-click", containerEventClick: "container-event-click" }, ngImport: i0, template: "<div class=\"rlb-calendar\">\n\n  @if (showToolbar()) {\n    <rlb-calendar-header\n      [view]=\"view()\"\n      [currentDate]=\"currentDate()\"\n      (viewChange)=\"setView($event)\"\n      (dateChange)=\"setDate($event)\"\n    >\n    </rlb-calendar-header>\n  }\n\n  @if (loading()) {\n    <rlb-progress [infinite]=\"true\" [animated]=\"true\" [height]=\"3\" [showValue]=\"false\">\n    </rlb-progress>\n  } @else {\n    <rlb-calendar-grid\n      [events]=\"events()\"\n      [intervals]=\"intervals()\"\n      [view]=\"view()\"\n      [currentDate]=\"currentDate()\"\n      [layout]=\"mergedLayout()\"\n      (event-click)=\"onEventClick($event)\"\n      (event-container-click)=\"onEventContainerClick($event)\"\n      (event-change)=\"onEventChange($event)\"\n    >\n    </rlb-calendar-grid>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: CalendarHeaderComponent, selector: "rlb-calendar-header", inputs: ["view", "currentDate"], outputs: ["dateChange", "viewChange"] }, { kind: "component", type: ProgressComponent, selector: "rlb-progress", inputs: ["max", "min", "value", "height", "animated", "striped", "infinite", "aria-label", "showValue", "color", "text-color"] }, { kind: "component", type: CalendarGrid, selector: "rlb-calendar-grid", inputs: ["view", "currentDate", "events", "intervals", "layout"], outputs: ["event-click", "event-container-click", "event-change"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: CalendarComponent, isStandalone: true, selector: "rlb-calendar", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "current-date", isSignal: true, isRequired: false, transformFunction: null }, timezone: { classPropertyName: "timezone", publicName: "timezone", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "show-toolbar", isSignal: true, isRequired: false, transformFunction: null }, intervals: { classPropertyName: "intervals", publicName: "intervals", isSignal: true, isRequired: false, transformFunction: null }, manageEvents: { classPropertyName: "manageEvents", publicName: "manage-events", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { view: "viewChange", events: "eventsChange", currentDate: "current-dateChange", dateChange: "date-change", viewChange: "view-change", eventClick: "event-click", containerEventClick: "container-event-click" }, ngImport: i0, template: "<div class=\"rlb-calendar\">\n\n  @if (showToolbar()) {\n    <rlb-calendar-header\n      [view]=\"view()\"\n      [currentDate]=\"currentDate()\"\n      [timezone]=\"timezone()\"\n      (viewChange)=\"setView($event)\"\n      (dateChange)=\"setDate($event)\"\n    >\n    </rlb-calendar-header>\n  }\n\n  @if (loading()) {\n    <rlb-progress [infinite]=\"true\" [animated]=\"true\" [height]=\"3\" [showValue]=\"false\">\n    </rlb-progress>\n  } @else {\n    <rlb-calendar-grid\n      [events]=\"events()\"\n      [intervals]=\"intervals()\"\n      [view]=\"view()\"\n      [currentDate]=\"currentDate()\"\n      [timezone]=\"timezone()\"\n      [layout]=\"mergedLayout()\"\n      (event-click)=\"onEventClick($event)\"\n      (event-container-click)=\"onEventContainerClick($event)\"\n      (event-change)=\"onEventChange($event)\"\n    >\n    </rlb-calendar-grid>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: CalendarHeaderComponent, selector: "rlb-calendar-header", inputs: ["view", "currentDate", "timezone"], outputs: ["dateChange", "viewChange"] }, { kind: "component", type: ProgressComponent, selector: "rlb-progress", inputs: ["max", "min", "value", "height", "animated", "striped", "infinite", "aria-label", "showValue", "color", "text-color"] }, { kind: "component", type: CalendarGrid, selector: "rlb-calendar-grid", inputs: ["view", "currentDate", "events", "intervals", "timezone", "layout"], outputs: ["event-click", "event-container-click", "event-change"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
@@ -4081,8 +4088,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         CalendarHeaderComponent,
                         ProgressComponent,
                         CalendarGrid,
-                    ], template: "<div class=\"rlb-calendar\">\n\n  @if (showToolbar()) {\n    <rlb-calendar-header\n      [view]=\"view()\"\n      [currentDate]=\"currentDate()\"\n      (viewChange)=\"setView($event)\"\n      (dateChange)=\"setDate($event)\"\n    >\n    </rlb-calendar-header>\n  }\n\n  @if (loading()) {\n    <rlb-progress [infinite]=\"true\" [animated]=\"true\" [height]=\"3\" [showValue]=\"false\">\n    </rlb-progress>\n  } @else {\n    <rlb-calendar-grid\n      [events]=\"events()\"\n      [intervals]=\"intervals()\"\n      [view]=\"view()\"\n      [currentDate]=\"currentDate()\"\n      [layout]=\"mergedLayout()\"\n      (event-click)=\"onEventClick($event)\"\n      (event-container-click)=\"onEventContainerClick($event)\"\n      (event-change)=\"onEventChange($event)\"\n    >\n    </rlb-calendar-grid>\n  }\n</div>\n" }]
-        }], ctorParameters: () => [{ type: ModalService }, { type: UniqueIdService }, { type: ToastService }], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }, { type: i0.Output, args: ["eventsChange"] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "current-date", required: false }] }, { type: i0.Output, args: ["current-dateChange"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "show-toolbar", required: false }] }], intervals: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervals", required: false }] }], manageEvents: [{ type: i0.Input, args: [{ isSignal: true, alias: "manage-events", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], dateChange: [{ type: i0.Output, args: ["date-change"] }], viewChange: [{ type: i0.Output, args: ["view-change"] }], eventClick: [{ type: i0.Output, args: ["event-click"] }], containerEventClick: [{ type: i0.Output, args: ["container-event-click"] }] } });
+                    ], template: "<div class=\"rlb-calendar\">\n\n  @if (showToolbar()) {\n    <rlb-calendar-header\n      [view]=\"view()\"\n      [currentDate]=\"currentDate()\"\n      [timezone]=\"timezone()\"\n      (viewChange)=\"setView($event)\"\n      (dateChange)=\"setDate($event)\"\n    >\n    </rlb-calendar-header>\n  }\n\n  @if (loading()) {\n    <rlb-progress [infinite]=\"true\" [animated]=\"true\" [height]=\"3\" [showValue]=\"false\">\n    </rlb-progress>\n  } @else {\n    <rlb-calendar-grid\n      [events]=\"events()\"\n      [intervals]=\"intervals()\"\n      [view]=\"view()\"\n      [currentDate]=\"currentDate()\"\n      [timezone]=\"timezone()\"\n      [layout]=\"mergedLayout()\"\n      (event-click)=\"onEventClick($event)\"\n      (event-container-click)=\"onEventContainerClick($event)\"\n      (event-change)=\"onEventChange($event)\"\n    >\n    </rlb-calendar-grid>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: ModalService }, { type: UniqueIdService }, { type: ToastService }], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }, { type: i0.Output, args: ["eventsChange"] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "current-date", required: false }] }, { type: i0.Output, args: ["current-dateChange"] }], timezone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timezone", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "show-toolbar", required: false }] }], intervals: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervals", required: false }] }], manageEvents: [{ type: i0.Input, args: [{ isSignal: true, alias: "manage-events", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], dateChange: [{ type: i0.Output, args: ["date-change"] }], viewChange: [{ type: i0.Output, args: ["view-change"] }], eventClick: [{ type: i0.Output, args: ["event-click"] }], containerEventClick: [{ type: i0.Output, args: ["container-event-click"] }] } });
 
 const CALENDAR_COMPONENTS = [
     CalendarComponent,