@open-rlb/ng-bootstrap 3.3.15 → 3.3.17

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,17 @@ 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;
+/** Returns the IANA timezone resolved from the browser/runtime. */
+function getBrowserTimezone() {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone;
+}
+function isSameDay(a, b, timezone) {
+    const tz = timezone ?? getBrowserTimezone();
+    const da = a.cloneToTimezone(tz);
+    const db = b.cloneToTimezone(tz);
+    return da.year === db.year &&
+        da.month === db.month &&
+        da.day === db.day;
 }
 function addDays(date, days) {
     return new DateTz(date.add(days, 'day'));
@@ -2529,16 +2536,16 @@ function startOfMonth(date) {
 // 	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();
+    const d = date.cloneToTimezone(tz);
+    const today = getToday(tz);
+    return d.year === today.year &&
+        d.month === today.month &&
+        d.day === today.day;
 }
-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 +2567,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 +2660,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 +2694,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();
@@ -2727,7 +2739,7 @@ class CalendarWeekGridComponent {
             .add(validMinutes, 'minute')
             .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, newStart.timezone).stripSecMillis();
         if (newStart.timestamp !== movedEvent.start.timestamp) {
             const updatedEvent = {
                 ...movedEvent,
@@ -2738,7 +2750,7 @@ class CalendarWeekGridComponent {
         }
     }
     getEventsForDay(day) {
-        const dayTs = new DateTz$1(day.timestamp, 'UTC').set(0, 'hour').set(0, 'minute').stripSecMillis().timestamp;
+        const dayTs = new DateTz$1(day).set(0, 'hour').set(0, 'minute').stripSecMillis().timestamp;
         return this.processedEvents().get(dayTs) || [];
     }
     calculateEventTop(event) {
@@ -2759,13 +2771,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() {
@@ -2793,14 +2805,14 @@ class CalendarWeekGridComponent {
     buildWeekGrid(currentDate) {
         const dayOfWeek = currentDate.dayOfWeek; // 0 = Sunday, 1 = Monday ...
         // Week init (monday)
-        const start = new DateTz$1(currentDate.timestamp, 'UTC')
+        const start = new DateTz$1(currentDate)
             .add(-(dayOfWeek - 1), 'day') // clone or create new for start date
             .set(0, 'hour')
             .set(0, 'minute')
             .stripSecMillis();
         const newDays = [];
         for (let i = 0; i < 7; i++) {
-            newDays.push(new DateTz$1(start.timestamp, 'UTC').add(i, 'day'));
+            newDays.push(new DateTz$1(start).add(i, 'day'));
         }
         this.days.set(newDays);
         this.startNowTimer();
@@ -2957,8 +2969,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 +2997,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 +3012,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 +3056,7 @@ class CalendarMonthGridComponent {
     }
     // --- Helpers ---
     isToday(date) {
-        return isToday(date);
+        return isToday(date, this.timezone());
     }
     hasInterval(date) {
         const dayOfWeek = new DateTz(date).dayOfWeek;
@@ -3211,15 +3224,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 = new DateTz(dayInTz).add(1, 'day');
                 // 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 isContinuedAfter = !isLastRenderDay || (evtEnd.timestamp > 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 +3270,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 +3283,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 +3305,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() {
@@ -3313,7 +3333,7 @@ class CalendarDayGridComponent {
             .add(validMinutes, 'minute')
             .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, newStart.timezone).stripSecMillis();
         if (newStart.timestamp !== movedEvent.start.timestamp) {
             const updatedEvent = {
                 ...movedEvent,
@@ -3328,7 +3348,7 @@ class CalendarDayGridComponent {
         // 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;
+        let eventStart = new DateTz$1(event.start);
         if (eventStart.timestamp < startOfDay.timestamp) {
             eventStart = startOfDay;
         }
@@ -3350,12 +3370,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 +3400,7 @@ class CalendarDayGridComponent {
         return `var(--bs-${interval.color || 'success'})`;
     }
     buildDayGrid(currentDate) {
-        this.day.set(new DateTz$1(currentDate.timestamp, 'UTC'));
+        this.day.set(currentDate);
         this.startNowTimer();
     }
     buildTimeSlots() {
@@ -3516,12 +3536,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 +3549,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 +3557,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 +3565,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 +3599,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 +3643,7 @@ class CalendarHeaderComponent {
         switch (this.view()) {
             case 'week':
             default:
-                const today = getToday();
+                const today = getToday(this.timezone());
                 this.dateChange.emit(today);
                 break;
         }
@@ -3630,7 +3652,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 +3666,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 +3912,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 +4096,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 +4104,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,