angular2+ 使用fullcalendar

npm install 安装切换fullcalendar版本的时候，注意删除package-lock.json

angular版本为7.2.0

一、angular使用fullcalendar 4.3.0版本用法：

1、npm install安装相关包，package.json包的版本

    "@fullcalendar/angular": "^4.3.1",
    "@fullcalendar/core": "^4.3.0",
    "@fullcalendar/daygrid": "^4.3.0",
    "@fullcalendar/interaction": "^4.3.0",

2、创建组件fullcalendar-example.ts

import { Component, OnInit, ViewChild, ElementRef, HostBinding, Input, Output, EventEmitter } from '@angular/core';
import { Calendar, EventInput } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid'; // a plugin
import interactionPlugin from '@fullcalendar/interaction'; // a plugin
import timeGrigPlugin from '@fullcalendar/interaction'; // a plugin

@Component({
    selector: 'wq-fullcalendar',
    templateUrl: './fullcalendar-example.html',
    styleUrls: ['./fullcalendar-example.scss']
})
export class WqFullcalendarComponent implements OnInit {

    calendarPlugins = [dayGridPlugin, timeGrigPlugin, interactionPlugin]
    private calendar: Calendar;

    options: any = {
        header: {},
        navLinks: true, // can click day/week names to navigate views
        editable: true,
        selectable: true,
        defaultView: 'dayGridMonth',
        eventLimit: true, // allow "more" link when too many events
        plugins: this.calendarPlugins,
        locale: 'zh-cn',
        dateClick: this.handleDateClick.bind(this), // bind is important!
        events: [],
        eventClick: this.handleEventClick.bind(this),
        select: this.handleSelect.bind(this),
        aspectRatio: 1.8,
        buttonText: {
            today: '今天'
        }
    }

    @Input() set data(list: Array<any>) {
        if (this.options && this.options.events) {
            if (list instanceof Array === false) {
                return;
            }
            this.calendar && this.calendar.removeAllEvents();
            this.options.events = [];
            list.forEach(item => {
                if (!this.isInArray(item, this.options.events)) {
                    const newItem = {
                        id: item['id'],
                        title: item['title'],
                        start: item['planBeginDate'].substring(0, 10),
                        end: item['planEndDate'].substring(0, 10),
                        editable: true,
                        machineId: item['machineId']
                    }
                    this.options.events.push(newItem);
                    this.calendar && this.calendar.addEvent(newItem);
                }
            })
        }
    }

    @ViewChild('calendar') calendarEl: ElementRef;
    @Output() changeMachineSchedule: EventEmitter<any> = new EventEmitter();


    // calendarEvents: EventInput[] = [{ title: 'Event Now', start: new Date() }];

    constructor(
        public element: ElementRef
    ) {

    }

    ngOnInit(): void {

    }

    ngAfterViewInit() {
        this.calendar = new Calendar(
            this.calendarEl.nativeElement,
            this.options
        );
        this.calendar.render();
    }

    isInArray(item: any, arr: Array<any>): boolean {
        let isExisted = false;
        for (let i = 0; i < arr.length; i++) {
            if (item['id'] === arr[i]['id']) {
                isExisted = true;
                break;
            }
        }
        return isExisted;
    }

    // 选中触发(可选多个格子)
    handleSelect(arg) {
        this.changeMachineSchedule.emit({ arg: arg, type: 'date' });
    }

    // 点击event内容触发
    handleEventClick(arg) {
        this.changeMachineSchedule.emit({ arg: arg, type: 'event' });
    }

    // 点击日期触发
    handleDateClick(arg) {
        // this.changeMachineSchedule.emit({ arg: arg, action: 'add', type: 'date' });
    }
}

3、fullcalendar-example.ts引入的fullcalendar-example.html

<div #calendar></div>

4、在shared.module.ts中引入该组件（fullcalendar-example.ts所在模块）

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { ManageListModeEchartComponent } from './manage-list-mode-echart/manage-list-mode-echart.component';
import { WqFullcalendarComponent } from './fullcalendar/fullcalendar-example';

@NgModule({
    declarations: [ManageListModeEchartComponent, WqFullcalendarComponent],
    imports: [
        CommonModule,
        HttpClientModule
    ],
    exports: [ManageListModeEchartComponent, WqFullcalendarComponent]
})
export class SharedModule { }

5、在其它地方使用该组件 

<wq-fullcalendar (changeMachineSchedule)="changeMachineSchedule($event)" [data]="data"></wq-fullcalendar>

二、angular使用fullcalendar 5.0.0+版本用法：

1、在shared.module.ts中引入FullCalendarModule模块及相关插件

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { ManageListModeEchartComponent } from './manage-list-mode-echart/manage-list-mode-echart.component';
import { WqFullcalendarComponent } from './fullcalendar/fullcalendar-example';
import { FullCalendarModule } from '@fullcalendar/angular'; // the main connector. must go first
import dayGridPlugin from '@fullcalendar/daygrid'; // a plugin
import interactionPlugin from '@fullcalendar/interaction'; // a plugin

FullCalendarModule.registerPlugins([ // register FullCalendar plugins
    dayGridPlugin,
    interactionPlugin
]);

@NgModule({
    declarations: [ManageListModeEchartComponent, WqFullcalendarComponent],
    imports: [
        CommonModule,
        HttpClientModule,
        FullCalendarModule
    ],
    exports: [ManageListModeEchartComponent, WqFullcalendarComponent]
})
export class SharedModule { }

2、创建组件fullcalendar-example.ts（CalendarOptions 属性请参照官网）

import { Component, OnInit, ViewChild, ElementRef, HostBinding, Input } from '@angular/core';
import { EventInput } from '@fullcalendar/core';
import { CalendarOptions } from '@fullcalendar/angular';

@Component({
    selector: 'wq-fullcalendar',
    templateUrl: './fullcalendar-example.html',
    styleUrls: ['./fullcalendar-example.scss']
})
export class WqFullcalendarComponent implements OnInit {
    calendarOptions: CalendarOptions = {
        initialView: 'dayGridMonth',
        dateClick: this.handleDateClick.bind(this), // bind is important!
        events: [
            {
                title: 'event 1',
                date: '2021-01-31',
                editable: true
            },
            { title: 'event 2', date: '2021-02-01' }
        ],
        eventClick: this.handleEventClick.bind(this),
        selectable: true,
        select: this.handleSelect.bind(this),
        locale: 'zh-cn',
    };

    handleSelect(arg) {
        console.log(arg)
    }

    handleEventClick(arg) {
        alert(arg)
    }

    handleDateClick(arg) {
        alert('date click! ' + arg.dateStr)
    }

    calendarEvents: EventInput[] = [{ title: 'Event Now', start: new Date() }];
    ngOnInit(): void {

    }
}

3、fullcalendar-example.ts引入的fullcalendar-example.html

<full-calendar [options]="calendarOptions"></full-calendar>

4、在shared.module.ts中引入该组件（fullcalendar-example.ts所在模块，代码见步骤1）

5、在其它地方使用该组件 

<wq-fullcalendar></wq-fullcalendar>