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: style properly the events when clicking

Browse Source
This commit is contained in:
nobohan 2021-08-20 14:56:18 +02:00
parent 3799627bf1
commit 6a6b1760f5
2 changed files with 39 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,23 +21,14 @@
<script>
import ConcernedGroups from 'ChillActivityAssets/vuejs/Activity/components/ConcernedGroups.vue';
import CalendarUserSelector from '../_components/CalendarUserSelector/CalendarUserSelector.vue';
import '@fullcalendar/core/vdom' // solves problem with Vite
import '@fullcalendar/core/vdom'; // solves problem with Vite
import frLocale from '@fullcalendar/core/locales/fr';
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import timeGridPlugin from '@fullcalendar/timegrid'
import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
const currentEvent = {
events: [{
title: 'my_event',
start: window.startDate,
end: window.endDate
}],
id: window.mainUser
};
export default {
name: "App",
components: {
@ -57,9 +48,19 @@ export default {
loaded: [],
selected: [],
user: [],
current: currentEvent
current: {
events: [{
title: 'my_event',
start: window.startDate,
end: window.endDate
}],
id: window.mainUser
}
},
showMyCalendar: true,
selectedEvent: null,
previousSelectedEvent: null,
previousSelectedEventColor: null,
showMyCalendar: false,
calendarOptions: {
locale: frLocale,
plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin ],
@ -84,8 +85,8 @@ export default {
},
methods: {
init() {
console.log(window.startDate)
this.updateEventsSource()
console.log(window.startDate);
this.updateEventsSource();
},
toggleMyCalendar(value) {
this.showMyCalendar = value;
@ -93,14 +94,22 @@ export default {
updateEventsSource() {
this.calendarOptions.eventSources = [];
this.calendarOptions.eventSources.push(...this.calendarEvents.selected);
console.log(this.calendarOptions.eventSources)
if (window.startDate !== undefined) {
this.calendarOptions.eventSources.push(currentEvent);
this.calendarOptions.eventSources.push(this.calendarEvents.current);
}
if (this.showMyCalendar) {
this.calendarOptions.eventSources.push(this.calendarEvents.user);
}
console.log(this.calendarOptions.eventSources)
console.log(this.calendarOptions.eventSources);
},
unSelectPreviousEvent(event) {
if (event) {
if (typeof event.setProp === 'function') {
event.setProp('backgroundColor', this.previousSelectedEventColor);
event.setProp('borderColor', this.previousSelectedEventColor);
event.setProp('textColor','#444444');
}
}
},
onDateSelect(payload) {
Object.assign(payload, {users: this.users});
@ -111,9 +120,14 @@ export default {
this.$store.dispatch('updateEvent', payload);
},
onEventClick(payload) {
payload.event.setProp('backgroundColor','#3788d8');
this.previousSelectedEvent = this.selectedEvent;
this.previousSelectedEventColor = payload.event.extendedProps.sourceColor;
this.selectedEvent = payload.event;
this.unSelectPreviousEvent(this.previousSelectedEvent);
payload.event.setProp('backgroundColor','#df4949');
payload.event.setProp('borderColor','#df4949');
payload.event.setProp('title', 'Choisir cette plage');
payload.event.setProp('textColor','#ffffff');
//this.$store.dispatch('updateEvent', payload);
},
onEventMouseEnter(payload) {
payload.event.setProp('borderColor','#444444');

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

@ -95,7 +95,8 @@ export default {
({
start: i.startDate.datetime,
end: i.endDate.datetime,
calendarRangeId: i.id
calendarRangeId: i.id,
sourceColor: u.color
//display: 'background' // can be an option for the disponibility
})
);