【亲测免费】 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 3大构建式学习路径：从0到1搭建你的编程技能体系 3 如何通过技术实践教程掌握系统构建与底层原理学习 4 构建自己的技术帝国：从零开始的编程实践指南 5 从零构建技术实践指南：探索build-your-own-x项目的学习价值 6 build-your-own-x 开源学习项目一站式指南

最新内容推荐

老旧Mac系统升级：让过时设备重获新生的完整解决方案高效解决输入设备控制难题：Input Remapper的灵活配置与自定义控制指南 FSearch：让Linux文件搜索快如闪电的索引式搜索工具 3步攻克音乐歌词获取难题：智能云音乐歌词解决方案 Awoo Installer：3大突破破解Switch游戏安装难题的全方位解决方案详解Oni-Duplicity：打造专属《缺氧》世界的全能存档编辑工具告别ADB命令行困扰：ADB Explorer让Android设备管理如此简单 VoTT：计算机视觉标注工具的全流程实践指南 Universal-IFR-Extractor实战指南：从功能解析到配置优化的完整路径 3个步骤掌握GPT Researcher：从智能研究助手到自动化报告生成

项目优选

收起

Ascend Extension for PyTorch

Claude Code 的开源替代方案。连接任意大模型，编辑代码，运行命令，自动验证 — 全自动执行。用 Rust 构建，极致性能。｜ An open-source alternative to Claude Code. Connect any LLM, edit code, run commands, and verify changes — autonomously. Built in Rust for speed. Get Started

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

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

flutter_flutter

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

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

旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件，通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求，让密码技术应用更简单，同时探索后量子等先进算法创新实践，构建密码前沿技术底座！

Oohos_react_native

React Native鸿蒙化仓库