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.
- checksums.yaml +4 -4
- data/app/assets/javascripts/lesli_calendar/application.js +1 -4658
- data/app/assets/stylesheets/lesli_calendar/application.css +1 -604
- data/app/controllers/lesli_calendar/agendas_controller.rb +60 -0
- data/app/controllers/lesli_calendar/calendars_controller.rb +1 -1
- data/app/helpers/lesli_calendar/agendas_helper.rb +4 -0
- data/app/models/lesli_calendar/agenda.rb +5 -0
- data/app/models/lesli_calendar/calendar.rb +1 -0
- data/app/models/lesli_calendar/event.rb +3 -2
- data/app/services/lesli_calendar/calendar_service.rb +14 -2
- data/app/services/lesli_calendar/event_service.rb +57 -0
- data/app/views/lesli_calendar/agendas/edit.html.erb +10 -0
- data/app/views/lesli_calendar/agendas/index.html.erb +14 -0
- data/app/views/lesli_calendar/agendas/new.html.erb +9 -0
- data/app/views/lesli_calendar/agendas/show.html.erb +1 -0
- data/app/views/lesli_calendar/partials/_engine-navigation.html.erb +3 -2
- data/config/locales/translations.en.yml +2 -0
- data/config/locales/translations.es.yml +2 -0
- data/config/locales/translations.fr.yml +2 -0
- data/config/locales/translations.it.yml +2 -0
- data/config/locales/translations.pt.yml +2 -0
- data/config/routes.rb +3 -0
- data/db/migrate/v1.0/0301110110_create_lesli_calendar_events.rb +3 -3
- data/db/seed/development.rb +58 -9
- data/db/seed/seeds.json +83 -0
- data/db/seeds.rb +1 -1
- data/lib/lesli_calendar/version.rb +2 -2
- data/lib/scss/agenda.scss +101 -0
- data/lib/scss/application.scss +11 -0
- data/lib/scss/calendar.scss +9 -55
- data/lib/scss/dashboard.scss +31 -0
- data/lib/vue/application.js +9 -1
- data/lib/vue/apps/agendas/show.vue +71 -0
- data/lib/vue/apps/calendars/show.vue +26 -20
- data/lib/vue/apps/dashboards/show.vue +102 -0
- data/lib/vue/components/agenda.vue +75 -54
- data/lib/vue/components/calendar.vue +38 -5
- data/lib/vue/stores/calendar.js +3 -19
- data/lib/vue/stores/translations.json +10 -0
- metadata +15 -4
- data/app/views/lesli_calendar/calendars/_calendar.html.erb +0 -2
- data/app/views/lesli_calendar/calendars/_form.html.erb +0 -17
data/lib/scss/calendar.scss
CHANGED
@@ -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/
|
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
|
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
|
+
*/
|
data/lib/vue/application.js
CHANGED
@@ -37,11 +37,13 @@ import translation from "Lesli/vue/translation"
|
|
37
37
|
|
38
38
|
|
39
39
|
// · Import engine translations
|
40
|
-
import translations from "
|
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
|
-
|
3
|
+
Lesli
|
4
4
|
|
5
|
-
|
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
|
-
|
11
|
-
|
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
|
-
|
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
|
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
|
-
<
|
75
|
-
|
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
|
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
|
64
|
+
// Function to merge and group events by date
|
65
|
+
function mergeAndGroupEvents() {
|
63
66
|
|
64
|
-
|
65
|
-
|
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
|
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
|
-
|
74
|
-
|
75
|
-
|
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,
|
110
|
+
.substring(0, 35) + '...' // get a excerpt of the description
|
100
111
|
}
|
101
112
|
|
102
|
-
event
|
113
|
+
// Add event to the array corresponding to its date
|
114
|
+
acc[dateKey].events.push(event);
|
103
115
|
|
104
|
-
|
116
|
+
return acc;
|
117
|
+
}, {});
|
105
118
|
|
106
|
-
|
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.
|
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
|
-
<
|
124
|
-
class="is-flex is-align-items-center
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
<
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
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
|
-
</
|
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
|
-
|
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
|
-
|
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>
|