diff --git a/src/Bundle/ChillCalendarBundle/Controller/CalendarController.php b/src/Bundle/ChillCalendarBundle/Controller/CalendarController.php
index b9952a45d..c59b6d5e6 100644
--- a/src/Bundle/ChillCalendarBundle/Controller/CalendarController.php
+++ b/src/Bundle/ChillCalendarBundle/Controller/CalendarController.php
@@ -100,45 +100,6 @@ class CalendarController extends AbstractController
         ));
     }
 
-    // public function selectTypeAction(Request $request): Response
-    // {
-    //     $em = $this->getDoctrine()->getManager();
-    //     $view = null;
-
-    //     [$person, $accompanyingPeriod] = $this->getEntity($request);
-
-    //     if ($accompanyingPeriod instanceof AccompanyingPeriod) {
-    //         $view = 'ChillCalendarBundle:Calendar:selectTypeAccompanyingCourse.html.twig';
-    //     } elseif ($person instanceof Person) {
-    //         $view = 'ChillCalendarBundle:Calendar:selectTypePerson.html.twig';
-    //     }
-
-    //     $data = [];
-
-    //     $activityTypeCategories = $em->getRepository(\Chill\CalendarBundle\Entity\ActivityTypeCategory::class)
-    //         ->findBy(['active' => true], ['ordering' => 'ASC']);
-
-    //     foreach ($activityTypeCategories as $activityTypeCategory) {
-    //         $activityTypes = $em->getRepository(\Chill\ActivityBundle\Entity\ActivityType::class)
-    //             ->findBy(['active' => true, 'category' => $activityTypeCategory], ['ordering' => 'ASC']);
-
-    //         $data[] = [
-    //             'activityTypeCategory' => $activityTypeCategory,
-    //             'activityTypes' => $activityTypes,
-    //         ];
-    //     }
-
-    //     if ($view === null) {
-    //         throw $this->createNotFoundException('Template not found');
-    //     }
-
-    //     return $this->render($view, [
-    //         'person' => $person,
-    //         'accompanyingCourse' => $accompanyingPeriod,
-    //         'data' => $data,
-    //     ]);
-    // }
-
     /**
      * Create a new calendar item
      * @Route("/{_locale}/calendar/new", name="chill_calendar_calendar_new")
@@ -251,7 +212,7 @@ class CalendarController extends AbstractController
     {
         $em = $this->getDoctrine()->getManager();
 
-        [$person, $accompanyingPeriod] = $this->getEntity($request);
+        [$user, $accompanyingPeriod] = $this->getEntity($request);
 
         if ($accompanyingPeriod instanceof AccompanyingPeriod) {
             $view = 'ChillCalendarBundle:Calendar:editAccompanyingCourse.html.twig';
@@ -267,9 +228,6 @@ class CalendarController extends AbstractController
         }
 
         $form = $this->createForm(CalendarType::class, $entity, [
-            'center' => $entity->getCenter(),
-            'role'   => new Role('CHILL_ACTIVITY_UPDATE'),
-            'activityType' => $entity->getType(),
             'accompanyingPeriod' => $accompanyingPeriod,
         ])->handleRequest($request);
 
@@ -279,25 +237,25 @@ class CalendarController extends AbstractController
 
             $this->addFlash('success', $this->get('translator')->trans('Success : activity updated!'));
 
-            $params = $this->buildParamsToUrl($person, $accompanyingPeriod);
+            $params = $this->buildParamsToUrl($user, $accompanyingPeriod);
             $params['id'] = $id;
             return $this->redirectToRoute('chill_activity_activity_show', $params);
         }
 
-        $deleteForm = $this->createDeleteForm($id, $person, $accompanyingPeriod);
+        $deleteForm = $this->createDeleteForm($id, $user, $accompanyingPeriod);
 
         if ($view === null) {
             throw $this->createNotFoundException('Template not found');
         }
 
-        $activity_array = $this->serializer->normalize($entity, 'json', ['groups' => 'read']);
-
+        $entity_array = $this->serializer->normalize($entity, 'json', ['groups' => 'read']);
+        
         return $this->render($view, array(
-            'entity'      => $entity,
-            'edit_form'   => $form->createView(),
+            'entity' => $entity,
+            'form' => $form->createView(),
             'delete_form' => $deleteForm->createView(),
             'accompanyingCourse' => $accompanyingPeriod,
-            'activity_json' => $activity_array
+            'entity_json' => $entity_array
         ));
     }
 
diff --git a/src/Bundle/ChillCalendarBundle/Entity/Calendar.php b/src/Bundle/ChillCalendarBundle/Entity/Calendar.php
index 85130df98..8a106efbd 100644
--- a/src/Bundle/ChillCalendarBundle/Entity/Calendar.php
+++ b/src/Bundle/ChillCalendarBundle/Entity/Calendar.php
@@ -16,6 +16,8 @@ use Chill\CalendarBundle\Entity\CalendarRange;
 use Chill\CalendarBundle\Entity\Invite;
 use Chill\ActivityBundle\Entity\Activity;
 use Chill\CalendarBundle\Repository\CalendarRepository;
+use DateInterval;
+use DateTimeImmutable;
 use Symfony\Component\Validator\Constraints\NotBlank;
 use Symfony\Component\Validator\Constraints\Range;
 use Symfony\Component\Validator\Mapping\ClassMetadata;
@@ -51,7 +53,7 @@ class Calendar
     /**
      * @ORM\ManyToOne(targetEntity="Chill\MainBundle\Entity\User")
      */
