@bagelink/vue 1.2.33 → 1.2.39

package/dist/components/calendar/Index.vue.d.ts

@@ -1,6 +1,6 @@
 import { CalendarEvent, CalendarView, WeekStart } from './CalendarTypes';
 interface CalendarProps {
-    events: CalendarEvent[];
+    events?: CalendarEvent[];
     startDate?: Date;
     view?: CalendarView;
     weekStart?: WeekStart;
@@ -43,6 +43,7 @@ declare const __VLS_component: import('vue').DefineComponent<CalendarProps, {
     onViewChange?: ((view: CalendarView) => any) | undefined;
 }>, {
     view: CalendarView;
+    events: CalendarEvent[];
     startDate: Date;
     weekStart: WeekStart;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;

package/dist/components/calendar/Index.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Index.vue.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/Index.vue"],"names":[],"mappings":"AA2JA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAQ7E,UAAU,aAAa;IACtB,MAAM,EAAE,aAAa,EAAE,CAAA;IACvB,SAAS,CAAC,EAAE,IAAI,CAAA;IAChB,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,SAAS,CAAC,EAAE,SAAS,CAAA;CACrB;AAyFD,iBAAS,cAAc;WAkMT,OAAO,IAA6B;;;;YAVf,GAAG;;;;EAerC;AAwBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;oBA9SoB,IAAI;kBAAY,IAAI;;;;;;;;;oBAApB,IAAI;kBAAY,IAAI;;;;;;UAbrD,YAAY;eADP,IAAI;eAEJ,SAAS;wFAoUpB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"Index.vue.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/Index.vue"],"names":[],"mappings":"AA4JA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAQ7E,UAAU,aAAa;IACtB,MAAM,CAAC,EAAE,aAAa,EAAE,CAAA;IACxB,SAAS,CAAC,EAAE,IAAI,CAAA;IAChB,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,SAAS,CAAC,EAAE,SAAS,CAAA;CACrB;AA2FD,iBAAS,cAAc;WAkMT,OAAO,IAA6B;;;;YAVf,GAAG;;;;EAerC;AAwBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;oBA/SoB,IAAI;kBAAY,IAAI;;;;;;;;;oBAApB,IAAI;kBAAY,IAAI;;;;;;UAdrD,YAAY;YAFV,aAAa,EAAE;eACZ,IAAI;eAEJ,SAAS;wFAsUpB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/calendar/views/MonthView.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MonthView.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/calendar/views/MonthView.vue"],"names":[],"mappings":"AA6TA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAgBrD,KAAK,WAAW,GAAG;IAClB,MAAM,EAAE,aAAa,EAAE,CAAA;IACvB,SAAS,EAAE,IAAI,CAAA;CACf,CAAC;AAsGF,iBAAS,cAAc;WAqIT,OAAO,IAA6B;;;;;;;;;;;;;YAXhB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCA+DyjT,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;EA/CntT;AAsBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAwBykT,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;kBAfltT,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"MonthView.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/calendar/views/MonthView.vue"],"names":[],"mappings":"AA6TA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAgBrD,KAAK,WAAW,GAAG;IAClB,MAAM,EAAE,aAAa,EAAE,CAAA;IACvB,SAAS,EAAE,IAAI,CAAA;CACf,CAAC;AAsGF,iBAAS,cAAc;WAqIT,OAAO,IAA6B;;;;;;;;;;;;;YAXhB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCA+DoiT,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;EA/C9rT;AAsBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAwBojT,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;kBAf7rT,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/calendar/views/WeekView.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WeekView.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/calendar/views/WeekView.vue"],"names":[],"mappings":"AAmbA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAkBhE,KAAK,WAAW,GAAG;IAClB,MAAM,CAAC,EAAE,aAAa,EAAE,CAAA;IACxB,SAAS,CAAC,EAAE,IAAI,CAAA;IAChB,SAAS,CAAC,EAAE,SAAS,CAAA;CACrB,CAAC;AA6PF,iBAAS,cAAc;WAqKT,OAAO,IAA6B;;;;;;;;;;;;;YAXhB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAFmkB,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;EAkB7tB;AA4BD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;oBA3boB,IAAI;kBAAY,IAAI;;;;;oBAApB,IAAI;kBAAY,IAAI;;;YAZnD,aAAa,EAAE;eACZ,IAAI;eACJ,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAsZklB,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;kBAyD5tB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"WeekView.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/calendar/views/WeekView.vue"],"names":[],"mappings":"AAmbA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAkBhE,KAAK,WAAW,GAAG;IAClB,MAAM,CAAC,EAAE,aAAa,EAAE,CAAA;IACxB,SAAS,CAAC,EAAE,IAAI,CAAA;IAChB,SAAS,CAAC,EAAE,SAAS,CAAA;CACrB,CAAC;AA6PF,iBAAS,cAAc;WAqKT,OAAO,IAA6B;;;;;;;;;;;;;YAXhB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAF+uB,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;EAkBz4B;AA4BD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;oBA3boB,IAAI;kBAAY,IAAI;;;;;oBAApB,IAAI;kBAAY,IAAI;;;YAZnD,aAAa,EAAE;eACZ,IAAI;eACJ,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAsZ8vB,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;kBAyDx4B,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/form/inputs/DateInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/DateInput.vue"],"names":[],"mappings":"AA6MA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAA;AAI/D,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAG7D,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,cAAc,CAAC,EAAE,cAAc,CAAA;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,OAAO,CAAA;CAChB,CAAC;AAuIH,KAAK,iBAAiB,GAAG;IACzB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB,GAAG,WAAW,CAAC;;;;;;WAvJN,OAAO;UASR,QAAQ;YAGN,MAAM;cAbJ,OAAO;gBAML,OAAO;oBAMH,cAAc;;;;;AA6TjC,wBAUG"}
+{"version":3,"file":"DateInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/DateInput.vue"],"names":[],"mappings":"AAsNA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAA;AAI/D,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAG7D,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,cAAc,CAAC,EAAE,cAAc,CAAA;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,OAAO,CAAA;CAChB,CAAC;AAuIH,KAAK,iBAAiB,GAAG;IACzB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB,GAAG,WAAW,CAAC;;;;;;WAvJN,OAAO;UASR,QAAQ;YAGN,MAAM;cAbJ,OAAO;gBAML,OAAO;oBAMH,cAAc;;;;;AA2TjC,wBAUG"}

