@heartlandone/vega 2.63.1 → 2.65.0

package/dist/cjs/vega-calendar_4.cjs.entry.js

@@ -2,37 +2,37 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-00ba6623.js');
+const index = require('./index-58ea899e.js');
 const component = require('./component-1e352960.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-d10ace87.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-58e3c010.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-56609e5a.js');
 const internalIconManager = require('./internal-icon-manager-32f9ed63.js');
 const accessibility = require('./accessibility-bfa227f6.js');
 const date = require('./date-0a6bb035.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-428d8802.js');
-const translation = require('./translation-cde4dce3.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-3cefb326.js');
+const translation = require('./translation-f5adcb9f.js');
 const stateBackgroundColorFormatter = require('./state-background-color-formatter-aa5570f6.js');
 const typeGuard = require('./type-guard-f12b5bae.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-4e96270e.js');
-const vegaInternalEventId = require('./vega-internal-event-id-9647aaf8.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-feb072c4.js');
+const vegaInternalEventId = require('./vega-internal-event-id-6d4a2c53.js');
 const observer = require('./observer-f49483e8.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const staticSubjectTitle = require('./static-subject-title-85732e0f.js');
 const array = require('./array-249289f2.js');
 const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-e2e274e1.js');
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-11937d6f.js');
 const timer = require('./timer-5f33058b.js');
-const subStateNotifySlimmer = require('./sub-state-notify-slimmer-bb64fcfc.js');
-const translationSlimmer = require('./translation-slimmer-af399096.js');
+const subStateNotifySlimmer = require('./sub-state-notify-slimmer-066f2aa9.js');
+const translationSlimmer = require('./translation-slimmer-4b6239d1.js');
 const placeholder = require('./placeholder-cb6d37ad.js');
 const vegaNonceManager = require('./vega-nonce-manager-f927497f.js');
-const subStateObserverSlimmer = require('./sub-state-observer-slimmer-84175d61.js');
+const subStateObserverSlimmer = require('./sub-state-observer-slimmer-569e3297.js');
 const pixel = require('./pixel-98f2a10c.js');
-require('./ui-4ce1fa08.js');
+const ui = require('./ui-9e181079.js');
 require('./dynamic-slimmer-f31fdfd7.js');
-require('./internal-vega-event-manager-28b957c8.js');
+require('./internal-vega-event-manager-9b503f1a.js');
 require('./try-get-document-c0ebd39a.js');
+require('./static-subject-title-5829a298.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32e69595.js');
 require('./typography-4560e7f1.js');
@@ -42,7 +42,7 @@ require('./index-4d7bce1a.js');
 require('./_commonjsHelpers-537d719a.js');
 require('./number-4816603d.js');
 
-var __decorate$u = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$v = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -67,13 +67,13 @@ class VegaCalendarRenderer extends globalSlimmerRegistry.VegaSlimmer {
         } })));
   }
 }
