【问题标题】:Angular 2-5 implementation of fullcalender schedulerfullcalender调度器的Angular 2-5实现
【发布时间】:2018-03-07 13:25:06
【问题描述】:

我已经使用带有 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)。

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

【问题讨论】:

    标签: angular fullcalendar angular5 fullcalendar-scheduler


    【解决方案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);
        }
    }
    

    【讨论】:

    • 当角度事件数据变量发生变化时,你确定这能正常工作吗?
    • 还没有测试过。如果您对代码有改进,我可以更新答案。
    • 你有这个项目的 github 存储库吗?非常有兴趣看到它的实际效果。
    • @VladN 对不起,我无法在 github 上分享项目。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-10-08
    • 1970-01-01
    • 2020-03-15
    • 2017-07-27
    • 2017-09-10
    相关资源
    最近更新 更多