add ticketing url

assets/css/src/calendar-strip.css

@@ -34,10 +34,29 @@
 
 .calendar-strip__date {
   position: absolute;
+  overflow: hidden;
   left: 0;
   top: 100%;
   width: 100%;
-  height: 10rem;
-  background-color: var(--color-yellow);
+  height: 0;
+  padding: 0 var(--margin-body);
+  background-color: #fff;
   z-index: -1;
+  transition: height .2s ease-in-out;
+  border-bottom: var(--border);
+}
+.calendar-strip__date.open {
+  height: 10rem;
+}
+
+.calendar-strip__sessions {
+  padding: 2rem 0;
+}
+
+.calendar-strip__session {
+  display: flex;
+}
+
+.calendar-strip__session > div {
+  width: 100%;
 }

assets/css/src/generic.css

@@ -0,0 +1,3 @@
+body.progress * {
+  cursor: progress !important;
+}

assets/css/src/variables.css

@@ -6,6 +6,8 @@
   --font-size-h2: 1.875rem;
   --font-size-h1: 2.8125rem;
 
+  --curve-quick-slow: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
   --margin-body: 3.86rem;
 
   --color-pink: #ed268f;

assets/css/style.css

@@ -1,5 +1,6 @@
 @import url("src/reset.css");
 @import url("src/variables.css");
 @import url("src/text.css");
+@import url("src/generic.css");
 @import url("src/nav.css");
 @import url("src/calendar-strip.css");

assets/js/calendar.js

@@ -39,6 +39,7 @@ async function getMapadoDates(monthNumb) {
     { name: 'ticketing', subfields: [
         { name: "@id", },
         { name: "title", },
+        { name: "slug", },
         { name: "venue", subfields: [
             { name: "@id" },
             { name: "address" },
@@ -70,14 +71,32 @@ async function getMapadoDates(monthNumb) {
   );
 
   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,
+      day: getDay(eventDate),
+      title: eventDate.ticketing.title,
+      startTime: getStartTime(eventDate),
+      ticketingUrl: getTicketingUrl(eventDate)
     };
   });
 
   return mapadoDates;
 }
+
+function getDay(eventDate) {
+  const date = eventDate.startDate.slice(0, 10);
+  const splittedDate = date.split("-");
+  const day = splittedDate[2];
+  return day
+}
+
+function getStartTime(eventDate) {
+  const rawTime = eventDate.startDate.slice(11, 19);
+  const time = dayjs(`2000-01-01T${rawTime}`);
+  const formattedTime = time.format('HH[h]mm');
+  return formattedTime
+}
+
+function getTicketingUrl(eventDate) {
+  const baseUrl = "https://cdn-besancon.mapado.com/event/"
+  return baseUrl + eventDate.ticketing.slug
+}