-__decorate$u([
+__decorate$v([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarRenderer.prototype, "host", void 0);
-__decorate$u([
+__decorate$v([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarRenderer.prototype, "switchPanelRenderer", void 0);
-__decorate$u([
+__decorate$v([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarRenderer.prototype, "viewRenderer", void 0);
 
@@ -89,7 +89,7 @@ const ellipsisVertical = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M48 464a48 48 0 1 1 0-96 48 48 0 1 1 0 96zm0-160a48 48 0 1 1 0-96 48 48 0 1 1 0 96zM0 96a48 48 0 1 1 96 0A48 48 0 1 1 0 96z"/></svg>`,
 };
 
-var __decorate$t = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$u = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -247,38 +247,38 @@ VegaCalendarSwitchPanelRenderer.views = [
   { text: 'Week', key: 'week' },
   { text: 'Month', key: 'month' },
 ];
-__decorate$t([
+__decorate$u([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "viewMode", void 0);
-__decorate$t([
+__decorate$u([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "calendarView", void 0);
-__decorate$t([
+__decorate$u([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "currentPeriod", void 0);
-__decorate$t([
+__decorate$u([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "moreActionDropdownProps", void 0);
-__decorate$t([
+__decorate$u([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "moreActionClickEmitter", void 0);
-__decorate$t([
+__decorate$u([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "currentPeriodController", void 0);
-__decorate$t([
+__decorate$u([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "calendarViewController", void 0);
-__decorate$t([
+__decorate$u([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "translationSlimmer", void 0);
-__decorate$t([
+__decorate$u([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "postOperationDate", void 0);
-__decorate$t([
+__decorate$u([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "showSwitchView", void 0);
 
-var __decorate$s = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$t = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -305,20 +305,20 @@ class VegaCalendarViewRenderer extends globalSlimmerRegistry.VegaSlimmer {
       : this.viewWithTimeRenderer.render()));
   }
 }
-__decorate$s([
+__decorate$t([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewRenderer.prototype, "viewMode", void 0);
-__decorate$s([
+__decorate$t([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewRenderer.prototype, "showWeekends", void 0);
-__decorate$s([
+__decorate$t([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewRenderer.prototype, "monthViewRenderer", void 0);
-__decorate$s([
+__decorate$t([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewRenderer.prototype, "viewWithTimeRenderer", void 0);
 
-var __decorate$r = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$s = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -389,17 +389,17 @@ class VegaCalendarDateBlockRenderer extends globalSlimmerRegistry.VegaSlimmer {
     return result;
   }
 }
-__decorate$r([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarDateBlockRenderer.prototype, "enableDateClick", void 0);
-__decorate$r([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarDateBlockRenderer.prototype, "dateClickEmitter", void 0);
-__decorate$r([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarDateBlockRenderer.prototype, "dateDblClickEmitter", void 0);
 
-var __decorate$q = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$r = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -456,7 +456,7 @@ class VegaCalendarMonthViewRenderer extends VegaCalendarDateBlockRenderer {
         return (index.h("div", Object.assign({ class: {
             'row-cell border-divider-right': true,
             'current-month-day': item.compare(currentDate).inMonth,
-            'active': item.isToday(),
+            'active': item.isToday(this.timezone),
             'disabled': isDisabled,
           }, key: `${item.month}-${item.date}` }, renderProps),
           this.renderDateBlock(item),
@@ -521,32 +521,35 @@ class VegaCalendarMonthViewRenderer extends VegaCalendarDateBlockRenderer {
     return !element.classList.contains('more-button') && element.tagName !== 'VEGA-CALENDAR-EVENT';
   }
 }
-__decorate$q([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "viewMode", void 0);
-__decorate$q([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "calendarView", void 0);
-__decorate$q([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "currentPeriod", void 0);
-__decorate$q([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "currentPeriodController", void 0);
-__decorate$q([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "monthEventRenderer", void 0);
-__decorate$q([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "translationSlimmer", void 0);
-__decorate$q([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "isDateDisabled", void 0);
-__decorate$q([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "showSwitchView", void 0);
+__decorate$r([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "timezone", void 0);
 
-var __decorate$p = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$q = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -594,7 +597,7 @@ class VegaCalendarViewWithTimeRenderer extends VegaCalendarDateBlockRenderer {
     return (index.h("div", { class: "calendar-view-title-container" },
       index.h("div", { class: "calendar-view-row" },
         index.h("div", { class: "time-line-empty" }),
-        index.h("div", { class: "calendar-view-title" }, source.map((item, index$1) => (index.h("div", { key: item.date, class: { active: item.isToday() } },
+        index.h("div", { class: "calendar-view-title" }, source.map((item, index$1) => (index.h("div", { key: item.date, class: { active: item.isToday(this.timezone) } },
           index.h("div", null, this.translationSlimmer.t(weekHead[index$1])),
           index.h("div", { class: "week-day" }, item.date)))))),
       index.h("div", { class: "calendar-view-row calendar-view-event-all-container border-divider-bottom" },
@@ -647,35 +650,38 @@ class VegaCalendarViewWithTimeRenderer extends VegaCalendarDateBlockRenderer {
     });
   }
 }
-__decorate$p([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "viewMode", void 0);
-__decorate$p([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "timeLineRenderer", void 0);
-__decorate$p([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "timeMarkerRenderer", void 0);
-__decorate$p([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "dayViewTimedEventRenderer", void 0);
-__decorate$p([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "dayViewFullDayEventRenderer", void 0);
-__decorate$p([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "calendarView", void 0);
-__decorate$p([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "translationSlimmer", void 0);
-__decorate$p([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "isDateDisabled", void 0);
-__decorate$p([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "enableDateClick", void 0);
+__decorate$q([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "timezone", void 0);
 
-var __decorate$o = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$p = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -722,7 +728,7 @@ class VegaCalendarTimeLineRenderer extends globalSlimmerRegistry.VegaSlimmer {
     return timeLine;
   }
 }
-__decorate$o([
+__decorate$p([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarTimeLineRenderer.prototype, "timeFormat", void 0);
 
@@ -773,6 +779,51 @@ const formatDisplayTime = (timeFormat, timeString) => {
     }
   }
 };
+/**
+ * Gets current date parts in the specified timezone
+ *
+ * @param {string} timezone - The IANA timezone identifier
+ * @param {Date} date - The date to get parts for
+ * @returns {DateParts} - An object with year, month, and date properties for the specified timezone
+ */
+function getCurrentDatePartsInTimezone(timezone, date) {
+  if (timezone && timezone !== getSystemTimezone()) {
+    try {
+      const formatter = new Intl.DateTimeFormat([], {
+        timeZone: timezone,
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+      });
+      const parts = formatter.formatToParts(date);
+      const yearPart = parts.find((part) => part.type === 'year');
+      const monthPart = parts.find((part) => part.type === 'month');
+      const dayPart = parts.find((part) => part.type === 'day');
+      if (yearPart && monthPart && dayPart) {
+        const year = parseInt(yearPart.value, 10);
+        const month = parseInt(monthPart.value, 10);
+        const date = parseInt(dayPart.value, 10);
+        return { year, month, date };
+      }
+    }
+    catch (_a) {
+      globalSlimmerRegistry.LogUtility.warn('Invalid timezone:', timezone);
+    }
+  }
+  return {
+    year: date.getFullYear(),
+    month: date.getMonth() + 1,
+    date: date.getDate(),
+  };
+}
+/**
+ * Get the system timezone identifier
+ *
+ * @returns {string} - The system timezone identifier (e.g., "America/New_York")
+ */
+const getSystemTimezone = () => {
+  return Intl.DateTimeFormat().resolvedOptions().timeZone;
+};
 
 /**
  * Calendar view generator abstract class.
@@ -865,11 +916,13 @@ class CalendarDate {
   /**
    * Create a calendar date from a Date object
    *
-   * @param {Date} date - The Date object
+   * @param {Date} currentDate - The Date object to create CalendarDate from
+   * @param {string} timezone - Timezone identifier for timezone-aware date creation. If not provided, uses system timezone.
    * @returns {CalendarDate} - Return a CalendarDate object
    */
-  static from(date) {
-    return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
+  static from(currentDate, timezone = getSystemTimezone()) {
+    const { year, month, date } = getCurrentDatePartsInTimezone(timezone, currentDate);
+    return new CalendarDate(year, month, date);
   }
   /**
    * The year of the calendar date
@@ -907,13 +960,12 @@ class CalendarDate {
   /**
    * Verify whether the calendar date is today
    *
+   * @param {string} timezone - Timezone to consider when checking today's date. If not provided, uses system timezone.
    * @returns {boolean} - Return true if the calendar date is today. Otherwise, return false.
    */
-  isToday() {
-    const today = new Date();
-    return (today.getFullYear() === this.year &&
-      today.getMonth() + 1 === this.month &&
-      today.getDate() === this.date);
+  isToday(timezone = getSystemTimezone()) {
+    const { year, month, date } = getCurrentDatePartsInTimezone(timezone, new Date());
+    return year === this.year && month === this.month && date === this.date;
   }
   /**
    * Convert the calendar date to a Date object
@@ -990,7 +1042,7 @@ class WeekViewGenerator extends CalendarViewGenerator {
     const dates = this.generateDates(period);
     const showWeekends = period.showWeekends;
     let weekDays = this.generateWeekHead();
-    let dateItems = [dates.map(CalendarDate.from)];
+    let dateItems = [dates.map((date) => CalendarDate.from(date))];
     if (showWeekends === false) {
       weekDays = weekDays.slice(1, 6);
       dateItems = dateItems.map((items) => items.slice(1, 6));
@@ -1031,9 +1083,10 @@ class MonthViewGenerator extends CalendarViewGenerator {
  * CalendarPeriod is an abstract class that represents a period of date for calendar.
  */
 class CalendarPeriod {
-  constructor(count, current) {
+  constructor(count, current, timezone) {
     this._count = count;
-    this._current = current ? current : CalendarDate.from(new Date());
+    this._timezone = timezone || getSystemTimezone();
+    this._current = current ? current : CalendarDate.from(new Date(), this._timezone);
     this.calculatePeriod(this._current);
   }
   /**
@@ -1084,6 +1137,14 @@ class CalendarPeriod {
   get showWeekends() {
     return this._showWeekends;
   }
+  /**
+   * The timezone of the period.
+   *
+   * @type {string | undefined}
+   */
+  get timezone() {
+    return this._timezone;
+  }
   /**
    * Go to a specific date.
    *
@@ -1099,7 +1160,7 @@ class CalendarPeriod {
    * @returns {this} - The current period.
    */
   now() {
-    return this.createBy(CalendarDate.from(new Date()));
+    return this.createBy(CalendarDate.from(new Date(), this._timezone));
   }
   /**
    * Calculate the period start date and end date.
@@ -1181,8 +1242,8 @@ function getEventStatusBgColorStyle(color = 'bg-accent6-primary') {
  * Period of day.
  */
 class DayPeriod extends CalendarPeriod {
-  constructor(current, showWeekends) {
-    super(DayPeriod.DISPLAY_DATE_COUNT, current);
+  constructor(current, showWeekends, timezone) {
+    super(DayPeriod.DISPLAY_DATE_COUNT, current, timezone);
     this._type = 'day';
     this._showWeekends = true;
     this._showWeekends = showWeekends === false ? false : true;
@@ -1217,7 +1278,7 @@ class DayPeriod extends CalendarPeriod {
    * @returns {this} - The current period.
    */
   now() {
-    let calendarDate = CalendarDate.from(new Date());
+    let calendarDate = CalendarDate.from(new Date(), this.timezone);
     if (this._showWeekends === false) {
       calendarDate = getClosestWorkday(calendarDate);
     }
@@ -1227,7 +1288,7 @@ class DayPeriod extends CalendarPeriod {
    * @inheritDoc
    */
   createBy(current) {
-    return new DayPeriod(current, this._showWeekends);
+    return new DayPeriod(current, this._showWeekends, this.timezone);
   }
 }
 DayPeriod.DISPLAY_DATE_COUNT = 1;
@@ -1236,8 +1297,8 @@ DayPeriod.DISPLAY_DATE_COUNT = 1;
  * Period of the week
  */
 class WeekPeriod extends CalendarPeriod {
-  constructor(current, showWeekends) {
-    super(WeekPeriod.DISPLAY_DATE_COUNT, current);
+  constructor(current, showWeekends, timezone) {
+    super(WeekPeriod.DISPLAY_DATE_COUNT, current, timezone);
     this._type = 'week';
     this._showWeekends = true;
     this._showWeekends = showWeekends === false ? false : true;
@@ -1262,7 +1323,7 @@ class WeekPeriod extends CalendarPeriod {
    * @inheritDoc
    */
   createBy(current) {
-    return new WeekPeriod(current, this._showWeekends);
+    return new WeekPeriod(current, this._showWeekends, this.timezone);
   }
 }
 WeekPeriod.DISPLAY_DATE_COUNT = 7;
@@ -1271,8 +1332,8 @@ WeekPeriod.DISPLAY_DATE_COUNT = 7;
  * Period of month
  */
 class MonthPeriod extends CalendarPeriod {
-  constructor(current, showWeekends) {
-    super(MonthPeriod.DISPLAY_DATE_COUNT, current);
+  constructor(current, showWeekends, timezone) {
+    super(MonthPeriod.DISPLAY_DATE_COUNT, current, timezone);
     this._type = 'month';
     this._showWeekends = true;
     this._showWeekends = showWeekends === false ? false : true;
@@ -1283,12 +1344,13 @@ class MonthPeriod extends CalendarPeriod {
    * @param {CalendarDate} [calendarDate] - The `calendarDate` parameter is an optional parameter of
    * type `CalendarDate`. It represents a specific date in the calendar. If a `calendarDate` is
    * provided, the function will use that date to determine the first day of the month. If no
-   * `calendarDate` is provided, the function
+   * `calendarDate` is provided, the function will use the current date considering timezone.
+   * @param {string} [timezone] - The timezone to use when no calendarDate is provided
    * @returns {CalendarDate} A new `CalendarDate` object representing the first day of the month from the provided
    * `calendarDate` parameter or the current date if no parameter is provided.
    */
-  static getMonthFirstDay(calendarDate) {
-    const date = calendarDate || CalendarDate.from(new Date());
+  static getMonthFirstDay(calendarDate, timezone) {
+    const date = calendarDate || CalendarDate.from(new Date(), timezone);
     return new CalendarDate(date.year, date.month, 1);
   }
   /**
@@ -1324,12 +1386,12 @@ class MonthPeriod extends CalendarPeriod {
    * @inheritDoc
    */
   createBy(current) {
-    return new MonthPeriod(current, this._showWeekends);
+    return new MonthPeriod(current, this._showWeekends, this.timezone);
   }
 }
 MonthPeriod.DISPLAY_DATE_COUNT = 6 * 7;
 
-var __decorate$n = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$o = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1382,26 +1444,26 @@ class VegaCalendarViewController extends globalSlimmerRegistry.VegaSlimmer {
     this.calendarView = newView;
   }
 }
-__decorate$n([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaCalendarViewController.prototype, "calendarView", void 0);
-__decorate$n([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewController.prototype, "currentPeriod", void 0);
-__decorate$n([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewController.prototype, "showWeekends", void 0);
-__decorate$n([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewController.prototype, "currentPeriodController", void 0);
-__decorate$n([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaCalendarViewController.prototype, "initialCalendarView", null);
-__decorate$n([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentMethod('watchCurrentPeriodChange')
 ], VegaCalendarViewController.prototype, "generateCalendarView", null);
 
-var __decorate$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$n = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1426,14 +1488,14 @@ class VegaCalendarCurrentPeriodController extends globalSlimmerRegistry.VegaSlim
   updateCalendarPeriod(viewMode, date) {
     switch (viewMode) {
       case 'month':
-        this.setCurrentPeriod(new MonthPeriod(date, this.showWeekends));
+        this.setCurrentPeriod(new MonthPeriod(date, this.showWeekends, this.timezone));
         break;
       case 'week':
-        this.setCurrentPeriod(new WeekPeriod(date, this.showWeekends));
+        this.setCurrentPeriod(new WeekPeriod(date, this.showWeekends, this.timezone));
         break;
       case 'day':
         date = this.showWeekends === false ? getClosestWorkday(date) : date;
-        this.setCurrentPeriod(new DayPeriod(date, this.showWeekends));
+        this.setCurrentPeriod(new DayPeriod(date, this.showWeekends, this.timezone));
         break;
     }
   }
@@ -1442,7 +1504,7 @@ class VegaCalendarCurrentPeriodController extends globalSlimmerRegistry.VegaSlim
    * set default calendar view
    */
   initialCurrentPeriod() {
-    this.updateCalendarPeriod(this.viewMode, CalendarDate.from(new Date()));
+    this.updateCalendarPeriod(this.viewMode, CalendarDate.from(new Date(), this.timezone));
   }
   /**
    * emit period change event
@@ -1505,32 +1567,35 @@ class VegaCalendarCurrentPeriodController extends globalSlimmerRegistry.VegaSlim
     };
   }
 }
-__decorate$m([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaCalendarCurrentPeriodController.prototype, "currentPeriod", void 0);
-__decorate$m([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarCurrentPeriodController.prototype, "changeEventEmitter", void 0);
-__decorate$m([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaCalendarCurrentPeriodController.prototype, "viewMode", void 0);
-__decorate$m([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarCurrentPeriodController.prototype, "showWeekends", void 0);
-__decorate$m([
+__decorate$n([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarCurrentPeriodController.prototype, "timezone", void 0);
+__decorate$n([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaCalendarCurrentPeriodController.prototype, "initialCurrentPeriod", null);
-__decorate$m([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentMethod('watchCurrentPeriodChange')
 ], VegaCalendarCurrentPeriodController.prototype, "emitChangeEvent", null);
-__decorate$m([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentMethod('watchViewModeChange')
 ], VegaCalendarCurrentPeriodController.prototype, "updateCurrentPeriodByViewMode", null);
-__decorate$m([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentMethod('watchShowWeekendsChange')
 ], VegaCalendarCurrentPeriodController.prototype, "updateCurrentPeriodAfterHideWeekEndsChange", null);
 
-var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1603,9 +1668,11 @@ class VegaCalendarMonthEventRenderer extends globalSlimmerRegistry.VegaSlimmer {
    */
   addMaxDisplayCountChange() {
     domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, vegaInternalEventId.VegaInternalCalendarMonthEventsChange, (payload) => {
-      this.maxMonthDisplayEventsCount = payload.detail;
-      if (this.viewMode === 'month') {
-        index.forceUpdate(this.host);
+      if (this.maxMonthDisplayEventsCount !== payload.detail) {
+        this.maxMonthDisplayEventsCount = payload.detail;
+        if (this.viewMode === 'month') {
+          index.forceUpdate(this.host);
+        }
       }
     });
   }
@@ -1627,7 +1694,7 @@ class VegaCalendarMonthEventRenderer extends globalSlimmerRegistry.VegaSlimmer {
       });
       return (index.h("div", { class: "month-event-more" },
         index.h("vega-popover", { trigger: "click", placement: "right", padding: '0', ref: (el) => {
-            this.setPopoverHideObserver(el, events);
+            this.setPopoverHideObserver(el);
           }, isScreenPosition: true },
           index.h("div", { tabIndex: 0, slot: "popover-content", role: "button", class: "more-button", onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick() }, `${moreItemsLength} More`),
           index.h("vega-flex", { slot: "popover" },
@@ -1697,13 +1764,13 @@ class VegaCalendarMonthEventRenderer extends globalSlimmerRegistry.VegaSlimmer {
     }
     return rowEvents;
   }
-  setPopoverHideObserver(popover, events) {
+  setPopoverHideObserver(popover) {
     if (popover) {
-      this.popoverHideObserver = new observer.Observer((payload) => events.includes(payload), async () => await popover.hide());
-      changeManager.ChangeManager.register(staticSubjectTitle.CALENDAR_EVENT_PREVIEW_POPOVER_HIDE, this.popoverHideObserver);
+      this.popoverHideObserver = new observer.Observer((_payload) => true, async () => await popover.hide());
+      changeManager.ChangeManager.register(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalCalendarEventPreviewHide), this.popoverHideObserver);
     }
     else if (this.popoverHideObserver) {
-      changeManager.ChangeManager.unregister(staticSubjectTitle.CALENDAR_EVENT_PREVIEW_POPOVER_HIDE, this.popoverHideObserver);
+      changeManager.ChangeManager.unregister(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalCalendarEventPreviewHide), this.popoverHideObserver);
     }
     // we should clear current event in vega-calendar-event-preview when popover hide
     popover &&
@@ -1712,31 +1779,31 @@ class VegaCalendarMonthEventRenderer extends globalSlimmerRegistry.VegaSlimmer {
       });
   }
 }
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "viewMode", void 0);
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "host", void 0);
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "calendarEventController", void 0);
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "eventItemRenderer", void 0);
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "fullDayEventLayoutRenderer", void 0);
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "eventPreviewPopoverRenderer", void 0);
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "renderer", void 0);
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "eventPreviewPopoverController", void 0);
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaCalendarMonthEventRenderer.prototype, "addMaxDisplayCountChange", null);
 
@@ -2134,7 +2201,9 @@ class CalendarEventWeeklyRepeatPattern extends CalendarEventBaseRepeatPattern {
       const days = index - currentWeekDayIndex;
       const { year, month, date } = this.repeatStartDate;
       const dateItem = CalendarDate.from(new Date(year, month - 1, date + days));
-      result.push(dateItem);
+      if (!this.until || dateItem.toDate() <= this.until.toDate()) {
+        result.push(dateItem);
+      }
     });
     this.cache = [result];
   }
@@ -2306,27 +2375,25 @@ class CalendarEventRepeatPatternFactory {
    *
    * @param {Date} startDate repeat start date
    * @param {VegaCalendarEventRepeatOptions|undefined} repeatOptions repeat options
+   * @param {string} timezone The timezone identifier (e.g., America/New_York).
    * @returns {CalendarEventBaseRepeatPattern} the match repeat pattern
    */
-  getPattern(startDate, repeatOptions) {
+  getPattern(startDate, repeatOptions, timezone = getSystemTimezone()) {
     const repeatStartDate = CalendarDate.from(startDate);
     const { frequency, interval = 1, byWeekDay, until, count, } = repeatOptions;
-    const repeatEndDate = this.initDate(until);
+    const repeatEndDate = this.initDate(until, timezone);
     return this.initRepeatPattern(frequency, repeatStartDate, interval < 1 ? 1 : interval, count, repeatEndDate, byWeekDay);
   }
   /**
    * The `initDate` function initializes a `CalendarDate` object based on the input date string or Date object provided.
    *
    * @param {Nullable<string | Date>} date - The `date` parameter can be either a string or a Date object.
+   * @param {string} timezone The timezone identifier (e.g., 'America/New_York').
    * @returns {Nullable<CalendarDate>} The function `initDate` returns a `Nullable<CalendarDate>`, which means it can return either a `CalendarDate` object or `null`.
    */
-  initDate(date) {
-    if (date && typeof date === 'object') {
-      return CalendarDate.from(date);
-    }
-    else if (date && typeof date === 'string') {
-      const [month, day, year] = date.split('/');
-      return new CalendarDate(Number(year), Number(month), Number(day));
+  initDate(date, timezone) {
+    if (date) {
+      return CalendarDate.from(new Date(date), timezone);
     }
   }
   /**
@@ -2368,13 +2435,15 @@ class CalendarEvent {
    * @param {string} eventKey If a value is not provided for `eventKey`, a UUID (Universally
    * Unique Identifier) will be generated as a default value. This identifier is used to distinguish
    * different events and can be helpful for tracking
+   * @param {string} timezone - Optional timezone identifier for timezone-aware date calculations
    */
-  constructor(eventOptions, eventKey) {
+  constructor(eventOptions, eventKey, timezone) {
     // the default value is 1 when the event end date is same as start date
     this._eventSpansDays = 1;
     this.repeatPattern = null;
     this._event = eventOptions;
     this._eventKey = eventKey || createPublicApiRuntimeMetricsSlimmer.generateUUID();
+    this._timezone = timezone || getSystemTimezone();
     this.checkEventRequireField(eventOptions);
     this.initDate(eventOptions);
     this.initEventSpansDays();
@@ -2554,7 +2623,7 @@ class CalendarEvent {
   getEventDuration() {
     const [startHour, startMinutes] = this.startTime.split(':');
     const [endHour, endMinutes] = this.endTime.split(':');
-    const now = CalendarDate.from(new Date());
+    const now = CalendarDate.from(new Date(), this._timezone);
     const startDate = new Date(now.year, now.month, now.date, Number(startHour), Number(startMinutes));
     const endDate = new Date(now.year, now.month, now.date, Number(endHour) === 0 && Number(startHour) !== 0 ? 24 : Number(endHour), Number(endMinutes));
     return (endDate.valueOf() - startDate.valueOf()) / (60 * 1000);
@@ -2574,6 +2643,17 @@ class CalendarEvent {
     }
     return [];
   }
+  /**
+   * Refresh event dates and related properties when timezone changes
+   *
+   * @param {string} timezone - The new timezone to apply to the event
+   */
+  updateTimezone(timezone) {
+    this._timezone = timezone;
+    this.initDate(this._event);
+    this.initEventSpansDays();
+    this.initRepeatPattern();
+  }
   /**
    * The function `convertTimeTo24Hour` converts a time string from 12-hour format to 24-hour format in TypeScript.
    *
@@ -2631,42 +2711,164 @@ class CalendarEvent {
    */
   initDate(eventOptions) {
     const { startDate, startTime, endDate, endTime } = eventOptions;
+    const originalDateParts = this.processStartDate(startDate, startTime || '');
+    this._startTime = this.formatTimeForDisplay(this._startDate, startTime || '');
+    this.processEndDate(endDate || '', endTime || '', originalDateParts);
+    this._endTime = this.formatTimeForDisplay(this._endDate, endTime || '');
+  }
+  /**
+   * Process start date
+   *
+   * @param {string | Date} startDate - Start date (string or Date object)
+   * @param {string} startTime - Start time string
+   * @returns {DateParts | undefined} originalDateParts information
+   */
+  processStartDate(startDate, startTime) {
+    let originalDateParts;
+    let tempDate;
     if (startDate && typeof startDate === 'object') {
-      this._startDate = startDate;
+      originalDateParts = {
+        year: startDate.getFullYear(),
+        month: startDate.getMonth(),
+        date: startDate.getDate(),
+      };
+      tempDate = startDate;
     }
     else if (startDate && typeof startDate === 'string') {
       const [month, day, year] = startDate.split('/');
-      this._startDate = new Date(Number(year), Number(month) - 1, Number(day));
+      originalDateParts = {
+        year: Number(year),
+        month: Number(month) - 1,
+        date: Number(day),
+      };
+      tempDate = new Date(originalDateParts.year, originalDateParts.month, originalDateParts.date);
     }
-    if (!startTime) {
-      this._startTime = `${this._startDate.getHours()}:${this._startDate.getMinutes()}`;
+    if (startTime && originalDateParts && tempDate) {
+      const { timeHours, timeMinutes } = this.getCurrentHourAndMinutes(startTime);
+      tempDate = new Date(originalDateParts.year, originalDateParts.month, originalDateParts.date, timeHours, timeMinutes, 0);
     }
-    else {
-      this._startTime = this.convertTimeTo24Hour(startTime);
+    if (tempDate) {
+      this._startDate = this.convertDateToTimezone(tempDate);
     }
+    return originalDateParts;
+  }
+  /**
+   * Process end date
+   *
+   * @param {string | Date} endDate - End date (string or Date object)
+   * @param {string} endTime - End time string
+   * @param {DateParts | undefined} fallbackDateParts - Default date parts to use when endDate is empty
+   */
+  processEndDate(endDate, endTime, fallbackDateParts) {
+    let tempDate;
     if (endDate && typeof endDate === 'object') {
-      this._endDate = endDate;
+      tempDate = endDate;
     }
     else if (endDate && typeof endDate === 'string') {
       const [month, day, year] = endDate.split('/');
-      this._endDate = new Date(Number(year), Number(month) - 1, Number(day), 23, 59, 59);
+      tempDate = new Date(Number(year), Number(month) - 1, Number(day), 23, 59, 59);
     }
     else {
-      this._endDate = new Date(this._startDate.getFullYear(), this._startDate.getMonth(), this._startDate.getDate(), 23, 59, 59);
+      if (fallbackDateParts) {
+        tempDate = new Date(fallbackDateParts.year, fallbackDateParts.month, fallbackDateParts.date, 23, 59, 59);
+      }
     }
-    if (!endTime) {
-      this._endTime = `${this._endDate.getHours()}:${this._endDate.getMinutes()}`;
+    if (endTime && tempDate) {
+      const { timeHours, timeMinutes } = this.getCurrentHourAndMinutes(endTime, 23, 59);
+      tempDate = new Date(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate(), timeHours, timeMinutes, 59);
+    }
+    if (tempDate) {
+      this._endDate = this.convertDateToTimezone(tempDate);
+    }
+  }
+  /**
+   * Format time for display
+   *
+   * @param {Date} date - Date object
+   * @param {string} originalTime - Original time string
+   * @returns {string} Formatted time string
+   */
+  formatTimeForDisplay(date, originalTime) {
+    const shouldUseOriginalTime = Boolean(originalTime) && this._timezone === getSystemTimezone();
+    if (shouldUseOriginalTime) {
+      const convertedTime = this.convertTimeTo24Hour(originalTime);
+      const [hour, minutes] = convertedTime.split(':');
+      return `${date.getHours().toString().padStart(hour.length, '0')}:${date
+        .getMinutes()
+        .toString()
+        .padStart(minutes.length, '0')}`;
     }
     else {
-      this._endTime = this.convertTimeTo24Hour(endTime);
+      return `${date.getHours()}:${date.getMinutes()}`;
     }
   }
+  /**
+   * Parses a time string and extracts hour and minute values.
+   * If the time string is empty or invalid, returns the provided default values.
+   *
+   * @param {string} time - The time string to parse (e.g., "14:30", "2:30 PM")
+   * @param {number} defaultHours - Default hour value to use when time is empty (default: 0)
+   * @param {number} defaultMinutes - Default minute value to use when time is empty (default: 0)
+   * @returns {CalendarTimeHourMinutes} An object containing timeHours and timeMinutes as numbers
+   */
+  getCurrentHourAndMinutes(time, defaultHours = 0, defaultMinutes = 0) {
+    let timeHours = defaultHours;
+    let timeMinutes = defaultMinutes;
+    if (time) {
+      const timeString = this.convertTimeTo24Hour(time).split(':');
+      timeHours = Number(timeString[0]);
+      timeMinutes = Number(timeString[1]);
+    }
+    return { timeHours, timeMinutes };
+  }
+  /**
+   * Converts a Date object to the target timezone
+   *
+   * @param {Date} date - The Date object to convert
+   * @returns {Date} A Date object representing the date/time in the target timezone
+   */
+  convertDateToTimezone(date) {
+    if (this._timezone && this._timezone !== getSystemTimezone()) {
+      try {
+        const targetFormatter = new Intl.DateTimeFormat([], {
+          timeZone: this._timezone,
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit',
+          hour12: false,
+        });
+        const targetParts = targetFormatter.formatToParts(date);
+        const getYear = targetParts.find((part) => part.type === 'year');
+        const getMonth = targetParts.find((part) => part.type === 'month');
+        const getDay = targetParts.find((part) => part.type === 'day');
+        const getHour = targetParts.find((part) => part.type === 'hour');
+        const getMinute = targetParts.find((part) => part.type === 'minute');
+        const getSecond = targetParts.find((part) => part.type === 'second');
+        if (getYear && getMonth && getDay && getHour && getMinute && getSecond) {
+          const year = parseInt(getYear.value, 10);
+          const month = parseInt(getMonth.value, 10);
+          const day = parseInt(getDay.value, 10);
+          const hour = parseInt(getHour.value, 10);
+          const minute = parseInt(getMinute.value, 10);
+          const second = parseInt(getSecond.value, 10);
+          return new Date(year, month - 1, day, hour, minute, second);
+        }
+      }
+      catch (error) {
+        globalSlimmerRegistry.LogUtility.warn('Invalid timezone:', this._timezone);
+      }
+    }
+    return date;
+  }
   /**
    * The function initializes a repeat pattern controller for a calendar event with specified start and end dates and repeat options.
    */
   initRepeatPattern() {
     if (this._event.repeatOptions && this._event.repeatOptions.frequency) {
-      this.repeatPattern = calendarEventRepeatPatternFactory.getPattern(this._startDate, this._event.repeatOptions);
+      this.repeatPattern = calendarEventRepeatPatternFactory.getPattern(this._startDate, this._event.repeatOptions, this._timezone);
     }
   }
   /**
@@ -2680,7 +2882,7 @@ class CalendarEvent {
   }
 }
 
-var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2721,6 +2923,17 @@ class VegaCalendarEventController extends globalSlimmerRegistry.VegaSlimmer {
   updateWhenComponentWillLoad() {
     this.initCalendarEvents(this.events);
   }
+  /**
+   * Handle timezone changes by updating all calendar events
+   *
+   */
+  updateAfterTimezoneChange() {
+    if (this.calendarEvents.length > 0) {
+      this.calendarEvents.forEach((event) => event.updateTimezone(this.timezone));
+    }
+    changeManager.ChangeManager.notify(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalCalendarEventPreviewHide), {});
+    this.repeatEventMap.clear();
+  }
   /**
    * initial calendar events
    *
@@ -2731,7 +2944,7 @@ class VegaCalendarEventController extends globalSlimmerRegistry.VegaSlimmer {
     if (newEvents) {
       newEvents.forEach((item) => {
         try {
-          const calendarEvent = new CalendarEvent(item);
+          const calendarEvent = new CalendarEvent(item, undefined, this.timezone);
           result.push(calendarEvent);
         }
         catch (_a) {
@@ -2786,26 +2999,32 @@ class VegaCalendarEventController extends globalSlimmerRegistry.VegaSlimmer {
     }
   }
 }
-__decorate$k([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarEventController.prototype, "host", void 0);
-__decorate$k([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaCalendarEventController.prototype, "calendarEvents", void 0);
-__decorate$k([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarEventController.prototype, "currentPeriod", void 0);
-__decorate$k([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarEventController.prototype, "events", void 0);
-__decorate$k([
+__decorate$l([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarEventController.prototype, "timezone", void 0);
+__decorate$l([
   globalSlimmerRegistry.MapToComponentMethod('watchEventsChange')
 ], VegaCalendarEventController.prototype, "updateAfterEventChange", null);
-__decorate$k([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaCalendarEventController.prototype, "updateWhenComponentWillLoad", null);
+__decorate$l([
+  globalSlimmerRegistry.MapToComponentMethod('watchTimezoneChange')
+], VegaCalendarEventController.prototype, "updateAfterTimezoneChange", null);
 
-var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2822,7 +3041,7 @@ class VegaCalendarEventItemRenderer extends globalSlimmerRegistry.VegaSlimmer {
    * @returns {HTMLVegaCalendarEventElement} calendar event element
    */
   render(item, classMap, targetCalendarViewDate, isGroupEvent = false) {
-    return (index.h("vega-calendar-event", { "data-calendar-ref": this.host, key: item.eventKey, calendarEvent: item, class: classMap, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick(), 
+    return (index.h("vega-calendar-event", { "data-calendar-ref": this.host, key: `${item.eventKey}-${item.startTime}-${item.endTime}`, calendarEvent: item, class: classMap, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick(), 
       // eslint-disable-next-line react/jsx-no-bind
       onClick: () => {
         this.handleEventClick(item);
@@ -2871,29 +3090,29 @@ class VegaCalendarEventItemRenderer extends globalSlimmerRegistry.VegaSlimmer {
   }
 }
 VegaCalendarEventItemRenderer.backgroundColorModeEventHeight = 18;
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "host", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "calendarView", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "eventClickEmitter", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "timeFormat", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "enabledEventPreview", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "renderer", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "eventPreviewPopoverController", void 0);
 
-var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2945,23 +3164,23 @@ class VegaCalendarEventResponsiveController extends pageResizeObserverSlimmer.Pa
   }
 }
 VegaCalendarEventResponsiveController.monthDateTitleHeight = 26;
-__decorate$i([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarEventResponsiveController.prototype, "host", void 0);
-__decorate$i([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarEventResponsiveController.prototype, "monthEventRenderer", void 0);
-__decorate$i([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarEventResponsiveController.prototype, "viewMode", void 0);
-__decorate$i([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], VegaCalendarEventResponsiveController.prototype, "updateMaxDisplayCount", null);
-__decorate$i([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentMethod('watchViewModeChange')
 ], VegaCalendarEventResponsiveController.prototype, "updateMaxDisplayCountAfterSwitchToMonthView", null);
 
-var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -3026,26 +3245,26 @@ class VegaCalendarFullDayEventRenderer extends globalSlimmerRegistry.VegaSlimmer
   }
 }
 VegaCalendarFullDayEventRenderer.maxDisplayEventLength = 2;
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "calendarView", void 0);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "calendarEventController", void 0);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "eventItemRenderer", void 0);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "fullDayEventLayoutRenderer", void 0);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "showAllEventsInDayOrWeekView", void 0);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "dayViewFullDayEventMoreButtonRenderer", void 0);
 
-var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -3110,10 +3329,10 @@ class VegaCalendarDayViewEventLayoutRenderer extends globalSlimmerRegistry.VegaS
   }
 }
 VegaCalendarDayViewEventLayoutRenderer.totalNumberOfCells = 24 * 4;
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarDayViewEventLayoutRenderer.prototype, "eventItemRenderer", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarDayViewEventLayoutRenderer.prototype, "eventPreviewPopoverRenderer", void 0);
 
@@ -3399,7 +3618,7 @@ class VegaCalendarEventSorter {
   }
 }
 
-var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -3438,13 +3657,13 @@ class VegaCalendarTimedEventRenderer extends globalSlimmerRegistry.VegaSlimmer {
     return this.dayViewEventLayoutRenderer.render(layout, date);
   }
 }
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarTimedEventRenderer.prototype, "calendarView", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarTimedEventRenderer.prototype, "calendarEventController", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarTimedEventRenderer.prototype, "dayViewEventLayoutRenderer", void 0);
 
@@ -3613,7 +3832,7 @@ class VegaCalendarFullDayEventLayoutGenerator extends VegaCalendarBaseEventLayou
   }
 }
 
-var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -3698,20 +3917,20 @@ class VegaCalendarFullDayEventLayoutRenderer extends globalSlimmerRegistry.VegaS
   }
 }
 VegaCalendarFullDayEventLayoutRenderer.monthViewEventOffsetTop = 26;
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarFullDayEventLayoutRenderer.prototype, "eventItemRenderer", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarFullDayEventLayoutRenderer.prototype, "viewMode", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarFullDayEventLayoutRenderer.prototype, "calendarView", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarFullDayEventLayoutRenderer.prototype, "eventPreviewPopoverRenderer", void 0);
 
-var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -3748,14 +3967,14 @@ class VegaCalendarFullDayEventMoreButtonRenderer extends globalSlimmerRegistry.V
     this.showAllEventsInDayOrWeekView = false;
   }
 }
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaCalendarFullDayEventMoreButtonRenderer.prototype, "showAllEventsInDayOrWeekView", void 0);
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentMethod('watchViewModeChange')
 ], VegaCalendarFullDayEventMoreButtonRenderer.prototype, "resetShowAllFlag", null);
 
-var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -3772,13 +3991,13 @@ class VegaCalendarTimeMarkerRenderer extends globalSlimmerRegistry.VegaSlimmer {
    * @returns {HTMLElement} the html element
    */
   render(source) {
-    const isVisible = source.findIndex((calendarDate) => calendarDate.isToday()) >= 0;
+    const isVisible = source.findIndex((calendarDate) => calendarDate.isToday(this.timezone)) >= 0;
     return (index.h("div", { class: {
         'time-marker-container': true,
         'hidden': !isVisible,
       } },
       index.h("div", { class: "time-marker", style: { top: this.getTimeMarkerPosition() }, ref: (div) => (this.timeMarkerRef = div) }, source.map((item) => {
-        return index.h("div", { key: item.date, class: { active: item.isToday() } });
+        return index.h("div", { key: item.date, class: { active: item.isToday(this.timezone) } });
       }))));
   }
   /**
@@ -3816,6 +4035,27 @@ class VegaCalendarTimeMarkerRenderer extends globalSlimmerRegistry.VegaSlimmer {
   getTimeMarkerPosition() {
     const now = new Date();
     const minutesOneDay = 24 * 60;
+    if (this.timezone && this.timezone !== getSystemTimezone()) {
+      try {
+        const formatter = new Intl.DateTimeFormat([], {
+          timeZone: this.timezone,
+          hour: '2-digit',
+          minute: '2-digit',
+          hour12: false,
+        });
+        const parts = formatter.formatToParts(now);
+        const hourPart = parts.find((part) => part.type === 'hour');
+        const minutePart = parts.find((part) => part.type === 'minute');
+        if (hourPart !== undefined && minutePart !== undefined) {
+          const hours = parseInt(hourPart.value, 10);
+          const minutes = parseInt(minutePart.value, 10);
+          return ((hours * 60 + minutes) / minutesOneDay) * 100 + '%';
+        }
+      }
+      catch (_a) {
+        globalSlimmerRegistry.LogUtility.warn('Invalid timezone:', this.timezone);
+      }
+    }
     return ((now.getHours() * 60 + now.getMinutes()) / minutesOneDay) * 100 + '%';
   }
   /*
@@ -3884,11 +4124,11 @@ class VegaCalendarTimeMarkerRenderer extends globalSlimmerRegistry.VegaSlimmer {
     const calendarViewElement = this.viewRenderer.getCalendarViewElementRef();
     if (calendarViewElement) {
       const fixedWeekHeader = calendarViewElement.querySelector('.calendar-view-title-container');
-      const weekHeaderHeight = fixedWeekHeader.offsetHeight;
-      const viewHeight = calendarViewElement.offsetHeight;
+      const weekHeaderHeight = fixedWeekHeader ? fixedWeekHeader.offsetHeight : 0;
+      const viewHeight = typeof calendarViewElement.offsetHeight === 'number' ? calendarViewElement.offsetHeight : 0;
       const displayViewHeight = Math.max(viewHeight - weekHeaderHeight, 0);
       const halfDisplayViewHeight = displayViewHeight / 2;
-      const viewScrollHeight = calendarViewElement.scrollHeight;
+      const viewScrollHeight = typeof calendarViewElement.scrollHeight === 'number' ? calendarViewElement.scrollHeight : 0;
       const emptySpace = 16;
       const timeMarkerTop = (Number(this.getTimeMarkerPosition().replace('%', '')) / 100) *
         Math.max(viewScrollHeight - emptySpace - weekHeaderHeight, 0);
@@ -3899,26 +4139,29 @@ class VegaCalendarTimeMarkerRenderer extends globalSlimmerRegistry.VegaSlimmer {
     return 0;
   }
 }
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarTimeMarkerRenderer.prototype, "viewMode", void 0);
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarTimeMarkerRenderer.prototype, "viewRenderer", void 0);
-__decorate$c([
+__decorate$d([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarTimeMarkerRenderer.prototype, "timezone", void 0);
+__decorate$d([
   globalSlimmerRegistry.MapToComponentMethod('watchViewModeChange')
 ], VegaCalendarTimeMarkerRenderer.prototype, "updateTimeLine", null);
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaCalendarTimeMarkerRenderer.prototype, "clearTimer", null);
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaCalendarTimeMarkerRenderer.prototype, "updateTimeLineIfComponentAddBack", null);
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], VegaCalendarTimeMarkerRenderer.prototype, "displayCurrentTimeBlockByDefault", null);
 
-var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -3956,6 +4199,13 @@ class VegaCalendarPostOperationDateController extends globalSlimmerRegistry.Vega
       }
     }
   }
+  /**
+   * Handle timezone changes by updating postOperationDate
+   *
+   */
+  updateAfterTimezoneChange() {
+    this.postOperationDate = CalendarDate.from(new Date(), this.timezone);
+  }
   /**
    * Check if the first date should be set
    * Both the new and old values are of the month type.
@@ -3968,17 +4218,23 @@ class VegaCalendarPostOperationDateController extends globalSlimmerRegistry.Vega
   shouldSetCurrentDateToFirstDayOfMonth(newValue, oldValue) {
     return (newValue.type === 'month' &&
       (oldValue === null || oldValue === void 0 ? void 0 : oldValue.type) === 'month' &&
-      !newValue.current.equal(CalendarDate.from(new Date())));
+      !newValue.current.equal(CalendarDate.from(new Date(), this.timezone)));
   }
 }
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaCalendarPostOperationDateController.prototype, "postOperationDate", void 0);
-__decorate$b([
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarPostOperationDateController.prototype, "timezone", void 0);
+__decorate$c([
   globalSlimmerRegistry.MapToComponentMethod('watchCurrentPeriodChange')
 ], VegaCalendarPostOperationDateController.prototype, "setDate", null);
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentMethod('watchTimezoneChange')
+], VegaCalendarPostOperationDateController.prototype, "updateAfterTimezoneChange", null);
 
-var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -3999,7 +4255,7 @@ class VegaCalendarEventPreviewPopoverRenderer extends globalSlimmerRegistry.Vega
         'event-preview-popover': true,
         'block': true,
       }, padding: "0", size: VegaCalendarEventPreviewPopoverRenderer.SINGLE_EVENT_PREVIEW_WIDTH, ref: (el) => {
-        this.setPopoverHideObserver(el, event);
+        this.setPopoverHideObserver(el);
       } },
       index.h("div", { slot: "popover-content", class: "event-preview-popover-content" }, this.eventItemRenderer.render(event, classMap, targetCalendarViewDate)),
       index.h("div", { slot: "popover" },
@@ -4009,39 +4265,45 @@ class VegaCalendarEventPreviewPopoverRenderer extends globalSlimmerRegistry.Vega
               : this.eventPreviewPopoverController.deleteEventPreviewContainer(event, targetCalendarViewDate);
           } }))));
   }
-  setPopoverHideObserver(popover, event) {
+  setPopoverHideObserver(popover) {
     if (popover) {
-      this.popoverHideObserver = new observer.Observer((payload) => event === payload, async () => await popover.hide());
-      changeManager.ChangeManager.register(staticSubjectTitle.CALENDAR_EVENT_PREVIEW_POPOVER_HIDE, this.popoverHideObserver);
+      this.popoverHideObserver = new observer.Observer((_payload) => true, async () => await popover.hide());
+      changeManager.ChangeManager.register(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalCalendarEventPreviewHide), this.popoverHideObserver);
     }
     else if (this.popoverHideObserver) {
-      changeManager.ChangeManager.unregister(staticSubjectTitle.CALENDAR_EVENT_PREVIEW_POPOVER_HIDE, this.popoverHideObserver);
+      changeManager.ChangeManager.unregister(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalCalendarEventPreviewHide), this.popoverHideObserver);
     }
   }
 }
 VegaCalendarEventPreviewPopoverRenderer.SINGLE_EVENT_PREVIEW_WIDTH = 400;
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarEventPreviewPopoverRenderer.prototype, "host", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarEventPreviewPopoverRenderer.prototype, "renderer", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarEventPreviewPopoverRenderer.prototype, "viewMode", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarEventPreviewPopoverRenderer.prototype, "timeFormat", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarEventPreviewPopoverRenderer.prototype, "eventItemRenderer", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarEventPreviewPopoverRenderer.prototype, "enabledEventPreview", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarEventPreviewPopoverRenderer.prototype, "eventPreviewPopoverController", void 0);
 
+var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 /** Event preview popover controller */
 class VegaCalendarEventPreviewPopoverController extends globalSlimmerRegistry.VegaSlimmer {
   constructor() {
@@ -4098,6 +4360,14 @@ class VegaCalendarEventPreviewPopoverController extends globalSlimmerRegistry.Ve
       }
     }
   }
+  /**
+   *  clear all preview container maps when timezone changes
+   *
+   */
+  clearAllPreviewContainers() {
+    this.singleEventPreviewContainerMap.clear();
+    this.groupEventsPreviewContainerMap.clear();
+  }
   /**
    * Generate a unique key for the given events
    *
@@ -4124,6 +4394,9 @@ class VegaCalendarEventPreviewPopoverController extends globalSlimmerRegistry.Ve
     return `-${viewDate.year}-${viewDate.month}-${viewDate.date}`;
   }
 }
+__decorate$a([
+  globalSlimmerRegistry.MapToComponentMethod('watchTimezoneChange')
+], VegaCalendarEventPreviewPopoverController.prototype, "clearAllPreviewContainers", null);
 
 const vegaCalendarCss = ".border-divider-top{border:1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1));border-left-width:0px;border-right-width:0px;border-bottom-width:0px}.border-divider-top.disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}.border-divider-left{border:1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1));border-top-width:0px;border-right-width:0px;border-bottom-width:0px}.border-divider-left.disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}.border-divider-right{border:1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1));border-top-width:0px;border-left-width:0px;border-bottom-width:0px}.border-divider-bottom{border:1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1));border-top-width:0px;border-left-width:0px;border-right-width:0px}:host{display:flex;flex-direction:column;border-radius:12px;border:1px solid rgba(var(--v-border-divider, 171, 198, 216, 1));background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));overflow:hidden;width:100%;height:100%;box-sizing:border-box;max-height:1966px}.calendar-switch-panel{padding:24px;border-bottom-width:1px;border-top-width:0px;border-left-width:0px;border-right-width:0px;border-style:solid;border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));flex-shrink:0;width:100%;box-sizing:border-box}.calendar-switch-panel .calendar-date-switch-container{display:flex;gap:8px;align-items:center;flex-direction:row}.calendar-switch-panel .calendar-view-switch-container{display:flex;gap:16px;align-items:center;flex-direction:row}.calendar-switch-panel .calendar-current-date{padding-left:8px}.calendar-view{width:100%;position:relative;flex-grow:1;overflow-y:auto;overflow-x:hidden;--calendar-weekday-columns:7}.calendar-view.calendar-hide-weekends{--calendar-weekday-columns:5}.calendar-view-month .calendar-view-month-container{width:100%;display:grid;min-height:100%;grid-template-rows:43px repeat(6, minmax(64px, 1fr))}.calendar-view-month .calendar-view-title{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));top:0;left:0;z-index:62}.calendar-view-month .calendar-view-title div{padding-top:12px;padding-bottom:12px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;text-align:center}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-month .calendar-view-title div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-month .calendar-view-title div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-month .calendar-view-title div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}.calendar-view-month .calendar-view-row{position:relative;display:grid;grid-template-rows:1fr;grid-template-columns:repeat(var(--calendar-weekday-columns), minmax(64px, 1fr))}.calendar-view-month .calendar-view-row.calendar-view-title{position:sticky}.calendar-view-month .calendar-view-row:last-child{border-bottom-width:0px}.calendar-view-month .calendar-view-row .row-cell{overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}.calendar-view-month .calendar-view-row .row-cell:last-child{border-right-width:0px}.calendar-view-month .calendar-view-row .row-cell .date{padding-top:4px;padding-bottom:4px;padding-right:12px;padding-left:8px}.calendar-view-month .calendar-view-row .row-cell .date>div{display:inline-block;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-month .calendar-view-row .row-cell .date>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-month .calendar-view-row .row-cell .date>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-month .calendar-view-row .row-cell .date>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}.calendar-view-month .calendar-view-row .row-cell .date .month-block{margin-right:2px}.calendar-view-month .calendar-view-row .row-cell .date .grid-col{text-align:center;border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-top-right-radius:9999px;border-bottom-right-radius:9999px;cursor:pointer;width:18px;height:18px;line-height:18px}.calendar-view-month .calendar-view-row .row-cell .date .grid-col:hover{background-color:rgba(var(--v-bg-action-secondary-hover, 4, 112, 236, 0.1))}.calendar-view-month .calendar-view-row .row-cell .date .grid-col:active{background-color:rgba(var(--v-bg-action-secondary-active, 29, 65, 195, 0.1))}.calendar-view-month .calendar-view-row .row-cell .date .grid-col:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px}.calendar-view-month .calendar-view-row .row-cell.current-month-day .date>div{color:rgba(var(--v-text-primary, 32, 54, 69, 1))}.calendar-view-month .calendar-view-row .row-cell.disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}.calendar-view-month .calendar-view-row .row-cell.disabled .date>div{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}.calendar-view-month .calendar-view-row .row-cell.active .date .grid-col{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1));border-top-left-radius:9999px;border-bottom-left-radius:9999px;color:rgba(var(--v-text-on-action, 252, 252, 252, 1))}.calendar-view-month .calendar-view-row .row-cell.active .date .grid-col:hover{background-color:rgba(var(--v-bg-action-hover, 4, 112, 236, 1))}.calendar-view-month .calendar-view-row .row-cell.active .date .grid-col:active{background-color:rgba(var(--v-bg-action-active, 29, 65, 195, 1))}.calendar-view-month .calendar-view-row .row-cell.active .date .grid-col:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px}.calendar-view-container{width:100%}.calendar-view-container .calendar-view-title-container{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));position:sticky;top:0;left:0;z-index:62}.calendar-view-container .calendar-view-row{box-sizing:border-box;width:100%;display:flex;flex-direction:row}.calendar-view-container .calendar-view-row .time-line,.calendar-view-container .calendar-view-row .time-line-empty,.calendar-view-container .calendar-view-row .time-line-all{width:72px;text-align:right;padding-right:8px;box-sizing:border-box;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));flex-shrink:0}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-container .calendar-view-row .time-line,.calendar-view-container .calendar-view-row .time-line-empty,.calendar-view-container .calendar-view-row .time-line-all{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-container .calendar-view-row .time-line,.calendar-view-container .calendar-view-row .time-line-empty,.calendar-view-container .calendar-view-row .time-line-all{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-container .calendar-view-row .time-line,.calendar-view-container .calendar-view-row .time-line-empty,.calendar-view-container .calendar-view-row .time-line-all{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}.calendar-view-container .calendar-view-title{width:100%}.calendar-view-container .calendar-view-title>div{padding:12px;padding-bottom:8px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;text-align:center;display:flex;flex-direction:column;gap:8px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-container .calendar-view-title>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-container .calendar-view-title>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-container .calendar-view-title>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}.calendar-view-container .calendar-view-title .week-day{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-container .calendar-view-title .week-day{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-container .calendar-view-title .week-day{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-container .calendar-view-title .week-day{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}.calendar-view-container .calendar-view-title .active div{color:rgba(var(--v-text-link, 19, 98, 226, 1))}.calendar-view-container .calendar-view-event-all-container{align-items:center}.calendar-view-container .calendar-view-event-all{display:grid;grid-template-rows:1fr;flex-grow:1;min-height:18px}.calendar-view-container .calendar-view-day-container .time-line{display:grid;grid-template-rows:16px repeat(24, minmax(74px, 1fr))}.calendar-view-container .calendar-view-day-container .time-line .time-text{margin-top:-9px}.calendar-view-container .calendar-view-day-container .calendar-view-content{width:100%}.calendar-view-container .calendar-view-day-container .calendar-view-content .grid-col{display:grid;grid-template-rows:16px repeat(24, minmax(74px, 1fr));grid-template-columns:minmax(64px, 1fr)}.calendar-view-container .calendar-view-day-container .calendar-view-content .grid-col>.border-divider-top:first-child{border-top-width:0px}.calendar-view-container .calendar-view-content-container{width:100%;position:relative}.calendar-view-week .calendar-view-container{min-height:100%}.calendar-view-week .calendar-view-container .calendar-view-title{display:grid;grid-template-rows:1fr;grid-template-columns:repeat(var(--calendar-weekday-columns), minmax(64px, 1fr))}.calendar-view-week .calendar-view-container .calendar-view-event-all{grid-template-columns:repeat(var(--calendar-weekday-columns), minmax(64px, 1fr))}.calendar-view-week .calendar-view-container .calendar-view-day-container .calendar-view-content{display:grid;grid-template-columns:repeat(var(--calendar-weekday-columns), minmax(64px, 1fr))}.calendar-view-week .time-marker-container .time-marker{display:grid;grid-template-columns:repeat(var(--calendar-weekday-columns), minmax(64px, 1fr))}.calendar-view-week .day-event-container{display:grid;grid-template-columns:repeat(var(--calendar-weekday-columns), minmax(64px, 1fr))}.calendar-view-day .calendar-view-container{min-height:100%}.time-marker-container{position:absolute;min-width:100%;left:0;top:16px;height:calc(100% - 16px);pointer-events:none}.time-marker-container.hidden{display:none}.time-marker-container .time-marker{position:absolute;height:2px;display:grid;min-width:100%;left:0;top:0;z-index:61}.time-marker-container .time-marker div{width:100%;height:2px;background-color:rgba(var(--v-bg-status-error, 255, 110, 139, 1));opacity:0.3}.time-marker-container .time-marker div.active{opacity:1;position:relative}.time-marker-container .time-marker div.active::before{content:\"\";display:block;border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-top-right-radius:9999px;border-bottom-right-radius:9999px;position:absolute;width:8px;height:8px;background-color:rgba(var(--v-bg-status-error, 255, 110, 139, 1));top:-3px;left:-4px}.day-event-container{position:absolute;min-width:100%;left:0;top:16px;height:calc(100% - 16px);pointer-events:none}.day-event-container .day-event-col{height:100%;overflow:hidden}.day-event-container vega-calendar-event{pointer-events:auto;height:100%}.calendar-view-month .month-event-row{position:absolute;width:100%;overflow:hidden;height:calc(100% - 26px);left:0;bottom:0}.calendar-view-month .events-container{width:100%;box-sizing:border-box;overflow:hidden;padding:2px;display:flex;flex-direction:column;gap:2px;justify-content:space-between;flex-grow:1}.calendar-view-month .events-container .event-list{display:flex;flex-direction:column;gap:2px;flex-grow:1}.calendar-view-month .events-container .event-list .month-event-block{box-sizing:border-box;padding-left:2px;padding-right:3px}.calendar-view-month .events-container .month-event-more .more-button{display:inline-block;height:16px;font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px;color:rgba(var(--v-text-link, 19, 98, 226, 1));cursor:pointer;border-radius:2px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-month .events-container .month-event-more .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-month .events-container .month-event-more .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-month .events-container .month-event-more .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}.calendar-view-month .events-container .month-event-more .more-button:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:0px}.calendar-view-container .calendar-view-event-all{position:relative}.calendar-view-container .calendar-view-event-all .placeholder-block{padding-top:2px;padding-bottom:2px;box-sizing:content-box}.calendar-view-container .calendar-view-event-all .placeholder-block span{display:none}.calendar-view-container .calendar-view-event-all .day-event-block{padding-top:2px;padding-right:2px;box-sizing:border-box;padding-left:3px}.calendar-view-container .calendar-view-event-all .more-button{display:inline-block;height:16px;font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px;color:rgba(var(--v-text-link, 19, 98, 226, 1));cursor:pointer;border-radius:2px;margin-left:2px;padding:2px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-container .calendar-view-event-all .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-container .calendar-view-event-all .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-container .calendar-view-event-all .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}.calendar-view-container .calendar-view-event-all .more-button:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:0px}.calendar-view-container .calendar-view-event-all .event-all-col{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}.calendar-view-container .day-event-col{position:relative}.calendar-view-container .day-event-col .time-event-block{box-sizing:border-box;padding-right:8px;padding-bottom:2px;padding-top:3px}.calendar-view-container .day-event-col .time-event-block vega-calendar-event.bg-shadow::part(event-container):not(:focus){outline:2px solid rgba(var(--v-bg-primary, 252, 252, 252, 1))}.calendar-view-container .day-event-col .time-event-block:focus-within{z-index:60 !important}.calendar-event-slot-container{display:none}.event-preview-popover{height:100%}.event-preview-popover.block{display:block}.event-preview-popover .event-preview-popover-content{height:100%}";
 
@@ -4189,7 +4462,7 @@ const VegaCalendar = class {
      *
      * @type {CalendarDate}
      */
-    this.postOperationDate = CalendarDate.from(new Date());
+    this.postOperationDate = this.getInitialPostOperationDate();
     this.showAllEventsInDayOrWeekView = false;
     this.calendarEvents = [];
     /**
@@ -4248,6 +4521,15 @@ const VegaCalendar = class {
      * @vegaVersion 2.59.0
      */
     this.enabledEventPreview = true;
+    /**
+     * Specifies the IANA time zone or Etc/GMT±n format.
+     *  It accepts values such as "America/New_York" or "Etc/GMT+12".
+     *  If not set, the component defaults to the system's time zone.
+     *  For a complete list of IANA time zones, see Time Zone DB(https://timezonedb.com/time-zones).
+     *
+     * @vegaVersion 2.65.0
+     */
+    this.timezone = getSystemTimezone();
   }
   /**
    * Tracks changes to the current period state.
@@ -4290,9 +4572,20 @@ const VegaCalendar = class {
    */
   watchShowWeekendsChange() {
   }
+  /**
+   * Monitors changes in the timezone prop for the calendar.
+   */
+  watchTimezoneChange() {
+  }
   render() {
     return component.sanitizeVegaComponent(index.h(index.Host, null, this.renderer.render()), this.host);
   }
+  /**
+   * Get initial post operation date considering timezone
+   */
+  getInitialPostOperationDate() {
+    return CalendarDate.from(new Date(), this.timezone);
+  }
   get host() { return index.getElement(this); }
   static get watchers() { return {
     "currentPeriod": ["watchCurrentPeriodChange"],
@@ -4300,7 +4593,8 @@ const VegaCalendar = class {
     "events": ["watchEventsChange"],
     "timeFormat": ["watchTimeFormat"],
     "showEventColorBar": ["watchShowEventColorBar"],
-    "showWeekends": ["watchShowWeekendsChange"]
+    "showWeekends": ["watchShowWeekendsChange"],
+    "timezone": ["watchTimezoneChange"]
   }; }
 };
 __decorate$9([
@@ -4858,6 +5152,9 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 class VegaCalendarEventPreviewDetailRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  componentWillLoad() {
+    this.calendarRef = ui.findParent(this.host, 'vega-calendar');
+  }
   render() {
     return (this.currentEvent && (index.h("vega-box", { class: "event-preview" },
       this.injectBackgroundColorStyle(),
@@ -4872,9 +5169,7 @@ class VegaCalendarEventPreviewDetailRenderer extends globalSlimmerRegistry.VegaS
     return (index.h("vega-flex", { justifyContent: "end", class: "preview-actions" },
       index.h("vega-button-circle", { icon: internalIconManager.VegaInternalIconManager.getIconKey('close'), color: "text-primary", variant: "icon-only", 
         /* eslint-disable-next-line react/jsx-no-bind */
-        onVegaClick: () => {
-          changeManager.ChangeManager.notify(staticSubjectTitle.CALENDAR_EVENT_PREVIEW_POPOVER_HIDE, this.currentEvent);
-        } })));
+        onVegaClick: this.onHidePopover.bind(this) })));
   }
   renderBasicFields() {
     const currentEvent = this.currentEvent;
@@ -4886,6 +5181,10 @@ class VegaCalendarEventPreviewDetailRenderer extends globalSlimmerRegistry.VegaS
           index.h("vega-font", { variant: "font-footnote1-long", color: "text-primary" }, currentEvent.generateDateTimeString(this.previewPayload.targetCalendarViewDate, this.previewPayload.timeFormat)),
           currentEvent.isRepeatEvent && (index.h("vega-font", { variant: "font-footnote1-long", color: "text-primary" }, currentEvent.generateRepeatString()))))));
   }
+  onHidePopover() {
+    this.calendarRef &&
+      changeManager.ChangeManager.notify(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.calendarRef, vegaInternalEventId.VegaInternalCalendarEventPreviewHide), {});
+  }
   renderEventTitle() {
     const currentEvent = this.currentEvent;
     const eventSlotName = getCalendarEventSlotName(currentEvent.event.key);
@@ -4924,6 +5223,9 @@ __decorate$2([
 __decorate$2([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarEventPreviewDetailRenderer.prototype, "currentEvent", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
+], VegaCalendarEventPreviewDetailRenderer.prototype, "componentWillLoad", null);
 
 const vegaCalendarEventPreviewCss = ":host(.single-event-preview) .event-preview{width:398px;box-sizing:border-box}:host(.single-event-preview) .preview-actions{padding-top:4px;padding-left:4px;padding-right:4px}:host(.single-event-preview) .preview-content{margin-bottom:24px;margin-left:12px;margin-right:12px;padding-left:12px;padding-right:12px}:host(.group-event-preview) .event-preview{width:320px;box-sizing:border-box;height:100%}:host(.group-event-preview) .event-preview{border:1px solid rgba(var(--v-border-divider, 171, 198, 216, 1));border-right-width:0px;border-top-width:0px;border-bottom-width:0px;border-left-width:1px;border-left-style:solid}:host(.group-event-preview) .preview-actions{padding-top:4px;padding-left:4px;padding-right:4px}:host(.group-event-preview) .preview-content{margin-bottom:16px;margin-left:12px;margin-right:12px;padding-left:4px;padding-right:4px}:host .preview-content{max-height:60vh;overflow-y:auto}:host .event-bg-color{width:12px;height:12px;margin-top:8px;position:relative}:host .event-bg-color.event-bg-disabled{background-color:rgba(var(--v-bg-disabled, 176, 180, 181, 1))}:host .event-bg-color span{display:block;position:absolute;top:0px;left:0px;opacity:0.8}:host .event-bg-color span.event-color-dot-secondary{width:100%;height:100%;background-size:4px 4px;background-image:linear-gradient(-45deg, transparent 25%, rgba(var(--v-bg-primary, 252, 252, 252, 1)) 25% 50%, transparent 50% 75%, rgba(var(--v-bg-primary, 252, 252, 252, 1)) 75% 100%)}:host .event-bg-color span.event-color-dot-tertiary{width:calc(100% - 2px);height:calc(100% - 2px);top:1px;left:1px;border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-top-right-radius:9999px;border-bottom-right-radius:9999px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));opacity:1}";