diff --git a/src/Bundle/ChillCalendarBundle/Controller/CalendarController.php b/src/Bundle/ChillCalendarBundle/Controller/CalendarController.php
index 5e5746387..9ce15e682 100644
--- a/src/Bundle/ChillCalendarBundle/Controller/CalendarController.php
+++ b/src/Bundle/ChillCalendarBundle/Controller/CalendarController.php
@@ -139,10 +139,9 @@ class CalendarController extends AbstractController
 
             $this->addFlash('success', $this->get('translator')->trans('Success : calendar item created!'));
 
-            $params = $this->buildParamsToUrl($user, $accompanyingPeriod); //TODO useful?
-            $params['id'] = $entity->getId();
+            $params = $this->buildParamsToUrl($user, $accompanyingPeriod);
 
-            return $this->redirectToRoute('chill_calendar_calendar_show', $params);
+            return $this->redirectToRoute('chill_calendar_calendar', $params);
         } elseif ($form->isSubmitted() and !$form->isValid()) {
             $this->addFlash('error', $this->get('translator')->trans('This form contains errors'));
         }
@@ -241,8 +240,7 @@ class CalendarController extends AbstractController
             $this->addFlash('success', $this->get('translator')->trans('Success : calendar item updated!'));
 
             $params = $this->buildParamsToUrl($user, $accompanyingPeriod);
-            $params['id'] = $id;
-            return $this->redirectToRoute('chill_calendar_calendar_show', $params);
+            return $this->redirectToRoute('chill_calendar_calendar', $params);
         } elseif ($form->isSubmitted() and !$form->isValid()) {
             $this->addFlash('error', $this->get('translator')->trans('This form contains errors'));
         }
@@ -304,7 +302,7 @@ class CalendarController extends AbstractController
                 $em->flush();
 
                 $this->addFlash('success', $this->get('translator')
-                      ->trans("The calendar has been successfully removed."));
+                      ->trans("The calendar item has been successfully removed."));
 
                 $params = $this->buildParamsToUrl($user, $accompanyingPeriod);
                 return $this->redirectToRoute('chill_calendar_calendar', $params);
diff --git a/src/Bundle/ChillCalendarBundle/Form/CalendarType.php b/src/Bundle/ChillCalendarBundle/Form/CalendarType.php
index c2f3ea6ba..990f7ea59 100644
--- a/src/Bundle/ChillCalendarBundle/Form/CalendarType.php
+++ b/src/Bundle/ChillCalendarBundle/Form/CalendarType.php
@@ -48,13 +48,13 @@ class CalendarType extends AbstractType
             ->add('comment', CommentType::class, [
                 'required' => false
             ])
