创建实例
new Calendar() - 创建 Vanilla Calendar Pro 的实例，该实例是日历、其设置和方法的封装。
如果您使用
<script> 标签包含了 Vanilla Calendar Pro，则该对象可作为全局变量 window.VanillaCalendarPro 使用。Calendar 实例接受两个参数。第一个必需参数可以是 CSS 选择器或 HTML 元素。
CSS 选择器或 HTML 元素可以表示日历的包装器，日历将在其中初始化，或者表示 «输入»。
日历包装器是一个 <div> 标签，日历本身将在其中初始化。
在日历包装器中初始化：
<div id="calendar"></div>new Calendar('#calendar');
// 或
const calendarEl = document.querySelector('#calendar');
new Calendar(calendarEl);«输入» 在此日历的上下文中不一定意味着 <input> 标签；它可以是任何 HTML 元素，例如 <div>。
当单击 «输入» 时，将出现带有日历的弹出窗口。
在 «输入» 中初始化：
<input type="text" id="input">
<!-- 或 -->
<div id="input"></div>new Calendar('#input', { inputMode: true });
// 或
const calendarInput = document.querySelector('#input');
new Calendar(calendarInput, {
inputMode: true,
});第二个可选参数是一个对象，定义日历的设置和操作。
new Calendar('#calendar', {
// 设置
});extensions
motion 提供动画和手势。time 提供 12/24 小时时间选择。annotations 提供日期弹出内容、样式修饰符和范围提示。weeks 提供一周视图、折叠、周数和星期/周数点击回调。months 提供多月显示和导航。ESM 打包工具可移除未导入和注册的扩展。
import { Calendar, motion, time, annotations } from 'vanilla-calendar-pro';
import 'vanilla-calendar-pro/styles/index.css';
const calendar = new Calendar('#calendar', {
extensions: [motion, time, annotations],
animation: true,
selectionTimeMode: 24,
popups: { '2026-09-21': { html: 'Event' } },
});
calendar.init();扩展列表在创建实例时确定。稍后要通过 set() 或 update() 启用的模块也必须提前注册。这些方法仍可修改原有选项，但不能添加或移除模块。同一个配置对象或扩展数组可以供多个日历使用，各实例的状态相互独立。启用功能却未注册对应扩展时，init()、set() 或 update() 会抛出明确错误；未启用的设置和回调不需要模块。
输入框日历、日期和范围选择以及月份和年份选择仍属于核心功能。普通星期标题无需扩展。完整的普通 <script> / CommonJS 构建会自动注册全部五个扩展。CSS 导入保持不变。