-    private User $mainUser;
+    private ?User $mainUser;
 
     /**
      *
@@ -416,7 +418,6 @@ class Calendar
         return $this->getInvites(); //TODO get users of the invite
     }
 
-
     public static function loadValidatorMetadata(ClassMetadata $metadata): void
     {
         $metadata->addPropertyConstraint('startDate', new NotBlank());
diff --git a/src/Bundle/ChillCalendarBundle/Form/CalendarType.php b/src/Bundle/ChillCalendarBundle/Form/CalendarType.php
index a4072f12e..00b410f7f 100644
--- a/src/Bundle/ChillCalendarBundle/Form/CalendarType.php
+++ b/src/Bundle/ChillCalendarBundle/Form/CalendarType.php
@@ -17,6 +17,7 @@ use Chill\MainBundle\Form\Type\CommentType;
 use Chill\CalendarBundle\Entity\Calendar;
 use Chill\CalendarBundle\Entity\CancelReason;
 use Chill\CalendarBundle\Entity\Invite;
+use Chill\MainBundle\Entity\User;
 use Chill\MainBundle\Templating\TranslatableStringHelper;
 use Chill\PersonBundle\Entity\Person;
 use Chill\ThirdPartyBundle\Entity\ThirdParty;
@@ -43,6 +44,14 @@ class CalendarType extends AbstractType
     public function buildForm(FormBuilderInterface $builder, array $options)
     {
         $builder
+            ->add('mainUser', EntityType::class, array(
+                'required' => true,
+                'class' => User::class,
+                'choice_label' => function (User $entity) {
+                    return $entity->getUsernameCanonical();
+                },
+                // TODO 'empty_data' => 
+            ))
             ->add('comment', CommentType::class, array(
                 'required' => false
             ))
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/edit.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/edit.html.twig
new file mode 100644
index 000000000..c8f869902
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/edit.html.twig
@@ -0,0 +1,76 @@
+<h1>{{ "Update calendar"|trans }}</h1>
+
+{{ form_start(form) }}
+{{ form_errors(form) }}
+
+{%- if form.mainUser is defined -%}
+    {{ form_row(form.mainUser) }}
+{% endif %}
+
+<h2 class="chill-red">{{ 'Concerned groups'|trans }}</h2>
+
+{%- if form.persons is defined -%}
+    {{ form_widget(form.persons) }}
+{% endif %}
+{%- if form.professionals is defined -%}
+    {{ form_widget(form.professionals) }}
+{% endif %}
+{%- if form.nonProfessionals is defined -%}
+    {{ form_widget(form.nonProfessionals) }}
+{% endif %}
+{%- if form.users is defined -%}
+    {{ form_widget(form.users) }}
+{% endif %}
+
+<div id="add-persons"></div>
+
+<h2 class="chill-red">{{ 'Calendar data'|trans }}</h2>
+
+{%- if form.startDate is defined -%}
+    {{ form_row(form.startDate) }}
+{% endif %}
+
+{%- if form.endDate is defined -%}
+    {{ form_row(form.endDate) }}
+{% endif %}
+
+.. location
+
+{%- if form.cancelReason is defined -%}
+    {{ form_row(form.cancelReason) }}
+{% endif %}
+
+{%- if form.comment is defined -%}
+    {{ form_row(form.comment) }}
+{% endif %}
+
+{%- if form.sendSMS is defined -%}
+    {{ form_row(form.sendSMS) }}
+{% endif %}
+
+
+..calendarRange
+
+
+
+<ul class="record_actions sticky-form-buttons">
+  <li class="cancel">
+    <a 
+      class="btn btn-cancel"
+      {%- if context == 'person' -%} 
+      href="{{ chill_return_path_or('chill_calendar_calendar', { 'person_id': person.id } )}}"
+      {%- else -%}
+      href="{{ chill_return_path_or('chill_calendar_calendar', { 'accompanying_period_id': accompanyingCourse.id } )}}"
+      {%- endif -%}
+      >
+      {{ 'Cancel'|trans|chill_return_path_label }}
+    </a>
+  </li>
+  <li>
+    <button class="btn btn-create" type="submit">
+      {{ 'Create'|trans }}
+    </button>
+  </li>
+</ul>
+{{ form_end(form) }}
+
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editAccompanyingCourse.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editAccompanyingCourse.html.twig
new file mode 100644
index 000000000..06189c4db
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editAccompanyingCourse.html.twig
@@ -0,0 +1,37 @@
+{% extends "@ChillPerson/AccompanyingCourse/layout.html.twig" %}
+
+{% set activeRouteKey = 'chill_calendar_calendar_list' %}
+
+{% block title  'Update calendar'|trans %}
+
+{% block content %}
+<div class="calendar-edit">
+    <div class="row justify-content-center">
+        <div class="col-md-10 col-xxl">
+            
+            <div id="calendar"></div> {# <=== vue component #}
+            {% include 'ChillCalendarBundle:Calendar:edit.html.twig' with {'context': 'accompanyingCourse'} %}
+            
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% 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 }}"]', 
+            '{{ "You are going to leave a page with unsubmitted data. Are you sure you want to leave ?"|trans }}');
+        });
+        window.calendar = {{ entity_json|json_encode|raw }}; 
+    </script>
+    {{ encore_entry_script_tags('vue_calendar') }}
+{% endblock %}
+
+{% 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/list.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig
index 94b5f772b..7b2f1a104 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig
@@ -21,31 +21,22 @@
 
     {% for calendar in calendarItems %}
 
-
-        {% set t = calendar.type %}
         <div class="item-bloc">
             <div class="item-row main">
                 <div class="item-col">
                                         
-                    {% if calendar.date %}
-                        <h3>{{ calendar.date|format_date('long') }}</h3>
+                    {% if calendar.startDate %}
+                        <h3>{{ calendar.startDate|format_date('long') }} </h3>
                     {% endif %}
                    
-                    <div class="duration">
-                      {% if t.durationTimeVisible > 0 %}
-                        <p>
-                            <i class="fa fa-fw fa-hourglass-end"></i>
-                            {{ calendar.durationTime|date('H:i') }}
-                        </p>
-                      {% endif %}
-                        
-                        {% if calendar.travelTime and t.travelTimeVisible %}
-                        <p>
-                            <i class="fa fa-fw fa-car"></i>
-                            {{ calendar.travelTime|date('H:i') }}
-                        </p>
-                        {% endif %}
-                    </div>
+                    {% if calendar.endDate %}
+                        <h3>{{ calendar.endDate|format_date('long') }}</h3>
+                    {% endif %}
+
+
+                    
+                    <h3>{{ calendar.endDate.diff(calendar.startDate)|date("%i'%s''") }}</h3>
+                    
 
                     {% if context == 'user' and calendar.accompanyingPeriod is not empty %}
                       <div class="accompanyingPeriodLink" style="margin-top: 1rem">
@@ -64,68 +55,27 @@
                 </div>
                 <div class="item-col">
                     <ul class="list-content">
-                        {% if calendar.user and t.userVisible %}
+                        {% if calendar.user %}
                         <li>
                             <b>{{ 'by'|trans }}{{ calendar.user.usernameCanonical }}</b>
                         </li>
                         {% endif %}
                         
+                        {% if calendar.mainUser is not empty %}
                         <li>
-                            <b>{{ calendar.type.name | localize_translatable_string }}</b>
-                            
-                            {% if calendar.attendee is not null and t.attendeeVisible %}
-                                {% if calendar.attendee %}
-                                    {{ '→ ' ~ 'present'|trans|capitalize }} 
-                                {% else %} 
-                                    {{ '→ ' ~ 'not present'|trans|capitalize }}
-                                {% endif %}
-                            {% endif %}
+                            <b>{{ 'main user concerned'|trans }}{{ calendar.mainUser.usernameCanonical }}</b>
                         </li>
-                        
+                        {% endif %}
+
+                 
                         <li>
-                            <b>{{ 'location'|trans ~ ': ' }}</b>
-                            Domicile de l'usager
-                            {#
-                                {% if calendar.location %}{{ calendar.location }}{% endif %}
-                            #}
-                        </li>
-                        
-                        {%- if t.reasonsVisible -%}
-                        <li>
-                            {%- if calendar.reasons is empty -%}
-                                <span class="chill-no-data-statement">{{ 'No reason associated'|trans }}</span>
+                            {%- if calendar.comment.isEmpty -%}
+                                <span class="chill-no-data-statement">{{ 'No comments'|trans }}</span>
                             {%- else -%}
-                                {% for r in calendar.reasons %}
-                                    {{ r|chill_entity_render_box }}
-                                {% endfor %}
+                                {{ calendar.comment|chill_entity_render_box }}
                             {%- endif -%}
                         </li>
-                        {% endif %}
-
-                        {%- if t.socialIssuesVisible %}
-                            <li class="social-issues">
-                                {%- if calendar.socialIssues is empty -%}
-                                    <span class="chill-no-data-statement">{{ 'No social issues associated'|trans }}</span>
-                                {%- else -%}
-                                    {% for r in calendar.socialIssues %}
-                                      {{ r|chill_entity_render_box }}
-                                    {% endfor %}
-                                {%- endif -%}
-                            </li>
-                        {% endif %}
                         
-                        {%- if t.socialActionsVisible -%}
-                            <li class="social-actions">
-                                {%- if calendar.socialActions is empty -%}
-                                    <span class="chill-no-data-statement">{{ 'No social actions associated'|trans }}</span>
-                                {%- else -%}
-                                    {% for r in calendar.socialActions %}
-                                        <span class="badge bg-primary">{{ r.title|localize_translatable_string }}</span>
-                                    {% endfor %}
-                                {%- endif -%}
-                            </li>
-                        {% endif %}
-
                         
                     </ul>
                     <ul class="record_actions">
@@ -161,7 +111,7 @@
             <div class="item-row details">
                 <div class="item-col">
 
-                    {% include 'ChillCalendarBundle:Calendar:concernedGroups.html.twig' with {'context': context, 'with_display': 'row', 'entity': calendar } %}
+                    {% include 'ChillActivityBundle:Activity:concernedGroups.html.twig' with {'context': context, 'with_display': 'row', 'entity': calendar } %}
                 </div>
                 
                 {% if calendar.comment.comment is not empty %}
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/new.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/new.html.twig
index 58f20230e..104b7caf2 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/new.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/new.html.twig
@@ -4,7 +4,7 @@
 {{ form_errors(form) }}
 
 {%- if form.mainUser is defined -%}
-    {{ form_widget(form.mainUser) }}
+    {{ form_row(form.mainUser) }}
 {% endif %}
 
 <h2 class="chill-red">{{ 'Concerned groups'|trans }}</h2>
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/show.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/show.html.twig
index 3617bb3c7..24c79d294 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/show.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/show.html.twig
@@ -1,7 +1,8 @@
 <h1>{{ "Calendar"|trans }}</h1>
 
 <dl class="chill_view_data">
-
+    <dt class="inline">{{ 'main user'|trans }}</dt>
+    <dd>{{ entity.mainUser }}</dd>
 </dl>
 
 <h2 class="chill-red">{{ 'Concerned groups'|trans }}</h2>
@@ -19,7 +20,7 @@
     <dt class="inline">{{ 'cancel reason'|trans }}</dt>
     <dd>
     {% if entity.cancelReason is not null %}
-    {{ entity.cancelReason }}
+    {{ entity.cancelReason.canceledBy|localize_translatable_string }}
     {% else %}
     <span class="chill-no-data-statement">{{ 'Unknown'|trans }}</span>
     {% endif %}