mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-10-31 17:28:23 +00:00
rdv: fullcalendar: update events source dynamically
This commit is contained in:
nobohan
@@ -4,24 +4,30 @@
|
||||
v-bind:users="users"
|
||||
v-bind:calendarEvents="calendarEvents"
|
||||
v-bind:updateEventsSource="updateEventsSource">
|
||||
</calendar-user-selector>
|
||||
<calendar-event
|
||||
v-bind:calendarEvents="calendarEvents">
|
||||
</calendar-event>
|
||||
</calendar-user-selector>
|
||||
<h2 class="chill-red">{{ $t('choose_your_date') }}</h2>
|
||||
<FullCalendar ref="fullCalendar" :options="calendarOptions">
|
||||
<template v-slot:eventContent='arg'>
|
||||
<b>{{ arg.timeText }}</b>
|
||||
</template>
|
||||
</FullCalendar>
|
||||
</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';
|
||||
import '@fullcalendar/core/vdom' // solves problem with Vite
|
||||
import FullCalendar from '@fullcalendar/vue3'
|
||||
import dayGridPlugin from '@fullcalendar/daygrid'
|
||||
import interactionPlugin from '@fullcalendar/interaction'
|
||||
import timeGridPlugin from '@fullcalendar/timegrid'
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
ConcernedGroups,
|
||||
CalendarEvent,
|
||||
CalendarUserSelector,
|
||||
FullCalendar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -33,33 +39,20 @@ export default {
|
||||
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: [
|
||||
},
|
||||
calendarOptions: {
|
||||
plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin ],
|
||||
initialView: 'timeGridWeek',
|
||||
initialEvents: window.startDate !== undefined ?
|
||||
[
|
||||
{
|
||||
id: 1,
|
||||
start: window.startDate,
|
||||
end: window.endDate
|
||||
}
|
||||
] : [],
|
||||
initialDate: window.startDate !== undefined ? window.startDate : new Date(),
|
||||
// eventSources: [{events: [
|
||||
// {
|
||||
// title: 'Event1',
|
||||
// start: '2021-08-04T12:30:00'
|
||||
@@ -71,12 +64,53 @@ export default {
|
||||
// ],
|
||||
// color: 'yellow', // an option!
|
||||
// textColor: 'black' // an option!
|
||||
// }
|
||||
// ]
|
||||
// }],//this work at initialisation, initialize with initialEvents content?
|
||||
selectable: true,
|
||||
select: this.onDateSelect,
|
||||
eventChange: this.onEventChange,
|
||||
selectMirror: true,
|
||||
editable: true,
|
||||
lazyFetching: false, // To fetch at maximum
|
||||
headerToolbar: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'dayGridMonth,timeGridWeek,timeGridDay'
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
// mounted() {
|
||||
// this.init();
|
||||
// }
|
||||
methods: {
|
||||
init() {
|
||||
console.log(window.startDate)
|
||||
let calendar = this.$refs.fullCalendar.getApi()
|
||||
//calendar.next()
|
||||
console.log(calendar)
|
||||
},
|
||||
updateEventsSource() {
|
||||
console.log('updateEventsSource')
|
||||
|
||||
console.log(this.calendarEvents.loaded);
|
||||
this.calendarEvents.selected = this.calendarEvents.loaded; //TODO filter loaded events on selected users
|
||||
|
||||
// this works!!!
|
||||
this.calendarOptions.eventSources = this.calendarEvents.selected;
|
||||
|
||||
// let calendar = this.$refs.fullCalendar.getApi();
|
||||
// console.log(calendar);
|
||||
// console.log(calendar.getEventSources())
|
||||
// calendar.addEventSource(this.calendarEvents.selected);
|
||||
|
||||
// console.log(calendar.getEventSources())
|
||||
},
|
||||
onDateSelect(payload) {
|
||||
this.$store.dispatch('createEvent', payload);
|
||||
},
|
||||
onEventChange(payload) {
|
||||
this.$store.dispatch('updateEvent', payload);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,163 +0,0 @@
|
||||
<template>
|
||||
<h2 class="chill-red">{{ $t('choose_your_date') }}</h2>
|
||||
<FullCalendar :options="calendarOptions">
|
||||
<template v-slot:eventContent='arg'>
|
||||
<b>{{ arg.timeText }}</b>
|
||||
</template>
|
||||
</FullCalendar>
|
||||
</template>
|
||||
<script>
|
||||
import '@fullcalendar/core/vdom' // solves problem with Vite
|
||||
import FullCalendar from '@fullcalendar/vue3'
|
||||
import dayGridPlugin from '@fullcalendar/daygrid'
|
||||
import interactionPlugin from '@fullcalendar/interaction'
|
||||
import timeGridPlugin from '@fullcalendar/timegrid'
|
||||
import { fetchCalendarRanges } from './js/api'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FullCalendar
|
||||
},
|
||||
props: ['calendarEvents'],
|
||||
data() {
|
||||
return {
|
||||
//calendarRanges: [],
|
||||
calendarOptions: {
|
||||
plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin ],
|
||||
initialView: 'timeGridWeek',
|
||||
// initialEvents: window.startDate !== undefined ?
|
||||
// [
|
||||
// {
|
||||
// id: 1,
|
||||
// start: window.startDate,
|
||||
// end: window.endDate
|
||||
// }
|
||||
// ] : [],
|
||||
initialDate: window.startDate !== undefined ? window.startDate : new Date(),
|
||||
eventSources: this.calendarEvents,
|
||||
selectable: true,
|
||||
select: this.onDateSelect,
|
||||
eventChange: this.onEventChange,
|
||||
selectMirror: true,
|
||||
editable: true,
|
||||
lazyFetching: false, // To fetch at maximum
|
||||
headerToolbar: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'dayGridMonth,timeGridWeek,timeGridDay'
|
||||
},
|
||||
},
|
||||
errorMsg: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.getCalendarRanges()
|
||||
console.log(window.startDate)
|
||||
},
|
||||
getCalendarRanges() {
|
||||
// console.log('getCalendarRanges')
|
||||
// fetchCalendarRanges().then(calendarRanges => new Promise((resolve, reject) => {
|
||||
// // let calendarEvents = [];
|
||||
|
||||
// // this.users.loaded.forEach(u => {
|
||||
// // let arr = calendarRanges.results.filter(i => i.user.id = u.id);
|
||||
// // console.log(arr)
|
||||
// // calendarEvents.push({
|
||||
// // events: arr,
|
||||
// // color: u.color
|
||||
// // })
|
||||
// // })
|
||||
|
||||
// // 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!
|
||||
// // }
|
||||
// // ]
|
||||
// // console.log(calendarEvents)
|
||||
// // this.calendarEvents = calendarEvents;
|
||||
// resolve()
|
||||
// }))
|
||||
// .catch((error) => {
|
||||
// this.errorMsg.push(error.message);
|
||||
// });
|
||||
},
|
||||
|
||||
// getCalendarRanges(userId) {
|
||||
// console.log('get Calendar Ranges');
|
||||
// return fetchCalendarRanges().then(calendarRanges => new Promise((resolve, reject) => {
|
||||
// console.log(calendarRanges);
|
||||
// this.calendarRanges = calendarRanges.results;
|
||||
// let source = { //TODO transform the results above into a object as following
|
||||
// events: [
|
||||
// {
|
||||
// title: 'Event1',
|
||||
// start: '2021-07-04T09:30:00'
|
||||
// },
|
||||
// {
|
||||
// title: 'Event2',
|
||||
// start: '2021-07-05T09:30:00'
|
||||
// }
|
||||
// ],
|
||||
// color: 'red', // an option!
|
||||
// textColor: 'white' // an option!
|
||||
// };
|
||||
// this.calendarRanges = source;
|
||||
// resolve()
|
||||
// }))
|
||||
// .catch((error) => {
|
||||
// this.errorMsg.push(error.message);
|
||||
// });
|
||||
// },
|
||||
// getEventsSources() { // soit on appelle cette function plus tard, soit on gère différement l'asynchroniété
|
||||
// let arr = [
|
||||
// this.displayEventSource1(),
|
||||
// fetchCalendarRanges().then(response => {
|
||||
// console.log(response)
|
||||
// return response
|
||||
// // if (response.ok) { return response.results }
|
||||
// })
|
||||
// //this.calendarRanges
|
||||
// ];
|
||||
// console.log(arr);
|
||||
// return arr;
|
||||
// },
|
||||
// displayEventSource1(){ // TODO replace this with the fetch function depending on the User calendar ranges
|
||||
// return {
|
||||
// events: [
|
||||
// {
|
||||
// title: 'Event1',
|
||||
// start: '2021-07-04T12:30:00'
|
||||
// },
|
||||
// {
|
||||
// title: 'Event2',
|
||||
// start: '2021-07-05T12:30:00'
|
||||
// }
|
||||
// ],
|
||||
// color: 'yellow', // an option!
|
||||
// textColor: 'black' // an option!
|
||||
// }
|
||||
// },
|
||||
onDateSelect(payload) {
|
||||
this.$store.dispatch('createEvent', payload);
|
||||
},
|
||||
onEventChange(payload) {
|
||||
this.$store.dispatch('updateEvent', payload);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,17 +0,0 @@
|
||||
/*
|
||||
* Endpoint chill_api_single_calendar_range
|
||||
* method GET, get Calendar ranges
|
||||
* @returns {Promise} a promise containing all Calendar ranges objects
|
||||
*/
|
||||
const fetchCalendarRanges = () => {
|
||||
const url = `/api/1.0/calendar/calendar-range.json?item_per_page=1000`;
|
||||
return fetch(url)
|
||||
.then(response => {
|
||||
if (response.ok) { return response.json(); }
|
||||
throw Error('Error with request resource response');
|
||||
});
|
||||
};
|
||||
|
||||
export {
|
||||
fetchCalendarRanges
|
||||
};
|
||||
@@ -1,10 +0,0 @@
|
||||
const calendarEventMessages = {
|
||||
fr: {
|
||||
choose_your_date: 'Sélectionnez vos dates',
|
||||
}
|
||||
};
|
||||
|
||||
export {
|
||||
calendarEventMessages
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user