package/dist/index.cjs

@@ -1013,12 +1013,12 @@ const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const MonthView = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["__scopeId", "data-v-e972943e"]]);
+const MonthView = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["__scopeId", "data-v-eeb8abde"]]);
 const _hoisted_1$U = { class: "w-100p overflow-hidden m_overflow h-100p grid" };
 const _hoisted_2$F = { class: "weekGrid border-bottom me-1" };
 const _hoisted_3$z = { class: "overflow h-100p pe-05" };
 const _hoisted_4$m = ["onClick"];
-const _hoisted_5$l = { class: "overflow-hidden color-text-light p-025 txt12 h-100p" };
+const _hoisted_5$l = { class: "overflow-hidden color-white p-025 txt12 h-100p" };
 const _hoisted_6$i = { class: "white-space ellipsis-1" };
 const _hoisted_7$e = { class: "txt10 opacity-8" };
 const slotHeight = 60;
@@ -1100,7 +1100,7 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
           top: top2,
           height,
           left: 0,
-          width: 95,
+          width: 100,
           overlappingEvents: 0,
           position: 0
         };
@@ -1285,11 +1285,10 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
           ref_key: "popoverRef",
           ref: popoverRef,
           thin: "",
-          class: "custom-popover fixed z-999 radius-05 bg-white w350",
+          class: "custom-popover fixed z-999 radius-1 bg-white",
           style: vue.normalizeStyle({
             top: `${popoverPosition.value.top}px`,
-            left: `${popoverPosition.value.left}px`,
-            maxWidth: `${popoverPosition.value.width}px`
+            left: `${popoverPosition.value.left}px`
           })
         }, {
           default: vue.withCtx(() => [
@@ -1304,7 +1303,7 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const WeekView = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["__scopeId", "data-v-c29ed3b2"]]);
+const WeekView = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["__scopeId", "data-v-b897fbe8"]]);
 const _hoisted_1$T = { class: "calendar" };
 const _hoisted_2$E = { class: "flex m_block m_pb-1" };
 const _hoisted_3$y = { class: "txt-light my-0" };
