rdv: various UI improvements on my calendar

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

@@ -14,7 +14,9 @@
     <FullCalendar ref="fullCalendar" :options="calendarOptions">
       <template v-slot:eventContent='arg' >
         <span class='calendarRangeItems'>
-          <b>{{ arg.timeText }}</b>
+          <b v-if="arg.event.extendedProps.myCalendar" style="text-decoration: underline" >{{ arg.timeText }}</b>
+          <b v-else-if="!arg.event.extendedProps.myCalendar && arg.event.extendedProps.toDelete" style="text-decoration: line-through red" >{{ arg.timeText }}</b>
+          <b v-else >{{ arg.timeText }}</b>
           <i>&nbsp;{{ arg.event.title }}</i>
           <a v-if=!arg.event.extendedProps.myCalendar class="fa fa-fw fa-times"
             @click.prevent="onClickDelete(arg.event)">
@@ -23,6 +25,8 @@
       </template>
     </FullCalendar>
     <div>
+      <ul class="record_actions">
+        <li>
           <button class="btn btn-save" :disabled="!dirty"
             @click.prevent="onClickSave">
             {{ $t('action.save')}}
@@ -31,16 +35,21 @@
             <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
             <span class="sr-only">{{ $t('loading') }}</span>
           </span>
-    </div>
-    <div>
+        </li>
+        <li>
           <button v-if="disableCopyDayButton" class="btn btn-action" disabled>
             {{ $t('copy_range_to_next_day')}}
           </button>
-      <button v-if="!disableCopyDayButton" class="btn btn-action" 
+          <button v-else class="btn btn-action"
             @click.prevent="copyDay">
             {{ $t('copy_range_from_day')}} {{this.lastNewDate.toLocaleDateString()}} {{ $t('to_the_next_day')}}
           </button>
+        </li>
+      </ul>
+    </div>
+    <div>
       <p>{{ $t('copy_range_how_to')}}</p>
+
     </div>
 
     <div>
@@ -77,7 +86,7 @@
       @close="modal.showModal = false">
 
         <template v-slot:header>
-          <h2 class="modal-title"> {{ this.myCalendarClickedEvent.start.toLocaleString() }} - {{ this.myCalendarClickedEvent.end.toLocaleString() }}</h2>
+          <h2 class="modal-title">{{ this.renderEventDate() }}</h2>
         </template>
 
         <template v-slot:body>
@@ -165,7 +174,7 @@ export default {
         eventDrop: this.onEventDropOrResize,
         eventResize: this.onEventDropOrResize,
         eventClick: this.onEventClick,
-        selectMirror: true,
+        selectMirror: false,
         editable: true,
         weekends: false,
         headerToolbar: {
@@ -226,7 +235,7 @@ export default {
             start: i.startDate.datetime,
             end: i.endDate.datetime,
             calendarRangeId: i.id,
-            toDelete: 0
+            toDelete: false
           })
         );
         let calendarRangeEvents = {
@@ -307,10 +316,6 @@ export default {
       this.$store.dispatch('updateRange', payload);
     },
     onEventClick(payload) {
-      console.log(payload)
-      console.log(payload.event)
-      console.log(payload.event.extendedProps)
-
       if (payload.event.extendedProps.myCalendar) {
         this.myCalendarClickedEvent = {
           id: payload.event.extendedProps.calendarId,
@@ -369,12 +374,12 @@ export default {
     },
     onClickDelete(payload) {
       if (payload.extendedProps.hasOwnProperty("calendarRangeId")) {
-        if (payload.extendedProps.toDelete === 1) {
-          payload.setExtendedProp('toDelete', 0)
+        if (payload.extendedProps.toDelete) {
+          payload.setExtendedProp('toDelete', false)
           payload.setProp('borderColor', '#79bafc');
           this.$store.dispatch('removeFromDeleteRange', payload);
         } else {
-          payload.setExtendedProp('toDelete', 1)
+          payload.setExtendedProp('toDelete', true)
           payload.setProp('borderColor', '#dddddd');
           this.$store.dispatch('deleteRange', payload);
         }
@@ -448,6 +453,13 @@ export default {
       } else {
         console.log('no new events to copy-paste!')
       }
+    },
+    renderEventDate() {
+      let start = this.myCalendarClickedEvent.start;
+      let end = this.myCalendarClickedEvent.end;
+      return start.getDate() === end.getDate() ?
+          `${start.toLocaleDateString()}, ${start.toLocaleTimeString()} - ${end.toLocaleTimeString()}` :
+          `${start.toLocaleString()} - ${end.toLocaleString()}`;
     }
   },
   mounted() {