@progressive-development/pd-calendar 0.9.2 → 1.0.0

package/dist/pd-calendar/PdCalendar.js

@@ -1,11 +1,14 @@
-import { css, LitElement, html } from 'lit';
+import { css, LitElement, nothing, html } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { msg, localized } from '@lit/localize';
-import { format } from 'fecha';
+import { localized } from '@lit/localize';
 import '@progressive-development/pd-icon/pd-icon';
-import './pd-year-popup/pd-year-popup.js';
-import './pd-calendar-cell/pd-calendar-cell.js';
-import { PdYearPopup } from './pd-year-popup/PdYearPopup.js';
+import { LOCALES } from '../shared/calendar-locales.js';
+import './pd-calendar-month-view/pd-calendar-month-view.js';
+import './pd-calendar-list-view/pd-calendar-list-view.js';
+import './pd-calendar-time-grid-view/pd-calendar-time-grid-view.js';
+import './pd-calendar-event-info-panel/pd-calendar-event-info-panel.js';
+import './pd-calendar-day-events-panel/pd-calendar-day-events-panel.js';
+import '../shared/calendar-button-bar/calendar-button-bar.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -17,41 +20,6 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const TOUCH_MIN_MOVE = 70;
-const loadLocales = () => ({
-  monthNames: [
-    msg("Januar", { id: "pd.datepicker.month.jan" }),
-    msg("Februar", { id: "pd.datepicker.month.feb" }),
-    msg("März", { id: "pd.datepicker.month.mar" }),
-    msg("April", { id: "pd.datepicker.month.apr" }),
-    msg("Mai", { id: "pd.datepicker.month.may" }),
-    msg("Juni", { id: "pd.datepicker.month.jun" }),
-    msg("Juli", { id: "pd.datepicker.month.jul" }),
-    msg("August", { id: "pd.datepicker.month.aug" }),
-    msg("September", { id: "pd.datepicker.month.sep" }),
-    msg("Oktober", { id: "pd.datepicker.month.oct" }),
-    msg("November", { id: "pd.datepicker.month.nov" }),
-    msg("Dezember", { id: "pd.datepicker.month.dec" })
-  ],
-  weekdaysShort: [
-    msg("Mo", { id: "pd.datepicker.shortday.mon" }),
-    msg("Di", { id: "pd.datepicker.shortday.tue" }),
-    msg("Mi", { id: "pd.datepicker.shortday.wed" }),
-    msg("Do", { id: "pd.datepicker.shortday.thi" }),
-    msg("Fr", { id: "pd.datepicker.shortday.fri" }),
-    msg("Sa", { id: "pd.datepicker.shortday.sat" }),
-    msg("So", { id: "pd.datepicker.shortday.sun" })
-  ]
-});
-const LOCALES = loadLocales();
-const VIEW_MONTH = 2;
-function isToday(date) {
-  const today = /* @__PURE__ */ new Date();
-  return !!date && date.getDate() === today.getDate() && date.getMonth() === today.getMonth() && date.getFullYear() === today.getFullYear();
-}
-function isSelected(date1, date2) {
-  return !!date1 && !!date2 && date1.getDate() === date2.getDate() && date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
-}
 let PdCalendar = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -65,120 +33,225 @@ let PdCalendar = class extends LitElement {
     this.nextMonthConstraint = -1;
     this.data = {};
     this.numberClass = "top-left";
-    this._viewType = VIEW_MONTH;
+    this.cellType = "simple";
+    this._infoPanelDateKey = "";
+    this._dayEventsPanelDateKey = "";
+    this._currentViewType = "dayGrid";
     this._currentDate = /* @__PURE__ */ new Date();
-    this._wheelDelta = 0;
     this._monthName = "";
     this._year = 0;
     this._numberOfDays = 0;
-    this._daysFromPreviousMonth = [];
     this._currentMonthNavNr = 0;
   }
   connectedCallback() {
     super.connectedCallback();
-    this._initFromDate(this.refDate ?? /* @__PURE__ */ new Date());
+    const initDate = this.refDate ?? /* @__PURE__ */ new Date();
+    this._initFromDate(initDate);
+    this._currentWeekStart = this._getMonday(initDate);
   }
   update(changedProperties) {
     if (changedProperties.has("refDate") && this.refDate) {
       this._initFromDate(this.refDate);
+      this._currentWeekStart = this._getMonday(this.refDate);
+    }
+    if (changedProperties.has("availableViewTypes") && this.availableViewTypes) {
+      const defaultIndex = this.availableViewTypes.default ?? 0;
+      const defaultViewType = this.availableViewTypes.viewTypes[defaultIndex];
+      if (defaultViewType) {
+        this._currentViewType = defaultViewType;
+      }
     }
     super.update(changedProperties);
   }
   render() {
+    const hideButtonBar = !this.availableViewTypes || this.availableViewTypes.viewTypes.length <= 1;
+    const isRangeMode = this._currentViewType === "list" && !!this.listRange;
+    const isWeekView = this._currentViewType === "timeGrid";
+    const title = isRangeMode ? this._formatRangeTitle() : isWeekView ? this._formatWeekTitle() : this._monthName;
+    const year = isRangeMode || isWeekView ? 0 : this._year;
+    const hidePrev = isWeekView ? false : !this._checkPrevMonthConstraint();
+    const hideNext = isWeekView ? false : !this._checkNextMonthConstraint();
     return html`
-      ${this.renderMonthCalendar()}
-      <slot name="calFooter"></slot>
-    `;
-  }
-  renderMonthCalendar() {
-    const sizeClass = this._numberOfDays >= 31 && this._daysFromPreviousMonth.length >= 5 ? "max" : "normal";
-    const days = Array.from({ length: this._numberOfDays }, (_, i) => {
-      const day = i + 1;
-      const date = new Date(this._year, this._currentDate.getMonth(), day);
-      if (this.hideWeekend && [0, 6].includes(date.getDay())) return null;
-      const key = format(date, "YYYY-MM-DD");
-      const cellData = this.data ? this.data[key]?.[0] : void 0;
-      return html`
-        <pd-calendar-cell
-          key=${key}
-          .dayNumber=${day}
-          .weekDayNumber=${date.getDay()}
-          .infoTxt=${cellData?.info || ""}
-          ?selectEnabled=${this.selectableDates || !!cellData?.info}
-          ?special=${cellData?.special ?? false}
-          .numberClass=${this.numberClass}
-          ?today=${this.selectableDates && isToday(date)}
-          ?selected=${this.showSelection && isSelected(this.refDate, date)}
-        ></pd-calendar-cell>
-      `;
-    });
-    return html`
-      <div class="layout-container">
+      <div
+        class="layout-container"
+        @select-event="${this._handleSelectEvent}"
+        @show-day-events="${this._handleShowDayEvents}"
+      >
         <div class="header">
           <div class="header-main">
-            <div class="icon-container">
-              <pd-icon
-                class="arrow"
-                icon="previousArrow"
-                activeIcon
-                @click=${this._previousMonth}
-              ></pd-icon>
-              <pd-icon
-                class="arrow"
-                icon="nextArrow"
-                activeIcon
-                @click=${this._nextMonth}
-              ></pd-icon>
-            </div>
-            <div id="titleContentId" class="content-title">
-              ${this._monthName}
-              ${this.withYearPopup.length > 0 ? html`<span
-                    class="year-popup-link"
-                    @click=${this._openYearPopup}
-                    >${this._year}</span
-                  >` : this._year}
-            </div>
+            <calendar-button-bar
+              ?hideButtonBar="${hideButtonBar}"
+              year="${year}"
+              currentTitle="${title}"
+              .currentDate="${this._currentDate}"
+              .withYearPopup="${isRangeMode || isWeekView ? [] : this.withYearPopup}"
+              .availableViewTypes="${this.availableViewTypes ?? {
+      viewTypes: ["dayGrid"],
+      default: 0
+    }}"
+              .availablePeriods="${{
+      periods: ["Month"],
+      default: 0
+    }}"
+              ?hideNavigation="${isRangeMode}"
+              ?hidePrev="${hidePrev}"
+              ?hideNext="${hideNext}"
+              @pd-calendar-navigation="${this._handleNavigationEvent}"
+              @pd-calendar-change-view="${this._handleViewChange}"
+            ></calendar-button-bar>
           </div>
         </div>
 
-        <div
-          class="content grid-container ${sizeClass}"
-          @wheel=${this._wheelEvent}
-          @touchstart=${this._touchStartEvent}
-          @touchend=${this._touchEndEvent}
-        >
-          ${this._getWeekDays().map(
-      (day) => html`<div class="title-week-day">${day}</div>`
-    )}
-          ${this._daysFromPreviousMonth.map(
-      () => html`<div class="cell cell-empty"></div>`
-    )}
-          ${days}
-        </div>
+        ${this._currentViewType === "list" ? html`
+              <pd-calendar-list-view
+                .data="${this.data}"
+                .config="${this.config}"
+                .refDate="${this.refDate}"
+                .currentDate="${this._currentDate}"
+                .listRange="${this.listRange}"
+                ?showSelection="${this.showSelection}"
+              ></pd-calendar-list-view>
+            ` : this._currentViewType === "timeGrid" ? html`
+                <pd-calendar-time-grid-view
+                  .data="${this.data}"
+                  .config="${this.config}"
+                  .currentWeekStart="${this._currentWeekStart}"
+                  .weekViewConfig="${this.weekViewConfig}"
+                  ?hideWeekend="${this.hideWeekend}"
+                ></pd-calendar-time-grid-view>
+              ` : html`
+                <pd-calendar-month-view
+                  .data="${this.data}"
+                  .config="${this.config}"
+                  .refDate="${this.refDate}"
+                  .currentDate="${this._currentDate}"
+                  ?hideWeekend="${this.hideWeekend}"
+                  ?selectableDates="${this.selectableDates}"
+                  ?showSelection="${this.showSelection}"
+                  .numberClass="${this.numberClass}"
+                  .cellType="${this.cellType}"
+                  ?withWheelNavigation="${this.withWheelNavigation}"
+                  ?withTouchNavigation="${this.withTouchNavigation}"
+                  @pd-navigate="${this._handleViewNavigate}"
+                ></pd-calendar-month-view>
+              `}
+        ${this._infoPanelEntry ? html`<pd-calendar-event-info-panel
+              .entry="${this._infoPanelEntry}"
+              .dateKey="${this._infoPanelDateKey}"
+              .actions="${this.eventActions ?? {
+      detail: true,
+      edit: true,
+      delete: true
+    }}"
+              .config="${this.config}"
+              .anchorRect="${this._infoPanelAnchorRect}"
+              @close-panel="${this._closeInfoPanel}"
+              @event-action="${this._reDispatchEventAction}"
+            ></pd-calendar-event-info-panel>` : nothing}
+        ${this._dayEventsPanelEntries ? html`<pd-calendar-day-events-panel
+              .entries="${this._dayEventsPanelEntries}"
+              .dateKey="${this._dayEventsPanelDateKey}"
+              .config="${this.config}"
+              .anchorRect="${this._dayEventsPanelAnchorRect}"
+              @close-panel="${this._closeDayEventsPanel}"
+              @select-event="${this._handleDayEventsSelectEvent}"
+            ></pd-calendar-day-events-panel>` : nothing}
       </div>
+      <slot name="calFooter"></slot>
     `;
   }