@@ -1312,7 +1311,7 @@ const _hoisted_4$l = { class: "ms-auto flex gap-025" };
 const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
   __name: "Index",
   props: {
-    events: {},
+    events: { default: () => [] },
     startDate: { default: () => /* @__PURE__ */ new Date() },
     view: { default: "Week" },
     weekStart: { default: "Sunday" }
@@ -1433,7 +1432,7 @@ const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Index$1 = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["__scopeId", "data-v-98cddf40"]]);
+const Index$1 = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["__scopeId", "data-v-36ea5622"]]);
 const _hoisted_1$S = {
   key: 0,
   class: "card_label"
@@ -8086,7 +8085,7 @@ ${indent}}`;
       richtext: RichText,
       upload: UploadInput,
       file: UploadInput,
-      date: DateInput,
+      date: _sfc_main$L,
       tabs: TabsNav,
       form: _sfc_main$T,
       range: RangeInput
@@ -15213,7 +15212,6 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
         (...args) => vue.unref(handleFocus) && vue.unref(handleFocus)(...args))
       }, [
         _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$s, [
-          vue.createTextVNode(vue.toDisplayString(_ctx.label) + " ", 1),
           _ctx.required ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$o, "*")) : vue.createCommentVNode("", true)
         ])) : vue.createCommentVNode("", true),
         vue.createVNode(vue.unref(_sfc_main$W), {
@@ -15234,7 +15232,7 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
             }, [
               vue.createVNode(vue.unref(TextInput), {
                 modelValue: vue.unref(formatDisplayDate)(selectedDate.value),
-                icon: "calendar",
+                iconStart: "calendar",
                 min: vue.unref(formatDisplayDate)(_ctx.min),
                 max: vue.unref(formatDisplayDate)(_ctx.max),
                 required: _ctx.required,
@@ -15275,7 +15273,6 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const DateInput = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["__scopeId", "data-v-a0f799e6"]]);
 const _hoisted_1$D = { class: "bagel-input" };
 const _hoisted_2$r = {
   key: 0,
@@ -36354,23 +36351,14 @@ function getBrowserNavigatorLocale() {
   if (typeof navigator !== "object") return "en-US";
   return navigator.languages && navigator.languages.length ? navigator.languages[0] : navigator.language;
 }
-function handleTimezone(date2, timeZone) {
-  if (timeZone === "UTC") {
+function handleTimezone(date2, locale2, intFmtOpt) {
+  if (intFmtOpt.timeZone === "UTC") {
     const utcDate = new Date(date2.getTime());
     utcDate.setMinutes(utcDate.getMinutes() + date2.getTimezoneOffset());
     return utcDate;
   }
   try {
-    const formatter = new Intl.DateTimeFormat("en-US", {
-      timeZone,
-      timeZoneName: "short",
-      year: "numeric",
-      month: "numeric",
-      day: "numeric",
-      hour: "numeric",
-      minute: "numeric",
-      second: "numeric"
-    });
+    const formatter = new Intl.DateTimeFormat(locale2, intFmtOpt);
     const formattedParts = formatter.formatToParts(date2);
     const parts = {};
     formattedParts.forEach((part) => {
@@ -36389,12 +36377,12 @@ function handleTimezone(date2, timeZone) {
     );
     return adjustedDate;
   } catch (error) {
-    console.warn(`Error handling timezone ${timeZone}:`, error);
+    console.warn(`Error handling timezone ${intFmtOpt.timeZone}:`, error);
     return date2;
   }
 }
-function getDatePartsMap(date2, locale2, timeZone) {
-  const d2 = timeZone ? handleTimezone(date2, timeZone) : date2;
+function getDatePartsMap(date2, locale2, intFmtOpt) {
+  const d2 = (intFmtOpt == null ? void 0 : intFmtOpt.timeZone) ? handleTimezone(date2, locale2, intFmtOpt) : date2;
   return {
     AmPm: d2.toLocaleString(locale2, { hour: "numeric", hour12: true, minute: "numeric" }).split(" ")[1],
     DD: String(d2.getDate()).padStart(2, "0"),
@@ -36415,7 +36403,7 @@ const _datePartsMapNow = getDatePartsMap(/* @__PURE__ */ new Date(), getBrowserN
 const _orderedDateTokens = Object.keys(_datePartsMapNow).sort((a2, b2) => b2.length - a2.length);
 const _tokenRegExPattern = new RegExp(_orderedDateTokens.map((token) => token).join("|"), "g");
 function formatDate(date2, opts = {}) {
-  let { fmt: format2, locale: locale2, tz: timeZone } = opts;
+  let { fmt: format2, locale: locale2, tz: timeZone, ...rest } = opts;
   if (!date2) return "";
   format2 = format2 || "DD.MM.YY";
   locale2 = locale2 || getBrowserNavigatorLocale();
@@ -36425,11 +36413,12 @@ function formatDate(date2, opts = {}) {
       console.warn("Invalid date provided to formatDate:", date2);
       return "";
     }
-    const datePartsMap = getDatePartsMap(d2, locale2, timeZone);
-    const formatter = new Intl.DateTimeFormat(locale2, {
+    const intFmtOpt = {
       day: "numeric",
       hour: "2-digit",
-      hour12: true,
+      // Set default hour12 to true if not explicitly set
+      // hour12: true,
+      hour12: rest.hour12 === void 0 ? true : rest.hour12,
       minute: "2-digit",
       month: "long",
       second: "2-digit",
@@ -36437,7 +36426,9 @@ function formatDate(date2, opts = {}) {
       // Add timeZone if provided
       weekday: "long",
       year: "numeric"
-    });
+    };
+    const datePartsMap = getDatePartsMap(d2, locale2, intFmtOpt);
+    const formatter = new Intl.DateTimeFormat(locale2, intFmtOpt);
     const formattedParts = formatter.formatToParts(d2);
     const partsMap = {};
     formattedParts.forEach((part) => {
@@ -36492,7 +36483,7 @@ exports.CodeEditor = CodeEditor;
 exports.ColorInput = _sfc_main$N;
 exports.DataPreview = DataPreview;
 exports.DataTable = DataTable;
-exports.DateInput = DateInput;
+exports.DateInput = _sfc_main$L;
 exports.DatePicker = DatePicker;
 exports.Draggable = _sfc_main$X;
 exports.Dropdown = _sfc_main$W;

package/dist/index.mjs

@@ -1011,12 +1011,12 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const MonthView = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["__scopeId", "data-v-e972943e"]]);
+const MonthView = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["__scopeId", "data-v-eeb8abde"]]);
 const _hoisted_1$U = { class: "w-100p overflow-hidden m_overflow h-100p grid" };
 const _hoisted_2$F = { class: "weekGrid border-bottom me-1" };
 const _hoisted_3$z = { class: "overflow h-100p pe-05" };
 const _hoisted_4$m = ["onClick"];
-const _hoisted_5$l = { class: "overflow-hidden color-text-light p-025 txt12 h-100p" };
+const _hoisted_5$l = { class: "overflow-hidden color-white p-025 txt12 h-100p" };
 const _hoisted_6$i = { class: "white-space ellipsis-1" };
 const _hoisted_7$e = { class: "txt10 opacity-8" };
 const slotHeight = 60;
@@ -1098,7 +1098,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
           top: top2,
           height,
           left: 0,
-          width: 95,
+          width: 100,
           overlappingEvents: 0,
           position: 0
         };
@@ -1283,11 +1283,10 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
           ref_key: "popoverRef",
           ref: popoverRef,
           thin: "",
-          class: "custom-popover fixed z-999 radius-05 bg-white w350",
+          class: "custom-popover fixed z-999 radius-1 bg-white",
           style: normalizeStyle({
             top: `${popoverPosition.value.top}px`,
-            left: `${popoverPosition.value.left}px`,
-            maxWidth: `${popoverPosition.value.width}px`
+            left: `${popoverPosition.value.left}px`
           })
         }, {
           default: withCtx(() => [
@@ -1302,7 +1301,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const WeekView = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["__scopeId", "data-v-c29ed3b2"]]);
+const WeekView = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["__scopeId", "data-v-b897fbe8"]]);
 const _hoisted_1$T = { class: "calendar" };
 const _hoisted_2$E = { class: "flex m_block m_pb-1" };
 const _hoisted_3$y = { class: "txt-light my-0" };
@@ -1310,7 +1309,7 @@ const _hoisted_4$l = { class: "ms-auto flex gap-025" };
 const _sfc_main$11 = /* @__PURE__ */ defineComponent({
   __name: "Index",
   props: {
-    events: {},
+    events: { default: () => [] },
     startDate: { default: () => /* @__PURE__ */ new Date() },
     view: { default: "Week" },
     weekStart: { default: "Sunday" }
@@ -1431,7 +1430,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Index$1 = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["__scopeId", "data-v-98cddf40"]]);
+const Index$1 = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["__scopeId", "data-v-36ea5622"]]);
 const _hoisted_1$S = {
   key: 0,
   class: "card_label"
@@ -8084,7 +8083,7 @@ ${indent}}`;
       richtext: RichText,
       upload: UploadInput,
       file: UploadInput,
