fullcalender调度器的Angular 2-5实现

Question

我已经使用带有 Jquery 和 html 的全日历（fullcalendar.io）插件完成了一个资源调度项目。现在我正在将此项目转换为 Angular 5。我尝试使用一些流行的 angular-full 日历插件，例如

1.https://github.com/Jamaks/ng-fullcalendar
2.https://github.com/mattlewis92/angular-calendar
3.https://github.com/nekken/ng2-fullcalendar

以上都没有实现 fullcalendar-scheduler 也不支持像'timelineMonth'这样的视图。

请注意，我已经成功地在 angular 中完全实现了 fullcalendar(https://fullcalendar.io/)，但我无法实现 fullcalender 提供的附加组件(https://fullcalendar.io/scheduler)。

有人成功实施了吗？或任何插件建议都会有很大帮助。

Answer 1

我今天早上刚刚实现了它。最大的收获是您不需要 npm install fullcalendar 本身，因为它已经是调度程序的依赖项。希望这会有所帮助：

Package.json：

"dependencies": {
  "fullcalendar-scheduler": "^1.9.3",
  "jquery": "^3.3.1",
},
"devDependencies": {
  "@types/jquery": "^3.3.0",
}

Angular-cli.json：

"styles": [
    "styles.css",
    "../node_modules/fullcalendar/dist/fullcalendar.min.css",
    "../node_modules/fullcalendar-scheduler/dist/scheduler.min.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/moment/min/moment.min.js",
    "../node_modules/fullcalendar/dist/fullcalendar.min.js",
    "../node_modules/fullcalendar-scheduler/dist/scheduler.min.js"
  ],

Component.ts

import * as $ from 'jquery';
import 'fullcalendar';
import 'fullcalendar-scheduler';

export class CalendarComponent implements AfterViewInit {

    @Input() options;

    @Component({
        selector: 'app-calendar'
    })

    ngAfterViewInit() {
        const containerEl: JQuery = $('app-calendar');
        containerEl.fullCalendar(this.options);
    }
}