基于Angular的简单日历组件。
-
Install
npm install --save e-ngx-calendar@latest
-
Set in the .angular-cli.json(@angular/cli)
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "../node_modules/font-awesome/css/font-awesome.min.css" ]
-
Add the ENgxCalendarModule
import {ENgxCalendarModule} from "e-ngx-calendar"; @NgModule({ imports: [ ENgxCalendarModule ] })
-
Use in the template
<h2>显示日程安排</h2> <e-ngx-calendar [schedules]="schedules" (onAddSchedule)="onAddSchedule($event)" (onViewAllSchedule)="onViewAllSchedule($event)" (onViewSchedule)="onViewSchedule($event)" (dateChange)="onDateChange($event)"> </e-ngx-calendar> <h2>不显示日程安排</h2> <e-ngx-calendar (dateChange)="onDateChange($event)"></e-ngx-calendar>
-
Use in the component
schedules: any; constructor () { this.schedules = [ { date: new Date(2017, 4, 6), data: [ { title: '参加会议', address: '公司会议室', content: '讨论考核制度', info: '参会人员包括:张三、李四', start_time: new Date(2017, 0, 18), end_time: new Date(new Date(2017, 0, 18).getTime() + 3600000), remind_time: new Date(new Date(2017, 0, 18).getTime() - 3600000) }, { title: '参加会议', address: '公司会议室', content: '讨论考核制度', info: '参会人员包括:张三、李四', start_time: new Date(2017, 0, 18), end_time: new Date(new Date(2017, 0, 18).getTime() + 3600000), remind_time: new Date(new Date(2017, 0, 18).getTime() - 3600000) } ] } ] } onDateChange ($event: Date) { // console.log($event); } onAddSchedule ($event: any) { // console.log($event); } onViewAllSchedule ($event: any) { // console.log($event); } onViewSchedule ($event: any) { // console.log($event); }
schedules
(?any=null
) - 日程安排,对象数组格式如下:
[
{
id: '00001', // 日程安排id
date: new Date(), // 日程安排日期,Date类型
data: [
{
title: '参加会议', // 日程安排标题
address: '公司会议室', // 日程安排地点
content: '讨论考核制度', // 日程安排内容
info: '参会人员包括:张三、李四', // 日程安排备注
start_time: new Date(), // 日程安排开始时间,Date类型
end_time: new Date(new Date().getTime() + 3600000), // 日程安排结束时间,Date类型
remind_time: new Date(new Date().getTime() - 3600000) // 日程安排提醒时间,Date类型
}
]
}
]
dateChange
- 日期改变会触发该事件,参数$event为改变之后的日期
以下事件只发送事件有关的参数,具体操作需自定义
-
onAddSchedule
- 触发该事件新增日程安排,参数$event为选中的日期 -
onViewSchedule
- 触发该事件查看日程安排,参数$event为一个对象,属性:date为当前日程安排所在日期, data为选中的日程安排数据 -
onViewAllSchedule
- 触发该事件查看当日全部日程安排,参数$event为一个对象,属性:date为选中的日期, data为选中日期的所有日程安排数据 -
onDeleteSchedule
- 触发该事件删除日程安排,参数$event为该日程安排数据
```shell
npm install // 安装依赖包
npm start // 启动项目
```