使用纯JavaScript构建类似Google日历的组件

教程

JavaScript

日历已成为现代Web应用程序中不可或缺的一部分，因为它们使用户能够无缝地组织、安排和跟踪事件。无论您是在构建项目管理工具、活动安排应用程序还是个人生产力套件，一个自定义的日历组件都可以极大地增强用户体验。虽然存在许多现成的日历库，但创建自己的组件可以提供满足特定设计和功能要求的灵活性。

在本教程中，我们将探讨如何使用JavaScript构建类似于Google日历的组件。通过本指南，您将拥有一个具有交互功能的完全功能日历，并更深入地了解如何为您的Web应用程序构建可重用组件。无论您是开发人员想要为项目增添独特的功能，还是渴望了解日历功能的内部工作原理，这一步骤一步指南都将是非常宝贵的。让我们开始吧！

概述

我们将创建一个具有以下功能的日历组件：

时间轴：从上午12点到晚上11点的垂直时间轴。
事件块：根据它们的开始和结束时间动态呈现的事件，具有适当的位置和高度。
重叠处理：时间上重叠的事件将并排显示。

以下是您可以逐步创建此组件的方法。

逐步指南

1. 设置 HTML 和基本样式

我们首先创建一个最小的 HTML 结构用于日历。布局包括时间线和事件容器。

HTML

<div class="calendar">

  <div class="calendar-time">

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

  </div>

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

</div>

添加基本的 CSS用于日历的样式：

CSS

.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;

}

2. 创建日历的 JavaScript 类

定义一个 Calendar 类来封装所有功能。

构造函数

构造函数通过渲染时间线和事件来初始化日历：

JavaScript

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`;

  }

}

​

3. 处理事件重叠和定位

我们需要逻辑来处理重叠事件。这是通过分组和计算适当的位置来实现的。

按开始小时分组事件

JavaScript

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;

}

​

计算事件样式

对于每个组，根据时间和重叠计算事件的 top、height、width 和 left。

JavaScript

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;

}

​

4. 示例数据和初始化

定义你的事件数据并初始化 Calendar：

JavaScript

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);
​

5. 完整代码示例

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Calendar Component</title>
</head>
<body>
  <div class="calendar">
    <div class="calendar-time">
      <ul id="timelist" class="calendar-timelist"></ul>
    </div>
    <div id="events" class="calendar-events"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>
​

结论

这种方法使用纯JavaScript动态生成一个类似Google日历的组件。通过将问题分解为渲染时间、分组事件和计算样式，你可以构建可扩展的交互式组件。你可以尝试修改代码，以添加可拖动的事件或额外的样式！

Source:
https://dzone.com/articles/building-a-google-calendar-like-component-using-javascript