使用純JavaScript構建類似Google日曆的組件

<div class="calendar">

  <div class="calendar-time">

    <ul id="timelist" class="calendar-timelist"></ul>

  </div>

  <div id="events" class="calendar-events"></div>

</div>

.calendar {

  display: flex;

  width: 500px;

  margin: 20px auto;

  position: relative;

}

​

.event {

  background: #039be5;

  border: 1px solid white;

  border-radius: 5px;

  position: absolute;

  box-sizing: border-box;

  color: white;

  overflow: hidden;

  padding: 3px;

}

​

.calendar-time {

  border-right: 1px solid #ccc;

  width: 100px;

}

​

.calendar-timelist {

  list-style: none;

  padding: 0;

  margin: 0;

  text-align: right;

  padding-right: 20px;

}

​

.calendar-timelist li {

  height: 60px;

  box-sizing: border-box;

  width: 100%;

}

​

.calendar-events {

  flex-grow: 1;

  position: relative;

}

class Calendar {

  constructor(data) {

    // Render the timeline on the Y-axis

    this.renderTime();

​

    // Render the event blocks

    this.renderEvents(data);

  }

​

  renderTime() {

    let timeHTML = Array.from({ length: 24 }, (_, i) => `<li>${this.to12HourFormat(i)}</li>`).join("");

    document.getElementById("timelist").innerHTML = timeHTML;

  }

​

  renderEvents(data) {

    let groupedEvents = this.groupEvents(data);

    let eventData = this.calculateEventStyles(groupedEvents);

​

    let eventHTML = eventData

      .map(

        (e) =>

          `<div class="event" style="top: ${e.top}px; height: ${e.height}px; width: ${e.width}%; left: ${e.left}%; z-index: ${e.zIndex};">

             <strong>${e.title}</strong><br>${e.time}

           </div>`

      )

      .join("");

    document.getElementById("events").innerHTML = eventHTML;

  }

​

  to12HourFormat(hour) {

    if (hour === 0) return "12 AM";

    if (hour < 12) return `${hour} AM`;

    if (hour === 12) return "12 PM";

    return `${hour - 12} PM`;

  }

}

​

groupEvents(data) {

  let groups = [];

  data.forEach((event) => {

    let hour = parseInt(event.start.split(":")[0], 10);

    if (!groups[hour]) groups[hour] = [];

    groups[hour].push(event);

  });

  return groups;

}

​

calculateEventStyles(groups) {

  let eventData = [];

​

  groups.forEach((group) => {

    let columns = [];

    group.forEach((event) => {

      let { start, end } = event;

      let [sh, sm] = start.split(":").map(Number);

      let [eh, em] = end.split(":").map(Number);

​

      let top = sh * 60 + sm; // Convert start time to minutes

      let height = (eh * 60 + em) - top; // Calculate duration in minutes

​

      let left = columns.findIndex((col) => col.end <= start);

      if (left === -1) {

        left = columns.length;

        columns.push({ end });

      } else {

        columns[left].end = end;

      }

​

      eventData.push({

        title: event.name,

        time: `${this.to12HourFormat(sh)} - ${this.to12HourFormat(eh)}`,

        top,

        height,

        left: (left * 100) / columns.length,

        width: 100 / columns.length,

        zIndex: left,

      });

    });

  });

​

  return eventData;

}

​

const events = [

  { name: "Meeting with Donna", start: "09:00", end: "10:30" },

  { name: "Project Sync", start: "10:00", end: "11:00" },

  { name: "Lunch Break", start: "12:00", end: "13:00" },

  { name: "Client Call", start: "11:30", end: "12:30" },

];

​

new Calendar(events);

​