CALEXT2_Event.js

/* global dayjs IconHelpers */
// eslint-disable-next-line no-unused-vars
class Event {
  constructor (data, slot) {
    this.data = data;
    this.locale = slot.locale;
    this.mStart = this.locale ? dayjs.unix(data.startDate).locale(this.locale) : dayjs.unix(data.startDate);
    this.mEnd = this.locale ? dayjs.unix(data.endDate).locale(this.locale) : dayjs.unix(data.endDate);
    this.sStart = this.locale ? dayjs(slot.start).locale(this.locale) : dayjs(slot.start);
    this.sEnd = this.locale ? dayjs(slot.end).locale(this.locale) : dayjs(slot.end);
    this.useEventTimeRelative = slot.useEventTimeRelative;
    this.relativeFormat = slot.relativeFormat;
    this.timeFormat = slot.timeFormat;
    this.dateFormat = slot.dateFormat;
    this.dateTimeFormat = slot.dateTimeFormat;
    this.showAttendees = slot.showAttendees;
    this.dom = this.makeEventDom();
  }

  destroy () {
    this.dom.remove();

    for (const property in this) {
      if (Object.hasOwn(this, property)) {
        this[property] = null;
      }
    }
  }

  draw (slot, targetDom, contentRect = null) {
    const eventDom = this.dom;
    eventDom.style.opacity = 0;
    targetDom.appendChild(eventDom);
    if (contentRect) {
      const eventRect = eventDom.getBoundingClientRect();
      if (
        eventRect.bottom > contentRect.bottom ||
        eventRect.right > contentRect.right
      ) {
        eventDom.classList.add("hiddenEvent");
        return 1;
      }
    }
    eventDom.style.opacity = 1;
    return 0;
  }

  makeEventDom () {
    const {locale} = this;
    const now = locale ? dayjs().locale(locale) : dayjs();

    const isEventMultiSlots = (event, mESX, mEEX, mSSX, mSEX) => {
      let isMulti = false;
      if (event.duration > 86400) {
        isMulti = true;
      } else if (mESX.isBefore(mSSX) || mEEX.isAfter(mSEX)) {
        isMulti = true;
      }
      return isMulti;
    };

    const event = this.data;
    const eventDom = document.createElement("div");
    eventDom.classList.add("event");

    const isPassed = Boolean(dayjs.unix(event.endDate).isBefore(now));
    const isFullday = Boolean(event.isFullday);
    const isMultiSlots = isEventMultiSlots(
      event,
      this.mStart,
      this.mEnd,
      this.sStart,
      this.sEnd
    );
    const isTargetDay = Boolean(
      this.mStart.isBefore(dayjs(now).endOf("day")) ||
      this.mEnd.isAfter(dayjs(now).startOf("day"))
    );
    const isNow = Boolean(now.isBetween(this.mStart, this.mEnd, null, "[)"));
    if (isFullday) {
      eventDom.classList.add("fullday");
    } else {
      eventDom.classList.add("notfullday");
    }
    if (isMultiSlots) eventDom.classList.add("overslot");
    if (isTargetDay) eventDom.classList.add("targetday");
    if (isNow) eventDom.classList.add("now");
    if (isPassed) {
      eventDom.classList.add("passed");
    }
    if (event.isMoment) eventDom.classList.add("moment");
    if (event.isOneday) {
      eventDom.classList.add("oneday");
    } else {
      eventDom.classList.add("overday");
    }
    if (event.isRecurring) {
      eventDom.classList.add("recurred");
    }
    if (event.startHere) eventDom.classList.add("starthere");
    if (event.endHere) eventDom.classList.add("endhere");
    if (event.className) eventDom.classList.add(event.className);

    eventDom.dataset.calendarName = event.calendarName;
    eventDom.dataset.calendarSeq = event.calendarSeq;
    eventDom.dataset.startDate = String(event.startDate);
    eventDom.dataset.endDate = String(event.endDate);
    eventDom.dataset.duration = event.duration;
    eventDom.dataset.title = event.title;
    eventDom.dataset.location = event.location;
    eventDom.dataset.busystatus = event.ms_busystatus;
    Event.applyCategories(event, eventDom, null);

    const mainDom = document.createElement("div");
    mainDom.classList.add("eventMain");
    if (event.icon) {
      const iconDom = document.createElement("iconify-icon");
      iconDom.classList.add("eventIcon");
      iconDom.setAttribute("icon", IconHelpers.normalizeIconName(event.icon));
      mainDom.appendChild(iconDom);
    }
    const title = document.createElement("div");
    title.innerHTML = event.title;
    title.classList.add("eventTitle");
    mainDom.appendChild(title);
    const time = this.createEventTime();
    mainDom.appendChild(time);
    eventDom.appendChild(mainDom);

    const subDom = document.createElement("div");
    subDom.classList.add("eventSub");
    const description = document.createElement("div");
    description.classList.add("eventDescription");
    description.innerHTML = event.description;
    subDom.appendChild(description);
    const location = document.createElement("div");
    location.classList.add("eventLocation");
    location.innerHTML = event.location;
    subDom.appendChild(location);
    Event.applyCategories(event, null, subDom);

    // Add attendees if present and enabled
    if (this.showAttendees && event.attendees && event.attendees.length > 0) {
      const attendees = document.createElement("div");
      attendees.classList.add("eventAttendees");
      const attendeeList = event.attendees.map((att) => {
        let status = "?";
        let statusClass = "";
        if (att.status === "ACCEPTED") {
          status = "✓";
          statusClass = "attendeeAccepted";
        } else if (att.status === "DECLINED") {
          status = "✗";
          statusClass = "attendeeDeclined";
        } else if (att.status === "TENTATIVE") {
          status = "?";
          statusClass = "attendeeTentative";
        }
        return `<span class="attendee ${statusClass}" title="${att.status}">${status} ${att.name}</span>`;
      }).join(" ");
      attendees.innerHTML = attendeeList;
      subDom.appendChild(attendees);
    }

    eventDom.appendChild(subDom);
    return eventDom;
  }


