layout for rendering list

src/Bundle/ChillCalendarBundle/Resources/public/chill/chill.js

@@ -0,0 +1 @@
+import './scss/badge.scss';

src/Bundle/ChillCalendarBundle/Resources/public/chill/scss/badge.scss

@@ -0,0 +1,25 @@
+@import '~ChillPersonAssets/chill/scss/mixins.scss';
+@import '~ChillMainAssets/module/bootstrap/shared';
+
+.badge-calendar {
+    display: inline-block;
+    background-color: #f3f3f3;
+
+    .title_label {
+        @include chill_badge($chill-l-gray);
+    }
+
+    .title_action {
+        padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
+        margin-right: 1rem;
+
+        font-size: var(--bs-badge-font-size);
+        font-weight: var(--bs-badge-font-weight);
+        line-height: 1;
+        color: var(--bs-badge-color);
+        text-align: center;
+        white-space: nowrap;
+        vertical-align: baseline;
+    }
+}
+

src/Bundle/ChillCalendarBundle/Resources/public/chill/scss/calendar.scss

@@ -17,4 +17,4 @@ span.calendarRangeItems {
         text-decoration: none;
         padding: 3px;
     }
-}
+}

src/Bundle/ChillCalendarBundle/Resources/views/GenericDoc/calendar_document.html.twig

@@ -12,11 +12,31 @@
             {% elseif document.storedObject.isFailure %}
                 <div class="badge text-bg-warning">{{ 'docgen.Doc generation failed'|trans }}</div>
             {% endif %}
-            <div class="denomination h2">
-                {{ document.storedObject.title }}
-            </div>
+
             <div>
-                {{ 'chill_calendar.Document'|trans }}
+                {% if c.accompanyingPeriod is not null and context == 'person' %}
+                    <span class="badge bg-primary">
+                        <i class="fa fa-random"></i> {{ c.accompanyingPeriod.id }}
+                    </span>&nbsp;
+                {% endif %}
+
+                <span class="badge-calendar">
+                    <span class="title_label"></span>
+                    <span class="title_action">
+                        {{ 'Calendar'|trans }}
+                        {% if c.endDate.diff(c.startDate).days >= 1 %}
+                            {{ c.startDate|format_datetime('short', 'short') }}
+                            - {{ c.endDate|format_datetime('short', 'short') }}
+                        {% else %}
+                            {{ c.startDate|format_datetime('short', 'short') }}
+                            - {{ c.endDate|format_datetime('none', 'short') }}
+                        {% endif %}
+                    </span>
+                </span>
+            </div>
+
+            <div class="denomination h2">
+                {{ document.storedObject.title|chill_print_or_message("No title") }}
             </div>
             {% if document.storedObject.hasTemplate %}
                 <div>
@@ -34,20 +54,6 @@
         </div>
     </div>
 
-    <div class="item-row separator">
-        <div class="item-col">
-            <p class="date-label">
-                {% if c.endDate.diff(c.startDate).days >= 1 %}
-                    {{ c.startDate|format_datetime('short', 'short') }}
-                    - {{ c.endDate|format_datetime('short', 'short') }}
-                {% else %}
-                    {{ c.startDate|format_datetime('short', 'short') }}
-                    - {{ c.endDate|format_datetime('none', 'short') }}
-                {% endif %}
-            </p>
-        </div>
-    </div>
-
     <div class="item-row separator">
         <div class="item-col item-meta">
             {{ mmm.createdBy(document) }}