懒得择(zhai)了，直接把项目里的copy过来了，详细api可参考最下方链接或官方文档。
import {Component, OnInit, ViewEncapsulation} from "@angular/core";
import {TrainPlanBirthService} from "./train-plan-birth.service";
import {TimeUtil} from "../../common/time-util";
import {CSSUtil} from "../../common/css-util";
import {CheckBoxUtil} from "../../common/checkBox-util";
import {ActivatedRoute, Router} from "@angular/router";
import {APPLY_STATUS} from "../../config";
declare let $: any;
@Component({
selector: 'calendar',
templateUrl: './train-plan-birth.component.html',
styleUrls: ['./train-plan-birth.css'],
encapsulation: ViewEncapsulation.None
})
export class TrainPlanBirthPage implements OnInit {
dateParam: string; //选择的日期
selectedEvents: any[] = []; //选择的事件
applyStatus: any; //培训需求状态
selectedId: any[] = []; //选择的需求id
ngOnInit() {
window.dispatchEvent(new CustomEvent('calendar-ready'));
let this_ = this;
$.getScript('assets/plugins/fullcalendar/lib/moment.min.js').done(function () {
$.getScript('assets/plugins/fullcalendar/fullcalendar.min.js').done(function () {
this_.handleCalendarDemo();
});
});
this.applyStatus = APPLY_STATUS;
}
constructor(private trainPlanBirthService: TrainPlanBirthService, private router: Router, private route: ActivatedRoute) {
}
/**
* 日期变更
*/
private changeDate() {
$('#calendarTest').fullCalendar('gotoDate', this.dateParam);
}
/**
* 合并事件
*/
private mergeEvents() {
if (this.selectedEvents.length != 0) {
this.selectedEvents.forEach((item: any) => {
this.selectedId.push(item.id);
});
this.router.navigate(['./merge', JSON.stringify(this.selectedId)], {relativeTo: this.route});
} else {
alert("请选择需要合并的需求.");
}
}
/**
* 生成日历
*/
private handleCalendarDemo() {
let this_ = this;
$('#calendarTest').fullCalendar({
header: {
left: '',
center: 'title',
right: 'prev,today,next '
},
buttonText: {
today: "今天",
month: "月",
week: "周",
day: "天"
},
monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
monthNamesShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
dayNamesShort: ["日", "一", "二", "三", "四", "五", "六"],
slotLabelFormat: "HH:mm",
allDayText: "全天",
timeFormat: "HH:mm",
views: {
month: {
titleFormat: "YYYY年M月"
},
week: {
titleFormat: "YYYY年M月D日",
columnFormat: "M.D dddd"
},
day: {
titleFormat: "YYYY年M月D日 dddd",
columnFormat: "M/D dddd"
}
},
titleFormat: {month: this.dateParam},
droppable: true, // this allows things to be dropped onto the calendar
drop: function () {
$(this).remove();
},
selectable: false, // this allows the calendar can be clicked
selectHelper: false,
//this is useless for now.
select: function (start: any, end: any) {
let title = prompt('Event Title:');
let eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendarTest').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendarTest').fullCalendar('unselect');
},
//click event
eventClick: function (calEvent: any, jsEvent: any, view: any) {
/*console.info("jsEvent ", jsEvent);
$(jsEvent.srcElement).css({
color: 'red'
});*/
calEvent.color = null;
CheckBoxUtil.updateSelected(jsEvent, calEvent, this_.selectedEvents);
},
//drop the event
eventDrop: function (event: any, delta: any, revertFunc: any) {
/*console.info(event.title + " was dropped on " + event.start.format() + " ,end " + event.end);*/
if (!confirm("确定改变日程安排嘛 ?")) {
revertFunc();
} else {
let endParam;
if (event.end == null) {
endParam = event.end;
} else {
endParam = TimeUtil.timestampToTime(event.end - 24 * 60 * 60 * 1000)
}
this_.trainPlanBirthService.trainPlanUpdateNeeds({
id: event.id,
start: event.start.format(),
end: endParam
}).subscribe((data: any) => {
if (data.code != 0) {
alert(data.message);
revertFunc();
}
});
}
},
//resize the event
eventResize: function (event: any, delta: any, revertFunc: any) {
/*console.info(event.title + " was resize on " + event.start.format() + "," + event.end);*/
if (!confirm("确定改变日程安排嘛 ?")) {
revertFunc();
} else {
//请求后台
this_.trainPlanBirthService.trainPlanUpdateNeeds({
id: event.id,
start: event.start.format(),
end: TimeUtil.timestampToTime(event.end - 24 * 60 * 60 * 1000)
}).subscribe((data: any) => {
if (data.code != 0) {
alert(data.message);
revertFunc();
}
});
}
},
editable: true, // this allows events can be moved on the calendar
eventLimit: true, // allow "more" link when too many events
//events(as a function)
events: function (start: any, end: any, timezone: any, callback: any) {
/*console.info("start: " + start + ",end: " + end);*/
let events: any[] = [];
//请求后台
this_.trainPlanBirthService.trainPlanQueryNeeds({
startDate: this.moment(start).format("YYYY-MM-DD"),
endDate: this.moment(end).format("YYYY-MM-DD"),
applyStatus: this_.applyStatus
}).subscribe((data: any) => {
if (data.code != 0) {
alert(data.message);
}
let tempList = data.result;
tempList.forEach((item: any) => {
//this calendar shows days less one day than the response,so I add one day to the end;
events.push({
id: item.apply_id,
title: item.apply_name,
start: TimeUtil.timestampToTime(item.begin_ts_date),
end: TimeUtil.timestampToTime(item.end_ts_date + 24 * 60 * 60 * 1000),
allDay: true,
color: CSSUtil.getRandomColor()
});
});
callback(events);
});
}
});
};
}
参考：https://www.helloweba.net/javascript/445.html