lesli_calendar 0.2.0 → 0.2.2

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 (42) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/lesli_calendar/application.js +1 -4658
  3. data/app/assets/stylesheets/lesli_calendar/application.css +1 -604
  4. data/app/controllers/lesli_calendar/agendas_controller.rb +60 -0
  5. data/app/controllers/lesli_calendar/calendars_controller.rb +1 -1
  6. data/app/helpers/lesli_calendar/agendas_helper.rb +4 -0
  7. data/app/models/lesli_calendar/agenda.rb +5 -0
  8. data/app/models/lesli_calendar/calendar.rb +1 -0
  9. data/app/models/lesli_calendar/event.rb +3 -2
  10. data/app/services/lesli_calendar/calendar_service.rb +14 -2
  11. data/app/services/lesli_calendar/event_service.rb +57 -0
  12. data/app/views/lesli_calendar/agendas/edit.html.erb +10 -0
  13. data/app/views/lesli_calendar/agendas/index.html.erb +14 -0
  14. data/app/views/lesli_calendar/agendas/new.html.erb +9 -0
  15. data/app/views/lesli_calendar/agendas/show.html.erb +1 -0
  16. data/app/views/lesli_calendar/partials/_engine-navigation.html.erb +3 -2
  17. data/config/locales/translations.en.yml +2 -0
  18. data/config/locales/translations.es.yml +2 -0
  19. data/config/locales/translations.fr.yml +2 -0
  20. data/config/locales/translations.it.yml +2 -0
  21. data/config/locales/translations.pt.yml +2 -0
  22. data/config/routes.rb +3 -0
  23. data/db/migrate/v1.0/0301110110_create_lesli_calendar_events.rb +3 -3
  24. data/db/seed/development.rb +58 -9
  25. data/db/seed/seeds.json +83 -0
  26. data/db/seeds.rb +1 -1
  27. data/lib/lesli_calendar/version.rb +2 -2
  28. data/lib/scss/agenda.scss +101 -0
  29. data/lib/scss/application.scss +11 -0
  30. data/lib/scss/calendar.scss +9 -55
  31. data/lib/scss/dashboard.scss +31 -0
  32. data/lib/vue/application.js +9 -1
  33. data/lib/vue/apps/agendas/show.vue +71 -0
  34. data/lib/vue/apps/calendars/show.vue +26 -20
  35. data/lib/vue/apps/dashboards/show.vue +102 -0
  36. data/lib/vue/components/agenda.vue +75 -54
  37. data/lib/vue/components/calendar.vue +38 -5
  38. data/lib/vue/stores/calendar.js +3 -19
  39. data/lib/vue/stores/translations.json +10 -0
  40. metadata +15 -4
  41. data/app/views/lesli_calendar/calendars/_calendar.html.erb +0 -2
  42. data/app/views/lesli_calendar/calendars/_form.html.erb +0 -17
@@ -32,7 +32,7 @@ Building a better future, one line of code at a time.
32
32
 
33
33
 
34
34
  // ·
35
- @import "Lesli/scss/templates/dashboards";
35
+ @import "Lesli/scss/templates/component";
36
36
 
37
37
 
38
38
  // ·
@@ -41,61 +41,10 @@ $focus-color: #28bca3;
41
41
  $support-color: #a56de2;
42
42
 
43
43
 
44
- // ·
45
- .lesli-calendar-agenda {
46
-
47
- h3 {
48
- color: lesli-css-color(silver, 900);
49
- padding: 14px 0;
50
- }
51
-
52
- .event {
53
- border-bottom: 1px solid lesli-css-color(silver, 300);
54
- min-height: 100px;
55
-
56
- .date {
57
- flex: 0 0 70px;
58
- text-align: center;
59
- color: lesli-css-color(silver, 900);
60
-
61
- .day-number {
62
- font-weight: 700;
63
- font-size: 1.2rem;
64
- }
65
- }
66
-
67
- .description {
68
- line-height: 1.2;
69
- font-size: 0.9rem;
70
- padding: 3px 0 3px 18px;
71
- border-left: 3px solid lesli-css-color(silver);
72
-
73
- p:first-child {
74
- margin-bottom: 4px;
75
- font-weight: 700;
76
- font-size: 0.9rem;
77
- }
78
-
79
- &.cloud-driver-events {
80
- border-left-color: $driver-color;
81
- }
82
-
83
- &.cloud-focus-tasks {
84
- border-left-color: $focus-color;
85
- }
86
-
87
- &.lesli-support {
88
- border-left-color: $support-color;
89
- }
90
- }
91
- }
92
- }
93
-
94
-
95
44
  // ·
