diff --git a/src/Bundle/ChillCalendarBundle/Entity/Calendar.php b/src/Bundle/ChillCalendarBundle/Entity/Calendar.php
index 0663ca08b..fbde03af2 100644
--- a/src/Bundle/ChillCalendarBundle/Entity/Calendar.php
+++ b/src/Bundle/ChillCalendarBundle/Entity/Calendar.php
@@ -37,12 +37,14 @@ class Calendar
      * @ORM\Id
      * @ORM\GeneratedValue
      * @ORM\Column(type="integer")
+     * @Serializer\Groups({"calendar:read"})
      */
     private ?int $id;
 
     /**
      * @ORM\ManyToOne(targetEntity="Chill\MainBundle\Entity\User")
      * @Groups({"read"})
+     * @Serializer\Groups({"calendar:read"})
      */
     private User $user;
 
@@ -64,6 +66,7 @@ class Calendar
      *     cascade={"persist", "remove", "merge", "detach"})
      * @ORM\JoinTable(name="chill_calendar.calendar_to_persons")
      * @Groups({"read"})
+     * @Serializer\Groups({"calendar:read"})
      */
     private Collection $persons;
 
@@ -74,6 +77,7 @@ class Calendar
      *     cascade={"persist", "remove", "merge", "detach"})
      * @ORM\JoinTable(name="chill_calendar.calendar_to_thirdparties")
      * @Groups({"read"})
+     * @Serializer\Groups({"calendar:read"})
      */
     private Collection $professionals;
 
@@ -89,6 +93,7 @@ class Calendar
 
     /**
      * @ORM\Embedded(class=CommentEmbeddable::class, columnPrefix="comment_")
+     * @Serializer\Groups({"calendar:read"})
      */
     private CommentEmbeddable $comment;
 
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
index 56d914b95..214b8d941 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
@@ -14,9 +14,9 @@
     <FullCalendar ref="fullCalendar" :options="calendarOptions">
       <template v-slot:eventContent='arg' >
         <span class='calendarRangeItems'>
-        <b>{{ arg.timeText }}</b>
+          <b>{{ arg.timeText }}</b>
           <i>&nbsp;{{ arg.event.title }}</i>
-          <a class="fa fa-fw fa-times"
+          <a v-if=!arg.event.extendedProps.myCalendar class="fa fa-fw fa-times"
             @click.prevent="onClickDelete(arg.event)">
           </a>
         </span>
@@ -70,6 +70,47 @@
       </div>
     </div>
   </div>
+
+  <teleport to="body">
+    <modal v-if="modal.showModal"
+      :modalDialogClass="modal.modalDialogClass"
+      @close="modal.showModal = false">
+
+        <template v-slot:header>
+          <h2 class="modal-title"> {{ this.myCalendarClickedEvent.start.toLocaleString() }} - {{ this.myCalendarClickedEvent.end.toLocaleString() }}</h2>
+        </template>
+
+        <template v-slot:body>
+          <p>{{ $t('by')}} {{this.myCalendarClickedEvent.user.username }}</p>
+          <p>{{ $t('main_user_concerned') }} : {{ this.myCalendarClickedEvent.mainUser.username }}</p>
+          <p v-if="myCalendarClickedEvent.comment.length > 0" >{{ this.myCalendarClickedEvent.comment }}</p>
+        </template>
+
+        <template v-slot:footer>
+          <ul class="record_actions">
+            <li>
+              <a
+                class="btn btn-show"
+                :href=myCalendarEventShowLink() >
+              </a>
+            </li>
+            <li>
+              <a
+                class="btn btn-update"
+                :href=myCalendarEventUpdateLink() >
+              </a>
+            </li>
+            <li>
+              <a
+                class="btn btn-delete"
+                :href=myCalendarEventDeleteLink() >
+              </a>
+            </li>
+          </ul>
+        </template>
+
+      </modal>
+   </teleport>
 </template>
 
 <script>