-            ->add('cancelReason', EntityType::class, [
-                'required' => false,
-                'class' => CancelReason::class,
-                'choice_label' => function (CancelReason $entity) {
-                    return $entity->getCanceledBy();
-                },
-            ])
+            // ->add('cancelReason', EntityType::class, [
+            //     'required' => false,
+            //     'class' => CancelReason::class,
+            //     'choice_label' => function (CancelReason $entity) {
+            //         return $entity->getCanceledBy();
+            //     },
+            // ])
             ->add('sendSMS', ChoiceType::class, [
                 'required' => false,
                 'choices' => [
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/chill/index.js b/src/Bundle/ChillCalendarBundle/Resources/public/chill/index.js
new file mode 100644
index 000000000..c6e439991
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/chill/index.js
@@ -0,0 +1 @@
+require('./scss/calendar.scss');
\ No newline at end of file
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/chill/scss/calendar.scss b/src/Bundle/ChillCalendarBundle/Resources/public/chill/scss/calendar.scss
new file mode 100644
index 000000000..b224125f1
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/chill/scss/calendar.scss
@@ -0,0 +1,10 @@
+div#calendarControls {
+    height: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+}
+
+div#fullCalendar{
+
+}
\ No newline at end of file
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
index fb4429a1d..8c762a645 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
@@ -1,18 +1,21 @@
 <template>
   <concerned-groups></concerned-groups>
-  <calendar-user-selector 
-    v-bind:users="users"
-    v-bind:calendarEvents="calendarEvents" 
-    v-bind:updateEventsSource="updateEventsSource"
-    v-bind:showMyCalendar="showMyCalendar"
-    v-bind:toggleMyCalendar="toggleMyCalendar" >
-  </calendar-user-selector>
-  <h2 class="chill-red">{{ $t('choose_your_date') }}</h2>
-  <FullCalendar ref="fullCalendar" :options="calendarOptions">
-    <template v-slot:eventContent='arg'>
-      <b>{{ arg.timeText }}</b>
-    </template>
-  </FullCalendar>
+  <teleport to="#calendarControls">
+    <calendar-user-selector 
+      v-bind:users="users"
+      v-bind:calendarEvents="calendarEvents" 
+      v-bind:updateEventsSource="updateEventsSource"
+      v-bind:showMyCalendar="showMyCalendar"
+      v-bind:toggleMyCalendar="toggleMyCalendar" >
+    </calendar-user-selector>
+  </teleport>
+  <teleport to="#fullCalendar">
+    <FullCalendar ref="fullCalendar" :options="calendarOptions">
+      <template v-slot:eventContent='arg'>
+        <b>{{ arg.timeText }}</b>
+      </template>
+    </FullCalendar>
+  </teleport>
 </template>
 
 <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 c0db531ac..e97fe9ba4 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
@@ -1,6 +1,6 @@
 <template>
-  <h2 class="chill-red">{{ $t('choose_your_calendar_user') }}</h2>
-  <div>
+  <div class="calendar__controls">
+     <h2 class="chill-red">{{ $t('choose_your_calendar_user') }}</h2>
     <VueMultiselect
         name="field"
         id="calendarUserSelector"
@@ -196,3 +196,12 @@ export default {
 
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
 
+<style lang="scss" scoped>
+  div.calendar__controls {
+    background-color: 'black';
+    height: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+  }
+</style>
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
index d5491df8c..d750ff3f7 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/js/i18n.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/js/i18n.js
@@ -2,7 +2,7 @@ const calendarUserSelectorMessages = {
     fr: {
       choose_your_calendar_user: "Afficher les plages de disponibilités",
       select_user: "Sélectionnez des calendriers",
-      show_my_calendar: "Affichez mon calendrier"
+      show_my_calendar: "Afficher mon calendrier"
     }
  };
  
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/edit.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/edit.html.twig
index 784d3686d..f64e22353 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/edit.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/edit.html.twig
@@ -40,10 +40,6 @@
 
 .. location
 
-{%- if form.cancelReason is defined -%}
-    {{ form_row(form.cancelReason) }}
-{% endif %}
-
 {%- if form.comment is defined -%}
     {{ form_row(form.comment) }}
 {% endif %}
@@ -52,8 +48,7 @@
     {{ form_row(form.sendSMS) }}
 {% endif %}
 
-
-..calendarRange
+<div id="fullCalendar"></div>
 
 <ul class="record_actions sticky-form-buttons">
   <li class="cancel">
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editAccompanyingCourse.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editAccompanyingCourse.html.twig
index d0295d0e2..f41939f62 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editAccompanyingCourse.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editAccompanyingCourse.html.twig
@@ -36,3 +36,7 @@
     {{ parent() }}
     {{ encore_entry_link_tags('vue_calendar') }}
 {% endblock %}
+
+{% block block_post_menu %}
+    <div id="calendarControls"></div>
+{% endblock %}
\ No newline at end of file
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig
index c7ad42343..9c2b93811 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig
@@ -24,22 +24,25 @@
         <div class="item-bloc">
             <div class="item-row main">
                 <div class="item-col">
-                                        
-                    {% if calendar.startDate %}
-                        <h3>{{ calendar.startDate|format_datetime('long') }} </h3>
-                    {% endif %}
-                   
-                    {% if calendar.endDate %}
-                        <h3>{{ calendar.endDate|format_datetime('long') }}</h3>
-                    {% endif %}
-                    
 
-                    <div class="duration">
-                        <p>
-                            <i class="fa fa-fw fa-hourglass-end"></i>
-                            {{ calendar.endDate.diff(calendar.startDate)|date("%H:%M")}}
-                        </p>
-                    </div>
+
+                    {% if calendar.startDate and calendar.endDate %}
+                        {% if calendar.endDate.diff(calendar.startDate).days >= 1 %}
+                            <h3>{{ "From the day"|trans }} {{ calendar.startDate|format_datetime('medium', 'short') }} </h3>
+                            <h3>{{ "to the day"|trans }} {{ calendar.endDate|format_datetime('medium', 'short') }}</h3>
+                        {% else %}
+                            <h3>{{ calendar.startDate|format_date('full') }} </h3>
+                            <h3>{{ calendar.startDate|format_datetime('none', 'short', locale='fr') }} - {{ calendar.endDate|format_datetime('none', 'short', locale='fr') }}</h3>
+
+                            <div class="duration">
+                                <p>
+                                    <i class="fa fa-fw fa-hourglass-end"></i>
+                                    {{ calendar.endDate.diff(calendar.startDate)|date("%H:%M")}}
+                                </p>
+                            </div>
+                        {% endif %}
+
+                    {% endif %}
 
                     {% if context == 'user' and calendar.accompanyingPeriod is not empty %}
                       <div class="accompanyingPeriodLink" style="margin-top: 1rem">
@@ -66,7 +69,7 @@
                         
                         {% if calendar.mainUser is not empty %}
                         <li>
-                            <b>{{ 'main user concerned'|trans }}{{ calendar.mainUser.usernameCanonical }}</b>
+                            <b>{{ 'main user concerned'|trans }}: {{ calendar.mainUser.usernameCanonical }}</b>
                         </li>
                         {% endif %}
 
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/new.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/new.html.twig
index 501f2ebe1..1bbdc53ca 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/new.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/new.html.twig
@@ -1,4 +1,4 @@
-<h1>{{ "Calendar item creation"|trans ~ ' :' }}</h1>
+<h1>{{ "Calendar item creation"|trans }}</h1>
 
 {{ form_start(form) }}
 {{ form_errors(form) }}
@@ -34,16 +34,8 @@
     {{ form_row(form.endDate) }}
 {% endif %}
 
-{%- if form.calendarRange is defined -%}
-    {{ form_row(form.calendarRange) }}
-{% endif %}
-
 .. location
 
-{%- if form.cancelReason is defined -%}
-    {{ form_row(form.cancelReason) }}
-{% endif %}
-
 {%- if form.comment is defined -%}
     {{ form_row(form.comment) }}
 {% endif %}
@@ -52,19 +44,16 @@
     {{ form_row(form.sendSMS) }}
 {% endif %}
 
-
-..calendarRange
-
-
+<div id="fullCalendar"></div>
 
 <ul class="record_actions sticky-form-buttons">
   <li class="cancel">
     <a 
       class="btn btn-cancel"
       {%- if context == 'person' -%} 
-      href="{{ chill_return_path_or('chill_activity_activity_list', { 'person_id': person.id } )}}"
+      href="{{ chill_return_path_or('chill_calendar_calendar', { 'person_id': person.id } )}}"
       {%- else -%}
-      href="{{ chill_return_path_or('chill_activity_activity_list', { 'accompanying_period_id': accompanyingCourse.id } )}}"
+      href="{{ chill_return_path_or('chill_calendar_calendar', { 'accompanying_period_id': accompanyingCourse.id } )}}"
       {%- endif -%}
       >
       {{ 'Cancel'|trans|chill_return_path_label }}
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/newAccompanyingCourse.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/newAccompanyingCourse.html.twig
index b28f7060f..35b2d9e63 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/newAccompanyingCourse.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/newAccompanyingCourse.html.twig
@@ -34,4 +34,6 @@
     <link rel="stylesheet" href="{{ asset('build/vue_calendar.css') }}"/>
 {% endblock %}
 
-
+{% block block_post_menu %}
+    <div id="calendarControls"></div>
+{% endblock %}
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/show.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/show.html.twig
index f6df7ccdf..efab85442 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/show.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/show.html.twig
@@ -11,11 +11,18 @@
 
 <h2 class="chill-red">{{ 'Calendar data'|trans }}</h2>
 
-    <dt class="inline">{{ 'start date'|trans }}</dt>
-    <dd>{{ entity.startDate|format_datetime('long') }}</dd>
-
-    <dt class="inline">{{ 'end date'|trans }}</dt>
-    <dd>{{ entity.endDate|format_datetime('long') }}</dd>
+    {% if entity.endDate.diff(entity.startDate).days >= 1 %}
+        <dt>{{ "From the day"|trans }} {{ entity.startDate|format_datetime('medium', 'short') }}
+        {{ "to the day"|trans }} {{ entity.endDate|format_datetime('medium', 'short') }}
+        </dt>
+        <dd></dd>
+    {% else %}
+        <dt>
+        {{ entity.startDate|format_date('full') }},
+        {{ entity.startDate|format_datetime('none', 'short', locale='fr') }} - {{ entity.endDate|format_datetime('none', 'short', locale='fr') }}
+        </dt>
+        <dd></dd>
+    {% endif %}
 
     <dt class="inline">{{ 'cancel reason'|trans }}</dt>
     <dd>
diff --git a/src/Bundle/ChillCalendarBundle/chill.webpack.config.js b/src/Bundle/ChillCalendarBundle/chill.webpack.config.js
index 74f1dd6ea..b4b42d2fe 100644
--- a/src/Bundle/ChillCalendarBundle/chill.webpack.config.js
+++ b/src/Bundle/ChillCalendarBundle/chill.webpack.config.js
@@ -1,10 +1,10 @@
 // this file loads all assets from the Chill calendar bundle
 module.exports = function(encore, entries) {
-    //entries.push(__dirname + '/Resources/public/index.js');
+    entries.push(__dirname + '/Resources/public/chill/index.js');
     
     encore.addAliases({
         ChillCalendarAssets: __dirname + '/Resources/public'
     });
-    
+
     encore.addEntry('vue_calendar', __dirname + '/Resources/public/vuejs/Calendar/index.js');
 };
diff --git a/src/Bundle/ChillCalendarBundle/translations/messages.fr.yml b/src/Bundle/ChillCalendarBundle/translations/messages.fr.yml
index e77624061..f95b27cb8 100644
--- a/src/Bundle/ChillCalendarBundle/translations/messages.fr.yml
+++ b/src/Bundle/ChillCalendarBundle/translations/messages.fr.yml
@@ -6,7 +6,7 @@ Are you sure you want to remove the calendar item?: Êtes-vous sûr de vouloir s
 Concerned groups: Parties concernées
 Calendar data: Données du rendez-vous
 Update calendar: Modifier le rendez-vous
-main user concerned: Utilisateur principal
+main user concerned: Utilisateur concerné
 Main user: Utilisateur principal
 Calendar item creation: Création du rendez-vous
 start date: début du rendez-vous
@@ -18,3 +18,7 @@ sendSMS: Envoi d'un SMS
 Send s m s: Envoi d'un SMS ? 
 Cancel reason: Motif d'annulation
 Add a new calendar: Ajouter un nouveau rendez-vous
+"Success : calendar item updated!": "Rendez-vous mis à jour"
+The calendar item has been successfully removed.: Le rendez-vous a été supprimé
+From the day: Du
+to the day: au
\ No newline at end of file
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/layout.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/layout.html.twig
index 8ccccb3d4..b3e34e13c 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/layout.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/layout.html.twig
@@ -17,6 +17,10 @@
         'layout': '@ChillPerson/menu.html.twig',
         'args' : { 'accompanyingCourse': accompanyingCourse }
     }) }}
+    
+    {% block block_post_menu %}
+    {% endblock %}
+
 {% endblock %}
 
 {% block css %}