add calendar strip date infos

site/snippets/calendar-strip.php

@@ -24,8 +24,16 @@
     },
 
     handleDayHover() {
-      this.targetSessions = this.date;
-      if (this.date.length > 0) {this.open = true} else {this.open = false}
+      
+      if (this.date.length > 0) {
+        this.targetSessions = this.date;
+        this.open = true
+      } else {
+        setTimeout(() => {
+          this.targetSessions = this.date;
+        }, 100)
+        this.open = false
+      }
     }
   }"
 
@@ -38,7 +46,7 @@
   </div>
   <ul class="calendar-strip__days">
     <template x-for="(date, index) in dates">
-      <li class="calendar-strip__day">
+      <li class="calendar-strip__day" :class="targetSessions.length > 0 && index == targetSessions[0].day ? 'active' : ''">
         <button 
           x-text="index" 
           :disabled="date.length === 0 ? true : false" 
@@ -54,10 +62,17 @@
       <template x-for="session in targetSessions">
         <li class="calendar-strip__session">
           <div x-html="`${session.day} ${monthName}<br><br>${session.time}`"></div>
-          <div x-html="`<strong>${session.title}</strong>`"></div>
-          <div></div>
-          <div></div>
-          <div xhtml=""></div>
+          <div>
+            <p><strong x-html="`<strong>${session.title}</strong>`"></strong></p>
+            <p x-html="session.authors"></p>
+          </div>
+          <div x-text="`${session.duration}`"></div>
+          <div x-text="`${session.place}`"></div>
+          <template x-if="session.ticketingUrl">
+            <div>
+              <a :href="session.ticketingUrl" target="_blank" title="Accéder à la billetterie">Billetterie</a>
+            </div>
+          </template>
         </li>
       </template>
     </ul>