【亲测免费】 Calendar.js 使用教程

2026-01-17 09:17:33作者：郜逊炳

项目介绍

Calendar.js 是一个功能强大的 JavaScript 事件日历库，提供了多种视图和丰富的设置选项，可以满足各种需求。它具有以下特点：

免费且开源（MIT 许可证）
零依赖
可导出用于其他框架
完全可配置，支持自定义触发器和可配置文本（允许翻译）
支持 51 种语言
提供日、周、月、年视图以及时间线视图
支持拖放事件，甚至跨多个日历
支持拖放事件以调整时间，以及调整事件持续时间
支持剪切、复制、粘贴（支持多选）

项目快速启动

安装

首先，通过 npm 安装 Calendar.js：

npm install calendarjs

基本使用

以下是一个简单的示例，展示如何在 HTML 页面中使用 Calendar.js：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calendar.js 示例</title>
    <link rel="stylesheet" href="node_modules/calendarjs/dist/calendar.css">
</head>
<body>
    <div id="calendar"></div>
    <script src="node_modules/calendarjs/dist/calendar.js"></script>
    <script>
        var calendarEl = document.getElementById('calendar');
        var calendar = new Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,dayGridWeek'
            }
        });
        calendar.render();
    </script>
</body>
</html>

应用案例和最佳实践

多语言支持

Calendar.js 默认支持 51 种语言，可以通过配置轻松切换语言：

var calendar = new Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    locale: 'zh-cn', // 设置为中文
    headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,dayGridWeek'
    }
});
calendar.render();

自定义事件

可以通过自定义事件来实现更复杂的功能，例如在点击事件时显示详细信息：

var calendar = new Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    events: [
        {
            title: '会议',
            start: '2023-10-10T10:00:00',
            end: '2023-10-10T12:00:00'
        }
    ],
    eventClick: function(info) {
        alert('事件: ' + info.event.title);
    }
});
calendar.render();

典型生态项目

Calendar.js 可以与其他流行的前端框架集成，例如 React、Vue 和 Angular。以下是一些示例：

React 集成

import React from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';

export const DemoApp = () => (
    <FullCalendar
        plugins={[dayGridPlugin]}
        initialView="dayGridMonth"
    />
);

Vue 集成

<template>
    <FullCalendar :options="calendarOptions" />
</template>

<script>
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';

export default {
    components: {
        FullCalendar
    },
    data() {
        return {
            calendarOptions: {
                plugins: [dayGridPlugin],
                initialView: 'dayGridMonth'
            }
        };
    }
};
</script>