@@ -79,22 +120,29 @@ import FullCalendar from '@fullcalendar/vue3';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import timeGridPlugin from '@fullcalendar/timegrid';
+import Modal from 'ChillMainAssets/vuejs/_components/Modal';
 import { deleteCalendarRange, fetchCalendar, fetchCalendarRangesByUser, patchCalendarRange, postCalendarRange } from '../_api/api';
 import { mapState } from 'vuex';
 
 export default {
   name: "App",
   components: {
-    FullCalendar
+    FullCalendar,
+    Modal
   },
   data() {
     return {
       errorMsg: [],
+      modal: {
+        showModal: false,
+        modalDialogClass: "modal-dialog-scrollable modal-m"
+      },
       flag: {
         loading: false
       },
       userId: window.userId,
       showMyCalendar: true,
+      myCalendarClickedEvent: null,
       calendarEvents: {
          userCalendar: null,
          userCalendarRange: null,
@@ -116,6 +164,7 @@ export default {
         eventChange: this.onEventChange,
         eventDrop: this.onEventDropOrResize,
         eventResize: this.onEventDropOrResize,
+        eventClick: this.onEventClick,
         selectMirror: true,
         editable: true,
         weekends: false,
@@ -149,6 +198,18 @@ export default {
     init() {
       this.fetchData();
     },
+    openModal() {
+      this.modal.showModal = true;
+    },
+    myCalendarEventShowLink() {
+      return `/fr/calendar/ ${this.myCalendarClickedEvent.id}/show?user_id=${ this.userId }`
+    },
+    myCalendarEventUpdateLink() {
+      return `/fr/calendar/ ${this.myCalendarClickedEvent.id}/edit?user_id=${ this.userId }`
+    },
+    myCalendarEventDeleteLink() {
+      return `/fr/calendar/ ${this.myCalendarClickedEvent.id}/delete?user_id=${ this.userId }`
+    },
     resetCalendar() {
       this.fetchData();
       this.calendarEvents.new = {
@@ -179,8 +240,15 @@ export default {
         fetchCalendar(this.userId).then(calendar => new Promise((resolve, reject) => {
           let events = calendar.results.map(i =>
             ({
+              myCalendar: true,
+              calendarId: i.id,
               start: i.startDate.datetime,
               end: i.endDate.datetime,
+              user: i.user,
+              mainUser: i.mainUser,
+              persons: i.persons,
+              professionals: i.professionals,
+              comment: i.comment
             })
           );
           let calendarEventsCurrentUser = {
@@ -238,6 +306,26 @@ export default {
       payload.event.setProp('textColor', '#444444');
       this.$store.dispatch('updateRange', payload);
     },
+    onEventClick(payload) {
+      console.log(payload)
+      console.log(payload.event)
+      console.log(payload.event.extendedProps)
+
+      if (payload.event.extendedProps.myCalendar) {
+        this.myCalendarClickedEvent = {
+          id: payload.event.extendedProps.calendarId,
+          start: payload.event.start,
+          end: payload.event.end,
+          user: payload.event.extendedProps.user,
+          mainUser: payload.event.extendedProps.mainUser,
+          persons: payload.event.extendedProps.persons,
+          professionals: payload.event.extendedProps.professionals,
+          comment: payload.event.extendedProps.comment
+        };
+        console.log(this.myCalendarClickedEvent)
+        this.openModal();
+      }
+    },
     onClickSave(payload) {
       this.flag.loading = true;
       if (this.$store.state.newCalendarRanges.length > 0){
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js
index 96eca1d6a..2305b307b 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js
@@ -10,7 +10,9 @@ const appMessages = {
       copy_range_how_to: "Créez les plages de disponibilités durant une journée et copiez-les facilement au jour suivant avec ce bouton. Si les week-ends sont cachés, le jour suivant un vendredi sera le lundi.",
       new_range_to_save: "Nouvelles plages à enregistrer",
       update_range_to_save: "Plages à modifier",
-      delete_range_to_save: "Plages à supprimer"
+      delete_range_to_save: "Plages à supprimer",
+      by: "Par",
+      main_user_concerned: "Utilisateur concerné"
    }
 }
 
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig
index 331544854..80aba0d0c 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig
@@ -16,139 +16,130 @@
 
 {% if context == 'user' %}
     <div id="myCalendar"></div>
-{% endif %}
-
-{% if context == 'user' %}
-    <h2 class="chill-red">{{ 'My calendar list' |trans }}</h2>
-{% endif %}
-
-{% if calendarItems|length == 0 %}
-    <p class="chill-no-data-statement">
-        {{ "There is no calendar items."|trans }}
-        <a href="{{ path('chill_calendar_calendar_new', {'user_id': user_id, 'accompanying_period_id': accompanying_course_id}) }}" class="btn btn-create button-small"></a>
-    </p>
 {% else %}
 
-<div class="flex-table list-records context-{{ context }}">
+    {% if calendarItems|length == 0 %}
+        <p class="chill-no-data-statement">
+            {{ "There is no calendar items."|trans }}
+            <a href="{{ path('chill_calendar_calendar_new', {'user_id': user_id, 'accompanying_period_id': accompanying_course_id}) }}" class="btn btn-create button-small"></a>
+        </p>
+    {% else %}
 
-    {% for calendar in calendarItems %}
+    <div class="flex-table list-records context-{{ context }}">
 
-        <div class="item-bloc">
-            <div class="item-row main">
-                <div class="item-col">
+        {% for calendar in calendarItems %}
+
+            <div class="item-bloc">
+                <div class="item-row main">
+                    <div class="item-col">
 
 
-                    {% 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>
+                        {% 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 %}
 
-                            <div class="duration">
-                                <p>
-                                    <i class="fa fa-fw fa-hourglass-end"></i>
-                                    {{ calendar.endDate.diff(calendar.startDate)|date("%H:%M")}}
-                                </p>
-                            </div>
                         {% endif %}
 
+                        
+                    </div>
+                    <div class="item-col">
+                        <ul class="list-content">
+                            {% if calendar.user %}
+                            <li>
+                                <b>{{ 'by'|trans }}{{ calendar.user.usernameCanonical }}</b>
+                            </li>
+                            {% endif %}
+
+                            {% if calendar.mainUser is not empty %}
+                            <li>
+                                <b>{{ 'main user concerned'|trans }}: {{ calendar.mainUser.usernameCanonical }}</b>
+                            </li>
+                            {% endif %}
+
+
+                            <li>
+                                {%- if calendar.comment.isEmpty -%}
+                                    <span class="chill-no-data-statement">{{ 'No comments'|trans }}</span>
+                                {%- else -%}
+                                    {{ calendar.comment|chill_entity_render_box }}
+                                {%- endif -%}
+                            </li>
+
+
+                        </ul>
+                        <ul class="record_actions">
+                            <li>
+                                <a href="{{ path('chill_calendar_calendar_show', { 'id': calendar.id, 'user_id': user_id, 'accompanying_period_id': accompanying_course_id }) }}" class="btn btn-show "></a>
+                            </li>
+                            {# TOOD
+                            {% if is_granted('CHILL_ACTIVITY_UPDATE', calendar) %}
+                            #}
+                            <li>
+                                <a href="{{ path('chill_calendar_calendar_edit', { 'id': calendar.id, 'user_id': user_id, 'accompanying_period_id': accompanying_course_id }) }}" class="btn btn-update "></a>
+                            </li>
+                            {# TOOD
+                            {% endif %}
+                            {% if is_granted('CHILL_ACTIVITY_DELETE', calendar) %}
+                            #}
+                            <li>
+                                <a href="{{ path('chill_calendar_calendar_delete', { 'id': calendar.id, 'user_id' : user_id, 'accompanying_period_id': accompanying_course_id } ) }}" class="btn btn-delete "></a>
+                            </li>
+                            {#
+                            {% endif %}
+                            #}
+                        </ul>
+                    </div>
+                </div>
+
+                {%
+                    if calendar.comment.comment is not empty
+                    or calendar.users|length > 0
+                    or calendar.thirdParties|length > 0
+                    or calendar.users|length > 0
+                %}
+                <div class="item-row details">
+                    <div class="item-col">
+
+                        {% include 'ChillActivityBundle:Activity:concernedGroups.html.twig' with {'context': context, 'with_display': 'row', 'entity': calendar } %}
+                    </div>
+
+                    {% if calendar.comment.comment is not empty %}
+                    <div class="item-col comment">
+                        {{ calendar.comment|chill_entity_render_box( { 'limit_lines': 3, 'metadata': false } ) }}
+                    </div>
                     {% endif %}
-
-                    {% if context == 'user' and calendar.accompanyingPeriod is not empty %}
-                        <a class="btn btn-sm btn-outline-primary"
-                            title="{{ 'Period number %number%'|trans({'%number%': calendar.accompanyingPeriod.id}) }}"
-                            href="{{ chill_path_add_return_path(
-                                "chill_user_accompanying_course_index",
-                                { 'accompanying_period_id': calendar.accompanyingPeriod.id }
-                            ) }}"><i class="fa fa-random"></i>
-                        </a>
-                    {% endif %}
-
-                    
-                </div>
-                <div class="item-col">
-                    <ul class="list-content">
-                        {% if calendar.user %}
-                        <li>
-                            <b>{{ 'by'|trans }}{{ calendar.user.usernameCanonical }}</b>
-                        </li>
-                        {% endif %}
-
-                        {% if calendar.mainUser is not empty %}
-                        <li>
-                            <b>{{ 'main user concerned'|trans }}: {{ calendar.mainUser.usernameCanonical }}</b>
-                        </li>
-                        {% endif %}
-
-
-                        <li>
-                            {%- if calendar.comment.isEmpty -%}
-                                <span class="chill-no-data-statement">{{ 'No comments'|trans }}</span>
-                            {%- else -%}
-                                {{ calendar.comment|chill_entity_render_box }}
-                            {%- endif -%}
-                        </li>
-
-
-                    </ul>
-                    <ul class="record_actions">
-                        <li>
-                            <a href="{{ path('chill_calendar_calendar_show', { 'id': calendar.id, 'user_id': user_id, 'accompanying_period_id': accompanying_course_id }) }}" class="btn btn-show "></a>
-                        </li>
-                        {# TOOD
-                        {% if is_granted('CHILL_ACTIVITY_UPDATE', calendar) %}
-                        #}
-                        <li>
-                            <a href="{{ path('chill_calendar_calendar_edit', { 'id': calendar.id, 'user_id': user_id, 'accompanying_period_id': accompanying_course_id }) }}" class="btn btn-update "></a>
-                        </li>
-                        {# TOOD
-                        {% endif %}
-                        {% if is_granted('CHILL_ACTIVITY_DELETE', calendar) %}
-                        #}
-                        <li>
-                            <a href="{{ path('chill_calendar_calendar_delete', { 'id': calendar.id, 'user_id' : user_id, 'accompanying_period_id': accompanying_course_id } ) }}" class="btn btn-delete "></a>
-                        </li>
-                        {#
-                        {% endif %}
-                        #}
-                    </ul>
-                </div>
-            </div>
-
-            {%
-                if calendar.comment.comment is not empty
-                or calendar.users|length > 0
-                or calendar.thirdParties|length > 0
-                or calendar.users|length > 0
-            %}
-            <div class="item-row details">
-                <div class="item-col">
-
-                    {% include 'ChillActivityBundle:Activity:concernedGroups.html.twig' with {'context': context, 'with_display': 'row', 'entity': calendar } %}
-                </div>
-
-                {% if calendar.comment.comment is not empty %}
-                <div class="item-col comment">
-                    {{ calendar.comment|chill_entity_render_box( { 'limit_lines': 3, 'metadata': false } ) }}
                 </div>
                 {% endif %}
+
             </div>
-            {% endif %}
+        {% endfor %}
+    </div>
+    {% endif %}
+
+    {% if context != 'user' %}
+    {# TODO set this condition in configuration #}
+    <ul class="record_actions">
+        <li>
+            <a href="{{ path('chill_calendar_calendar_new', {'user_id': user_id, 'accompanying_period_id': accompanying_course_id}) }}" class="btn btn-create">
+                {{ 'Add a new calendar' | trans }}
+            </a>
+        </li>
+    </ul>
+    {% endif %}
+
+
 
-        </div>
-    {% endfor %}
-</div>
 {% endif %}
 
-{% if context != 'user' %}
-{# TODO set this condition in configuration #}
-  <ul class="record_actions">
-      <li>
-          <a href="{{ path('chill_calendar_calendar_new', {'user_id': user_id, 'accompanying_period_id': accompanying_course_id}) }}" class="btn btn-create">
-              {{ 'Add a new calendar' | trans }}
-          </a>
-      </li>
-  </ul>
-{% endif %}