diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
index f1e8069a7..71b741134 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
@@ -1,14 +1,17 @@
 <template>
    <concerned-groups></concerned-groups>
+   <calendar-range></calendar-range>
 </template>
 
 <script>
 import ConcernedGroups from 'ChillActivityAssets/vuejs/Activity/components/ConcernedGroups.vue';
+import CalendarRange from '../_components/CalendarRange/CalendarRange.vue';
 
 export default {
    name: "App",
    components: {
       ConcernedGroups,
+      CalendarRange
    }
 }
 </script>
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarRange/CalendarRange.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarRange/CalendarRange.vue
new file mode 100644
index 000000000..1085aef0c
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarRange/CalendarRange.vue
@@ -0,0 +1,23 @@
+<template>
+  <FullCalendar :options="calendarOptions" />
+</template>
+<script>
+import '@fullcalendar/core/vdom' // solves problem with Vite
+import FullCalendar from '@fullcalendar/vue3'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import interactionPlugin from '@fullcalendar/interaction'
+
+export default {
+  components: {
+    FullCalendar // make the <FullCalendar> tag available
+  },
+  data() {
+    return {
+      calendarOptions: {
+        plugins: [ dayGridPlugin, interactionPlugin ],
+        initialView: 'dayGridMonth'
+      }
+    }
+  }
+}
+</script>
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editAccompanyingCourse.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editAccompanyingCourse.html.twig
index 33739519f..2cb5e0b0b 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editAccompanyingCourse.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editAccompanyingCourse.html.twig
@@ -19,7 +19,6 @@
 
 {% block js %}
     {{ parent() }}
-    {{ encore_entry_link_tags('async_upload') }}
     <script type="text/javascript">
         window.addEventListener('DOMContentLoaded', function (e) {
             chill.displayAlertWhenLeavingModifiedForm('form[name="{{ form.vars.form.vars.name }}"]', 
@@ -32,6 +31,5 @@
 
 {% block css %}
     {{ parent() }}
-    {{ encore_entry_link_tags('async_upload') }}
     {{ encore_entry_link_tags('vue_calendar') }}
 {% endblock %}
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/newAccompanyingCourse.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/newAccompanyingCourse.html.twig
index 76f4583ed..b65dcaab4 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/newAccompanyingCourse.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/newAccompanyingCourse.html.twig
@@ -19,7 +19,6 @@
 
 {% block js %}
     {{ parent() }}
-    {{ encore_entry_script_tags('async_upload') }}
     <script type="text/javascript">
         window.addEventListener('DOMContentLoaded', function (e) {
             chill.displayAlertWhenLeavingUnsubmittedForm('form[name="{{ form.vars.form.vars.name }}"]', 
@@ -32,7 +31,7 @@
 
 {% block css %}
     {{ parent() }}
-    <link rel="stylesheet" href="{{ asset('build/async_upload.css') }}"/>
+    <link rel="stylesheet" href="{{ asset('build/vue_calendar.css') }}"/>
 {% endblock %}