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> <script>
import ConcernedGroups from 'ChillActivityAssets/vuejs/Activity/components/ConcernedGroups.vue'; import ConcernedGroups from 'ChillActivityAssets/vuejs/Activity/components/ConcernedGroups.vue';
import CalendarUserSelector from '../_components/CalendarUserSelector/CalendarUserSelector.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 frLocale from '@fullcalendar/core/locales/fr';
import FullCalendar from '@fullcalendar/vue3' import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid' 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';
import listPlugin from '@fullcalendar/list'; import listPlugin from '@fullcalendar/list';
const currentEvent = {
events: [{
title: 'my_event',
start: window.startDate,
end: window.endDate
}],
id: window.mainUser
};
export default { export default {
name: "App", name: "App",
components: { components: {
@ -57,9 +48,19 @@ export default {
loaded: [], loaded: [],
selected: [], selected: [],
user: [], 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: { calendarOptions: {
locale: frLocale, locale: frLocale,
plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin ], plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin ],
@ -84,8 +85,8 @@ export default {
}, },
methods: { methods: {
init() { init() {
console.log(window.startDate) console.log(window.startDate);
this.updateEventsSource() this.updateEventsSource();
}, },
toggleMyCalendar(value) { toggleMyCalendar(value) {
this.showMyCalendar = value; this.showMyCalendar = value;
@ -93,14 +94,22 @@ export default {
updateEventsSource() { updateEventsSource() {
this.calendarOptions.eventSources = []; this.calendarOptions.eventSources = [];
this.calendarOptions.eventSources.push(...this.calendarEvents.selected); this.calendarOptions.eventSources.push(...this.calendarEvents.selected);
console.log(this.calendarOptions.eventSources)
if (window.startDate !== undefined) { if (window.startDate !== undefined) {
this.calendarOptions.eventSources.push(currentEvent); this.calendarOptions.eventSources.push(this.calendarEvents.current);
} }
if (this.showMyCalendar) { if (this.showMyCalendar) {
this.calendarOptions.eventSources.push(this.calendarEvents.user); 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) { onDateSelect(payload) {
Object.assign(payload, {users: this.users}); Object.assign(payload, {users: this.users});
@ -111,9 +120,14 @@ export default {
this.$store.dispatch('updateEvent', payload); this.$store.dispatch('updateEvent', payload);
}, },
onEventClick(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'); payload.event.setProp('textColor','#ffffff');
//this.$store.dispatch('updateEvent', payload);
}, },
onEventMouseEnter(payload) { onEventMouseEnter(payload) {
payload.event.setProp('borderColor','#444444'); 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, start: i.startDate.datetime,
end: i.endDate.datetime, end: i.endDate.datetime,
calendarRangeId: i.id calendarRangeId: i.id,
sourceColor: u.color
//display: 'background' // can be an option for the disponibility //display: 'background' // can be an option for the disponibility
}) })
); );