96
45
  #lesli-calendar {
97
46
  background-color: white;
98
- box-shadow: $lesli-box-shadow;
47
+ //box-shadow: $lesli-box-shadow;
99
48
 
100
49
  .fc-header-toolbar {
101
50
  height: 0px !important;
@@ -109,19 +58,24 @@ $support-color: #a56de2;
109
58
  .fc-scrollgrid {
110
59
  border: none !important;
111
60
 
61
+ // remove the last right border for the header
62
+ th[role="presentation"] {
63
+ border: none;
64
+ }
65
+
112
66
  // calendar header (day names)
113
67
  .fc-scrollgrid-section-header {
114
68
 
115
69
  .fc-col-header-cell {
116
- padding: .8rem 0;
70
+ padding: 0 0 .8rem;
117
71
  text-align: center;
118
72
  border-left-width: 0;
119
73
  border-right-width: 0;
74
+
120
75
  a {
121
76
  color: lesli-css-color(silver, 900)
122
77
  }
123
78
  }
124
-
125
79
  }
126
80
 
127
81
  .fc-scrollgrid-section-body {
@@ -0,0 +1,31 @@
1
+ /*
2
+
3
+ Lesli
4
+
5
+ Copyright (c) 2023, Lesli Technologies, S. A.
6
+
7
+ This program is free software: you can redistribute it and/or modify
8
+ it under the terms of the GNU General Public License as published by
9
+ the Free Software Foundation, either version 3 of the License, or
10
+ (at your option) any later version.
11
+
12
+ This program is distributed in the hope that it will be useful,
13
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
14
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
15
+ GNU General Public License for more details.
16
+
17
+ You should have received a copy of the GNU General Public License
18
+ along with this program. If not, see http://www.gnu.org/licenses/.
19
+
20
+ Lesli · Ruby on Rails SaaS Development Framework.
21
+
22
+ Made with ♥ by https://www.lesli.tech
23
+ Building a better future, one line of code at a time.
24
+
25
+ @contact hello@lesli.tech
26
+ @website https://www.lesli.tech
27
+ @license GPLv3 http://www.gnu.org/licenses/gpl-3.0.en.html
28
+
29
+ // · ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~
30
+ // ·
31
+ */
@@ -37,11 +37,13 @@ import translation from "Lesli/vue/translation"
37
37
 
38
38
 
39
39
  // · Import engine translations
40
- import translations from "LesliBabel/vue/stores/translations.json"
40
+ import translations from "LesliCalendar/vue/stores/translations.json"
41
41
 
42
42
 
43
43
  // · Import apps and components
44
+ import appDashboardShow from "LesliCalendar/vue/apps/dashboards/show.vue"
44
45
  import appCalendarShow from "LesliCalendar/vue/apps/calendars/show.vue"
46
+ import appAgendaShow from "LesliCalendar/vue/apps/agendas/show.vue"
45
47
  import appEventsIndex from "LesliCalendar/vue/apps/events/index.vue"
46
48
 
47
49
 
@@ -52,7 +54,13 @@ translation(translations)
52
54
  // ·
53
55
  application("LesliCalendar", [{
54
56
  path: "/",
57
+ component: appDashboardShow
58
+ }, {
59
+ path: "/calendar",
55
60
  component: appCalendarShow
61
+ }, {
62
+ path: "/agenda",
63
+ component: appAgendaShow
56
64
  }, {
57
65
  path: "/events",
58
66
  component: appEventsIndex
@@ -0,0 +1,71 @@
1
+ <script setup>
2
+ /*
3
+ Lesli
4
+
5
+ Copyright (c) 2023, Lesli Technologies, S. A.
6
+
7
+ This program is free software: you can redistribute it and/or modify
8
+ it under the terms of the GNU General Public License as published by
9
+ the Free Software Foundation, either version 3 of the License, or
10
+ (at your option) any later version.
11
+
12
+ This program is distributed in the hope that it will be useful,
13
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
14
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
15
+ GNU General Public License for more details.
16
+
17
+ You should have received a copy of the GNU General Public License
18
+ along with this program. If not, see http://www.gnu.org/licenses/.
19
+
20
+ Lesli · Ruby on Rails SaaS Development Framework.
21
+
22
+ Made with ♥ by LesliTech
23
+ Building a better future, one line of code at a time.
24
+
25
+ @contact hello@lesli.tech
26
+ @website https://www.lesli.tech
27
+ @license GPLv3 http://www.gnu.org/licenses/gpl-3.0.en.html
28
+
29
+ // · ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~
30
+ // ·
31
+ */
32
+
33
+
34
+ // · import vue tools
35
+ import { ref, reactive, onMounted, watch, computed, inject } from "vue"
36
+ import { useRouter, useRoute } from "vue-router"
37
+
38
+
39
+ // ·
40
+ import { useCalendar } from "LesliCalendar/vue/stores/calendar.js"
41
+
42
+
43
+ // ·
44
+ const storeCalendar = useCalendar()
45
+ const date = inject("date")
46
+
47
+
48
+ // · Import components
49
+ import componentCalendar from "LesliCalendar/vue/components/calendar.vue"
50
+ import componentAgenda from "LesliCalendar/vue/components/agenda.vue"
51
+ import componentPanelEvent from "LesliCalendar/vue/components/event.vue"
52
+
53
+ onMounted(() => {
54
+ storeCalendar.getCalendar()
55
+ })
56
+
57
+ </script>
58
+ <template>
59
+ <lesli-application-container>
60
+ <lesli-header :title="date.dateWords()">
61
+ <lesli-button solid icon="add">
62
+ Add event
63
+ </lesli-button>
64
+ </lesli-header>
65
+
66
+ <component-agenda>
67
+ </component-agenda>
68
+
69
+ <component-panel-event></component-panel-event>
70
+ </lesli-application-container>
71
+ </template>
@@ -1,18 +1,32 @@
1
1
  <script setup>
2
2
  /*
3
- Copyright (c) 2023, all rights reserved.
3
+ Lesli
4
4
 
5
- All the information provided by this platform is protected by international laws related to
6
- industrial property, intellectual property, copyright and relative international laws.
7
- All intellectual or industrial property rights of the code, texts, trade mark, design,
8
- pictures and any other information belongs to the owner of this platform.
5
+ Copyright (c) 2023, Lesli Technologies, S. A.
9
6
 
10
- Without the written permission of the owner, any replication, modification,
11
- transmission, publication is strictly forbidden.
7
+ This program is free software: you can redistribute it and/or modify
8
+ it under the terms of the GNU General Public License as published by
9
+ the Free Software Foundation, either version 3 of the License, or
10
+ (at your option) any later version.
12
11
 
13
- For more information read the license file including with this software.
12
+ This program is distributed in the hope that it will be useful,
13
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
14
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
15
+ GNU General Public License for more details.
14
16
 
15
- // · ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~
17
+ You should have received a copy of the GNU General Public License
18
+ along with this program. If not, see http://www.gnu.org/licenses/.
19
+
20
+ Lesli · Ruby on Rails SaaS Development Framework.
21
+
22
+ Made with ♥ by LesliTech
23
+ Building a better future, one line of code at a time.
24
+
25
+ @contact hello@lesli.tech
26
+ @website https://www.lesli.tech
27
+ @license GPLv3 http://www.gnu.org/licenses/gpl-3.0.en.html
28
+
29
+ // · ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~
16
30
  // ·
17
31
  */
18
32
 
@@ -42,7 +56,7 @@ onMounted(() => {
42
56
 
43
57
  </script>
44
58
  <template>
45
- <lesli-application-container dashboard>
59
+ <lesli-application-container>
46
60
  <lesli-header :title="date.dateWords()">
47
61
  <div class="field has-addons m-0">
48
62
  <div class="control">
@@ -71,16 +85,8 @@ onMounted(() => {
71
85
  </lesli-button>
72
86
  </lesli-header>
73
87
 
74
- <div class="columns">
75
- <div class="column is-3">
76
- <component-agenda>
77
- </component-agenda>
78
- </div>
79
- <div class="column">
80
- <component-calendar class="mt-4">
81
- </component-calendar>
82
- </div>
83
- </div>
88
+ <component-calendar class="mt-4">
89
+ </component-calendar>
84
90
 
85
91
  <component-panel-event></component-panel-event>
86
92
  </lesli-application-container>
@@ -0,0 +1,102 @@
1
+ <script setup>
2
+ /*
3
+ Lesli
4
+
5
+ Copyright (c) 2023, Lesli Technologies, S. A.
6
+
7
+ This program is free software: you can redistribute it and/or modify
8
+ it under the terms of the GNU General Public License as published by
9
+ the Free Software Foundation, either version 3 of the License, or
10
+ (at your option) any later version.
11
+
12
+ This program is distributed in the hope that it will be useful,
13
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
14
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
15
+ GNU General Public License for more details.
16
+
17
+ You should have received a copy of the GNU General Public License
18
+ along with this program. If not, see http://www.gnu.org/licenses/.
19
+
20
+ Lesli · Ruby on Rails SaaS Development Framework.
21
+
22
+ Made with ♥ by LesliTech
23
+ Building a better future, one line of code at a time.
24
+
25
+ @contact hello@lesli.tech
26
+ @website https://www.lesli.tech
27
+ @license GPLv3 http://www.gnu.org/licenses/gpl-3.0.en.html
28
+
29
+ // · ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~
30
+ // ·
31
+ */
32
+
33
+
34
+ // · import vue tools
35
+ import { ref, reactive, onMounted, watch, computed, inject } from "vue"
36
+ import { useRouter, useRoute } from "vue-router"
37
+
38
+
39
+ // ·
40
+ import { useCalendar } from "LesliCalendar/vue/stores/calendar.js"
41
+
42
+
43
+ // ·
44
+ const date = inject("date")
45
+ const storeCalendar = useCalendar()
46
+
47
+
48
+ // · Import components
49
+ import componentAgenda from "LesliCalendar/vue/components/agenda.vue"
50
+ import componentCalendar from "LesliCalendar/vue/components/calendar.vue"
51
+ import componentPanelEvent from "LesliCalendar/vue/components/event.vue"
52
+
53
+
54
+ // ·
55
+ onMounted(() => {
56
+ storeCalendar.getCalendar()
57
+ })
58
+ </script>
59
+ <template>
60
+ <lesli-application-container dashboard>
61
+ <lesli-header :title="date.dateWords()">
62
+ <div class="field has-addons m-0">
63
+ <div class="control">
64
+ <lesli-button icon="arrow_back_ios">
65
+ prev
66
+ </lesli-button>
67
+ </div>
68
+ <div class="control">
69
+ <lesli-button>
70
+ today
71
+ </lesli-button>
72
+ </div>
73
+ <div class="control">
74
+ <button class="button is-primary is-light is-outlined">
75
+ <span>next</span>
76
+ <span class="icon">
77
+ <span class="material-icons">
78
+ arrow_forward_ios
79
+ </span>
80
+ </span>
81
+ </button>
82
+ </div>
83
+ </div>
84
+ <lesli-button solid icon="add">
85
+ Add event
86
+ </lesli-button>
87
+ </lesli-header>
88
+
89
+ <!-- <pre><code>{{ storeCalendar.calendar }}</code></pre> -->
90
+
91
+ <div class="columns">
92
+ <div class="column is-3">
93
+ <component-agenda></component-agenda>
94
+ </div>
95
+ <div class="column">
96
+ <component-calendar></component-calendar>
97
+ </div>
98
+ </div>
99
+
100
+ <component-panel-event></component-panel-event>
101
+ </lesli-application-container>
102
+ </template>
@@ -19,7 +19,7 @@ along with this program. If not, see http://www.gnu.org/licenses/.
19
19
 
20
20
  Lesli · Ruby on Rails SaaS Development Framework.
21
21
 
22
- Made with ♥ by https://www.lesli.tech
22
+ Made with ♥ by LesliTech
23
23
  Building a better future, one line of code at a time.
24
24
 
25
25
  @contact hello@lesli.tech
@@ -34,18 +34,21 @@ Building a better future, one line of code at a time.
34
34
  // ·
35
35
  import { onMounted, watch, ref, inject } from "vue"
36
36
 
37
+
38
+ // ·
37
39
  import dayjs from "dayjs"
38
40
  import isSameOrAfter from "dayjs/plugin/isSameOrAfter"
39
- dayjs.extend(isSameOrAfter)
40
41
 
41
- // ·
42
42
 
43
+ // ·
44
+ dayjs.extend(isSameOrAfter)
43
45
 
44
46
 
45
47
  // · import lesli stores
46
48
  import { useCalendar } from "LesliCalendar/vue/stores/calendar"
47
49
 
48
50
 
51
+ // ·
49
52
  const date = inject("date")
50
53
 
51
54
 
@@ -58,80 +61,98 @@ const agenda = ref([])
58
61
  const today = dayjs()
59
62
 
60
63
 
61
- // ·
62
- function merge() {
64
+ // Function to merge and group events by date
65
+ function mergeAndGroupEvents() {
63
66
 
64
- let events = [
65
- ...storeCalendar.calendarData.events,
66
- ...storeCalendar.calendarData.events_support
67
- ]
68
-
69
- let count = 0
67
+ // Get current date and time
68
+ const currentDate = dayjs();
70
69
 
71
- events = events.filter(event => {
70
+ // Combine events and support events into one array
71
+ const mergedEvents = [
72
+ ...storeCalendar.calendar.events,
73
+ ...storeCalendar.calendar.events_support
74
+ ];
72
75
 
73
- // limit the number of events to show in the agenda
74
- if (count >= 6) {
75
- return
76
- }
76
+ // Filter out past events
77
+ const filteredEvents = mergedEvents.filter(event => {
78
+ return !dayjs(event.start).isBefore(currentDate, "day");
79
+ });
80
+
81
+ // Group events by date
82
+ const groupedEvents = filteredEvents.reduce((acc, event) => {
77
83
 
78
84
  let eventDate = dayjs(event.start)
79
-
80
- // Do not process past events
81
- if (eventDate.isBefore(today, "day")) {
82
- return
83
- }
84
-
85
- // show today event description by default
86
- event.dayName = "Today"
87
- event.dayNumber = eventDate.format("HH:mm")
88
-
89
- // If the event is NOT today, show only the time
90
- if (!eventDate.isSame(today, "day")) {
91
- event.dayName = eventDate.format("ddd")
92
- event.dayNumber = eventDate.format("DD")
93
- }
94
85
 
86
+ // Extract date key from event start date
87
+ const dateKey = eventDate.format('YYYY-MM-DD');
88
+
89
+ // Create array for the date key if it doesn't exist
90
+ if (!acc[dateKey]) {
91
+
92
+ let dayName = "Today"
93
+ let dayNumber = eventDate.format("HH:mm")
94
+
95
+ if (!eventDate.isSame(currentDate, "day")) {
96
+ dayName = eventDate.format("ddd")
97
+ dayNumber = eventDate.format("DD")
98
+ }
99
+
100
+ acc[dateKey] = {
101
+ dayName: dayName,
102
+ dayNumber: dayNumber,
103
+ events: []
104
+ }
105
+ }
95
106
 
96
107
  if (event.description) {
97
108
  event.description = event.description
98
109
  .replace(/<[^>]*>?/gm, '') // remove html tags from string
99
- .substring(0, 40) + '...' // get a excerpt of the description
110
+ .substring(0, 35) + '...' // get a excerpt of the description
100
111
  }
101
112
 
102
- event.classNames = event.classNames
113
+ // Add event to the array corresponding to its date
114
+ acc[dateKey].events.push(event);
103
115
 
104
- count++
116
+ return acc;
117
+ }, {});
105
118
 
106
- return event
119
+ // Sort the groups by date
120
+ const sortedGroupedEvents = Object.keys(groupedEvents)
121
+ .sort()
122
+ .reduce((acc, key) => {
123
+ acc[key] = groupedEvents[key];
124
+ return acc;
125
+ }, {});
107
126
 
108
- })
109
-
110
- events = events.sort((a,b) => a.time > b.time)
111
-
112
- agenda.value = events
127
+ agenda.value = sortedGroupedEvents;
113
128
  }
114
129
 
130
+ onMounted(() => {
131
+ mergeAndGroupEvents()
132
+ })
115
133
 
116
134
  // ·
117
- watch(() => storeCalendar.calendarData.events_support, () => merge())
135
+ watch(() => storeCalendar.calendar.id, (a,b) => {
136
+ mergeAndGroupEvents()
137
+ })
118
138
 
119
139
  </script>
120
140
  <template>
121
- <div class="lesli-calendar-agenda">
141
+ <div class="lesli-calendar-agenda box">
122
142
  <h3>Upcoming events</h3>
123
- <div
124
- class="is-flex is-align-items-center event"
125
- v-for="(event, index) in agenda"
126
- :key="index">
127
- <div class="date">
128
- <p class="day-name">{{ event.dayName }}</p>
129
- <p class="day-number">{{ event.dayNumber }}</p>
130
- </div>
131
- <div :class="['description', event.classNames]">
132
- <p>{{ event.title }}</p>
133
- <p>{{ event.description }}</p>
143
+ <template v-for="day in agenda">
144
+ <div class="event is-flex is-align-items-center">
145
+ <div class="date">
146
+ <p class="day-name">{{ day.dayName }}</p>
147
+ <p class="day-number">{{ day.dayNumber }}</p>
148
+ </div>
149
+ <div class="description">
150
+ <div :class="event.classNames" v-for="(event, index) in day.events" :key="index">
151
+ <p>{{ event.title }}</p>
152
+ <p>{{ event.description }}</p>
153
+ </div>
154
+ </div>
134
155
  </div>
135
- </div>
156
+ </template>
136
157
  </div>
137
158
  </template>
@@ -32,7 +32,7 @@ Building a better future, one line of code at a time.
32
32
 
33
33
 
34
34
  // · Import components, libraries and tools
35
- import { onMounted, inject, ref } from "vue"
35
+ import { onMounted, watch, inject, ref } from "vue"
36
36
 
37
37
  import { Calendar } from "@fullcalendar/core";
38
38
  import listPlugin from "@fullcalendar/list";
@@ -51,6 +51,7 @@ const storeCalendar = useCalendar()
51
51
 
52
52
  // ·
53
53
  const date = inject("date")
54
+ const calendar = ref(false)
54
55
 
55
56
 
56
57
  function onDateClick() {
@@ -104,10 +105,37 @@ function onEventContent(args) {
104
105
 
105
106
  }
106
107
 
108
+
109
+ function loadEvents() {
110
+
111
+ // Add calendar events
112
+ storeCalendar.calendar.events.forEach(event => {
113
+ calendar.value.addEvent({
114
+ title: event.title,
115
+ start: event.date,
116
+ description: event.description,
117
+ classNames: event.classNames
118
+ })
119
+ })
120
+
121
+ // Add calendar events
122
+ storeCalendar.calendar.events_support.forEach(event => {
123
+ calendar.value.addEvent({
124
+ title: event.title,
125
+ start: event.date,
126
+ description: event.description,
127
+ classNames: event.classNames
128
+ })
129
+ })
130
+
131
+ }
132
+
133
+
134
+
107
135
  // ·
108
136
  onMounted(() => {
109
137
 
110
- storeCalendar.calendar = new Calendar(document.getElementById("lesli-calendar"), {
138
+ calendar.value = new Calendar(document.getElementById("lesli-calendar"), {
111
139
  plugins: [
112
140
  dayGridPlugin,
113
141
  interactionPlugin,
@@ -126,12 +154,17 @@ onMounted(() => {
126
154
  //eventContent: onEventContent
127
155
  });
128
156
 
129
- setTimeout(() => { storeCalendar.calendar.render(); }, 200)
157
+ loadEvents()
130
158
 
159
+ setTimeout(() => { calendar.value.render(); }, 200)
131
160
  })
132
161
 
133
- </script>
134
162
 
163
+ // ·
164
+ watch(() => storeCalendar.calendar.id, (a,b) => {
165
+ loadEvents()
166
+ })
167
+ </script>
135
168
  <template>
136
- <div id="lesli-calendar"></div>
169
+ <div id="lesli-calendar" class="box"></div>
137
170
  </template>