@daypilot/daypilot-lite-vue 3.29.0 → 3.30.1

package/README.md

@@ -1,6 +1,13 @@
 # DayPilot Lite for Vue
 
-[DayPilot Lite for JavaScript](https://javascript.daypilot.org/open-source/) is a library of JavaScript/HTML5 event calendar/scheduler components that can display day/week/month calendar views. It includes a Vue version.
+[DayPilot Lite for JavaScript](https://javascript.daypilot.org/open-source/) is a library of JavaScript/HTML5 scheduling components that can display calendar/scheduler UI:
+* day
+* week
+* month
+* resource calendar (resources as columns)
+* custom number of days as columns
+
+This is the DayPilot Lite for Vue package.
 
 ## What's New
 
@@ -25,27 +32,50 @@ Customize the scheduling components using an online [UI Builder](https://builder
 * Event duration bar with customizable color
 * Date picker with free/busy days highlighting, free-hand range selection, day cell customization
 * CSS themes (use theme builder to create your own theme)
-* Event customization (text, HTML, colors...)
+* Event customization (text, HTML, icons, colors, Vue components...)
+* Grid cell customization
 * Built-in XSS protection
 * Localization support
 * TypeScript definitions
+* Vue template support
 
 ## Tutorials
 
-### Vue Weekly Calendar Tutorial
+### Vue Calendar with Day/Week/Month Views
 
-[![Vue Weekly Calendar](https://static.daypilot.org/npm/202207/vue-weekly-calendar-tutorial.png)](https://code.daypilot.org/10748/vue-js-weekly-calendar-tutorial)
+[![Vue Calendar with Day/Week/Month Views](https://static.daypilot.org/npm/202411/vue-calendar-with-day-week-month-views-open-source.png)](https://code.daypilot.org/54002/vue-calendar-day-week-month-open-source)
 
-[Vue.js Weekly Calendar Tutorial (Open-Source)](https://code.daypilot.org/10748/vue-js-weekly-calendar-tutorial)  
-How to create a weekly calendar web application using a Vue calendar component. The tutorial includes a Vue.js project with JavaScript source code for download.
+[Vue Calendar with Day/Week/Month Views (Open-Source)](https://code.daypilot.org/54002/vue-calendar-day-week-month-open-source)  
+Create a complex calendar UI in Vue.js with multiple views, view-switching buttons and an integrated date picker. Use a shared data source to make it fast and Vue templates to define event appearance.
 
-### Vue Resource Calendar
+### Vue Resource Calendar Tutorial
 
 [![Vue Resource Calendar](https://static.daypilot.org/npm/202207/vue-resource-calendar-tutorial.png)](https://code.daypilot.org/66224/vue-resource-calendar-open-source)
 
 [Vue Resource Calendar (Open-Source)](https://code.daypilot.org/66224/vue-resource-calendar-open-source)  
 Use the Vue calendar component to display an interactive schedule for multiple resources.
 
+### Vue Calendar: Using Event Templates
+
+[![Vue Calendar: Using Templates to Add Icons, Buttons, or Progress Bars to Events (Open-Source)](https://static.daypilot.org/npm/202411/vue-calendar-using-templates-to-add-icons-buttons-progress-bars-open-source.png)](https://code.daypilot.org/34309/vue-calendar-templates-open-source)
+
+[Vue Calendar: Using Templates to Add Icons, Buttons, or Progress Bars to Events (Open-Source)](https://code.daypilot.org/34309/vue-calendar-templates-open-source)  
+Vue templates allow adding dynamic content to Vue Calendar events, including interactive elements and custom Vue components.
+
+### Vue Monthly Calendar/Scheduler Tutorial
+
+[![Vue Monthly Calendar/Scheduler (Open-Source)](https://static.daypilot.org/npm/202411/vue-monthly-calendar-scheduler-open-source.png)](https://code.daypilot.org/89705/vue-monthly-calendar-scheduler-open-source)
+
+[Vue Monthly Calendar/Scheduler (Open-Source)](https://code.daypilot.org/89705/vue-monthly-calendar-scheduler-open-source)  
+How to create a monthly calendar/scheduler view for planning events, tasks, and reminders in Vue. The downloadable Vue project uses the open-source DayPilot Lite library.
+
+### Vue Weekly Calendar Tutorial
+
+[![Vue Weekly Calendar](https://static.daypilot.org/npm/202411/vue-js-weekly-calendar-open-source.png)](https://code.daypilot.org/10748/vue-js-weekly-calendar-tutorial)
+
+[Vue.js Weekly Calendar Tutorial (Open-Source)](https://code.daypilot.org/10748/vue-js-weekly-calendar-tutorial)  
+How to create a weekly calendar web application using a Vue calendar component. The tutorial includes a Vue.js project with JavaScript source code for download.
+
 ### Vue Date Picker Tutorial
 
 [![Vue Date Picker with Free/Busy Highlighting](https://static.daypilot.org/npm/202207/vue-date-picker-free-busy.png)](https://code.daypilot.org/99014/vue-date-picker-with-free-busy-highlighting)
@@ -58,65 +88,74 @@ Use the Vue date picker component (Navigator) to change the current date. The da
 
 ```vue
 <template>
-    <DayPilotCalendar :config="config" ref="calendarRef" />
+    <DayPilotCalendar
+        viewType="Week"
+        :events="events"
+        :durationBarVisible="false"
+        :startDate="startDate"
+        :eventBorderRadius="5"
+        @timeRangeSelected="onTimeRangeSelected"
+        @eventMoved="onEventMoved"
+        @eventResized="onEventResized"
+        ref="calendarRef"
+    />
 </template>
 
 <script setup>
-    import { DayPilot, DayPilotCalendar } from 'daypilot-pro-vue';
-    import { ref, reactive, onMounted } from 'vue';
-
-    const config = reactive({
-        viewType: "Week",
-        durationBarVisible: false,
-        startDate: "2024-02-28",
-        onTimeRangeSelected: async (args) => {
-            const modal = await DayPilot.Modal.prompt("Create a new event:", "Event 1");
-            const dp = args.control;
-            dp.clearSelection();
-            if (modal.canceled) { return; }
-            dp.events.add({
-                start: args.start,
-                end: args.end,
-                id: DayPilot.guid(),
-                text: modal.result
-            });
-        },
-        onEventMoved: () => {
-            console.log("Event moved");
-        },
-        onEventResized: () => {
-            console.log("Event resized");
-        },
-    });
+    import { DayPilot, DayPilotCalendar } from '@daypilot/daypilot-lite-vue';
+    import { ref, onMounted } from 'vue';
+
+    const startDate = ref("2025-02-28");
+    const events = ref([]);
+
     const calendarRef = ref(null);
 
+    const onTimeRangeSelected = async (args) => {
+        const modal = await DayPilot.Modal.prompt("Create a new event:", "Event 1")
+        const calendar = args.control
+        calendar.clearSelection()
+        if (modal.canceled) { return }
+        calendar.events.add({
+            start: args.start,
+            end: args.end,
+            id: DayPilot.guid(),
+            text: modal.result
+        })
+    }
+
+    const onEventMoved = () => {
+        console.log("Event moved")
+    }
+
+    const onEventResized = () => {
+        console.log("Event resized")
+    }
+
     const loadEvents = () => {
-        const events = [
+        events.value = [
             {
                 id: 1,
-                start: "2024-02-28T10:00:00",
-                end: "2024-02-28T11:00:00",
+                start: "2025-02-28T10:00:00",
+                end: "2025-02-28T11:00:00",
                 text: "Event 1",
-                backColor: "#6aa84f",
+                backColor: "#6aa84faa",
                 borderColor: "#38761d",
             },
             {
                 id: 2,
-                start: "2024-02-28T13:00:00",
-                end: "2024-02-28T16:00:00",
+                start: "2025-02-28T13:00:00",
+                end: "2025-02-28T16:00:00",
                 text: "Event 2",
-                backColor: "#f1c232",
+                backColor: "#f1c232aa",
                 borderColor: "#bf9000",
             },
-        ];
-        config.events = events;
+        ]
     };
 
-
     onMounted(() => {
-        loadEvents();
-        calendarRef.value?.control.message("Welcome!");
-    });
+        loadEvents()
+    })
+
 </script>
 ```
 

package/daypilot-vue.min.d.ts

@@ -163,13 +163,17 @@ export module DayPilot {
             readonly start: DayPilot.Date;
             readonly end: DayPilot.Date;
             readonly resource: ResourceId;
+            readonly x: number;
+            readonly y: number;
             readonly properties: {
                 html: string;
                 business: boolean;
                 backColor: string;
                 backImage: string;
                 backRepeat: string;
+                fontColor: string;
                 cssClass: string;
+                text: string;
             };
         };
     }
@@ -324,6 +328,7 @@ export module DayPilot {
         cellMarginBottom?: number;
         contextMenu?: DayPilot.Menu;
         eventBarVisible?: boolean;
+        eventBorderRadius?: string | number;
         eventClickHandling?: "Enabled" | "Disabled" | "CallBack" | "ContextMenu";
         eventRightClickHandling?: "ContextMenu" | "Enabled" | "Disabled";
         eventHeight?: number;
@@ -1039,6 +1044,7 @@ export module DayPilot {
         action?: "Default" | "None" | "ContextMenu" | "ResizeEnd" | "ResizeStart" | "Move";
         backColor?: string;
         background?: string;
+        borderRadius?: number | string;
         bottom?: number | string;
         cssClass?: string;
         fontColor?: string;