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

<section 
  class="calendar-strip"
  @mouseleave="open = false"
  x-data="{
  monthNumb: dayjs().month(),
  weekIndex: (() => {
    dayjs.extend(window.dayjs_plugin_weekOfYear);
    
    const date = dayjs();
    
    const firstDayOfMonth = dayjs(date).startOf('month');

    const currentWeek = date.week();
    const firstWeekOfMonth = firstDayOfMonth.week();
    
    const weekIndex = currentWeek - firstWeekOfMonth - 1;

    console.log(`currentWeek: ${currentWeek}, firstWeekOfMonth: ${firstWeekOfMonth}, weekIndex: ${weekIndex}`);
    
    // Retourner l'index de la semaine
    return weekIndex;
  })(),
  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');
  },

  get currentWeek() {
    const dates = JSON.parse(JSON.stringify(this.dates));
    const start = this.weekIndex * 7;
    const end = start + 7;

    const allKeys = Object.keys(dates);

    const slicedKeys = allKeys.slice(start, end);

    const slicedObject = slicedKeys.reduce((obj, key) => {
      obj[key] = dates[key];
      return obj;
    }, {});
    return slicedObject;
  },

  async updateDates(resetWeek = false) {
    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);
    daysNode.classList.toggle('progress');
    if (resetWeek) {
      this.weekIndex = 0
    }
  },

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

  nextWeek() {
    if (this.weekIndex < Math.floor(this.dates.length / 7)) {
      this.weekIndex++;
    } else {
      this.monthNumb++;
      this.updateDates();
    }
  },

  prevWeek() {
    if (this.weekIndex > 0) {
      this.weekIndex--;
    } else {
      this.monthNumb--;
      this.updateDates();
    }
  }
}"


  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 currentWeek">
      <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 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>
          </a>
        </li>
      </template>
    </ul>
  </div>
</section>