Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

rdv: fullcalendar: manage event clicking

Browse Source
This commit is contained in:
nobohan 2021-08-18 15:12:24 +02:00
parent a54434a677
commit 07eb5c797a
3 changed files with 27 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -62,12 +62,15 @@ export default {
selectable: true, selectable: true,
select: this.onDateSelect, select: this.onDateSelect,
eventChange: this.onEventChange, eventChange: this.onEventChange,
eventClick: this.onEventClick,
eventMouseEnter: this.onEventMouseEnter,
eventMouseLeave: this.onEventMouseLeave,
selectMirror: true, selectMirror: true,
editable: true, editable: true,
headerToolbar: { headerToolbar: {
left: 'prev,next today', left: 'prev,next today',
center: 'title', center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay' right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth,listWeek,listDay'
}, },
} }
} }
@ -92,6 +95,17 @@ export default {
}, },
onEventChange(payload) { onEventChange(payload) {
this.$store.dispatch('updateEvent', payload); this.$store.dispatch('updateEvent', payload);
},
onEventClick(payload) {
payload.event.setProp('backgroundColor','#3788d8');
payload.event.setProp('textColor','#ffffff');
this.$store.dispatch('updateEvent', payload);
},
onEventMouseEnter(payload) {
payload.event.setProp('borderColor','#444444');
},
onEventMouseLeave(payload) {
payload.event.setProp('borderColor','#ffffff');
} }
}, },
mounted() { mounted() {
@ -99,3 +113,4 @@ export default {
} }
} }
</script> </script>

1
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store.js
View File

@ -118,7 +118,6 @@ const store = createStore({
updateEvent({ commit }, payload) { updateEvent({ commit }, payload) {
console.log('### action updateEvent', payload); console.log('### action updateEvent', payload);
let startDateInput = document.getElementById("chill_calendarbundle_calendar_startDate"); let startDateInput = document.getElementById("chill_calendarbundle_calendar_startDate");
console.log(payload.event)
startDateInput.value = payload.event.start.toISOString(); startDateInput.value = payload.event.start.toISOString();
let endDateInput = document.getElementById("chill_calendarbundle_calendar_endDate"); let endDateInput = document.getElementById("chill_calendarbundle_calendar_endDate");
endDateInput.value = payload.event.end.toISOString(); endDateInput.value = payload.event.end.toISOString();

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

@ -79,12 +79,14 @@ export default {
let arr = results.filter(i => i.user.id === u.id).map(i => let arr = results.filter(i => i.user.id === u.id).map(i =>
({ ({
start: i.startDate.datetime, start: i.startDate.datetime,
end: i.endDate.datetime end: i.endDate.datetime,
//display: 'background' // can be an option for the disponibility
}) })
); );
calendarEvents.push({ calendarEvents.push({
events: arr, events: arr,
color: u.color, color: u.color,
textColor: '#444444',
id: u.id id: u.id
}) })
}) })
@ -119,10 +121,14 @@ export default {
let child = children[i]; let child = children[i];
if (child.nodeType === Node.ELEMENT_NODE) { if (child.nodeType === Node.ELEMENT_NODE) {
this.users.selected.forEach(u => { this.users.selected.forEach(u => {
if (child.firstChild.innerText == u.username) { if (child.hasChildNodes()) {
child.style.background = u.color; if (child.firstChild.innerText == u.username) {
child.style.background = u.color;
child.firstChild.style.color = '#444444';
}
}
} }
}) )
} }
} }
} }
@ -150,16 +156,4 @@ export default {
</script> </script>
<style src="vue-multiselect/dist/vue-multiselect.css"></style> <style src="vue-multiselect/dist/vue-multiselect.css"></style>
<style lang="scss">
span.multiselect__tag {
background: var(--bs-chill-orange);
}
span.multiselect__option--highlight {
&::after {
background: var(--bs-chill-green);
}
&.multiselect__option--selected::after {
background: var(--bs-chill-red);
}
}
</style>