diff --git a/src/Bundle/ChillCalendarBundle/Controller/CalendarController.php b/src/Bundle/ChillCalendarBundle/Controller/CalendarController.php
index 9ce15e682..a894099e4 100644
--- a/src/Bundle/ChillCalendarBundle/Controller/CalendarController.php
+++ b/src/Bundle/ChillCalendarBundle/Controller/CalendarController.php
@@ -87,7 +87,8 @@ class CalendarController extends AbstractController
             // $view = 'ChillCalendarBundle:Calendar:listByUser.html.twig';
         } elseif ($accompanyingPeriod instanceof AccompanyingPeriod) {
             $calendarItems = $em->getRepository(Calendar::class)->findBy(
-                ['accompanyingPeriod' => $accompanyingPeriod]
+                ['accompanyingPeriod' => $accompanyingPeriod],
+                ['startDate' => 'DESC']
             );
 
             $view = 'ChillCalendarBundle:Calendar:listByAccompanyingCourse.html.twig';
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
index 8c762a645..5999fdbd0 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
+++ b/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>
@@ -21,22 +23,13 @@
 <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 listPlugin from '@fullcalendar/list';
-
-const currentEvent = {
-   events: [{
-      title: 'my_event',
-      start: window.startDate,
-      end: window.endDate
-   }],
-   id: window.mainUser
-};
+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';
 
 export default {
   name: "App",
@@ -57,12 +50,23 @@ export default {
          loaded: [],
          selected: [],
          user: [],
-         current: currentEvent
+         current: {
+            events: [{
+                title: 'plage prévue',
+                start: window.startDate,
+                end: window.endDate
+            }],
+            id: window.mainUser,
+            color: '#bbbbbb'
+          }
       },
-      showMyCalendar: true,
+      selectedEvent: null,
+      previousSelectedEvent: null,
+      previousSelectedEventColor: null,
+      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: [],
@@ -74,6 +78,7 @@ export default {
       //   eventMouseLeave: this.onEventMouseLeave,
         selectMirror: true,
         editable: true,
+        weekends: false,
         headerToolbar: {
           left: 'prev,next today',
           center: 'title',
@@ -84,36 +89,54 @@ export default {
   },
   methods: {
     init() {
-      console.log(window.startDate)
-      this.updateEventsSource()
+      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);
-      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)
+    },
+    unSelectPreviousEvent(event) {
+      if (event) {
+        if (typeof event.setProp === 'function') {
+          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) {
+      this.previousSelectedEvent = this.selectedEvent;
+      this.previousSelectedEventColor = payload.event.extendedProps.sourceColor;
+      this.selectedEvent = payload.event;
+      this.unSelectPreviousEvent(this.previousSelectedEvent);
       payload.event.setProp('backgroundColor','#3788d8');
+      payload.event.setProp('borderColor','#3788d8');
+      payload.event.setProp('title', 'Choisir cette plage');
       payload.event.setProp('textColor','#ffffff');
-      //this.$store.dispatch('updateEvent', payload);
     },
     onEventMouseEnter(payload) {
       payload.event.setProp('borderColor','#444444');
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
index e97fe9ba4..758b7bae8 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
@@ -23,6 +23,11 @@
     <input type="checkbox" id="myCalendar" class="form-check-input" v-model="showMyCalendarWidget" />
     <label class="form-check-label" for="myCalendar">{{ $t('show_my_calendar') }}</label>
   </div>
+  <div class="form-check">
+    <input type="checkbox" id="weekends" class="form-check-input" @click="toggleWeekends" />
+    <label class="form-check-label" for="weekends">{{ $t('show_weekends') }}</label>
+  </div>
+  
 </template>
 <script>
 
@@ -48,7 +53,7 @@ const COLORS = [ /* from https://colorbrewer2.org/#type=qualitative&scheme=Set3&
 export default {
   name: 'CalendarUserSelector',
   components: { VueMultiselect },
-  props: ['users', 'updateEventsSource', 'calendarEvents', 'showMyCalendar', 'toggleMyCalendar'],
+  props: ['users', 'updateEventsSource', 'calendarEvents', 'showMyCalendar', 'toggleMyCalendar', 'toggleWeekends'],
   data() {
     return {
       errorMsg: [],
@@ -95,7 +100,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 
               })
             );
@@ -103,15 +109,13 @@ export default {
               events: arr,
               color: u.color,
               textColor: '#444444',
+              editable: false,
               id: u.id
             })
           })
 
           this.users.loaded = users;
           this.options = users;
-
-          console.log(users)
-          console.log(calendarEvents)
           
           this.calendarEvents.loaded = calendarEvents;
           whoami().then(me => new Promise((resolve, reject) => {
@@ -130,7 +134,8 @@ export default {
               let calendarEventsCurrentUser = {
                   events: events,
                   color: 'darkblue',
-                  id: 1000
+                  id: 1000,
+                  editable: false
               };
               this.calendarEvents.user = calendarEventsCurrentUser;
 
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/js/i18n.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/js/i18n.js
index d750ff3f7..f1aae5df1 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/js/i18n.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/js/i18n.js
@@ -2,7 +2,8 @@ const calendarUserSelectorMessages = {
     fr: {
       choose_your_calendar_user: "Afficher les plages de disponibilités",
       select_user: "Sélectionnez des calendriers",
-      show_my_calendar: "Afficher mon calendrier"
+      show_my_calendar: "Afficher mon calendrier",
+      show_weekends: "Afficher les week-ends"
     }
  };
  
diff --git a/src/Bundle/ChillCalendarBundle/chill.api.specs.yaml b/src/Bundle/ChillCalendarBundle/chill.api.specs.yaml
new file mode 100644
index 000000000..8da280b36
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/chill.api.specs.yaml
@@ -0,0 +1,81 @@
+---
+openapi: "3.0.0"
+info:
+  version: "1.0.0"
+  title: "Chill api"
+  description: "Api documentation for chill. Currently, work in progress"
+servers:
+  - url: "/api"
+    description: "Your current dev server"
+
+paths:
+  /1.0/calendar/calendar.json:
+    get:
+      tags:
+        - calendar
+      summary: Return a list of all calendar items
+      responses:
+        200:
+          description: "ok"
+
+  /1.0/calendar/calendar/{id}.json:
+    get:
+      tags:
+        - calendar
+      summary: Return an calendar item by id
+      parameters:
+        - name: id
+          in: path
+          required: true
+          description: The calendar id
+          schema:
+            type: integer
+            format: integer
+            minimum: 1
+      responses:
+        200:
+          description: "ok"
+        404:
+          description: "not found"
+        401:
+          description: "Unauthorized"
+
+  /1.0/calendar/calendar-range.json:
+    get:
+      tags:
+        - calendar
+      summary: Return a list of all calendar range items
+      responses:
+        200:
+          description: "ok"
+
+  /1.0/calendar/calendar-range/{id}.json:
+    get:
+      tags:
+        - calendar
+      summary: Return an calendar-range item by id
+      parameters:
+        - name: id
+          in: path
+          required: true
+          description: The calendar-range id
+          schema:
+            type: integer
+            format: integer
+            minimum: 1
+      responses:
+        200:
+          description: "ok"
+        404:
+          description: "not found"
+        401:
+          description: "Unauthorized"
+  
+  /1.0/calendar/calendar-range-available.json:
+    get:
+      tags:
+        - calendar
+      summary: Return a list of available calendar range items. Available means calendar-range not being taken by a calendar entity
+      responses:
+        200:
+          description: "ok"
\ No newline at end of file
diff --git a/src/Bundle/ChillCalendarBundle/translations/messages.fr.yml b/src/Bundle/ChillCalendarBundle/translations/messages.fr.yml
index f95b27cb8..e5e5c636a 100644
--- a/src/Bundle/ChillCalendarBundle/translations/messages.fr.yml
+++ b/src/Bundle/ChillCalendarBundle/translations/messages.fr.yml
@@ -19,6 +19,7 @@ Send s m s: Envoi d'un SMS ?
 Cancel reason: Motif d'annulation
 Add a new calendar: Ajouter un nouveau rendez-vous
 "Success : calendar item updated!": "Rendez-vous mis à jour"
+"Success : calendar item created!": "Rendez-vous créé"
 The calendar item has been successfully removed.: Le rendez-vous a été supprimé
 From the day: Du
 to the day: au
\ No newline at end of file