diff --git a/src/Bundle/ChillCalendarBundle/DependencyInjection/ChillCalendarExtension.php b/src/Bundle/ChillCalendarBundle/DependencyInjection/ChillCalendarExtension.php
index c6e807d03..8b71b26f0 100644
--- a/src/Bundle/ChillCalendarBundle/DependencyInjection/ChillCalendarExtension.php
+++ b/src/Bundle/ChillCalendarBundle/DependencyInjection/ChillCalendarExtension.php
@@ -7,6 +7,7 @@ use Symfony\Component\Config\FileLocator;
 use Symfony\Component\HttpKernel\DependencyInjection\Extension;
 use Symfony\Component\DependencyInjection\Loader;
 use Symfony\Component\DependencyInjection\Extension\PrependExtensionInterface;
+use Symfony\Component\HttpFoundation\Request;
 
 /**
  * This is the class that loads and manages your bundle configuration.
@@ -33,6 +34,7 @@ class ChillCalendarExtension extends Extension implements PrependExtensionInterf
     public function prepend(ContainerBuilder $container)
     {
         $this->preprendRoutes($container);
+        $this->prependCruds($container);
     }
     
     protected function preprendRoutes(ContainerBuilder $container)
@@ -47,5 +49,36 @@ class ChillCalendarExtension extends Extension implements PrependExtensionInterf
         ]);
     }
     
+    /**
+     * @param ContainerBuilder $container
+     */
+    protected function prependCruds(ContainerBuilder $container)
+    {
+        $container->prependExtensionConfig('chill_main', [
+            'apis' => [
+                [
+                    'class' => \Chill\CalendarBundle\Entity\CalendarRange::class,
+                    'name' => 'calendar_range',
+                    'base_path' => '/api/1.0/calendar/calendar-range',
+                    'base_role' => 'ROLE_USER',
+                    'actions' => [
+                        '_index' => [
+                            'methods' => [
+                                Request::METHOD_GET => true,
+                                Request::METHOD_HEAD => true
+                            ],
+                        ],
+                        '_entity' => [
+                            'methods' => [
+                                Request::METHOD_GET => true,
+                                Request::METHOD_HEAD => true
+                            ]
+                        ],
+                    ]
+                ]
+            ]
+        ]);
+    }
+
 
 }
diff --git a/src/Bundle/ChillCalendarBundle/Entity/CalendarRange.php b/src/Bundle/ChillCalendarBundle/Entity/CalendarRange.php
index 1e9280b7d..3d1131fec 100644
--- a/src/Bundle/ChillCalendarBundle/Entity/CalendarRange.php
+++ b/src/Bundle/ChillCalendarBundle/Entity/CalendarRange.php
@@ -5,6 +5,7 @@ namespace Chill\CalendarBundle\Entity;
 use Chill\CalendarBundle\Repository\CalendarRangeRepository;
 use Chill\MainBundle\Entity\User;
 use Doctrine\ORM\Mapping as ORM;
+use Symfony\Component\Serializer\Annotation\Groups;
 
 /**
  * @ORM\Table(name="chill_calendar.calendar_range")
@@ -16,21 +17,25 @@ class CalendarRange
      * @ORM\Id
      * @ORM\GeneratedValue
      * @ORM\Column(type="integer")
+     * @groups({"read"})
      */
     private $id;
 
     /**
      * @ORM\ManyToOne(targetEntity="Chill\MainBundle\Entity\User")
+     * @groups({"read"})
      */
     private User $user;
 
     /**
      * @ORM\Column(type="datetimetz_immutable")
+     * @groups({"read"})
      */
     private \DateTimeImmutable $startDate;
 
     /**
      * @ORM\Column(type="datetimetz_immutable")
+     * @groups({"read"})
      */
     private \DateTimeImmutable $endDate;
 
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 d0012dd1f..ffc6240eb 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarEvent/CalendarEvent.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarEvent/CalendarEvent.vue
@@ -12,6 +12,7 @@ import FullCalendar from '@fullcalendar/vue3'
 import dayGridPlugin from '@fullcalendar/daygrid'
 import interactionPlugin from '@fullcalendar/interaction'
 import timeGridPlugin from '@fullcalendar/timegrid'
+import { fetchCalendarRanges } from './js/api'
 
 export default {
   components: {
@@ -19,6 +20,7 @@ export default {
   },
   data() {
     return {
+      calendarRanges: [],
       calendarOptions: {
         plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin ],
         initialView: 'timeGridWeek',
@@ -31,6 +33,11 @@ export default {
             }
           ] : [],
         initialDate: window.startDate !== undefined ? window.startDate : new Date(),
+        //events: this.displayEvents(),
+        eventSources: [
+          this.displayEventSource1(),
+          this.displayEventSource2(),
+        ],
         selectable: true,
         select: this.onDateSelect,
         eventChange: this.onEventChange,
@@ -41,10 +48,88 @@ export default {
           center: 'title',
           right: 'dayGridMonth,timeGridWeek,timeGridDay'
         },
-      }
+      },
+      errorMsg: {},
     }
   },
   methods: {
+    getCalendarRanges() {
+      console.log('get Calendar Ranges');
+      fetchCalendarRanges().then(calendarRanges => new Promise((resolve, reject) => {
+          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
+            }
+          ];
+          resolve()
+      }))
+      .catch((error) => {
+          this.errorMsg.push(error.message);
+      });
+    },
+    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!
+      }
+    },
     onDateSelect(payload) {
       this.$store.dispatch('createEvent', payload);
     },
@@ -52,10 +137,8 @@ export default {
       this.$store.dispatch('updateEvent', payload);
     }
   },
-  // mounted() {
-  //   console.log(window.startDate);
-  //   console.log(window.endDate);
-  //   console.log(window.date);
-  // }
+  mounted() {
+    this.getCalendarRanges()
+  }
 }
 </script>
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
new file mode 100644
index 000000000..95077c420
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarEvent/js/api.js
@@ -0,0 +1,17 @@
+/*
+* Endpoint chill_api_single_country__index
+* method GET, get Country Object
+* @returns {Promise} a promise containing all Country object
+*/
+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');
+      });
+};
+
+export {
+   fetchCalendarRanges
+};