calendar-strip - get mapado events for month working

assets/css/src/calendar-strip.css

@@ -22,6 +22,10 @@
   width: 100%;
 }
 
+.calendar-strip__day.event {
+  text-decoration: underline;
+}
+
 .calendar-strip__calendar-btn {
   border: var(--border);
   padding: 0.2rem 0.5rem;

assets/js/calendar.js

@@ -1,19 +1,24 @@
 dayjs.locale("fr");
 
-async function getDaysInMonth(month, year) {
+function getDatesInMonth(month) {
+  const year = dayjs().month(month).year();
   const daysInMonth = dayjs(new Date(year, month, 0)).daysInMonth();
-  const days = [];
+  const dates = {};
 
   for (let day = 1; day <= daysInMonth; day++) {
     const currentDay = dayjs(new Date(year, month - 1, day));
-    days.push(currentDay.format("DD-MM-YYYY"));
+    dates[parseInt(currentDay.format("DD"))] = [];
   }
 
-  return days;
+  return dates;
 }
 
-function getEvents(monthNumb) {
+async function getMapadoDates(monthNumb) {
   const myHeaders = new Headers();
+
+  const mapadoToken =
+    "9bc321f5f47cf366c1c69eab4db69fe2a46819c75018237570473e2c961e210e227cc1e8cd8da7ba";
+
   myHeaders.append("Authorization", "Bearer " + mapadoToken);
 
   const requestOptions = {
@@ -22,6 +27,38 @@ function getEvents(monthNumb) {
     redirect: "follow",
   };
 
-  const url =
-    "https://ticketing.mapado.net/v1/event_dates?itemsPerPage=31&contract=1941&after=2024-10-01&before=2024-11-01&order=asc&fields=startDate,bookableStock,ticketing{@id,title,firstFutureEventDateStartDate,isOnSale,minisite{domain,online,slug,name},venue{@id,name,seatingName,address,zipCode,city,countryCode,timezone}}";
+  const contractId = "1941";
+
+  const firstDayOfMonth = dayjs()
+    .month(monthNumb)
+    .startOf("month")
+    .format("YYYY-MM-DD");
+  const firstDayOfNextMonth = dayjs(firstDayOfMonth)
+    .add(1, "month")
+    .format("YYYY-MM-DD");
+
+  const url = `https://ticketing.mapado.net/v1/event_dates?itemsPerPage=100&contract=${contractId}&after=${firstDayOfMonth}&before=${firstDayOfNextMonth}&order=asc&fields=startDate,bookableStock,ticketing{@id,title,venue{@id,name,seatingName,address,zipCode,city,countryCode,timezone}}`;
+
+  const response = await fetch(url, requestOptions);
+  const json = await response.json();
+  const eventDates = json["hydra:member"];
+
+  console.log(
+    `Événements Mapado de ${dayjs(firstDayOfMonth).format("MMMM")} ${dayjs(
+      firstDayOfMonth
+    ).format("YYYY")}`,
+    eventDates
+  );
+
+  const mapadoDates = eventDates.map((eventDate) => {
+    const date = eventDate.startDate.slice(0, 10);
+    const splittedDate = date.split("-");
+    const day = splittedDate[2];
+    return {
+      day: day,
+      name: eventDate.ticketing.title,
+    };
+  });
+
+  return mapadoDates;
 }

site/snippets/calendar-strip.php

@@ -4,26 +4,35 @@
     monthNumb: dayjs().month(),
     token: '<?= $site->mapadoToken() ?>',
     contractId: '<?= $site->mapadoContractId() ?>',
+    dates: [],
 
     get monthName() {
       return dayjs().month(this.monthNumb).format('MMMM');
     },
 
-    get days() {
-      return getDaysInMonth(this.monthNumb, dayjs().year())
+    async updateDates() {
+      this.dates = getDatesInMonth(this.monthNumb);
+
+      const mapadoDates = await getMapadoDates(this.monthNumb)
+      mapadoDates.forEach(mapadoDate => {
+        const day = parseInt(mapadoDate.day)
+        this.dates[day].push(mapadoDate.name)
+      })
+
+      console.log(this.dates)
     }
   }"
 
-  x-init="getEvents(monthNumb)"
+  x-init="updateDates()"
 >
   <div class="calendar-strip__selector">
-    <button class="prev-month" @click="monthNumb--" :disabled="monthNumb === -4 ? true : false">←</button>
+    <button class="prev-month" @click="monthNumb--; updateDates()" :disabled="monthNumb === -4 ? true : false">←</button>
     <span x-text="monthName"></span>
-    <button class="next-month" @click="monthNumb++" :disabled="monthNumb === 7 ? true : false">→</button>
+    <button class="next-month" @click="monthNumb++; updateDates()">→</button>
   </div>
   <ul class="calendar-strip__days">
-    <template x-for="(day, index) in days">
-      <li x-text="index + 1"></li>
+    <template x-for="(date, index) in dates">
+      <li class="calendar-strip__day" :class="date.length > 0 ? 'event' : false" x-text="index"></li>
     </template>
   </ul>
   <button class="calendar-strip__calendar-btn">calendrier</button>