日历JS
轻量级 JavaScript 组件用于日历,调度,以及时间表. 与React、Vue、Angular或vanilla JS合作.
构成部分
| 构成部分 | 大小 | 说明 |
|---|---|---|
| 日历 | 3.2KB (韩语) | 带有范围和时间选择的取日期器 |
| 时间表 | 4.2KB (韩语) | 拖放的日/周活动调度器 |
| 时间线 | 2.1KB (韩语) | 纪事显示 |
| 帮助者 | 1个KB | 日期公用事业和格式 |
安装
npm install @calendarjs/ce
或者通过CDN:
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@calendarjs/ce/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@calendarjs/ce/dist/style.min.css" />
快速启动
日历
import { Calendar } from '@calendarjs/ce';
Calendar(document.getElementById('calendar'), {
type: 'inline',
value: '2025-01-15',
onchange: (self, value) => console.log(value)
});
时间表
import { Schedule } from '@calendarjs/ce';
Schedule(document.getElementById('schedule'), {
type: 'week',
value: '2025-01-15',
data: [
{ guid: '1', title: 'Meeting', date: '2025-01-15', start: '09:00', end: '10:00', color: '#3498db' }
]
});
时间线
import { Timeline } from '@calendarjs/ce';
Timeline(document.getElementById('timeline'), {
data: [
{ title: 'Project Start', date: '2025-01-01', borderColor: '#3498db' },
{ title: 'Launch', date: '2025-03-01', borderColor: '#27ae60' }
]
});
反应
import { Calendar, Schedule, Timeline } from '@calendarjs/ce/dist/react';
import '@calendarjs/ce/dist/style.css';
function App() {
return <Calendar type="inline" value="2025-01-15" />;
}
阴道
<template>
<Calendar type="inline" value="2025-01-15" />
</template>
<script>
import { Calendar } from '@calendarjs/ce/dist/vue';
import '@calendarjs/ce/dist/style.css';
export default {
components: { Calendar }
}
</script>
日历选项
| 选项 | 类型 | 说明 |
|---|---|---|
type | 'default' | 'inline' | 'picker' | 显示模式 |
value | string | Date | 选中日期 |
range | boolean | 启用区域选择 |
time | boolean | 显示时间选择器 |
format | string | 日期格式(例如, 'DD/MM/YYYY'(中文(简体) ) |
validRange | string[] | 限定可选择的日期 |
onchange | function | 更改日期时召回 |
调度选项
| 选项 | 类型 | 说明 |
|---|---|---|
type | 'day' | 'week' | 'weekdays' | 视图类型 |
value | string | 当前日期(YYY-MM-DD) |
data | Event[] | 事件矩阵 |
grid | number | 时间间隔( 默认: 15) |
validRange | string[] | 可见的时间范围(例如, ['08:00', '18:00'](中文(简体) ) |
weekly | boolean | 每周经常模式 |
事件对象
{
guid: string; // Unique identifier
title: string; // Event title
date: string; // YYYY-MM-DD (or weekday 0-6 if weekly: true)
start: string; // HH:MM
end?: string; // HH:MM
color: string; // Hex color
}
附表 方法
const schedule = Schedule(element, options);
schedule.addEvents({ guid: '2', title: 'New', date: '2025-01-15', start: '14:00', color: '#e74c3c' });
schedule.updateEvent('2', { title: 'Updated' });
schedule.deleteEvents('2');
schedule.getData();
schedule.undo();
schedule.redo();
时间线选项
| 选项 | 类型 | 说明 |
|---|---|---|
data | Item[] | 时间表项目矩阵 |
type | 'default' | 'monthly' | 显示模式 |
align | 'left' | 'right' | 符号对齐 |
order | 'asc' | 'desc' | 排序顺序 |
帮助者
import { Helpers } from '@calendarjs/ce';
Helpers.now(); // "2025-01-15 14:30:00"
Helpers.dateToNum(new Date()); // 45678 (Excel serial)
Helpers.numToDate(45678); // "2025-01-15"
Helpers.prettify('2025-01-15 12:00'); // "2h ago"
Helpers.isValidDate(new Date()); // true
Helpers.isValidDateFormat('2025-01-15'); // true
类型脚本
包括类型定义。 导入类型 :
import type { Calendar, Schedule, Timeline } from '@calendarjs/ce';
文档
许可证
麻省理工学院