# @calendarjs/ce 中文文档

规范地址：https://npmcn.com/package/%40calendarjs/ce/

版本：1\.1\.0
npm 元数据更新时间：2026-05-31T13:02:37.908Z
中文译文更新时间：2026-11-08T23:52:35.801Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40calendarjs/ce
原文对照：https://npmcn.com/package/%40calendarjs/ce/?lang=original
项目主页：https://calendarjs.com/
源码仓库：https://github.com/componade/calendarjs

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：365 kB，15 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2025-10-25T16:34:52.063Z
- 最新版本发布：2026-05-31T13:02:37.783Z
- 近 30 天下载量：4014（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：9（近 12 个月 7 个）

## 中文简介

JavaScript 包含 Calendar 、 日程安排 和带有 React 和 Vue 支持的 时光线在内的日历组件的综合收藏

## 安装

```sh
npm install @calendarjs/ce
```

也可以使用：`pnpm add @calendarjs/ce`、`yarn add @calendarjs/ce`、`bun add @calendarjs/ce`

## README

# 日历JS

轻量级 JavaScript 组件用于日历,调度,以及时间表. 与React、Vue、Angular或vanilla JS合作.

## 构成部分

| 构成部分 | 大小 | 说明 |
| --- | --- | --- |
| 日历 | 3.2KB (韩语) | 带有范围和时间选择的取日期器 |
| 时间表 | 4.2KB (韩语) | 拖放的日/周活动调度器 |
| 时间线 | 2.1KB (韩语) | 纪事显示 |
| 帮助者 | 1个KB | 日期公用事业和格式 |

## 安装

```bash
npm install @calendarjs/ce
```

或者通过CDN:

```html
<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" />
```

## 快速启动

### 日历

```javascript
import { Calendar } from '@calendarjs/ce';

Calendar(document.getElementById('calendar'), {
    type: 'inline',
    value: '2025-01-15',
    onchange: (self, value) => console.log(value)
});
```

### 时间表

```javascript
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' }
    ]
});
```

### 时间线

```javascript
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' }
    ]
});
```

## 反应

```jsx
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" />;
}
```

## 阴道

```vue
<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` | 每周经常模式 |

### 事件对象

```typescript
{
    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
}
```

## 附表 方法

```javascript
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'` | 排序顺序 |

## 帮助者

```javascript
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
```

## 类型脚本

包括类型定义。 导入类型 :

```typescript
import type { Calendar, Schedule, Timeline } from '@calendarjs/ce';
```

## 文档

[日历js.com/文件](https://calendarjs.com/docs)

## 许可证

麻省理工学院

## 常见问题

### @calendarjs/ce 是什么？

JavaScript 包含 Calendar 、 日程安排 和带有 React 和 Vue 支持的 时光线在内的日历组件的综合收藏

### 如何安装 @calendarjs/ce？

在项目目录运行 npm install @calendarjs/ce，或使用 pnpm add / yarn add / bun add。

### @calendarjs/ce 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @calendarjs/ce 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @calendarjs/ce 可以商用吗？

@calendarjs/ce 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @calendarjs/ce 的下载量有多少？

根据 npm 官方下载统计，@calendarjs/ce 在 2026/10/09 – 2026/11/07 这 30 天内被下载 4,014 次，日均约 134 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @calendarjs/ce 还在维护吗？

最新版本 1\.1\.0 发布于 2026/05/31（5 个月前）；至今共发布 9 个版本，其中过去 12 个月发布了 7 个；首次发布于 2025/10/26。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。