diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/const.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/const.js
index c5d78a023..45010a6fe 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/const.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/const.js
@@ -2,7 +2,23 @@
 const USER_CALENDAR_SHOW_RANGES = 'ranges';
 const USER_CALENDAR_SHOW_EVENTS = 'events';
 
+const COLORS = [ /* from https://colorbrewer2.org/#type=qualitative&scheme=Set3&n=12 */
+  '#8dd3c7',
+  '#ffffb3',
+  '#bebada',
+  '#fb8072',
+  '#80b1d3',
+  '#fdb462',
+  '#b3de69',
+  '#fccde5',
+  '#d9d9d9',
+  '#bc80bd',
+  '#ccebc5',
+  '#ffed6f'
+];
+
 export {
   USER_CALENDAR_SHOW_RANGES,
   USER_CALENDAR_SHOW_EVENTS,
+  COLORS,
 };
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/getters.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/getters.js
index bef563f10..a33d49dbb 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/getters.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/getters.js
@@ -31,7 +31,11 @@ export default {
         console.log('adding ranges for user', userId);
         const s = {
           //'id': `ranges_${userId}`,
-          'events': userData.calendarRanges,
+          events: userData.calendarRanges,
+          color: userData.mainColor,
+          backgroundColor: 'white',
+          textColor: 'black',
+          editable: false,
         };
 
         console.log('range source', s);
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/mutations.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/mutations.js
index 2aaba18b1..2aa1f3ab6 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/mutations.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/mutations.js
@@ -49,7 +49,7 @@ export default {
     if (state.usersData.has(user.id)) {
       userData = state.usersData.get(user.id);
     } else {
-      userData = createUserData(user);
+      userData = createUserData(user, state.usersData.size);
       state.usersData.set(user.id, userData);
     }
 
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.js
index d2e35ca04..f3301a3c0 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.js
@@ -1,3 +1,5 @@
+import {COLORS} from '../const';
+
 const addIdToValue = (string, id) => {
   let array = string ? string.split(',') : [];
   array.push(id.toString());
@@ -20,22 +22,25 @@ const mapEntity = (entity) => {
   return entity;
 };
 
-const createUserData = (user) => {
+const createUserData = (user, colorIndex) => {
+  const colorId = colorIndex % COLORS.length;
+  console.log('colorId', colorId);
   return {
     user: user,
     calendarRanges: [],
     calendarRangesLoaded: [],
+    mainColor: COLORS[colorId],
   }
 }
 
 const calendarRangeToFullCalendarEvent = (entity) => {
   return {
-    //id: `range_${entity.id}`,
-    title: "Disponible",
+    id: `range_${entity.id}`,
+    title: "",
     start: entity.startDate.datetime8601,
     end: entity.endDate.datetime8601,
     allDay: false,
-    //userId: entity.user.id,
+    userId: entity.user.id,
   };
 }