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

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

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

    get currentMonth() {
      return this.calendar[this.monthNumb]
    },

    async updateDates() {

      fetch('/<?= page('programme')->children()->first()->uri() ?>/data.json')
        .then(res => res.json())
        .then(json => {
          console.log('Saved calendar : ', json)
          this.calendar = json
        })
        .catch(error => console.log('No saved calendar.'))

      const daysNode = document.querySelector('.calendar-strip__days');
      daysNode.classList.toggle('progress');   
      
      this.calendar = await getCurrentSeasonCalendar();
      
      console.log('Updated calendar for current season :', this.calendar);
      daysNode.classList.toggle('progress');
    },

    handleDayHover() {
      if (!this.date) return
      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;
      }
    },

    nextMonth() {
      if (this.monthNumb == 12) {
        this.monthNumb = 1
      } else {
        this.monthNumb++
      }
    },
    prevMonth() {
      if (this.monthNumb == 1) {
        this.monthNumb = 12
      } else {
        this.monthNumb--
      }
    }
  }"


  x-init="updateDates()"
>
  <div class="calendar-strip__selector">
    <button class="prev-month" @click="prevMonth()" :disabled="monthNumb === 9">←</button>
    <span x-text="monthName"></span>
    <button class="next-month" @click="nextMonth()" :disabled="monthNumb === 8">→</button>
  </div>
  <ul class="calendar-strip__days">
    <template x-for="(date, index) in currentMonth">
      <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 || date.full !== today ? '' : 'today'"
          :disabled="!date || date.sessions.length === 0 ? true : false" 
          :title="!date || date.sessions.length === 0 ? 'Pas de représentation.' : 'Voir les représentations.'"
          @mouseenter="handleDayHover()"
        >
        <template  x-if="date">
          <span x-text="date.initial"></span>
        </template>
        <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">
      <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"></a>
          <div class="session__info session__info--slot">
            <p x-html="`${session.day} ${monthName}`"></p>
            <p x-html="session.time"></p>
          </div>
          <div class="session__info session__info--title">
            <p><strong x-html="`<strong>${session.title}</strong>`"></strong></p>
            <p x-html="session.authors"></p>
          </div>
          <div x-text="session.duration ? session.duration : ''" class="session__info session__info--duration"></div>
          <div x-text="`${session.place}`" class="session__info session__info--place"></div>
          <template x-if="!session.ticketingUrl">
            <div class="session__info session__info--book">
              <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 session__info--book">
              <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>
        </li>
      </template>
    </ul>
  </div>
</section>