FullCalendar

document.addEventListener("DOMContentLoaded", function () {
  var calendarEl = document.getElementById("lpx-calendar");
  var getDate = (day, time?) => {
    var date = "";
    if (time) {
      const [hours, mins, secs] = time.split(":");
      var curDate = new Date(
        new Date().getFullYear(),
        new Date().getMonth(),
        day,
        hours,
        mins,
        secs
      );
      date = new Date(curDate.getTime() - curDate.getTimezoneOffset() * 60000)
        .toISOString()
        .split("Z")[0];
      return date;
    }
    var curDate = new Date(
      new Date().getFullYear(),
      new Date().getMonth(),
      day
    );
    date = new Date(curDate.getTime() - curDate.getTimezoneOffset() * 60000)
      .toISOString()
      .split("T")[0];
    return date;
  };

  const events = [
    {
      title: "Meeting",
      start: getDate(12, "10:30:00"),
      end: getDate(12, "11:30:00"),
    },
    {
      title: "Long Event",
      start: getDate(5),
      end: getDate(7),
      backgroundColor: "var(--lpx-info)",
      borderColor: "var(--lpx-info)",
    },
    {
      title: "All Day Event",
      start: getDate(24),
      end: getDate(24),
      backgroundColor: "var(--lpx-secondary)",
      borderColor: "var(--lpx-secondary)",
      eventDisplay: "list-item",
    },
    {
      title: "Conference",
      start: getDate(20),
      end: getDate(22),
      backgroundColor: "var(--lpx-warning)",
      borderColor: "var(--lpx-warning)",
    },
    {
      title: "Meeting",
      start: getDate(18, "09:30:00"),
      end: getDate(18, "10:00:00"),
    },
    {
      title: "Repeating Event",
      start: getDate(18, "11:00:00"),
      end: getDate(18, "12:00:00"),
    },
    {
      title: "Repeating Event",
      start: getDate(18, "13:00:00"),
      end: getDate(18, "14:00:00"),
    },
    {
      title: "Repeating Event",
      start: getDate(18, "15:00:00"),
      end: getDate(18, "16:00:00"),
    },
    {
      title: "Repeating Event",
      start: getDate(18, "16:00:00"),
      end: getDate(18, "17:00:00"),
    },
    {
      title: "Repeating Event",
      start: getDate(18, "17:00:00"),
      end: getDate(18, "18:00:00"),
    },
    {
      title: "Click for Google",
      start: getDate(15),
      url: "http://google.com/",
    },
    {
      title: "Repeating Event",
      start: getDate(8, "14:30:00"),
      borderColor: "var(--lpx-warning)",
    },
    {
      title: "Repeating Event",
      start: getDate(26, "16:30:00"),
      borderColor: "var(--lpx-warning)",
    },
    {
      title: "Repeating Event",
      start: getDate(28, "11:30:00"),
      borderColor: "var(--lpx-warning)",
    },
  ];
  var calendar = new FullCalendar.Calendar(calendarEl, {
    firstDay: "1",
    editable: true,
    dayMaxEvents: true,
    // themeSystem: 'bootstrap5',
    buttonText: {
      month: "Month",
      week: "Week",
      day: "Day",
    },
    headerToolbar: {
      left: "dayGridMonth,timeGridWeek,timeGridDay",
      center: "prev,title,next",
      right: "addEvent",
    },
    customButtons: {
      addEvent: {
        text: "Add Event",
      },
    },
    events,
  });
  calendar.render();
});