rdv: add dynamic event sources in fullcalendar (WIP)

This commit is contained in:
nobohan
2021-08-17 21:06:32 +02:00
parent 07f086dd61
commit e499ebdf8b
3 changed files with 230 additions and 118 deletions

View File

@@ -1,20 +1,82 @@
<template>
<concerned-groups></concerned-groups>
<calendar-user-selector></calendar-user-selector>
<calendar-event></calendar-event>
<concerned-groups></concerned-groups>
<calendar-user-selector
v-bind:users="users"
v-bind:calendarEvents="calendarEvents"
v-bind:updateEventsSource="updateEventsSource">
</calendar-user-selector>
<calendar-event
v-bind:calendarEvents="calendarEvents">
</calendar-event>
</template>
<script>
import ConcernedGroups from 'ChillActivityAssets/vuejs/Activity/components/ConcernedGroups.vue';
import CalendarEvent from '../_components/CalendarEvent/CalendarEvent.vue';
import CalendarUserSelector from '../_components/CalendarUserSelector/CalendarUserSelector.vue';
import { fetchCalendarRanges } from '../_components/CalendarEvent/js/api';
export default {
name: "App",
components: {
ConcernedGroups,
CalendarEvent,
CalendarUserSelector,
}
name: "App",
components: {
ConcernedGroups,
CalendarEvent,
CalendarUserSelector,
},
data() {
return {
errorMsg: [],
users: {
loaded: [],
selected: []
},
calendarEvents: {
loaded: [],
selected: []
}
}
},
methods: {
updateEventsSource() {
console.log('updateEventsSource')
//TODO: how to update source events??? use https://fullcalendar.io/docs/Calendar-addEventSource?
//TODO
// fetchCalendarRanges().then(calendarRanges => new Promise((resolve, reject) => {
// let calendarEvents = [];
// calendarRanges.results.forEach(i => {
// calendarEvents.push({
// })
// });
// this.calendarEvents = calendarEvents;
// resolve()
// }))
// .catch((error) => {
// this.errorMsg.push(error.message);
// });
// this.calendarEvents = [
// {
// events: [
// {
// title: 'Event1',
// start: '2021-08-04T12:30:00'
// },
// {
// title: 'Event2',
// start: '2021-08-05T12:30:00'
// }
// ],
// color: 'yellow', // an option!
// textColor: 'black' // an option!
// }
// ]
}
},
// mounted() {
// this.init();
// }
}
</script>