Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-12 21:34:25 +00:00
Code Issues Actions Projects Releases Wiki Activity

rdv: fullcalendar: select and unselect user calendars

Browse Source
This commit is contained in:
nobohan 2021-08-18 10:16:32 +02:00
parent e6deb6bc7a
commit b40c25595a
2 changed files with 35 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
View File

@ -22,6 +22,15 @@ import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction' import interactionPlugin from '@fullcalendar/interaction'
import timeGridPlugin from '@fullcalendar/timegrid' import timeGridPlugin from '@fullcalendar/timegrid'
const currentEvent = {
events: [{
title: 'my_event',
start: window.startDate,
end: window.endDate
}],
id: -1
};
export default { export default {
name: "App", name: "App",
components: { components: {
@ -38,39 +47,20 @@ export default {
}, },
calendarEvents: { calendarEvents: {
loaded: [], loaded: [],
selected: [] selected: [],
userEvents: [], //TODO load user calendar events
current: currentEvent
}, },
calendarOptions: { calendarOptions: {
plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin ], plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin ],
initialView: 'timeGridWeek', initialView: 'timeGridWeek',
initialEvents: window.startDate !== undefined ?
[
{
id: 1,
start: window.startDate,
end: window.endDate
}
] : [],
initialDate: window.startDate !== undefined ? window.startDate : new Date(), initialDate: window.startDate !== undefined ? window.startDate : new Date(),
// eventSources: [{events: [ eventSources: window.startDate !== undefined ? [currentEvent] : [],
// {
// title: 'Event1',
// start: '2021-08-04T12:30:00'
// },
// {
// title: 'Event2',
// start: '2021-08-05T12:30:00'
// }
// ],
// color: 'yellow', // an option!
// textColor: 'black' // an option!
// }],//this work at initialisation, initialize with initialEvents content?
selectable: true, selectable: true,
select: this.onDateSelect, select: this.onDateSelect,
eventChange: this.onEventChange, eventChange: this.onEventChange,
selectMirror: true, selectMirror: true,
editable: true, editable: true,
lazyFetching: false, // To fetch at maximum
headerToolbar: { headerToolbar: {
left: 'prev,next today', left: 'prev,next today',
center: 'title', center: 'title',
@ -82,25 +72,17 @@ export default {
methods: { methods: {
init() { init() {
console.log(window.startDate) console.log(window.startDate)
let calendar = this.$refs.fullCalendar.getApi() // let calendar = this.$refs.fullCalendar.getApi()
//calendar.next() // console.log(calendar)
console.log(calendar)
}, },
updateEventsSource() { updateEventsSource() {
console.log('updateEventsSource') console.log('updateEventsSource')
console.log(this.calendarEvents.selected)
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; this.calendarOptions.eventSources = this.calendarEvents.selected;
if (window.startDate !== undefined) {
// let calendar = this.$refs.fullCalendar.getApi(); this.calendarEvents.selected.push(currentEvent);
// console.log(calendar); }
// console.log(calendar.getEventSources())
// calendar.addEventSource(this.calendarEvents.selected);
// console.log(calendar.getEventSources())
}, },
onDateSelect(payload) { onDateSelect(payload) {
this.$store.dispatch('createEvent', payload); this.$store.dispatch('createEvent', payload);

34
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
View File

@ -13,7 +13,8 @@
:close-on-select="false" :close-on-select="false"
:allow-empty="true" :allow-empty="true"
:model-value="value" :model-value="value"
@update:model-value="selectUsers" @select="selectUsers"
@remove="unSelectUsers"
:options="options"> :options="options">
</VueMultiselect> </VueMultiselect>
</div> </div>
@ -64,10 +65,10 @@ export default {
end: i.endDate.datetime end: i.endDate.datetime
}) })
); );
console.log(arr);
calendarEvents.push({ calendarEvents.push({
events: arr, events: arr,
color: u.color color: u.color,
id: u.id
}) })
}) })
@ -78,21 +79,6 @@ export default {
console.log(calendarEvents) console.log(calendarEvents)
this.calendarEvents.loaded = calendarEvents; this.calendarEvents.loaded = calendarEvents;
// // TO TEST
// this.calendarEvents.loaded = [{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!
// }];
resolve() resolve()
})) }))
.catch((error) => { .catch((error) => {
@ -102,8 +88,18 @@ export default {
transName(value) { transName(value) {
return `${value.username}`; return `${value.username}`;
}, },
selectEvents() {
let selectedUsersId = this.users.selected.map(a => a.id);
this.calendarEvents.selected = this.calendarEvents.loaded.filter(a => selectedUsersId.includes(a.id));
},
selectUsers(value) { selectUsers(value) {
this.users.selected = value; this.users.selected.push(value);
this.selectEvents();
this.updateEventsSource();
},
unSelectUsers(value) {
this.users.selected = this.users.selected.filter(a => a.id != value.id);
this.selectEvents();
this.updateEventsSource(); this.updateEventsSource();
} }
}, },