diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
index 37caa7b73..a2ca1e5aa 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
@@ -1,20 +1,82 @@
 <template>
-   <concerned-groups></concerned-groups>
-   <calendar-user-selector></calendar-user-selector>
-   <calendar-event></calendar-event>
+  <concerned-groups></concerned-groups>
+  <calendar-user-selector 
+    v-bind:users="users"
+    v-bind:calendarEvents="calendarEvents" 
+    v-bind:updateEventsSource="updateEventsSource">
+   </calendar-user-selector>
+  <calendar-event
+    v-bind:calendarEvents="calendarEvents">
+  </calendar-event>
 </template>
 
 <script>
 import ConcernedGroups from 'ChillActivityAssets/vuejs/Activity/components/ConcernedGroups.vue';
 import CalendarEvent from '../_components/CalendarEvent/CalendarEvent.vue';
 import CalendarUserSelector from '../_components/CalendarUserSelector/CalendarUserSelector.vue';
+import { fetchCalendarRanges } from '../_components/CalendarEvent/js/api';
 
 export default {
-   name: "App",
-   components: {
-      ConcernedGroups,
-      CalendarEvent,
-      CalendarUserSelector,
-   }
+  name: "App",
+  components: {
+    ConcernedGroups,
+    CalendarEvent,
+    CalendarUserSelector,
+  },
+  data() {
+    return {
+      errorMsg: [],
+      users: {
+        loaded: [],
+        selected: []
+      },
+      calendarEvents: {
+         loaded: [],
+         selected: []
+      }
+    }
+  },
+  methods: {
+    updateEventsSource() {
+      console.log('updateEventsSource')
+ 
+      //TODO: how to update source events??? use https://fullcalendar.io/docs/Calendar-addEventSource?
+      
+
+      //TODO
+      // fetchCalendarRanges().then(calendarRanges => new Promise((resolve, reject) => {
+      //     let calendarEvents = [];
+      //     calendarRanges.results.forEach(i => {
+      //       calendarEvents.push({
+
+      //       })
+      //     });
+      //     this.calendarEvents = calendarEvents;
+      //     resolve()
+      // }))
+      // .catch((error) => {
+      //   this.errorMsg.push(error.message);
+      // });
+      // this.calendarEvents = [
+      //    {
+      //      events: [
+      //        {
+      //          title: 'Event1',
+      //          start: '2021-08-04T12:30:00'
+      //        },
+      //        {
+      //          title: 'Event2',
+      //          start: '2021-08-05T12:30:00'
+      //        }
+      //      ],
+      //      color: 'yellow',   // an option!
+      //      textColor: 'black' // an option!
+      //    }
+      // ]
+    }
+  },
+//   mounted() {
+//     this.init();
+//   }
 }
 </script>
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarEvent/CalendarEvent.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarEvent/CalendarEvent.vue
index 3a59aa28c..93749a598 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarEvent/CalendarEvent.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarEvent/CalendarEvent.vue
@@ -18,23 +18,23 @@ export default {
   components: {
     FullCalendar
   },
+  props: ['calendarEvents'],
   data() {
     return {
-      calendarRanges: [],
+      //calendarRanges: [],
       calendarOptions: {
         plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin ],
         initialView: 'timeGridWeek',
-        initialEvents: window.startDate !== undefined ?
-          [
-            {
-              id: 1,
-              start: window.startDate,
-              end: window.endDate
-            }
-          ] : [],
+        // initialEvents: window.startDate !== undefined ?
+        //   [
+        //     {
+        //       id: 1,
+        //       start: window.startDate,
+        //       end: window.endDate
+        //     }
+        //   ] : [],
         initialDate: window.startDate !== undefined ? window.startDate : new Date(),
-        //events: this.displayEvents(),
-        eventSources: this.getEventsSources(),
+        eventSources: this.calendarEvents,
         selectable: true,
         select: this.onDateSelect,
         eventChange: this.onEventChange,
@@ -47,103 +47,108 @@ export default {
           right: 'dayGridMonth,timeGridWeek,timeGridDay'
         },
       },
-      errorMsg: {},
+      errorMsg: [],
     }
   },
   methods: {
-    getCalendarRanges(userId) {
-      console.log('get Calendar Ranges');
-      return fetchCalendarRanges().then(calendarRanges => new Promise((resolve, reject) => {
-          console.log(calendarRanges);
-          this.calendarRanges = calendarRanges.results;
-          let source = { //TODO transform the results above into a object as following
-            events: [
-              {
-                title: 'Event1',
-                start: '2021-07-04T09:30:00'
-              },
-              {
-                title: 'Event2',
-                start: '2021-07-05T09:30:00'
-              }
-            ],
-            color: 'red',   // an option!
-            textColor: 'white' // an option!
-          };
-          this.calendarRanges = source;
-          resolve()
-      }))
-      .catch((error) => {
-          this.errorMsg.push(error.message);
-      });
+    init() {
+      this.getCalendarRanges()
+      console.log(window.startDate)
     },
-    getEventsSources() { // soit on appelle cette function plus tard, soit on gère différement l'asynchroniété
-      let userId = 1;
-      let arr = [
-        this.displayEventSource1(),
-        this.displayEventSource2(),
-   
-        fetchCalendarRanges().then(response => {
-          console.log(response)
-          return response
-          // if (response.ok) { return response.results }
-        })
-        //this.calendarRanges
-      ];
-      console.log(arr);
-      return arr;
-    },
-    displayEvents() { //TODO WIP
-      return [
-            {
-              title  : 'event1',
-              start  : '2021-07-04T10:30:00'
-            },
-            {
-              title  : 'event2',
-              start  : '2021-07-05',
-              end    : '2021-07-07'
-            },
-            {
-              title  : 'event3',
-              start  : '2021-07-09T12:30:00',
-              allDay : false // will make the time show
-            }
-      ]
-      //return this.calendarRanges // undefined as not fetched when evaluated
-    },
-    displayEventSource1(){ // TODO replace this with the fetch function depending on the User calendar ranges
-      return {
-        events: [
-          {
-            title: 'Event1',
-            start: '2021-07-04T12:30:00'
-          },
-          {
-            title: 'Event2',
-            start: '2021-07-05T12:30:00'
-          }
-        ],
-        color: 'yellow',   // an option!
-        textColor: 'black' // an option!
-      }
-    },
-    displayEventSource2(){
-      return {
-        events: [
-          {
-            title: 'Event1',
-            start: '2021-08-04T12:30:00'
-          },
-          {
-            title: 'Event2',
-            start: '2021-08-05T12:30:00'
-          }
-        ],
-        color: 'green',   // an option!
-        textColor: 'red' // an option!
-      }
+    getCalendarRanges() {
+      // console.log('getCalendarRanges')
+      // fetchCalendarRanges().then(calendarRanges => new Promise((resolve, reject) => {
+      //   // let calendarEvents = [];
+
+      //   // this.users.loaded.forEach(u => {
+      //   //   let arr = calendarRanges.results.filter(i => i.user.id = u.id);
+      //   //   console.log(arr)
+      //   //   calendarEvents.push({
+      //   //     events: arr,
+      //   //     color: u.color
+      //   //   })
+      //   // })
+  
+      //     // this.calendarEvents = [
+      // //    {
+      // //      events: [
+      // //        {
+      // //          title: 'Event1',
+      // //          start: '2021-08-04T12:30:00'
+      // //        },
+      // //        {
+      // //          title: 'Event2',
+      // //          start: '2021-08-05T12:30:00'
+      // //        }
+      // //      ],
+      // //      color: 'yellow',   // an option!
+      // //      textColor: 'black' // an option!
+      // //    }
+      // // ]
+      //   // console.log(calendarEvents)
+      //   // this.calendarEvents = calendarEvents;
+      //   resolve()
+      // }))
+      // .catch((error) => {
+      //   this.errorMsg.push(error.message);
+      // });
     },
+
+    // getCalendarRanges(userId) {
+    //   console.log('get Calendar Ranges');
+    //   return fetchCalendarRanges().then(calendarRanges => new Promise((resolve, reject) => {
+    //       console.log(calendarRanges);
+    //       this.calendarRanges = calendarRanges.results;
+    //       let source = { //TODO transform the results above into a object as following
+    //         events: [
+    //           {
+    //             title: 'Event1',
+    //             start: '2021-07-04T09:30:00'
+    //           },
+    //           {
+    //             title: 'Event2',
+    //             start: '2021-07-05T09:30:00'
+    //           }
+    //         ],
+    //         color: 'red',   // an option!
+    //         textColor: 'white' // an option!
+    //       };
+    //       this.calendarRanges = source;
+    //       resolve()
+    //   }))
+    //   .catch((error) => {
+    //       this.errorMsg.push(error.message);
+    //   });
+    // },
+    // getEventsSources() { // soit on appelle cette function plus tard, soit on gère différement l'asynchroniété
+    //   let arr = [
+    //     this.displayEventSource1(),   
+    //     fetchCalendarRanges().then(response => {
+    //       console.log(response)
+    //       return response
+    //       // if (response.ok) { return response.results }
+    //     })
+    //     //this.calendarRanges
+    //   ];
+    //   console.log(arr);
+    //   return arr;
+    // },
+    // displayEventSource1(){ // TODO replace this with the fetch function depending on the User calendar ranges
+    //   return {
+    //     events: [
+    //       {
+    //         title: 'Event1',
+    //         start: '2021-07-04T12:30:00'
+    //       },
+    //       {
+    //         title: 'Event2',
+    //         start: '2021-07-05T12:30:00'
+    //       }
+    //     ],
+    //     color: 'yellow',   // an option!
+    //     textColor: 'black' // an option!
+    //   }
+    // },
     onDateSelect(payload) {
       this.$store.dispatch('createEvent', payload);
     },
@@ -152,7 +157,7 @@ export default {
     }
   },
   mounted() {
-    this.getCalendarRanges()
+    this.init()
   }
 }
 </script>
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 839b6dd06..40fc4e2cd 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
@@ -13,7 +13,7 @@
         :close-on-select="false"
         :allow-empty="true"
         :model-value="value"
-        @update:model-value="updateUsers"
+        @update:model-value="selectUsers"
         :options="options">
     </VueMultiselect>
   </div>
@@ -23,9 +23,12 @@
 import { fetchCalendarRanges } from './js/api'
 import VueMultiselect from 'vue-multiselect';
 
+const COLORS = ['red', 'green', 'yellow', 'blue', 'orange', 'white', 'grey'];
+
 export default {
   name: 'CalendarUserSelector',
   components: { VueMultiselect },
+  props: ['users', 'updateEventsSource', 'calendarEvents'],
   data() {
     return {
       errorMsg: [],
@@ -39,16 +42,57 @@ export default {
     },
     getUniqueUserCalendarRanges() {
       fetchCalendarRanges().then(calendarRanges => new Promise((resolve, reject) => {
+          let results = calendarRanges.results;
+          
           let users = [];
-          calendarRanges.results.forEach(i => {
+
+          results.forEach(i => {
             if (!(users.some(j => i.user.id === j.id))){
               users.push({
                 id: i.user.id,
-                username: i.user.username
+                username: i.user.username,
+                color: COLORS[users.length] //TODO manage case where indice is larger than COLORS; Do something recursive with a max. value
               })
             }
           });
+
+          let calendarEvents = [];
+          users.forEach(u => {
+            let arr = results.filter(i => i.user.id === u.id).map(i => 
+              ({
+                start: i.startDate.datetime,
+                end: i.endDate.datetime
+              })
+            );
+            console.log(arr);
+            calendarEvents.push({
+              events: arr,
+              color: u.color
+            })
+          })
+
+          console.log(users)
+          this.users.loaded = users;
           this.options = users;
+
+          console.log(calendarEvents)
+          this.calendarEvents.loaded = calendarEvents;
+
+          // // TO TEST
+          // this.calendarEvents.loaded = [{events: [
+          //    {
+          //      title: 'Event1',
+          //      start: '2021-08-04T12:30:00'
+          //    },
+          //    {
+          //      title: 'Event2',
+          //      start: '2021-08-05T12:30:00'
+          //    }
+          //  ],
+          //  color: 'yellow',   // an option!
+          //  textColor: 'black' // an option!
+          // }];
+
           resolve()
       }))
       .catch((error) => {
@@ -58,8 +102,9 @@ export default {
     transName(value) {
       return `${value.username}`;
     },
-    updateUsers(value) {
-      console.log(value)
+    selectUsers(value) {
+      this.users.selected = value;
+      this.updateEventsSource();
     }
   },
   mounted() {