TOAST UI Calendar 安装和配置指南

2026-01-21 04:08:48作者：滕妙奇

1. 项目基础介绍和主要编程语言

项目基础介绍

TOAST UI Calendar 是一个功能全面的 JavaScript 日历库，适用于需要日历功能的 Web 应用。它支持多种视图类型（如月视图、周视图、日视图等），并且提供了拖拽和调整日程的功能。TOAST UI Calendar 是由 NHN 公司开发并维护的开源项目，广泛应用于各种 Web 应用中。

主要编程语言

TOAST UI Calendar 主要使用 JavaScript 编写，同时也使用了 TypeScript 和 HTML 等前端技术。

2. 项目使用的关键技术和框架

关键技术和框架

JavaScript: 核心编程语言。
TypeScript: 用于类型检查和增强代码质量。
Preact: 一个轻量级的 React 替代品，用于构建用户界面。
Immer: 用于简化不可变状态管理的库。
DOMPurify: 用于防止 XSS 攻击的库。
tui-date-picker 和 tui-time-picker: 用于日期和时间选择的功能组件。

3. 项目安装和配置的准备工作和详细安装步骤

准备工作

在开始安装之前，请确保你的开发环境中已经安装了以下工具：

Node.js: 用于运行 JavaScript 环境。
npm 或 yarn: 用于管理项目依赖。

详细安装步骤

步骤 1: 创建项目目录

首先，创建一个新的项目目录，并在该目录下初始化一个新的 npm 项目。

mkdir my-calendar-app
cd my-calendar-app
npm init -y

步骤 2: 安装 TOAST UI Calendar

使用 npm 或 yarn 安装 TOAST UI Calendar 及其依赖。

npm install @toast-ui/calendar

或者使用 yarn:

yarn add @toast-ui/calendar

步骤 3: 创建 HTML 文件

在项目目录下创建一个 HTML 文件（例如 index.html），并在其中引入 TOAST UI Calendar 的 CSS 和 JavaScript 文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TOAST UI Calendar Example</title>
    <link rel="stylesheet" href="node_modules/@toast-ui/calendar/dist/toastui-calendar.min.css">
</head>
<body>
    <div id="calendar" style="height: 800px;"></div>
    <script src="node_modules/@toast-ui/calendar/dist/toastui-calendar.min.js"></script>
    <script>
        const Calendar = toastui.Calendar;
        const calendar = new Calendar('#calendar', {
            defaultView: 'month',
            taskView: true,
            useCreationPopup: true,
            useDetailPopup: true
        });
    </script>
</body>
</html>