nouveau-theatre-de-besancon/site/snippets/calendar-strip.php

<div 
  class="calendar-strip"
  @mouseleave="open = false"
  x-data="{
    monthNumb: dayjs().month(),
    token: '<?= $site->mapadoToken() ?>',
    contractId: '<?= $site->mapadoContractId() ?>',
    dates: [],
    targetSessions: [],
    open: false,

    get monthName() {
      return dayjs().month(this.monthNumb).format('MMMM');
    },

    async updateDates() {
      document.body.classList.toggle('progress')
      this.dates = getDatesInMonth(this.monthNumb);

      const mapadoDates = await getMapadoDates(this.monthNumb)
      
      mapadoDates.forEach(mapadoDate => {
        const day = parseInt(mapadoDate.day)
        this.dates[day].push(mapadoDate)
      })
      
      const kirbyDates = await getKirbyDates(this.monthNumb, this.dates)

      console.log('kirby dates', kirbyDates)

      console.log('dates', this.dates)
      document.body.classList.toggle('progress')
    },

    handleDayHover() {
      this.targetSessions = this.date;
      if (this.date.length > 0) {this.open = true} else {this.open = false}
    }
  }"

  x-init="updateDates()"
>
  <div class="calendar-strip__selector">
    <button class="prev-month" @click="monthNumb--; updateDates()">←</button>
    <span x-text="monthName"></span>
    <button class="next-month" @click="monthNumb++; updateDates()">→</button>
  </div>
  <ul class="calendar-strip__days">
    <template x-for="(date, index) in dates">
      <li class="calendar-strip__day">
        <button 
          x-text="index" 
          :disabled="date.length === 0 ? true : false" 
          :title="date.length === 0 ? 'Pas de représentation.' : 'Voir les représentations.'"
          @mouseenter="handleDayHover()"
        ></button>
      </li>
    </template>
  </ul>
  <button class="calendar-strip__calendar-btn">calendrier</button>
  <div class="calendar-strip__date" :class="open ? 'open' : ''">
    <ul class="calendar-strip__sessions">
      <template x-for="session in targetSessions">
        <li class="calendar-strip__session">
          <div x-html="`${session.day} ${monthName}<br><br>${session.startTime}`"></div>
          <div x-html="`<strong>${session.title}</strong>`"></div>
          <div></div>
          <div></div>
          <div xhtml=""></div>
        </li>
      </template>
    </ul>
  </div>
</div>