  /**
   * Applies category CSS classes and data-attribute to eventDom,
   * and appends an eventCategories div to subDom.
   * Pass null for targetDom or slotDom to skip that part.
   * @param {object} event - The event data object
   * @param {HTMLElement|null} targetDom - The event wrapper element
   * @param {HTMLElement|null} slotDom - The sub-content element
   */
  static applyCategories (event, targetDom, slotDom) {
    const cats = Array.isArray(event.categories) ? event.categories : [];
    if (targetDom) {
      for (const cat of cats) {
        if (cat) {
          targetDom.classList.add(`category-${cat.toLowerCase().replace(/[^a-z0-9]+/gu, "-").replace(/^-|-$/gu, "")}`);
        }
      }

      targetDom.dataset.categories = cats.join(",");
    }

    if (slotDom && cats.length > 0) {
      const categoriesDom = document.createElement("div");
      categoriesDom.classList.add("eventCategories");
      categoriesDom.innerHTML = cats.join(", ");
      slotDom.appendChild(categoriesDom);
    }
  }

  createEventTime () {
    const {locale} = this;
    const event = this.data;
    const makeEventTime = (innerHTML, classNameString) => {
      const div = document.createElement("div");
      const arr = classNameString.split(" ");
      arr.forEach((className) => {
        div.classList.add(className);
      });
      div.innerHTML = innerHTML;
      return div;
    };

    const dur = dayjs.duration(event.duration, "seconds");
    const time = document.createElement("div");
    time.classList.add("eventTime");

    const now = locale ? dayjs().locale(locale) : dayjs();

    const durationLabel = dur.humanize();

    if (this.useEventTimeRelative) {
      let status = "current";
      if (this.mEnd.isBefore(now)) status = "passed";
      if (this.mStart.isAfter(now)) status = "future";
      const timeDom = document.createElement("div");
      timeDom.classList.add("relative");
      timeDom.classList.add(status);
      timeDom.innerHTML = this.relativeFormat[status]
        .replace("%ENDFROMNOW%", this.mEnd.fromNow())
        .replace("%STARTFROMNOW%", this.mStart.fromNow())
        .replace("%DURATION%", durationLabel);
      if (typeof this.dateFormat === "string") {
        timeDom.innerHTML
          .replace("%STARTDATE%", this.mStart.format(this.dateFormat))
          .replace("%ENDDATE%", this.mEnd.format(this.dateFormat));
      }
      time.appendChild(timeDom);
    } else {
      let sd;
      let ed;
      let st;
      let et;
      let sdt;
      let edt;
      if (typeof this.dateFormat === "object") {
        sd = this.mStart.calendar(null, this.dateFormat);
        ed = this.mEnd.calendar(null, this.dateFormat);
      } else {
        sd = this.mStart.format(this.dateFormat);
        ed = this.mEnd.format(this.dateFormat);
      }
      if (typeof this.timeFormat === "object") {
        st = this.mStart.calendar(null, this.timeFormat);
        et = this.mEnd.calendar(null, this.timeFormat);
      } else {
        st = this.mStart.format(this.timeFormat);
        et = this.mEnd.format(this.timeFormat);
      }
      if (typeof this.dateTimeFormat === "object") {
        sdt = this.mStart.calendar(null, this.dateTimeFormat);
        edt = this.mEnd.calendar(null, this.dateTimeFormat);
      } else {
        sdt = this.mStart.format(this.dateTimeFormat);
        edt = this.mEnd.format(this.dateTimeFormat);
      }
      time.appendChild(makeEventTime(sd, "startDate start date"));
      time.appendChild(makeEventTime(st, "startTime start time"));
      time.appendChild(makeEventTime(sdt, "startDateTime start dateTime"));
      time.appendChild(makeEventTime(ed, "endDate end date"));
      time.appendChild(makeEventTime(et, "endTime end time"));
      time.appendChild(makeEventTime(edt, "endDateTime end dateTime"));
    }
    return time;
  }
}