@daypilot/daypilot-lite-vue 3.20.1 → 3.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +56 -72
  2. package/daypilot-vue.min.js +6 -6
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -58,81 +58,65 @@ Use the Vue date picker component (Navigator) to change the current date. The da
58
58
 
59
59
  ```vue
60
60
  <template>
61
- <DayPilotCalendar id="dp" :config="config" ref="calendar" />
61
+ <DayPilotCalendar :config="config" ref="calendarRef" />
62
62
  </template>
63
63
 
64
- <script>
65
- import {DayPilot, DayPilotCalendar} from '@daypilot/daypilot-lite-vue'
66
-
67
- export default {
68
- name: 'Calendar',
69
- data: function() {
70
- return {
71
- config: {
72
- viewType: "Week",
73
- startDate: "2023-02-28",
74
- durationBarVisible: false,
75
- onTimeRangeSelected: async (args) => {
76
- const modal = await DayPilot.Modal.prompt("Create a new event:", "Event 1");
77
- const dp = args.control;
78
- dp.clearSelection();
79
- if (modal.canceled) {
80
- return;
81
- }
82
- dp.events.add({
83
- start: args.start,
84
- end: args.end,
85
- id: DayPilot.guid(),
86
- text: modal.result
87
- });
88
- },
89
- onEventMoved: () => {
90
- console.log("Event moved");
91
- },
92
- onEventResized: () => {
93
- console.log("Event resized");
94
- },
95
- },
96
- }
97
- },
98
- props: {
99
- },
100
- components: {
101
- DayPilotCalendar,
102
- },
103
- computed: {
104
- calendar() {
105
- return this.$refs.calendar.control;
106
- }
107
- },
108
- methods: {
109
- loadEvents() {
110
- // placeholder for an HTTP call
111
- const events = [
112
- {
113
- id: 1,
114
- start: "2023-02-28T10:00:00",
115
- end: "2023-02-28T11:00:00",
116
- text: "Event 1",
117
- backColor: "#6aa84f",
118
- borderColor: "#38761d",
119
- },
120
- {
121
- id: 2,
122
- start: "2023-02-28T13:00:00",
123
- end: "2023-02-28T16:00:00",
124
- text: "Event 2",
125
- backColor: "#f1c232",
126
- borderColor: "#bf9000",
127
- },
128
- ];
129
- this.calendar.update({events});
64
+ <script setup>
65
+ import { DayPilot, DayPilotCalendar } from 'daypilot-pro-vue';
66
+ import { ref, reactive, onMounted } from 'vue';
67
+
68
+ const config = reactive({
69
+ viewType: "Week",
70
+ durationBarVisible: false,
71
+ startDate: "2024-02-28",
72
+ onTimeRangeSelected: async (args) => {
73
+ const modal = await DayPilot.Modal.prompt("Create a new event:", "Event 1");
74
+ const dp = args.control;
75
+ dp.clearSelection();
76
+ if (modal.canceled) { return; }
77
+ dp.events.add({
78
+ start: args.start,
79
+ end: args.end,
80
+ id: DayPilot.guid(),
81
+ text: modal.result
82
+ });
83
+ },
84
+ onEventMoved: () => {
85
+ console.log("Event moved");
130
86
  },
131
- },
132
- mounted() {
133
- this.loadEvents();
134
- }
135
- }
87
+ onEventResized: () => {
88
+ console.log("Event resized");
89
+ },
90
+ });
91
+ const calendarRef = ref(null);
92
+
93
+ const loadEvents = () => {
94
+ const events = [
95
+ {
96
+ id: 1,
97
+ start: "2024-02-28T10:00:00",
98
+ end: "2024-02-28T11:00:00",
99
+ text: "Event 1",
100
+ backColor: "#6aa84f",
101
+ borderColor: "#38761d",
102
+ },
103
+ {
104
+ id: 2,
105
+ start: "2024-02-28T13:00:00",
106
+ end: "2024-02-28T16:00:00",
107
+ text: "Event 2",
108
+ backColor: "#f1c232",
109
+ borderColor: "#bf9000",
110
+ },
111
+ ];
112
+ config.events = events;
113
+ };
114
+
115
+
116
+ onMounted(() => {
117
+ loadEvents();
118
+ calendarRef.value?.control.message("Welcome!");
119
+ });
136
120
  </script>
137
121
  ```
138
122