@globalpayments/vega 2.64.0 → 2.65.0

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

@@ -1,34 +1,34 @@
 import { h, F as Fragment, f as forceUpdate, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-090d31ca.js';
 import { s as sanitizeVegaComponent } from './component-7d906393.js';
-import { c as MapToComponentField, V as VegaSlimmer, M as MapToComponentMethod, L as LogUtility, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
+import { c as MapToComponentField, V as VegaSlimmer, L as LogUtility, M as MapToComponentMethod, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-a84cc93e.js';
-import { D as DomNodeSubjectObserverFactory, a as VegaClick, f as VegaChange, V as VegaDropdownClick, d as domNodeSubjectFactory, Q as VegaPopoverHide, g as VegaEventClick, h as VegaDateDblClick, i as VegaMoreActionClick, j as VegaDateClick } from './dom-node-subject-observer-factory-c7bc3035.js';
+import { D as DomNodeSubjectObserverFactory, a as VegaClick, f as VegaChange, V as VegaDropdownClick, d as domNodeSubjectFactory, Q as VegaPopoverHide, g as VegaEventClick, h as VegaDateDblClick, i as VegaMoreActionClick, j as VegaDateClick } from './dom-node-subject-observer-factory-ed4b89f4.js';
 import { a as VegaInternalIconManager } from './internal-icon-manager-f0486245.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
 import { p as pad } from './date-c55b97f0.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-3922d816.js';
-import { V as VegaInternalTranslation } from './translation-3d35961b.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-000ca6a7.js';
+import { V as VegaInternalTranslation } from './translation-f10b1e19.js';
 import { s as stateBackgroundColorFormatter } from './state-background-color-formatter-0f01d27a.js';
 import { q as isBackgroundColorTokenType } from './type-guard-12f7654b.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-7fe3dc57.js';
-import { w as VegaInternalCalendarMonthEventsChange, x as VegaInternalCalendarEventPreviewHide, y as VegaInternalCalendarEventPreviewClear, z as VegaInternalCalendarEventPreviewUpdate } from './vega-internal-event-id-bee7946b.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-f32efdee.js';
+import { y as VegaInternalCalendarMonthEventsChange, z as VegaInternalCalendarEventPreviewHide, A as VegaInternalCalendarEventPreviewClear, B as VegaInternalCalendarEventPreviewUpdate } from './vega-internal-event-id-5c3e5f7f.js';
 import { O as Observer } from './observer-3959f9dd.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
 import { f as flatNestedArray } from './array-7888f339.js';
 import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-bedf3a1e.js';
 import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-0bf7fbf3.js';
 import { d as debounce } from './timer-9321173b.js';
-import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-85c658b7.js';
-import { T as TranslationSlimmer } from './translation-slimmer-d5b0d292.js';
+import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-8b3b15ee.js';
+import { T as TranslationSlimmer } from './translation-slimmer-984c9ce6.js';
 import { s as slotPlaceholder } from './placeholder-bf562081.js';
 import { v as vegaNonceManager } from './vega-nonce-manager-87615d3c.js';
-import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-e58a2485.js';
+import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-2b98e2c9.js';
 import { b as parsePixelStringToNumber } from './pixel-f32c07ce.js';
-import { f as findParent } from './ui-c20be16d.js';
+import { f as findParent } from './ui-bb99c0c2.js';
 import './dynamic-slimmer-90b8af32.js';
-import './internal-vega-event-manager-cb06e987.js';
+import './internal-vega-event-manager-13e3ed3d.js';
 import './try-get-document-bef0f526.js';
-import './static-subject-title-ca83d6b6.js';
+import './static-subject-title-52f93124.js';
 import './breakpoints-d9faf11c.js';
 import './ui-8424715a.js';
 import './typography-396de03f.js';
@@ -38,7 +38,7 @@ import './index-e9da316f.js';
 import './_commonjsHelpers-9943807e.js';
 import './number-4398f2e1.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;
@@ -63,13 +63,13 @@ class VegaCalendarRenderer extends VegaSlimmer {
         } })));
   }
 }
