diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
index 19e81325f..37caa7b73 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
@@ -1,17 +1,20 @@
 <template>
    <concerned-groups></concerned-groups>
+   <calendar-user-selector></calendar-user-selector>
    <calendar-event></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';
 
 export default {
    name: "App",
    components: {
       ConcernedGroups,
-      CalendarEvent
+      CalendarEvent,
+      CalendarUserSelector,
    }
 }
 </script>
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/i18n.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/i18n.js
index e6c1b120e..8d40aba13 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/i18n.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/i18n.js
@@ -1,5 +1,6 @@
 import { personMessages } from 'ChillPersonAssets/vuejs/_js/i18n'
 import { calendarEventMessages } from '../_components/CalendarEvent/js/i18n'
+import { calendarUserSelectorMessages } from '../_components/CalendarUserSelector/js/i18n';
 
 const appMessages = {
    fr: {
@@ -16,6 +17,7 @@ const appMessages = {
 
 Object.assign(appMessages.fr, personMessages.fr);
 Object.assign(appMessages.fr, calendarEventMessages.fr);
+Object.assign(appMessages.fr, calendarUserSelectorMessages.fr);
 
 export {
    appMessages
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 ffc6240eb..3a59aa28c 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarEvent/CalendarEvent.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarEvent/CalendarEvent.vue
@@ -34,15 +34,13 @@ export default {
           ] : [],
         initialDate: window.startDate !== undefined ? window.startDate : new Date(),
         //events: this.displayEvents(),
-        eventSources: [
-          this.displayEventSource1(),
-          this.displayEventSource2(),
-        ],
+        eventSources: this.getEventsSources(),
         selectable: true,
         select: this.onDateSelect,
         eventChange: this.onEventChange,
         selectMirror: true,
         editable: true,
+        lazyFetching: false, // To fetch at maximum
         headerToolbar: {
           left: 'prev,next today',
           center: 'title',
@@ -53,32 +51,48 @@ export default {
     }
   },
   methods: {
-    getCalendarRanges() {
+    getCalendarRanges(userId) {
       console.log('get Calendar Ranges');
-      fetchCalendarRanges().then(calendarRanges => new Promise((resolve, reject) => {
+      return fetchCalendarRanges().then(calendarRanges => new Promise((resolve, reject) => {
+          console.log(calendarRanges);
           this.calendarRanges = calendarRanges.results;
-          this.calendarRanges = [
-            {
-              title  : 'event1',
-              start  : '2021-07-01'
-            },
-            {
-              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
-            }
-          ];
+          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 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 [
             {
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarEvent/js/api.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarEvent/js/api.js
index 95077c420..19780a86e 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarEvent/js/api.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarEvent/js/api.js
@@ -1,7 +1,7 @@
 /*
-* Endpoint chill_api_single_country__index
-* method GET, get Country Object
-* @returns {Promise} a promise containing all Country object
+* Endpoint chill_api_single_calendar_range
+* method GET, get Calendar ranges
+* @returns {Promise} a promise containing all Calendar ranges objects
 */
 const fetchCalendarRanges = () => {
    const url = `/api/1.0/calendar/calendar-range.json?item_per_page=1000`;
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
new file mode 100644
index 000000000..0047bc87f
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
@@ -0,0 +1,63 @@
+<template>
+  <h2 class="chill-red">{{ $t('choose_your_calendar_user') }}</h2>
+  <div>
+    <VueMultiselect
+        name="field"
+        id="calendarUserSelector"
+        v-model="values"
+        track-by="id"
+        label="value"
+        :custom-label="transName"
+        :placeholder="$t('select_user')"
+        :multiple="true"
+        :close-on-select="false"
+        :allow-empty="true" 
+        :options="users">
+      <template slot="selection" slot-scope="{ values, search, isOpen }">
+        <span class="multiselect__single" v-if="values.length && !isOpen">{{ values.length }} options selected</span>
+      </template>
+    </VueMultiselect>
+    <div>
+      <ul>
+
+      </ul>
+    </div>
+  </div>  
+</template>
+<script>
+
+import { getUniqueUserCalendarRanges } from './js/api'
+import VueMultiselect from 'vue-multiselect';
+
+export default {
+  name: 'CalendarUserSelector',
+  components: { VueMultiselect },
+  data() {
+    return {
+      errorMsg: {},
+      userCalendarRanges: [],
+      values: [],
+      // selectedValues: []
+    }
+  },
+  computed: {
+    users() {
+      return this.userCalendarRanges;
+    }
+  },
+  methods: {
+    init() {
+      this.userCalendarRanges = getUniqueUserCalendarRanges();
+    },
+    transName(value) {
+      return `${value.username}`;
+    },
+    // selectUser(value) {
+    //   this.selectedValues.push(value);
+    // }
+  },
+  mounted() {
+    this.init();
+  }
+}
+</script>
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/js/api.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/js/api.js
new file mode 100644
index 000000000..839933f29
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/js/api.js
@@ -0,0 +1,25 @@
+/*
+* Endpoint chill_api_single_calendar_range
+* method GET, get Calendar ranges
+* @returns {Promise} a promise containing all Calendar ranges objects
+*/
+const fetchCalendarRanges = () => {
+   const url = `/api/1.0/calendar/calendar-range.json?item_per_page=1000`;
+   return fetch(url)
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response');
+      });
+};
+
+const getUniqueUserCalendarRanges = () => { //TODO build the array with fetchCalendarRanges
+   return [
+      {userId: 1, username: 'blop'},
+      {userId: 2, username: 'blup'}
+   ];
+}
+
+export {
+   fetchCalendarRanges,
+   getUniqueUserCalendarRanges
+};
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
new file mode 100644
index 000000000..6e1b86f9e
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/js/i18n.js
@@ -0,0 +1,11 @@
+const calendarUserSelectorMessages = {
+    fr: {
+      choose_your_calendar_user: "Afficher les calendriers",
+      select_user: "Sélectionnez des calendriers"
+    }
+ };
+ 
+ export {
+   calendarUserSelectorMessages
+ };
+ 
\ No newline at end of file