-      date: DateInput,
+      date: _sfc_main$L,
       tabs: TabsNav,
       form: _sfc_main$T,
       range: RangeInput
@@ -15211,7 +15210,6 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
         (...args) => unref(handleFocus) && unref(handleFocus)(...args))
       }, [
         _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$s, [
-          createTextVNode(toDisplayString(_ctx.label) + " ", 1),
           _ctx.required ? (openBlock(), createElementBlock("span", _hoisted_3$o, "*")) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
         createVNode(unref(_sfc_main$W), {
@@ -15232,7 +15230,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
             }, [
               createVNode(unref(TextInput), {
                 modelValue: unref(formatDisplayDate)(selectedDate.value),
-                icon: "calendar",
+                iconStart: "calendar",
                 min: unref(formatDisplayDate)(_ctx.min),
                 max: unref(formatDisplayDate)(_ctx.max),
                 required: _ctx.required,
@@ -15273,7 +15271,6 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const DateInput = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["__scopeId", "data-v-a0f799e6"]]);
 const _hoisted_1$D = { class: "bagel-input" };
 const _hoisted_2$r = {
   key: 0,
@@ -36352,23 +36349,14 @@ function getBrowserNavigatorLocale() {
   if (typeof navigator !== "object") return "en-US";
   return navigator.languages && navigator.languages.length ? navigator.languages[0] : navigator.language;
 }
-function handleTimezone(date2, timeZone) {
-  if (timeZone === "UTC") {
+function handleTimezone(date2, locale2, intFmtOpt) {
+  if (intFmtOpt.timeZone === "UTC") {
     const utcDate = new Date(date2.getTime());
     utcDate.setMinutes(utcDate.getMinutes() + date2.getTimezoneOffset());
     return utcDate;
   }
   try {
-    const formatter = new Intl.DateTimeFormat("en-US", {
-      timeZone,
-      timeZoneName: "short",
-      year: "numeric",
-      month: "numeric",
-      day: "numeric",
-      hour: "numeric",
-      minute: "numeric",
-      second: "numeric"
-    });
+    const formatter = new Intl.DateTimeFormat(locale2, intFmtOpt);
     const formattedParts = formatter.formatToParts(date2);
     const parts = {};
     formattedParts.forEach((part) => {
@@ -36387,12 +36375,12 @@ function handleTimezone(date2, timeZone) {
     );
     return adjustedDate;
   } catch (error) {
-    console.warn(`Error handling timezone ${timeZone}:`, error);
+    console.warn(`Error handling timezone ${intFmtOpt.timeZone}:`, error);
     return date2;
   }
 }
-function getDatePartsMap(date2, locale2, timeZone) {
-  const d2 = timeZone ? handleTimezone(date2, timeZone) : date2;
+function getDatePartsMap(date2, locale2, intFmtOpt) {
+  const d2 = (intFmtOpt == null ? void 0 : intFmtOpt.timeZone) ? handleTimezone(date2, locale2, intFmtOpt) : date2;
   return {
     AmPm: d2.toLocaleString(locale2, { hour: "numeric", hour12: true, minute: "numeric" }).split(" ")[1],
     DD: String(d2.getDate()).padStart(2, "0"),
@@ -36413,7 +36401,7 @@ const _datePartsMapNow = getDatePartsMap(/* @__PURE__ */ new Date(), getBrowserN
 const _orderedDateTokens = Object.keys(_datePartsMapNow).sort((a2, b2) => b2.length - a2.length);
 const _tokenRegExPattern = new RegExp(_orderedDateTokens.map((token) => token).join("|"), "g");
 function formatDate(date2, opts = {}) {
-  let { fmt: format2, locale: locale2, tz: timeZone } = opts;
+  let { fmt: format2, locale: locale2, tz: timeZone, ...rest } = opts;
   if (!date2) return "";
   format2 = format2 || "DD.MM.YY";
   locale2 = locale2 || getBrowserNavigatorLocale();
@@ -36423,11 +36411,12 @@ function formatDate(date2, opts = {}) {
       console.warn("Invalid date provided to formatDate:", date2);
       return "";
     }
-    const datePartsMap = getDatePartsMap(d2, locale2, timeZone);
-    const formatter = new Intl.DateTimeFormat(locale2, {
+    const intFmtOpt = {
       day: "numeric",
       hour: "2-digit",
-      hour12: true,
+      // Set default hour12 to true if not explicitly set
+      // hour12: true,
+      hour12: rest.hour12 === void 0 ? true : rest.hour12,
       minute: "2-digit",
       month: "long",
       second: "2-digit",
@@ -36435,7 +36424,9 @@ function formatDate(date2, opts = {}) {
       // Add timeZone if provided
       weekday: "long",
       year: "numeric"
-    });
+    };
+    const datePartsMap = getDatePartsMap(d2, locale2, intFmtOpt);
+    const formatter = new Intl.DateTimeFormat(locale2, intFmtOpt);
     const formattedParts = formatter.formatToParts(d2);
     const partsMap = {};
     formattedParts.forEach((part) => {
@@ -36491,7 +36482,7 @@ export {
   _sfc_main$N as ColorInput,
   DataPreview,
   DataTable,
-  DateInput,
+  _sfc_main$L as DateInput,
   DatePicker,
   _sfc_main$X as Draggable,
   _sfc_main$W as Dropdown,

package/dist/style.css

@@ -478,23 +478,23 @@ to {
 }
 }
 
-.month-view[data-v-e972943e] {
+.month-view[data-v-eeb8abde] {
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow: hidden;
 }
-.month-header[data-v-e972943e] {
+.month-header[data-v-eeb8abde] {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   border-bottom: 1px solid var(--border-color);
 }
-.weekday[data-v-e972943e] {
+.weekday[data-v-eeb8abde] {
   padding: 0.5rem;
   text-align: center;
   color: var(--text-muted);
 }
-.month-grid[data-v-e972943e] {
+.month-grid[data-v-eeb8abde] {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   grid-template-rows: repeat(6, 1fr);
@@ -502,7 +502,7 @@ to {
   overflow: auto;
   border-inline-end: 1px solid var(--border-color);
 }
-.day-cell[data-v-e972943e] {
+.day-cell[data-v-eeb8abde] {
   border-inline-start: 1px solid var(--border-color);
   border-bottom: 1px solid var(--border-color);
   padding: 0.5rem;
@@ -510,24 +510,24 @@ to {
   display: flex;
   flex-direction: column;
 }
-.day-number[data-v-e972943e] {
+.day-number[data-v-eeb8abde] {
   margin-bottom: 0.5rem;
 }
-.other-month[data-v-e972943e] {
+.other-month[data-v-eeb8abde] {
   background-color: var(--bgl-gray-light);
   color: var(--bgl-gray);
 }
-.today[data-v-e972943e] {
+.today[data-v-eeb8abde] {
   background-color: var(--bgl-primary-light);
 }
-.today .day-number[data-v-e972943e] {
+.today .day-number[data-v-eeb8abde] {
   color: var(--bgl-primary);
 }
-.day-events[data-v-e972943e] {
+.day-events[data-v-eeb8abde] {
   flex-grow: 1;
   overflow-y: auto;
 }
-.event-item[data-v-e972943e] {
+.event-item[data-v-eeb8abde] {
   margin-bottom: 0.25rem;
   padding: 0.25rem;
   border-radius: 4px;
@@ -536,49 +536,35 @@ to {
   cursor: pointer;
   transition: all 0.2s ease;
 }
-.event-title[data-v-e972943e] {
+.event-title[data-v-eeb8abde] {
   font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.event-time[data-v-e972943e] {
+.event-time[data-v-eeb8abde] {
   font-size: 0.7rem;
   opacity: 0.8;
 }
-.event-dot[data-v-e972943e] {
+.event-dot[data-v-eeb8abde] {
   width: 6px;
   height: 6px;
   background-color: var(--bgl-primary);
   border-radius: 50%;
   margin: 0.25rem auto;
 }
-@media (max-width: 768px) {
-.day-cell[data-v-e972943e] {
-    min-height: 60px;
-    padding: 0.25rem;
-}
-.day-number[data-v-e972943e] {
-    font-size: 0.8rem;
-    margin-bottom: 0.25rem;
-}
-.weekday[data-v-e972943e] {
-    font-size: 0.8rem;
-    padding: 0.25rem;
-}
-}
-.custom-popover[data-v-e972943e] {
+.custom-popover[data-v-eeb8abde] {
   position: fixed;
   z-index: 1000;
   min-width: 250px;
   max-width: 350px;
   background-color: white;
-  border-radius: 4px;
+  border-radius: var(--btn-border-radius);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  animation: fadeIn-e972943e 0.2s ease;
+  animation: fadeIn-eeb8abde 0.2s ease;
   transform-origin: center left;
 }
-@keyframes fadeIn-e972943e {
+@keyframes fadeIn-eeb8abde {
 from {
     opacity: 0;
     transform: scale(0.95);
@@ -588,50 +574,64 @@ to {
     transform: scale(1);
 }
 }
+@media (max-width: 768px) {
+.day-cell[data-v-eeb8abde] {
+    min-height: 60px;
+    padding: 0.25rem;
+}
+.day-number[data-v-eeb8abde] {
+    font-size: 0.8rem;
+    margin-bottom: 0.25rem;
+}
+.weekday[data-v-eeb8abde] {
+    font-size: 0.8rem;
+    padding: 0.25rem;
+}
+}
 
-.weekGrid[data-v-c29ed3b2]{
+.weekGrid[data-v-b897fbe8]{
 	display: grid;
 	grid-template-columns: 5rem repeat(7, 1fr);
 }
-.days-column[data-v-c29ed3b2] {
+.days-column[data-v-b897fbe8] {
   flex-grow: 1;
   display: flex;
 }
-.time-slot[data-v-c29ed3b2] {
+.time-slot[data-v-b897fbe8] {
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--text-muted);
 }
-.time-slots[data-v-c29ed3b2] {
+.time-slots[data-v-b897fbe8] {
   flex-grow: 1;
   display: flex;
   overflow: auto;
   position: relative;
 }
-.day-column[data-v-c29ed3b2] {
+.day-column[data-v-b897fbe8] {
   flex: 1;
 }
-.event[data-v-c29ed3b2] {
+.event[data-v-b897fbe8] {
   margin-right: 2px;
 }
-.event[data-v-c29ed3b2]:hover {
+.event[data-v-b897fbe8]:hover {
   z-index: 1;
 }
-.drag-preview[data-v-c29ed3b2] {
+.drag-preview[data-v-b897fbe8] {
   border: 2px solid var(--bgl-primary);
 }
-.current-time-line[data-v-c29ed3b2] {
+.current-time-line[data-v-b897fbe8] {
   height: 2px;
 }
-.custom-popover[data-v-c29ed3b2] {
+.custom-popover[data-v-b897fbe8] {
   min-width: 250px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  animation: fadeIn-c29ed3b2 0.2s ease;
+  animation: fadeIn-b897fbe8 0.2s ease;
   transform-origin: center left;
 }
-@keyframes fadeIn-c29ed3b2 {
+@keyframes fadeIn-b897fbe8 {
 from {
     opacity: 0;
     transform: scale(0.95);
@@ -644,7 +644,7 @@ to {
 @media screen and (max-width: 910px) {
 }
 
-.calendar[data-v-98cddf40] {
+.calendar[data-v-36ea5622] {
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -1462,9 +1462,18 @@ pre code.hljs{
 	opacity: 0.4;
 }
 
-.date-picker-container[data-v-a0f799e6] {
+.date-picker-container {
 	width: 100%;
 }
+.date-picker-container .date-input{
+	--input-bg: transparent;
+	--input-font-size: 12px;
+	opacity: 0.6;
+	--input-height: 20px;
+}
+.date-picker-container .date-input .bagel-input input{
+	padding: 0 !important;
+}
 
 .fileUploadWrap[data-v-50fd0597] {
 	outline: 1px solid var(--border-color);

package/dist/utils/calendar/dateUtils.d.ts

@@ -17,8 +17,8 @@ export declare function timeAgo(date: string | Date, lang?: AvailableTimeLanguag
  * @param timeZone The timezone to use (e.g., 'UTC', 'America/New_York')
  * @returns Date parts with timezone adjustment applied
  */
-export declare function handleTimezone(date: Date, timeZone: string): Date;
-export declare function getDatePartsMap(date: Date, locale: Intl.LocalesArgument, timeZone?: string): {
+export declare function handleTimezone(date: Date, locale: Intl.LocalesArgument, intFmtOpt: Intl.DateTimeFormatOptions): Date;
+export declare function getDatePartsMap(date: Date, locale: Intl.LocalesArgument, intFmtOpt?: Intl.DateTimeFormatOptions): {
     AmPm: string;
     DD: string;
     DDD: string;
@@ -33,7 +33,7 @@ export declare function getDatePartsMap(date: Date, locale: Intl.LocalesArgument
     YY: string;
     YYYY: string;
 };
-export interface FormatDateOptions {
+export interface FormatDateOptions extends Partial<Pick<Intl.DateTimeFormatOptions, 'hour12'>> {
     fmt?: DateTimeAcceptedFormats;
     locale?: Intl.LocalesArgument;
     tz?: string;

package/dist/utils/calendar/dateUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dateUtils.d.ts","sourceRoot":"","sources":["../../../src/utils/calendar/dateUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,KAAK,EAAE,sBAAsB,EAAE,uBAAuB,EAAkC,MAAM,sBAAsB,CAAA;AAE3H,UAAU,gBAAgB;IACzB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACb;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,gBAAgB,QAyBvE;AAqDD,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,IAAI,GAAE,sBAA6B,UAsD/E;AASD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAgDjE;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC,EAAE,MAAM;;;;;;;;;;;;;;EAoB1F;AAcD,MAAM,WAAW,iBAAiB;IACjC,GAAG,CAAC,EAAE,uBAAuB,CAAA;IAC7B,MAAM,CAAC,EAAE,IAAI,CAAC,eAAe,CAAA;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAA;CACX;AACD;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CACzB,IAAI,CAAC,EAAE,QAAQ,EACf,IAAI,GAAE,iBAAsB,GAC1B,MAAM,CAkER;AACD,eAAO,MAAM,OAAO,mBAAa,CAAA"}
+{"version":3,"file":"dateUtils.d.ts","sourceRoot":"","sources":["../../../src/utils/calendar/dateUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,KAAK,EAAE,sBAAsB,EAAE,uBAAuB,EAAkC,MAAM,sBAAsB,CAAA;AAE3H,UAAU,gBAAgB;IACzB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACb;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,gBAAgB,QAyBvE;AAqDD,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,IAAI,GAAE,sBAA6B,UAsD/E;AASD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,eAAe,EAAE,SAAS,EAAE,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAuCpH;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,EAAE,IAAI,CAAC,qBAAqB;;;;;;;;;;;;;;EAqB/G;AAcD,MAAM,WAAW,iBAAkB,SAAQ,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC;IAC7F,GAAG,CAAC,EAAE,uBAAuB,CAAA;IAC7B,MAAM,CAAC,EAAE,IAAI,CAAC,eAAe,CAAA;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAA;CACX;AACD;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CACzB,IAAI,CAAC,EAAE,QAAQ,EACf,IAAI,GAAE,iBAAsB,GAC1B,MAAM,CAuER;AACD,eAAO,MAAM,OAAO,mBAAa,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.2.33",
+  "version": "1.2.39",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/calendar/Index.vue

@@ -9,7 +9,7 @@ import MonthView from './views/MonthView.vue'
 import WeekView from './views/WeekView.vue'
 
 interface CalendarProps {
-	events: CalendarEvent[]
+	events?: CalendarEvent[]
 	startDate?: Date
 	view?: CalendarView
 	weekStart?: WeekStart
@@ -18,7 +18,8 @@ interface CalendarProps {
 const props = withDefaults(defineProps<CalendarProps>(), {
 	startDate: () => new Date(),
 	view: 'Week',
-	weekStart: 'Sunday'
+	weekStart: 'Sunday',
+	events: () => []
 })
 
 const emit = defineEmits<{

package/src/components/calendar/views/MonthView.vue

@@ -272,30 +272,13 @@ function closePopover() {
   margin: 0.25rem auto;
 }
 
-@media (max-width: 768px) {
-  .day-cell {
-    min-height: 60px;
-    padding: 0.25rem;
-  }
-
-  .day-number {
-    font-size: 0.8rem;
-    margin-bottom: 0.25rem;
-  }
-
-  .weekday {
-    font-size: 0.8rem;
-    padding: 0.25rem;
-  }
-}
-
 .custom-popover {
   position: fixed;
   z-index: 1000;
   min-width: 250px;
   max-width: 350px;
   background-color: white;
-  border-radius: 4px;
+  border-radius: var(--btn-border-radius);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   animation: fadeIn 0.2s ease;
   transform-origin: center left;
@@ -311,4 +294,21 @@ function closePopover() {
     transform: scale(1);
   }
 }
+
+@media (max-width: 768px) {
+  .day-cell {
+    min-height: 60px;
+    padding: 0.25rem;
+  }
+
+  .day-number {
+    font-size: 0.8rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .weekday {
+    font-size: 0.8rem;
+    padding: 0.25rem;
+  }
+}
 </style>

package/src/components/calendar/views/WeekView.vue

@@ -129,7 +129,7 @@ const processedEvents = computed(() => {
 			top,
 			height,
 			left: 0,
-			width: 95,
+			width: 100,
 			overlappingEvents: 0,
 			position: 0
 		}
@@ -317,7 +317,7 @@ onUnmounted(() => {
 							}"
 							@click.stop="slots.eventContent ? openPopover(event, $event) : emit('eventClick', event)"
 						>
-							<div class="overflow-hidden color-text-light p-025 txt12 h-100p">
+							<div class="overflow-hidden color-white p-025 txt12 h-100p">
 								<div class="white-space ellipsis-1">
 									{{ event.title }}
 								</div>
@@ -349,11 +349,11 @@ onUnmounted(() => {
 			ref="popoverRef"
 			v-click-outside="closePopover"
 			thin
-			class="custom-popover fixed z-999 radius-05 bg-white w350"
+			class="custom-popover fixed z-999 radius-1 bg-white "
 			:style="{
 				top: `${popoverPosition.top}px`,
 				left: `${popoverPosition.left}px`,
-				maxWidth: `${popoverPosition.width}px`,
+
 			}"
 		>
 			<slot name="eventContent" :event="activeEvent" />

package/src/components/form/inputs/DateInput.vue

@@ -150,7 +150,7 @@ onMounted(() => {
 <template>
 	<div class="bagel-input" :class="{ small }" :title="label" @focusin="handleFocus">
 		<label v-if="label">
-			{{ label }}
+			<!-- {{ label }} -->
 			<span v-if="required" class="required">*</span>
 		</label>
 		<Dropdown
@@ -163,7 +163,7 @@ onMounted(() => {
 				<div ref="datePickerRef" class="date-picker-container" @mousedown.stop @click.stop>
 					<TextInput
 						:modelValue="formatDisplayDate(selectedDate)"
-						icon="calendar"
+						iconStart="calendar"
 						:min="formatDisplayDate(min)"
 						:max="formatDisplayDate(max)"
 						:required="required"
@@ -196,8 +196,17 @@ onMounted(() => {
 	</div>
 </template>
 
-<style scoped>
+<style>
 .date-picker-container {
 	width: 100%;
 }
+.date-picker-container .date-input{
+	--input-bg: transparent;
+	--input-font-size: 12px;
+	opacity: 0.6;
+	--input-height: 20px;
+}
+.date-picker-container .date-input .bagel-input input{
+	padding: 0 !important;
+}
 </style>

package/src/utils/calendar/dateUtils.ts

@@ -158,9 +158,9 @@ function getBrowserNavigatorLocale(): string {
  * @param timeZone The timezone to use (e.g., 'UTC', 'America/New_York')
  * @returns Date parts with timezone adjustment applied
  */
-export function handleTimezone(date: Date, timeZone: string): Date {
+export function handleTimezone(date: Date, locale: Intl.LocalesArgument, intFmtOpt: Intl.DateTimeFormatOptions): Date {
 	// If timeZone is UTC, convert to UTC directly
-	if (timeZone === 'UTC') {
+	if (intFmtOpt.timeZone === 'UTC') {
 		const utcDate = new Date(date.getTime())
 		utcDate.setMinutes(utcDate.getMinutes() + date.getTimezoneOffset())
 		return utcDate
@@ -169,16 +169,7 @@ export function handleTimezone(date: Date, timeZone: string): Date {
 	// For other timezones, use the Intl API
 	try {
 		// Get the target timezone's offset at this specific date
-		const formatter = new Intl.DateTimeFormat('en-US', {
-			timeZone,
-			timeZoneName: 'short',
-			year: 'numeric',
-			month: 'numeric',
-			day: 'numeric',
-			hour: 'numeric',
-			minute: 'numeric',
-			second: 'numeric',
-		})
+		const formatter = new Intl.DateTimeFormat(locale, intFmtOpt)
 
 		// Format the date in the target timezone
 		const formattedParts = formatter.formatToParts(date)
@@ -203,14 +194,15 @@ export function handleTimezone(date: Date, timeZone: string): Date {
 
 		return adjustedDate
 	} catch (error) {
-		console.warn(`Error handling timezone ${timeZone}:`, error)
+		console.warn(`Error handling timezone ${intFmtOpt.timeZone}:`, error)
 		return date // Return original date on error
 	}
 }
 
-export function getDatePartsMap(date: Date, locale: Intl.LocalesArgument, timeZone?: string) {
+export function getDatePartsMap(date: Date, locale: Intl.LocalesArgument, intFmtOpt?: Intl.DateTimeFormatOptions) {
 	// Apply timezone adjustment if specified
-	const d = timeZone ? handleTimezone(date, timeZone) : date
+	const d = intFmtOpt?.timeZone ? handleTimezone(date, locale, intFmtOpt) : date
+	// const d = date
 
 	/// keep-sorted
 	return {
@@ -242,7 +234,7 @@ const _orderedDateTokens = (
 // ? no longer creating the Regex Objs it in a loop
 const _tokenRegExPattern = new RegExp(_orderedDateTokens.map(token => token).join('|'), 'g')
 
-export interface FormatDateOptions {
+export interface FormatDateOptions extends Partial<Pick<Intl.DateTimeFormatOptions, 'hour12'>> {
 	fmt?: DateTimeAcceptedFormats
 	locale?: Intl.LocalesArgument
 	tz?: string
@@ -258,9 +250,9 @@ export interface FormatDateOptions {
  */
 export function formatDate(
 	date?: DateLike,
-	opts: FormatDateOptions = {}
+	opts: FormatDateOptions = {},
 ): string {
-	let { fmt: format, locale, tz: timeZone } = opts
+	let { fmt: format, locale, tz: timeZone, ...rest } = opts
 
 	if (!date) return ''
 	format = format || 'DD.MM.YY'
@@ -276,21 +268,26 @@ export function formatDate(
 			return ''
 		}
 
-		const datePartsMap = getDatePartsMap(d, locale, timeZone)
-
 		// For more complex formats that need localization, use Intl.DateTimeFormat
 		/// keep-sorted
-		const formatter = new Intl.DateTimeFormat(locale, {
+		const intFmtOpt: Intl.DateTimeFormatOptions = {
 			day: 'numeric',
 			hour: '2-digit',
-			hour12: true,
+
+			// Set default hour12 to true if not explicitly set
+			// hour12: true,
+			hour12: rest.hour12 === undefined ? true : rest.hour12,
 			minute: '2-digit',
 			month: 'long',
 			second: '2-digit',
 			timeZone, // Add timeZone if provided
 			weekday: 'long',
 			year: 'numeric',
-		})
+		}
+
+		const datePartsMap = getDatePartsMap(d, locale, intFmtOpt)
+
+		const formatter = new Intl.DateTimeFormat(locale, intFmtOpt)
 
 		const formattedParts = formatter.formatToParts(d)
 		const partsMap: Partial<Record<Intl.DateTimeFormatPartTypes, string>> = {}