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

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

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

    async updateDates() {
      const daysNode = document.querySelector('.calendar-strip__days')
      daysNode.classList.toggle('progress')
      
      this.dates = getDatesInMonth(this.monthNumb);      
      this.dates = await getMergedDates(this.monthNumb, this.dates)

      console.log('Merged dates', this.dates)
      document.querySelector('.calendar-strip__days').classList.toggle('progress')
    },

    handleDayHover() {
      if (this.date.sessions.length > 0) {
        this.targetSessions = this.date.sessions;
        this.open = true
      } else {
        setTimeout(() => {
          this.targetSessions = this.date.sessions;
        }, 100)
        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" :class="targetSessions.length > 0 && open && index == targetSessions[0].day ? 'active' : ''" :style="'animation-delay: ' + index * 0.03 + 's'">
        <button 
          :class="date.full === today ? 'today' : ''"
          :disabled="date.sessions.length === 0 ? true : false" 
          :title="date.sessions.length === 0 ? 'Pas de représentation.' : 'Voir les représentations.'"
          @mouseenter="handleDayHover()"
        >
        <span x-text="date.initial"></span>
        <span x-text="index"></span>
      </button>
      </li>
    </template>
  </ul>
  <a href="<?= page('programme')->url() ?>" class="calendar-strip__calendar-btn">calendrier</a>
  <div class="calendar-strip__date" :class="open ? 'open' : ''">
    <ul class="sessions sessions--detailed">
      <template x-for="session in targetSessions">
        <li 
          x-data="{
            stockThreshold: (session.totalStock / 100) * 25
          }"
          :style="'--color: ' + session.color"
          class="session" 
        >
          <a class="session__event-link" :href="session.eventUrl" title="En savoir plus">
            <div class="session__info">
              <p x-html="`${session.day} ${monthName}`"></p>
              <p x-html="session.time"></p>
            </div>
            <div class="session__info">
              <p><strong x-html="`<strong>${session.title}</strong>`"></strong></p>
              <p x-html="session.authors"></p>
            </div>
            <div x-text="session.duration ? session.duration : ''"></div>
            <div x-text="`${session.place}`"></div>
            <template x-if="!session.ticketingUrl">
              <div class="session__info">
                <a class="ticket-link" target="_blank" title="Entrée libre" disabled><?php snippet('ticket') ?> Entrée libre</a>
              </div>
            </template>
            <template x-if="session.bookableStock === 0">
              <div class="session__info">
                <a class="ticket-link" title="Plus de places disponibles" disabled><?php snippet('ticket') ?> Complet</a>
              </div>
            </template>
            <template x-if="session.bookableStock > stockThreshold">
              <div class="session__info">
                <a class="ticket-link" title="Plateforme de réservation" :href="session.ticketingUrl" target="_blank"><?php snippet('ticket') ?> Billetterie</a>
              </div>
            </template>
            <template x-if="session.bookableStock !== 0 && session.bookableStock < stockThreshold">
              <div class="session__info">
                <a class="ticket-link" title="Plateforme de réservation" :href="session.ticketingUrl" target="_blank"><?php snippet('ticket') ?> Plus que quelques places !</a>
              </div>
            </template>
          </a>
        </li>
      </template>
    </ul>
  </div>
</section>