rdv: various UI improvements to the calendar

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue

@@ -6,13 +6,15 @@
       v-bind:calendarEvents="calendarEvents" 
       v-bind:updateEventsSource="updateEventsSource"
       v-bind:showMyCalendar="showMyCalendar"
-      v-bind:toggleMyCalendar="toggleMyCalendar" >
+      v-bind:toggleMyCalendar="toggleMyCalendar"
+      v-bind:toggleWeekends="toggleWeekends" >
     </calendar-user-selector>
   </teleport>
   <teleport to="#fullCalendar">
     <FullCalendar ref="fullCalendar" :options="calendarOptions">
       <template v-slot:eventContent='arg'>
         <b>{{ arg.timeText }}</b>
+        <i>&nbsp;{{ arg.event.title }}</i>
       </template>
     </FullCalendar>
   </teleport>
@@ -27,7 +29,7 @@ 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';
+// import listPlugin from '@fullcalendar/list';
 
 export default {
   name: "App",
@@ -50,11 +52,12 @@ export default {
          user: [],
          current: {
             events: [{
-                title: 'my_event',
+                title: 'plage prévue',
                 start: window.startDate,
                 end: window.endDate
             }],
-            id: window.mainUser
+            id: window.mainUser,
+            color: '#bbbbbb'
           }
       },
       selectedEvent: null,
@@ -63,7 +66,7 @@ export default {
       showMyCalendar: false,
       calendarOptions: {
         locale: frLocale,
-        plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin ],
+        plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin ],
         initialView: 'timeGridWeek',
         initialDate: window.startDate !== undefined ? window.startDate : new Date(),
         eventSource: [],
@@ -75,6 +78,7 @@ export default {
       //   eventMouseLeave: this.onEventMouseLeave,
         selectMirror: true,
         editable: true,
+        weekends: false,
         headerToolbar: {
           left: 'prev,next today',
           center: 'title',
@@ -85,12 +89,14 @@ export default {
   },
   methods: {
     init() {
-      console.log(window.startDate);
       this.updateEventsSource();
     },
     toggleMyCalendar(value) {
       this.showMyCalendar = value;
     },
+    toggleWeekends: function() {
+      this.calendarOptions.weekends = !this.calendarOptions.weekends;
+    },
     updateEventsSource() {
       this.calendarOptions.eventSources = [];
       this.calendarOptions.eventSources.push(...this.calendarEvents.selected);
@@ -100,7 +106,6 @@ export default {
       if (this.showMyCalendar) {
           this.calendarOptions.eventSources.push(this.calendarEvents.user);
       }
-      console.log(this.calendarOptions.eventSources);
     },
     unSelectPreviousEvent(event) {
       if (event) {
@@ -108,15 +113,19 @@ export default {
           event.setProp('backgroundColor', this.previousSelectedEventColor);
           event.setProp('borderColor', this.previousSelectedEventColor);
           event.setProp('textColor','#444444');
+          event.setProp('title','');
         }
       }
     },
     onDateSelect(payload) {
+      console.log(payload)
+      this.unSelectPreviousEvent(this.selectedEvent);
       Object.assign(payload, {users: this.users});
+      Object.assign(payload, {title: 'Choisir cette plage'}); //TODO does not display
+      //payload.event.setProp('title', 'Choisir cette plage');
       this.$store.dispatch('createEvent', payload);
     },
     onEventChange(payload) {
-      console.log(this.calendarOptions.eventSources)
       this.$store.dispatch('updateEvent', payload);
     },
     onEventClick(payload) {
@@ -124,8 +133,8 @@ export default {
       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('backgroundColor','#3788d8');
+      payload.event.setProp('borderColor','#3788d8');
       payload.event.setProp('title', 'Choisir cette plage');
       payload.event.setProp('textColor','#ffffff');
     },