-__decorate$u([
+__decorate$v([
   MapToComponentField()
 ], VegaCalendarRenderer.prototype, "host", void 0);
-__decorate$u([
+__decorate$v([
   MapToComponentField()
 ], VegaCalendarRenderer.prototype, "switchPanelRenderer", void 0);
-__decorate$u([
+__decorate$v([
   MapToComponentField()
 ], VegaCalendarRenderer.prototype, "viewRenderer", void 0);
 
@@ -85,7 +85,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;
@@ -243,38 +243,38 @@ VegaCalendarSwitchPanelRenderer.views = [
   { text: 'Week', key: 'week' },
   { text: 'Month', key: 'month' },
 ];
-__decorate$t([
+__decorate$u([
   MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "viewMode", void 0);
-__decorate$t([
+__decorate$u([
   MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "calendarView", void 0);
-__decorate$t([
+__decorate$u([
   MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "currentPeriod", void 0);
-__decorate$t([
+__decorate$u([
   MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "moreActionDropdownProps", void 0);
-__decorate$t([
+__decorate$u([
   MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "moreActionClickEmitter", void 0);
-__decorate$t([
+__decorate$u([
   MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "currentPeriodController", void 0);
-__decorate$t([
+__decorate$u([
   MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "calendarViewController", void 0);
-__decorate$t([
+__decorate$u([
   MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "translationSlimmer", void 0);
-__decorate$t([
+__decorate$u([
   MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "postOperationDate", void 0);
-__decorate$t([
+__decorate$u([
   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;
@@ -301,20 +301,20 @@ class VegaCalendarViewRenderer extends VegaSlimmer {
       : this.viewWithTimeRenderer.render()));
   }
 }
-__decorate$s([
+__decorate$t([
   MapToComponentField()
 ], VegaCalendarViewRenderer.prototype, "viewMode", void 0);
-__decorate$s([
+__decorate$t([
   MapToComponentField()
 ], VegaCalendarViewRenderer.prototype, "showWeekends", void 0);
-__decorate$s([
+__decorate$t([
   MapToComponentField()
 ], VegaCalendarViewRenderer.prototype, "monthViewRenderer", void 0);
-__decorate$s([
+__decorate$t([
   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;
@@ -385,17 +385,17 @@ class VegaCalendarDateBlockRenderer extends VegaSlimmer {
     return result;
   }
 }
-__decorate$r([
+__decorate$s([
   MapToComponentField()
 ], VegaCalendarDateBlockRenderer.prototype, "enableDateClick", void 0);
-__decorate$r([
+__decorate$s([
   MapToComponentField()
 ], VegaCalendarDateBlockRenderer.prototype, "dateClickEmitter", void 0);
-__decorate$r([
+__decorate$s([
   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;
@@ -452,7 +452,7 @@ class VegaCalendarMonthViewRenderer extends VegaCalendarDateBlockRenderer {
         return (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),
@@ -517,32 +517,35 @@ class VegaCalendarMonthViewRenderer extends VegaCalendarDateBlockRenderer {
     return !element.classList.contains('more-button') && element.tagName !== 'VEGA-CALENDAR-EVENT';
   }
 }
-__decorate$q([
+__decorate$r([
   MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "viewMode", void 0);
-__decorate$q([
+__decorate$r([
   MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "calendarView", void 0);
-__decorate$q([
+__decorate$r([
   MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "currentPeriod", void 0);
-__decorate$q([
+__decorate$r([
   MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "currentPeriodController", void 0);
-__decorate$q([
+__decorate$r([
   MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "monthEventRenderer", void 0);
-__decorate$q([
+__decorate$r([
   MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "translationSlimmer", void 0);
-__decorate$q([
+__decorate$r([
   MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "isDateDisabled", void 0);
-__decorate$q([
+__decorate$r([
   MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "showSwitchView", void 0);
+__decorate$r([
+  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;
@@ -590,7 +593,7 @@ class VegaCalendarViewWithTimeRenderer extends VegaCalendarDateBlockRenderer {
     return (h("div", { class: "calendar-view-title-container" },
       h("div", { class: "calendar-view-row" },
         h("div", { class: "time-line-empty" }),
-        h("div", { class: "calendar-view-title" }, source.map((item, index) => (h("div", { key: item.date, class: { active: item.isToday() } },
+        h("div", { class: "calendar-view-title" }, source.map((item, index) => (h("div", { key: item.date, class: { active: item.isToday(this.timezone) } },
           h("div", null, this.translationSlimmer.t(weekHead[index])),
           h("div", { class: "week-day" }, item.date)))))),
       h("div", { class: "calendar-view-row calendar-view-event-all-container border-divider-bottom" },
@@ -643,35 +646,38 @@ class VegaCalendarViewWithTimeRenderer extends VegaCalendarDateBlockRenderer {
     });
   }
 }
-__decorate$p([
+__decorate$q([
   MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "viewMode", void 0);
-__decorate$p([
+__decorate$q([
   MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "timeLineRenderer", void 0);
-__decorate$p([
+__decorate$q([
   MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "timeMarkerRenderer", void 0);
-__decorate$p([
+__decorate$q([
   MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "dayViewTimedEventRenderer", void 0);
-__decorate$p([
+__decorate$q([
   MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "dayViewFullDayEventRenderer", void 0);
-__decorate$p([
+__decorate$q([
   MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "calendarView", void 0);
-__decorate$p([
+__decorate$q([
   MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "translationSlimmer", void 0);
-__decorate$p([
+__decorate$q([
   MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "isDateDisabled", void 0);
-__decorate$p([
+__decorate$q([
   MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "enableDateClick", void 0);
+__decorate$q([
+  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;
@@ -718,7 +724,7 @@ class VegaCalendarTimeLineRenderer extends VegaSlimmer {
     return timeLine;
   }
 }
-__decorate$o([
+__decorate$p([
   MapToComponentField()
 ], VegaCalendarTimeLineRenderer.prototype, "timeFormat", void 0);
 
@@ -769,6 +775,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) {
+      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.
@@ -861,11 +912,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
@@ -903,13 +956,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
@@ -986,7 +1038,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));
@@ -1027,9 +1079,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);
   }
   /**
@@ -1080,6 +1133,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.
    *
@@ -1095,7 +1156,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.
@@ -1177,8 +1238,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;
@@ -1213,7 +1274,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);
     }
@@ -1223,7 +1284,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;
@@ -1232,8 +1293,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;
@@ -1258,7 +1319,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;
@@ -1267,8 +1328,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;
@@ -1279,12 +1340,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);
   }
   /**
@@ -1320,12 +1382,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;
@@ -1378,26 +1440,26 @@ class VegaCalendarViewController extends VegaSlimmer {
     this.calendarView = newView;
   }
 }
-__decorate$n([
+__decorate$o([
   MapToComponentField({ writable: true })
 ], VegaCalendarViewController.prototype, "calendarView", void 0);
-__decorate$n([
+__decorate$o([
   MapToComponentField()
 ], VegaCalendarViewController.prototype, "currentPeriod", void 0);
-__decorate$n([
+__decorate$o([
   MapToComponentField()
 ], VegaCalendarViewController.prototype, "showWeekends", void 0);
-__decorate$n([
+__decorate$o([
   MapToComponentField()
 ], VegaCalendarViewController.prototype, "currentPeriodController", void 0);
-__decorate$n([
+__decorate$o([
   MapToComponentMethod('componentWillLoad')
 ], VegaCalendarViewController.prototype, "initialCalendarView", null);
-__decorate$n([
+__decorate$o([
   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;
@@ -1422,14 +1484,14 @@ class VegaCalendarCurrentPeriodController extends VegaSlimmer {
   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;
     }
   }
@@ -1438,7 +1500,7 @@ class VegaCalendarCurrentPeriodController extends VegaSlimmer {
    * 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
@@ -1501,32 +1563,35 @@ class VegaCalendarCurrentPeriodController extends VegaSlimmer {
     };
   }
 }
-__decorate$m([
+__decorate$n([
   MapToComponentField({ writable: true })
 ], VegaCalendarCurrentPeriodController.prototype, "currentPeriod", void 0);
-__decorate$m([
+__decorate$n([
   MapToComponentField()
 ], VegaCalendarCurrentPeriodController.prototype, "changeEventEmitter", void 0);
-__decorate$m([
+__decorate$n([
   MapToComponentField({ writable: true })
 ], VegaCalendarCurrentPeriodController.prototype, "viewMode", void 0);
-__decorate$m([
+__decorate$n([
   MapToComponentField()
 ], VegaCalendarCurrentPeriodController.prototype, "showWeekends", void 0);
-__decorate$m([
+__decorate$n([
+  MapToComponentField()
+], VegaCalendarCurrentPeriodController.prototype, "timezone", void 0);
+__decorate$n([
   MapToComponentMethod('componentWillLoad')
 ], VegaCalendarCurrentPeriodController.prototype, "initialCurrentPeriod", null);
-__decorate$m([
+__decorate$n([
   MapToComponentMethod('watchCurrentPeriodChange')
 ], VegaCalendarCurrentPeriodController.prototype, "emitChangeEvent", null);
-__decorate$m([
+__decorate$n([
   MapToComponentMethod('watchViewModeChange')
 ], VegaCalendarCurrentPeriodController.prototype, "updateCurrentPeriodByViewMode", null);
-__decorate$m([
+__decorate$n([
   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;
@@ -1599,9 +1664,11 @@ class VegaCalendarMonthEventRenderer extends VegaSlimmer {
    */
   addMaxDisplayCountChange() {
     DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, VegaInternalCalendarMonthEventsChange, (payload) => {
-      this.maxMonthDisplayEventsCount = payload.detail;
-      if (this.viewMode === 'month') {
-        forceUpdate(this.host);
+      if (this.maxMonthDisplayEventsCount !== payload.detail) {
+        this.maxMonthDisplayEventsCount = payload.detail;
+        if (this.viewMode === 'month') {
+          forceUpdate(this.host);
+        }
       }
     });
   }
@@ -1708,31 +1775,31 @@ class VegaCalendarMonthEventRenderer extends VegaSlimmer {
       });
   }
 }
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "viewMode", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "host", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "calendarEventController", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "eventItemRenderer", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "fullDayEventLayoutRenderer", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "eventPreviewPopoverRenderer", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "renderer", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "eventPreviewPopoverController", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentMethod('componentWillLoad')
 ], VegaCalendarMonthEventRenderer.prototype, "addMaxDisplayCountChange", null);
 
@@ -2130,7 +2197,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];
   }
@@ -2302,27 +2371,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);
     }
   }
   /**
@@ -2364,13 +2431,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 || generateUUID();
+    this._timezone = timezone || getSystemTimezone();
     this.checkEventRequireField(eventOptions);
     this.initDate(eventOptions);
     this.initEventSpansDays();
@@ -2550,7 +2619,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);
@@ -2570,6 +2639,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.
    *
@@ -2627,42 +2707,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 && 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);
     }
-    if (!endTime) {
-      this._endTime = `${this._endDate.getHours()}:${this._endDate.getMinutes()}`;
+  }
+  /**
+   * 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) {
+        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);
     }
   }
   /**
@@ -2676,7 +2878,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;
@@ -2717,6 +2919,17 @@ class VegaCalendarEventController extends 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.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalCalendarEventPreviewHide), {});
+    this.repeatEventMap.clear();
+  }
   /**
    * initial calendar events
    *
@@ -2727,7 +2940,7 @@ class VegaCalendarEventController extends 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) {
@@ -2782,26 +2995,32 @@ class VegaCalendarEventController extends VegaSlimmer {
     }
   }
 }
-__decorate$k([
+__decorate$l([
   MapToComponentField()
 ], VegaCalendarEventController.prototype, "host", void 0);
-__decorate$k([
+__decorate$l([
   MapToComponentField({ writable: true })
 ], VegaCalendarEventController.prototype, "calendarEvents", void 0);
-__decorate$k([
+__decorate$l([
   MapToComponentField()
 ], VegaCalendarEventController.prototype, "currentPeriod", void 0);
-__decorate$k([
+__decorate$l([
   MapToComponentField()
 ], VegaCalendarEventController.prototype, "events", void 0);
-__decorate$k([
+__decorate$l([
+  MapToComponentField()
+], VegaCalendarEventController.prototype, "timezone", void 0);
+__decorate$l([
   MapToComponentMethod('watchEventsChange')
 ], VegaCalendarEventController.prototype, "updateAfterEventChange", null);
-__decorate$k([
+__decorate$l([
   MapToComponentMethod('componentWillLoad')
 ], VegaCalendarEventController.prototype, "updateWhenComponentWillLoad", null);
+__decorate$l([
+  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;
@@ -2818,7 +3037,7 @@ class VegaCalendarEventItemRenderer extends VegaSlimmer {
    * @returns {HTMLVegaCalendarEventElement} calendar event element
    */
   render(item, classMap, targetCalendarViewDate, isGroupEvent = false) {
-    return (h("vega-calendar-event", { "data-calendar-ref": this.host, key: item.eventKey, calendarEvent: item, class: classMap, onKeyDown: createEnterKeyHandlerToTriggerClick(), 
+    return (h("vega-calendar-event", { "data-calendar-ref": this.host, key: `${item.eventKey}-${item.startTime}-${item.endTime}`, calendarEvent: item, class: classMap, onKeyDown: createEnterKeyHandlerToTriggerClick(), 
       // eslint-disable-next-line react/jsx-no-bind
       onClick: () => {
         this.handleEventClick(item);
@@ -2867,29 +3086,29 @@ class VegaCalendarEventItemRenderer extends VegaSlimmer {
   }
 }
 VegaCalendarEventItemRenderer.backgroundColorModeEventHeight = 18;
-__decorate$j([
+__decorate$k([
   MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "host", void 0);
-__decorate$j([
+__decorate$k([
   MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "calendarView", void 0);
-__decorate$j([
+__decorate$k([
   MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "eventClickEmitter", void 0);
-__decorate$j([
+__decorate$k([
   MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "timeFormat", void 0);
-__decorate$j([
+__decorate$k([
   MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "enabledEventPreview", void 0);
-__decorate$j([
+__decorate$k([
   MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "renderer", void 0);
-__decorate$j([
+__decorate$k([
   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;
@@ -2941,23 +3160,23 @@ class VegaCalendarEventResponsiveController extends PageResizeObserverSlimmer {
   }
 }
 VegaCalendarEventResponsiveController.monthDateTitleHeight = 26;
-__decorate$i([
+__decorate$j([
   MapToComponentField()
 ], VegaCalendarEventResponsiveController.prototype, "host", void 0);
-__decorate$i([
+__decorate$j([
   MapToComponentField()
 ], VegaCalendarEventResponsiveController.prototype, "monthEventRenderer", void 0);
-__decorate$i([
+__decorate$j([
   MapToComponentField()
 ], VegaCalendarEventResponsiveController.prototype, "viewMode", void 0);
-__decorate$i([
+__decorate$j([
   MapToComponentMethod('componentDidLoad')
 ], VegaCalendarEventResponsiveController.prototype, "updateMaxDisplayCount", null);
-__decorate$i([
+__decorate$j([
   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;
@@ -3022,26 +3241,26 @@ class VegaCalendarFullDayEventRenderer extends VegaSlimmer {
   }
 }
 VegaCalendarFullDayEventRenderer.maxDisplayEventLength = 2;
-__decorate$h([
+__decorate$i([
   MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "calendarView", void 0);
-__decorate$h([
+__decorate$i([
   MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "calendarEventController", void 0);
-__decorate$h([
+__decorate$i([
   MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "eventItemRenderer", void 0);
-__decorate$h([
+__decorate$i([
   MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "fullDayEventLayoutRenderer", void 0);
-__decorate$h([
+__decorate$i([
   MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "showAllEventsInDayOrWeekView", void 0);
-__decorate$h([
+__decorate$i([
   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;
@@ -3106,10 +3325,10 @@ class VegaCalendarDayViewEventLayoutRenderer extends VegaSlimmer {
   }
 }
 VegaCalendarDayViewEventLayoutRenderer.totalNumberOfCells = 24 * 4;
-__decorate$g([
+__decorate$h([
   MapToComponentField()
 ], VegaCalendarDayViewEventLayoutRenderer.prototype, "eventItemRenderer", void 0);
-__decorate$g([
+__decorate$h([
   MapToComponentField()
 ], VegaCalendarDayViewEventLayoutRenderer.prototype, "eventPreviewPopoverRenderer", void 0);
 
@@ -3395,7 +3614,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;
@@ -3434,13 +3653,13 @@ class VegaCalendarTimedEventRenderer extends VegaSlimmer {
     return this.dayViewEventLayoutRenderer.render(layout, date);
   }
 }
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], VegaCalendarTimedEventRenderer.prototype, "calendarView", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], VegaCalendarTimedEventRenderer.prototype, "calendarEventController", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], VegaCalendarTimedEventRenderer.prototype, "dayViewEventLayoutRenderer", void 0);
 
@@ -3609,7 +3828,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;
@@ -3694,20 +3913,20 @@ class VegaCalendarFullDayEventLayoutRenderer extends VegaSlimmer {
   }
 }
 VegaCalendarFullDayEventLayoutRenderer.monthViewEventOffsetTop = 26;
-__decorate$e([
+__decorate$f([
   MapToComponentField()
 ], VegaCalendarFullDayEventLayoutRenderer.prototype, "eventItemRenderer", void 0);
-__decorate$e([
+__decorate$f([
   MapToComponentField()
 ], VegaCalendarFullDayEventLayoutRenderer.prototype, "viewMode", void 0);
-__decorate$e([
+__decorate$f([
   MapToComponentField()
 ], VegaCalendarFullDayEventLayoutRenderer.prototype, "calendarView", void 0);
-__decorate$e([
+__decorate$f([
   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;
@@ -3744,14 +3963,14 @@ class VegaCalendarFullDayEventMoreButtonRenderer extends VegaSlimmer {
     this.showAllEventsInDayOrWeekView = false;
   }
 }
-__decorate$d([
+__decorate$e([
   MapToComponentField({ writable: true })
 ], VegaCalendarFullDayEventMoreButtonRenderer.prototype, "showAllEventsInDayOrWeekView", void 0);
-__decorate$d([
+__decorate$e([
   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;
@@ -3768,13 +3987,13 @@ class VegaCalendarTimeMarkerRenderer extends 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 (h("div", { class: {
         'time-marker-container': true,
         'hidden': !isVisible,
       } },
       h("div", { class: "time-marker", style: { top: this.getTimeMarkerPosition() }, ref: (div) => (this.timeMarkerRef = div) }, source.map((item) => {
-        return h("div", { key: item.date, class: { active: item.isToday() } });
+        return h("div", { key: item.date, class: { active: item.isToday(this.timezone) } });
       }))));
   }
   /**
@@ -3812,6 +4031,27 @@ class VegaCalendarTimeMarkerRenderer extends 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) {
+        LogUtility.warn('Invalid timezone:', this.timezone);
+      }
+    }
     return ((now.getHours() * 60 + now.getMinutes()) / minutesOneDay) * 100 + '%';
   }
   /*
@@ -3880,11 +4120,11 @@ class VegaCalendarTimeMarkerRenderer extends 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);
@@ -3895,26 +4135,29 @@ class VegaCalendarTimeMarkerRenderer extends VegaSlimmer {
     return 0;
   }
 }
-__decorate$c([
+__decorate$d([
   MapToComponentField()
 ], VegaCalendarTimeMarkerRenderer.prototype, "viewMode", void 0);
-__decorate$c([
+__decorate$d([
   MapToComponentField()
 ], VegaCalendarTimeMarkerRenderer.prototype, "viewRenderer", void 0);
-__decorate$c([
+__decorate$d([
+  MapToComponentField()
+], VegaCalendarTimeMarkerRenderer.prototype, "timezone", void 0);
+__decorate$d([
   MapToComponentMethod('watchViewModeChange')
 ], VegaCalendarTimeMarkerRenderer.prototype, "updateTimeLine", null);
-__decorate$c([
+__decorate$d([
   MapToComponentMethod('disconnectedCallback')
 ], VegaCalendarTimeMarkerRenderer.prototype, "clearTimer", null);
-__decorate$c([
+__decorate$d([
   MapToComponentMethod('connectedCallback')
 ], VegaCalendarTimeMarkerRenderer.prototype, "updateTimeLineIfComponentAddBack", null);
-__decorate$c([
+__decorate$d([
   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;
@@ -3952,6 +4195,13 @@ class VegaCalendarPostOperationDateController extends VegaSlimmer {
       }
     }
   }
+  /**
+   * 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.
@@ -3964,17 +4214,23 @@ class VegaCalendarPostOperationDateController extends VegaSlimmer {
   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([
   MapToComponentField({ writable: true })
 ], VegaCalendarPostOperationDateController.prototype, "postOperationDate", void 0);
-__decorate$b([
+__decorate$c([
+  MapToComponentField()
+], VegaCalendarPostOperationDateController.prototype, "timezone", void 0);
+__decorate$c([
   MapToComponentMethod('watchCurrentPeriodChange')
 ], VegaCalendarPostOperationDateController.prototype, "setDate", null);
+__decorate$c([
+  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;
@@ -4016,28 +4272,34 @@ class VegaCalendarEventPreviewPopoverRenderer extends VegaSlimmer {
   }
 }
 VegaCalendarEventPreviewPopoverRenderer.SINGLE_EVENT_PREVIEW_WIDTH = 400;
-__decorate$a([
+__decorate$b([
   MapToComponentField()
 ], VegaCalendarEventPreviewPopoverRenderer.prototype, "host", void 0);
-__decorate$a([
+__decorate$b([
   MapToComponentField()
 ], VegaCalendarEventPreviewPopoverRenderer.prototype, "renderer", void 0);
-__decorate$a([
+__decorate$b([
   MapToComponentField()
 ], VegaCalendarEventPreviewPopoverRenderer.prototype, "viewMode", void 0);
-__decorate$a([
+__decorate$b([
   MapToComponentField()
 ], VegaCalendarEventPreviewPopoverRenderer.prototype, "timeFormat", void 0);
-__decorate$a([
+__decorate$b([
   MapToComponentField()
 ], VegaCalendarEventPreviewPopoverRenderer.prototype, "eventItemRenderer", void 0);
-__decorate$a([
+__decorate$b([
   MapToComponentField()
 ], VegaCalendarEventPreviewPopoverRenderer.prototype, "enabledEventPreview", void 0);
-__decorate$a([
+__decorate$b([
   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 VegaSlimmer {
   constructor() {
@@ -4094,6 +4356,14 @@ class VegaCalendarEventPreviewPopoverController extends VegaSlimmer {
       }
     }
   }
+  /**
+   *  clear all preview container maps when timezone changes
+   *
+   */
+  clearAllPreviewContainers() {
+    this.singleEventPreviewContainerMap.clear();
+    this.groupEventsPreviewContainerMap.clear();
+  }
   /**
    * Generate a unique key for the given events
    *
@@ -4120,6 +4390,9 @@ class VegaCalendarEventPreviewPopoverController extends VegaSlimmer {
     return `-${viewDate.year}-${viewDate.month}-${viewDate.date}`;
   }
 }
+__decorate$a([
+  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%}";
 
@@ -4185,7 +4458,7 @@ const VegaCalendar = class {
      *
      * @type {CalendarDate}
      */
-    this.postOperationDate = CalendarDate.from(new Date());
+    this.postOperationDate = this.getInitialPostOperationDate();
     this.showAllEventsInDayOrWeekView = false;
     this.calendarEvents = [];
     /**
@@ -4244,6 +4517,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.
@@ -4286,9 +4568,20 @@ const VegaCalendar = class {
    */
   watchShowWeekendsChange() {
   }
+  /**
+   * Monitors changes in the timezone prop for the calendar.
+   */
+  watchTimezoneChange() {
+  }
   render() {
     return sanitizeVegaComponent(h(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 getElement(this); }
   static get watchers() { return {
     "currentPeriod": ["watchCurrentPeriodChange"],
@@ -4296,7 +4589,8 @@ const VegaCalendar = class {
     "events": ["watchEventsChange"],
     "timeFormat": ["watchTimeFormat"],
     "showEventColorBar": ["watchShowEventColorBar"],
-    "showWeekends": ["watchShowWeekendsChange"]
+    "showWeekends": ["watchShowWeekendsChange"],
+    "timezone": ["watchTimezoneChange"]
   }; }
 };
 __decorate$9([