1.安装fullcalendar
npm install --save jquery fullcalendar
npm install --save-dev typescript webpack awesome-typescript-loader source-map-loader
npm install --save-dev @types/jquery
2.组件中引入
import * as $ from "jquery";
import "fullcalendar";
3.引入css
在根目录styles.css中引入fullcalendar.min.css
@import "node_modules/fullcalendar/dist/fullcalendar.min.css";
4.完整代码
import { Component, OnInit } from "@angular/core";
import * as $ from "jquery";
import "fullcalendar";
@Component({
selector: "app-calendar",
templateUrl: "./calendar.component.html",
styleUrls: ["./calendar.component.css"]
})
export class CalendarComponent implements OnInit {
date = new Date();
d = this.date.getDate();
m = this.date.getMonth();
y = this.date.getFullYear();
task = [
{
title: "全天计划\r\n#####\r\n写代码",
start: new Date(this.y, this.m, 1)
},
{
title: "张家界四日游",
start: new Date(this.y, this.m, this.d - 5),
end: new Date(this.y, this.m, this.d - 2)
},
{
id: 999,
title: "电话回访客户",
start: new Date(this.y, this.m, this.d - 6, 16, 0),
allDay: false
},
{
id: 999,
title: "电话回访客户",
start: new Date(this.y, this.m, this.d + 4, 16, 0),
allDay: false
},
{
title: "视频会议",
start: new Date(this.y, this.m, this.d, 10, 30),
allDay: false
},
{
title: "中秋放假",
start: "2013-09-19",
end: "2013-09-21"
},
{
title: "午饭",
start: new Date(this.y, this.m, this.d, 12, 0),
end: new Date(this.y, this.m, this.d, 14, 0),
allDay: false
}
];
constructor() {}
ngOnInit() {
this.loadCalendar();
}
loadCalendar() {
const that = this;//注意这里的this指向(that代表ts的this)
$("#calendar").fullCalendar({
locale: "zh-cn",//使用中文
header: {
left: "prev,next today",
center: "title",
right: "timelineYear,month,agendaWeek,agendaDay"
},
buttonText: {//按钮文本
prev: "‹",
next: "›",
today: "今天",
month: "月",
week: "周",
day: "日"
},
allDayText: "全天",
themeSystem: "bootstrap3",
droppable: false,
editable: true,
eventLimit: true,
selectable: true,
selectHelper: true,
height: 600,
events: this.task,//任务数据
dayClick: function(date, allDay, jsEvent, view) {
console.log(date);
},
eventClick: function(event) {
console.log(event);
},
});
}
}