-  _openYearPopup() {
-    const popup = new PdYearPopup();
-    popup.yearSelection = this.withYearPopup;
-    this.shadowRoot?.getElementById("titleContentId")?.appendChild(popup);
-    popup.addEventListener("abort-year-selection", () => {
-      this.shadowRoot?.getElementById("titleContentId")?.removeChild(popup);
-    });
-    popup.addEventListener("change-year-selection", (e) => {
-      const year = e.detail.year;
-      const newDate = new Date(this._currentDate);
-      newDate.setFullYear(year);
-      this.dispatchEvent(
-        new CustomEvent("change-month", { detail: { newDate } })
-      );
-      this._initFromDate(newDate);
-      this.shadowRoot?.getElementById("titleContentId")?.removeChild(popup);
-    });
+  // ===========================================================================
+  // Event Handlers
+  // ===========================================================================
+  /** Handles navigation from the month view (wheel/touch/keyboard). */
+  _handleViewNavigate(e) {
+    if (e.detail.direction === "next") {
+      this._nextMonth();
+    } else {
+      this._previousMonth();
+    }
+    e.stopPropagation();
+  }
+  /** Handles view type change from the button bar. */
+  _handleViewChange(e) {
+    const viewType = e.detail.viewType;
+    if (viewType) {
+      this._currentViewType = viewType;
+    }
+    e.stopPropagation();
+  }
+  _handleNavigationEvent(e) {
+    if (this._currentViewType === "timeGrid") {
+      if (e.detail.previous) {
+        this._previousWeek();
+      }
+      if (e.detail.next) {
+        this._nextWeek();
+      }
+    } else {
+      if (e.detail.previous) {
+        this._previousMonth();
+      }
+      if (e.detail.next) {
+        this._nextMonth();
+      }
+      if (e.detail.newDate) {
+        this._initFromDate(e.detail.newDate);
+      }
+    }
+    e.stopPropagation();
+  }
+  // ===========================================================================
+  // Event Info Panel
+  // ===========================================================================
+  /** Opens the event info panel. Closes the day-events panel if open. */
+  _handleSelectEvent(e) {
+    const { dateKey, entry, anchorRect } = e.detail;
+    this._closeDayEventsPanel();
+    this._infoPanelEntry = entry;
+    this._infoPanelDateKey = dateKey;
+    this._infoPanelAnchorRect = anchorRect;
+  }
+  /** Opens the day-events panel. Closes the event info panel if open. */
+  _handleShowDayEvents(e) {
+    const { dateKey, entries, anchorRect } = e.detail;
+    this._closeInfoPanel();
+    this._dayEventsPanelEntries = entries;
+    this._dayEventsPanelDateKey = dateKey;
+    this._dayEventsPanelAnchorRect = anchorRect;
+  }
+  /** Handles select-event from within the day-events panel. */
+  _handleDayEventsSelectEvent(e) {
+    e.stopPropagation();
+    const { dateKey, entry, anchorRect } = e.detail;
+    this._closeDayEventsPanel();
+    this._infoPanelEntry = entry;
+    this._infoPanelDateKey = dateKey;
+    this._infoPanelAnchorRect = anchorRect;
   }
-  _getWeekDays() {
-    return this.hideWeekend ? LOCALES.weekdaysShort.slice(0, 5) : LOCALES.weekdaysShort;
+  _closeInfoPanel() {
+    this._infoPanelEntry = void 0;
+    this._infoPanelDateKey = "";
+    this._infoPanelAnchorRect = void 0;
   }
+  _closeDayEventsPanel() {
+    this._dayEventsPanelEntries = void 0;
+    this._dayEventsPanelDateKey = "";
+    this._dayEventsPanelAnchorRect = void 0;
+  }
+  /** Re-dispatches event-action from the info panel. */
+  _reDispatchEventAction(e) {
+    this.dispatchEvent(
+      new CustomEvent("event-action", {
+        detail: e.detail,
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  // ===========================================================================
+  // Month Navigation
+  // ===========================================================================
   _nextMonth() {
     if (this._checkNextMonthConstraint()) {
       const next = new Date(
@@ -188,7 +261,9 @@ let PdCalendar = class extends LitElement {
       );
       this.dispatchEvent(
         new CustomEvent("change-month", {
-          detail: { newDate: next, next: true }
+          detail: { newDate: next, next: true },
+          bubbles: true,
+          composed: true
         })
       );
       this._currentMonthNavNr += 1;
@@ -204,105 +279,157 @@ let PdCalendar = class extends LitElement {
       );
       this.dispatchEvent(
         new CustomEvent("change-month", {
-          detail: { newDate: prev, prev: true }
+          detail: { newDate: prev, prev: true },
+          bubbles: true,
+          composed: true
         })
       );
       this._currentMonthNavNr -= 1;
       this._initFromDate(prev);
     }
   }
-  _wheelEvent(e) {
-    if (this.withWheelNavigation) {
-      this._wheelDelta += e.deltaY;
-      if (this._wheelDelta > 360) {
-        this._wheelDelta = 0;
-        this._nextMonth();
-      } else if (this._wheelDelta < -360) {
-        this._wheelDelta = 0;
-        this._previousMonth();
-      }
-    }
-    e.preventDefault();
-    e.stopPropagation();
+  _checkNextMonthConstraint() {
+    return this.nextMonthConstraint === -1 || this.nextMonthConstraint > this._currentMonthNavNr;
   }
-  _touchStartEvent(e) {
-    if (this.withTouchNavigation) {
-      this._wheelDelta = e.changedTouches[0].screenX;
-    }
-    e.stopPropagation();
+  _checkPrevMonthConstraint() {
+    return this.prevMonthConstraint === -1 || this._currentMonthNavNr > 0 || this.prevMonthConstraint > this._currentMonthNavNr * -1;
   }
-  _touchEndEvent(e) {
-    if (this.withTouchNavigation) {
-      const diff = this._wheelDelta - e.changedTouches[0].screenX;
-      if (diff < -TOUCH_MIN_MOVE) {
-        this._nextMonth();
-      } else if (diff > TOUCH_MIN_MOVE) {
-        this._previousMonth();
-      }
-    }
-    e.stopPropagation();
+  // ===========================================================================
+  // Week Navigation
+  // ===========================================================================
+  _nextWeek() {
+    if (!this._currentWeekStart) return;
+    const next = new Date(this._currentWeekStart);
+    next.setDate(next.getDate() + 7);
+    this._currentWeekStart = next;
   }
+  _previousWeek() {
+    if (!this._currentWeekStart) return;
+    const prev = new Date(this._currentWeekStart);
+    prev.setDate(prev.getDate() - 7);
+    this._currentWeekStart = prev;
+  }
+  // ===========================================================================
+  // Helpers
+  // ===========================================================================
   _initFromDate(date) {
-    this._monthName = date.toLocaleString("default", { month: "long" });
+    this._monthName = LOCALES.monthNames[date.getMonth()];
     this._year = date.getFullYear();
     this._currentDate = date;
-    this._daysFromPreviousMonth = PdCalendar._getPreviousMonthDays(date);
-    const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
-    this._numberOfDays = lastDay.getDate();
+    this._numberOfDays = new Date(
+      date.getFullYear(),
+      date.getMonth() + 1,
+      0
+    ).getDate();
   }
-  static _getPreviousMonthDays(date) {
-    const start = new Date(date.getFullYear(), date.getMonth(), 1);
-    const missing = start.getDay() > 0 ? Math.abs(1 - start.getDay()) : 6;
-    return Array.from({ length: missing }, (_, i) => {
-      const d = new Date(start);
-      d.setDate(start.getDate() - (missing - i));
-      return d;
-    });
+  /** Returns the Monday of the week that contains `date`. */
+  _getMonday(date) {
+    const d = new Date(date);
+    const day = d.getDay();
+    const diff = day === 0 ? -6 : 1 - day;
+    d.setDate(d.getDate() + diff);
+    d.setHours(0, 0, 0, 0);
+    return d;
   }
-  _checkNextMonthConstraint() {
-    return this.nextMonthConstraint === -1 || this.nextMonthConstraint > this._currentMonthNavNr;
+  // ===========================================================================
+  // Title Formatting
+  // ===========================================================================
+  /**
+   * Formats the range title based on the listRange dates.
+   */
+  _formatRangeTitle() {
+    if (!this.listRange) return "";
+    const start = this._parseDate(this.listRange.start);
+    const end = this._parseDate(this.listRange.end);
+    const startDay = start.getDate().toString().padStart(2, "0");
+    const startMonth = (start.getMonth() + 1).toString().padStart(2, "0");
+    const startYear = start.getFullYear().toString().slice(-2);
+    const endDay = end.getDate().toString().padStart(2, "0");
+    const endMonth = (end.getMonth() + 1).toString().padStart(2, "0");
+    const endYear = end.getFullYear().toString().slice(-2);
+    const sameYear = start.getFullYear() === end.getFullYear();
+    const sameMonth = sameYear && start.getMonth() === end.getMonth();
+    if (sameMonth) {
+      return `${startDay}-${endDay}.${startMonth}.${startYear}`;
+    } else if (sameYear) {
+      return `${startDay}.${startMonth} - ${endDay}.${endMonth}.${endYear}`;
+    } else {
+      return `${startDay}.${startMonth}.${startYear} - ${endDay}.${endMonth}.${endYear}`;
+    }
   }
-  _checkPrevMonthConstraint() {
-    return this.prevMonthConstraint === -1 || this._currentMonthNavNr > 0 || this.prevMonthConstraint > this._currentMonthNavNr * -1;
+  /**
+   * Formats the week title, e.g. "10. - 16. Feb" or "28. Jan - 03. Feb".
+   */
+  _formatWeekTitle() {
+    if (!this._currentWeekStart) return "";
+    const visibleDays = this._getVisibleDays();
+    const firstDay = this._getDateForDayIndex(visibleDays[0]);
+    const lastDay = this._getDateForDayIndex(
+      visibleDays[visibleDays.length - 1]
+    );
+    if (!firstDay || !lastDay) return "";
+    const months = LOCALES.monthNames;
+    const fDay = firstDay.getDate().toString().padStart(2, "0");
+    const lDay = lastDay.getDate().toString().padStart(2, "0");
+    const fMonthShort = months[firstDay.getMonth()].slice(0, 3);
+    const lMonthShort = months[lastDay.getMonth()].slice(0, 3);
+    const lYear = lastDay.getFullYear();
+    if (firstDay.getMonth() === lastDay.getMonth() && firstDay.getFullYear() === lastDay.getFullYear()) {
+      return `${fDay}. - ${lDay}. ${fMonthShort} ${lYear}`;
+    }
+    if (firstDay.getFullYear() === lastDay.getFullYear()) {
+      return `${fDay}. ${fMonthShort} - ${lDay}. ${lMonthShort} ${lYear}`;
+    }
+    return `${fDay}. ${fMonthShort} ${firstDay.getFullYear()} - ${lDay}. ${lMonthShort} ${lYear}`;
+  }
+  _parseDate(value) {
+    if (value instanceof Date) return value;
+    const [year, month, day] = value.split("-").map(Number);
+    return new Date(year, month - 1, day);
+  }
+  /** Returns effective visible day indices for week title calculation. */
+  _getVisibleDays() {
+    if (this.weekViewConfig?.visibleDays) {
+      return this.weekViewConfig.visibleDays;
+    }
+    if (this.hideWeekend) {
+      return [0, 1, 2, 3, 4];
+    }
+    return [0, 1, 2, 3, 4, 5, 6];
+  }
+  /** Calculates the actual Date for a given monday-based day index. */
+  _getDateForDayIndex(dayIndex) {
+    if (!this._currentWeekStart) return void 0;
+    const d = new Date(this._currentWeekStart);
+    d.setDate(d.getDate() + dayIndex);
+    return d;
   }
 };
 PdCalendar.styles = [
   css`
       :host {
-        --my-cell-height: var(--pd-calendar-cell-height, 70px);
-
         display: block;
-        /*padding: 8px;
-        width: 100vw;
-        height: 100vh;*/
-      }
-
-      :host([hideWeekend]) .grid-container {
-        grid-template-columns: repeat(5, minmax(0, 1fr));
+        container-type: inline-size;
+        font-family: var(--pd-default-font-content-family);
+        width: var(--pd-calendar-width, 100%);
+        min-width: var(--pd-calendar-min-width, 310px);
       }
 
-      /* Layout Grid for the Calendar Component => Not really needed at the moment, more a test */
       .layout-container {
-        width: var(--pd-calendar-width, 100%);
+        width: 100%;
         min-width: 220px;
         height: 100%;
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
-        grid-template-rows: 40px auto;
-        gap: 1px;
-        grid-template-areas:
-          "header header header"
-          "content content content";
+        display: flex;
+        flex-direction: column;
+        gap: var(--pd-spacing-sm);
+        background-color: var(--pd-default-bg-col);
+        border-radius: var(--pd-radius-lg);
+        padding: var(--pd-calendar-padding, var(--pd-spacing-sm));
       }
 
-      /* Grid Area positions for layout container above */
       .header {
-        grid-area: header;
         position: relative;
         font-family: var(--pd-default-font-title-family);
-        color: var(--pd-default-font-title-col);
-        display: flex;
-        justify-content: left;
       }
 
       .header-main {
@@ -312,76 +439,29 @@ PdCalendar.styles = [
         width: 100%;
       }
 
-      .content {
-        grid-area: content;
-      }
-      .footer {
-        grid-area: footer;
-      }
-
-      /* Grid definition for calendar day items */
-      .grid-container {
-        position: relative;
-        display: grid;
-        grid-template-columns: repeat(7, minmax(0, 1fr));
-        gap: 3px;
-      }
-
-      .grid-container.max {
-        grid-template-rows: minmax(10px, 30px) repeat(
-            6,
-            minmax(var(--my-cell-height), 1fr)
-          );
-      }
-
-      .grid-container.normal {
-        grid-template-rows: minmax(10px, 30px) repeat(
-            5,
-            minmax(var(--my-cell-height), 1fr)
-          );
-      }
-
-      .title-week-day {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: var(
-          --pd-calendar-week-title-bg-col,
-          var(--pd-default-dark-col)
-        );
-        font-size: var(--pd-calendar-weekday-title-font-size, 1em);
-        font-weight: bold;
-        color: var(--pd-calendar-week-title-font-col, var(--pd-default-bg-col));
-        font-family: var(--pd-default-font-title-family);
-      }
-
-      .content-title {
-        position: relative;
-        font-size: var(--pd-calendar-title-font-size, 1.2em);
-        font-weight: bold;
-      }
-
-      .icon-container {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 5px;
+      .header-main calendar-button-bar {
+        width: 100%;
+        --pd-cbar-title-align: right;
+        --pd-cbar-title-col: var(--pd-default-font-title-col);
+        --pd-cbar-title-size: 1.2em;
+        --pd-cbar-title-weight: 600;
       }
 
-      .arrow {
-        cursor: pointer;
-        --pd-icon-size: var(--pd-calendar-title-icon-size, 1.2em);
-        --pd-icon-bg-col-hover: lightgrey;
-      }
+      @container (max-width: 500px) {
+        .header-main calendar-button-bar {
+          --pd-cbar-title-button-size: 36px;
+        }
 
-      .year-popup-link {
-        color: var(--pd-default-font-link-col);
-        text-decoration: underline;
+        .layout-container {
+          padding: var(--pd-spacing-xs, 0.25rem);
+          gap: var(--pd-spacing-xs, 0.25rem);
+        }
       }
 
-      .year-popup-link:hover {
-        cursor: pointer;
-        color: var(--pd-default-hover-col);
+      @container (max-width: 300px) {
+        .layout-container {
+          padding: 2px;
+        }
       }
     `
 ];
@@ -418,15 +498,51 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], PdCalendar.prototype, "numberClass", 2);
+__decorateClass([
+  property({ type: Object })
+], PdCalendar.prototype, "availableViewTypes", 2);
+__decorateClass([
+  property({ type: Object })
+], PdCalendar.prototype, "config", 2);
+__decorateClass([
+  property({ type: Object })
+], PdCalendar.prototype, "listRange", 2);
+__decorateClass([
+  property({ type: Object })
+], PdCalendar.prototype, "weekViewConfig", 2);
+__decorateClass([
+  property({ type: String })
+], PdCalendar.prototype, "cellType", 2);
+__decorateClass([
+  property({ type: Object })
+], PdCalendar.prototype, "eventActions", 2);
+__decorateClass([
+  state()
+], PdCalendar.prototype, "_infoPanelEntry", 2);
+__decorateClass([
+  state()
+], PdCalendar.prototype, "_infoPanelDateKey", 2);
+__decorateClass([
+  state()
+], PdCalendar.prototype, "_infoPanelAnchorRect", 2);
+__decorateClass([
+  state()
+], PdCalendar.prototype, "_dayEventsPanelEntries", 2);
+__decorateClass([
+  state()
+], PdCalendar.prototype, "_dayEventsPanelDateKey", 2);
+__decorateClass([
+  state()
+], PdCalendar.prototype, "_dayEventsPanelAnchorRect", 2);
 __decorateClass([
   state()
-], PdCalendar.prototype, "_viewType", 2);
+], PdCalendar.prototype, "_currentViewType", 2);
 __decorateClass([
   state()
 ], PdCalendar.prototype, "_currentDate", 2);
 __decorateClass([
   state()
-], PdCalendar.prototype, "_wheelDelta", 2);
+], PdCalendar.prototype, "_currentWeekStart", 2);
 PdCalendar = __decorateClass([
   localized()
 ], PdCalendar);