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

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

📅 A javascript drag & drop event calendar, that is fully responsive and compatible with all modern browsers.

项目地址：https://gitcode.com/gh_mirrors/cal/Calendar.js

项目介绍

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>

通过这些示例，您可以快速上手并集成 Calendar.js 到您的项目中，实现强大的日历功能。

📅 A javascript drag & drop event calendar, that is fully responsive and compatible with all modern browsers.

项目地址：https://gitcode.com/gh_mirrors/cal/Calendar.js

登录后查看全文

热门内容推荐

1 【亲测免费】开源项目 `build-your-own-x` 使用指南 2 【亲测免费】探索科技之旅：《Build Your Own X》项目详解 3 GitHub_Trending/bu/build-your-own-x自动化：CI/CD流程在自制项目中的应用 4 从零打造智能家居系统：用build-your-own-x实现家庭自动化

最新内容推荐

Degrees of Lewdity中文汉化终极指南：零基础玩家必看的完整教程 Unity游戏翻译神器：XUnity Auto Translator 完整使用指南 PythonWin7终极指南：在Windows 7上轻松安装Python 3.9+终极macOS键盘定制指南：用Karabiner-Elements提升10倍效率 Pandas数据分析实战指南：从零基础到数据处理高手 Qwen3-235B-FP8震撼升级：256K上下文+22B激活参数 7步搞定机械键盘PCB设计：从零开始打造你的专属键盘终极WeMod专业版解锁指南：3步免费获取完整高级功能 DeepSeek-R1-Distill-Qwen-32B技术揭秘：小模型如何实现大模型性能突破音频修复终极指南：让每一段受损声音重获新生

项目优选

收起

OpenHarmony documentation | OpenHarmony开发者文档

Ascend Extension for PyTorch

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

华为昇腾面向大规模分布式训练的多模态大模型套件，支撑多模态生成、多模态理解。

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

昇腾LLM分布式训练框架

flutter_flutter

TorchAir 支持用户基于PyTorch框架和torch_npu插件在昇腾NPU上使用图模式进行推理。

ohos_react_native

React Native鸿蒙化仓库