Calendar renderer in agenda style

source/js/components/calendar/Renderer.vue

 <template>
   <div class="calendar grid grid-cols-4">
-    <div class="col-span-4 xl:col-span-1">
+    <div v-if="showBanner" class="col-span-4 xl:col-span-1">
       <aside class="banner bg-orange-300 text-white h-full">
         <i class="ico--calendar banner__icon"></i>
         <div class="banner__body">
@@ -11,8 +11,8 @@
         </div>
       </aside>
     </div>
-    <div class="col-span-4 xl:col-span-3">
-      <div class="grid grid-cols-12 items-center calendar-table-row" v-for="event in events" v-bind:key="event.id">
+    <div :class="{'col-span-4 xl:col-span-3': showBanner, 'col-span-4': !showBanner}">
+      <div class="grid grid-cols-12 items-center calendar-table-row" v-for="event in events" v-bind:key="event.id" :class="{'calendar-table-row--standalone': !showBanner}">
         <div class="col-span-2 text-orange-300 head-alt-md calendar-table-row__col"><span>{{ event.startTimestamp | dateDay }}</span></div>
         <div class="col-span-8 grid grid-cols-3 col-gap-4 calendar-table-row__col" :class="{'calendar-table-row__col--norborder': !event.mapLink}">
           <div class="col-span-3 md:col-span-1">
@@ -54,7 +54,11 @@
       hasMore: {
         type: Boolean,
         default: true,
-      }
+      },
+      showBanner: {
+        type: Boolean,
+        default: true,
+      },
     },
     filters: {
       dateDay: (val) => {