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

<section 
  class="calendar-strip"
  x-data="{
    calendar: createEmptyCalendar(),
    currentMonthIndex: dayjs().month() + 1,
    currentWeekIndex: (() => {
      dayjs.extend(window.dayjs_plugin_weekOfYear);
      
      const today = dayjs();
      const firstDayOfMonth = today.startOf('month');
      const currentWeek = today.week();
      const firstWeekOfMonth = firstDayOfMonth.week();
      const currentWeekIndex = currentWeek - firstWeekOfMonth;

      return currentWeekIndex;
    })(),
    token: '<?= $site->mapadoToken() ?>',
    contractId: '<?= $site->mapadoContractId() ?>',
    targetSessions: [],
    open: false,
    today: dayjs().format('DD-MM-YYYY'),

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

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

    get currentWeeks() {
      const weeks = [[]];
      let index = 0;
      for (let key in this.currentMonth) {
        const date = this.currentMonth[key]
        weeks[index].push(date)
        if (date.indexInWeek === 7) {
          weeks.push([])
          index++
        }
      }
      return weeks
    },

    get currentWeek() {
      this.currentWeeks[this.currentWeekIndex];
    },

    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;
      }
    },

    prevWeek() {
      if (this.currentWeekIndex === 0) {
        this.prevMonth()
        this.currentWeekIndex = this.currentWeeks.length - 1
      } else {
        this.currentWeekIndex--
      }
    },

    nextWeek() {
      if (this.currentWeekIndex === this.currentWeeks.length - 1) {
        this.nextMonth()
        this.currentWeekIndex = 0
      } else {
        this.currentWeekIndex++
      }
    },

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


  x-init="updateDates()"
>
  <div class="calendar-strip__selector">
    <button class="prev-month" @click="prevMonth()" :disabled="currentMonthIndex === 9">←</button>
    <span x-text="monthName"></span>
    <button class="next-month" @click="nextMonth()" :disabled="currentMonthIndex === 8">→</button>
  </div>

  <button @click="prevWeek()" class="calendar-strip__change-week calendar-strip__next-week">←</button>
  
  <ul class="calendar-strip__days">
    <template x-for="(week, weekIndex) in currentWeeks">
      <li class="week" :class="weekIndex == currentWeekIndex ? 'current' : ''">
        <ul>
          <template x-for="date in week">
            <li class="calendar-strip__day" :class="targetSessions.length > 0 && open && date.index == targetSessions[0].day ? 'active' : ''" :style="'animation-delay: ' + date.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.'"
                @mouseover="handleDayHover()"
              >
                <template  x-if="date">
                  <span x-text="date.initial"></span>
                </template>
                <span x-text="date.index"></span>
              </button>
            </li>
          </template>
        </ul>
      </li>
    </template>
  </ul>

  <button @click="nextWeek()" class="calendar-strip__change-week calendar-strip__next-week">→</button>
  
  <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" 
        >
          <div class="left-column mobile-group">
            <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>
          <div class="middle-column mobile-group">
            <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>

          <div class="session__info session__info--duration desktop">
            <p x-text="session.duration ? 'Durée : ' + session.duration : ''"></p>
            <p x-text="session.public ? session.public : ''"></p>
          </div>
          
          <div x-text="`${session.place}`" class="session__info session__info--place desktop"></div>
          <div class="right-column mobile-group">
            <template x-if="!session.ticketingUrl">
              <div class="session__info session__info--book session__info--book-free">
                <a class="ticket-link" target="_blank" title="Entrée libre" disabled><?php snippet('ticket') ?> <span class="desktop">Entrée libre</span></a>
              </div>
            </template>
            <template x-if="session.bookableStock === 0">
              <div class="session__info session__info--book session__info--book-sold-out">
                <a class="ticket-link" title="Plus de places disponibles" disabled><?php snippet('ticket') ?> <span class="desktop">Complet</span></a>
              </div>
            </template>
            <template x-if="session.bookableStock > stockThreshold">
              <div class="session__info session__info--book session__info--book-open">
                <a class="ticket-link" title="Plateforme de réservation" :href="session.ticketingUrl" target="_blank"><?php snippet('ticket') ?> <span class="desktop">Billetterie</span></a>
              </div>
            </template>
            <template x-if="session.bookableStock !== 0 && session.bookableStock < stockThreshold">
              <div class="session__info session__info--book session__info--book-few-places">
                <a class="ticket-link" title="Plateforme de réservation" :href="session.ticketingUrl" target="_blank"><?php snippet('ticket') ?> <span class="desktop">Plus que quelques places !</span></a>
              </div>
            </template>
          </div>
        </li>
      </template>
    </ul>
  </div>
</section>