Angular 5应用集成Kendo Scheduler jQuery组件可行性及替代方案咨询

我来帮你梳理一下Kendo Scheduler集成到Angular 5的相关问题，包括规范方案、非规范的jQuery组件集成，还有替代选项：

一、规范方案：集成官方Kendo UI for Angular Scheduler #

这是官方推荐的做法，能完美适配Angular 5的生态，步骤也很清晰：

• 步骤1：安装依赖
  先确保你的Angular 5项目已经搭建完成，然后通过npm安装Scheduler及相关依赖包：

  npm install --save @progress/kendo-angular-scheduler @progress/kendo-angular-dateinputs @progress/kendo-angular-intl @progress/kendo-angular-l10n @progress/kendo-drawing @progress/kendo-angular-popup
  

• 步骤2：导入核心模块
  在你的根模块（比如AppModule）或者功能模块中，导入Scheduler和相关依赖模块：

  import { SchedulerModule } from '@progress/kendo-angular-scheduler';
  import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
  import { IntlModule } from '@progress/kendo-angular-intl';
  
  @NgModule({
    imports: [
      // 其他已导入的模块
      SchedulerModule,
      DateInputsModule,
      IntlModule
    ]
  })
  export class AppModule { }
  

• 步骤3：在组件中使用Scheduler
  在组件模板里添加Scheduler组件，并配置视图和数据源：

  <kendo-scheduler [data]="scheduleEvents">
    <kendo-scheduler-day-view></kendo-scheduler-day-view>
    <kendo-scheduler-week-view></kendo-scheduler-week-view>
    <kendo-scheduler-month-view></kendo-scheduler-month-view>
  </kendo-scheduler>
  

  然后在组件类中定义数据源：

  import { Component } from '@angular/core';
  import { Event } from '@progress/kendo-angular-scheduler';
  
  @Component({
    selector: 'app-scheduler',
    templateUrl: './scheduler.component.html'
  })
  export class SchedulerComponent {
    public scheduleEvents: Event[] = [
      {
        id: 1,
        title: '团队同步会议',
        start: new Date('2024-05-20T09:00:00'),
        end: new Date('2024-05-20T10:30:00')
      },
      {
        id: 2,
        title: '代码评审',
        start: new Date('2024-05-20T14:00:00'),
        end: new Date('2024-05-20T15:30:00')
      }
    ];
  }
  

• 步骤4：引入主题样式
  最后记得在全局样式文件（比如styles.css）或者angular.json中引入Kendo的主题样式，不然组件会没有样式：

  @import '~@progress/kendo-theme-default/dist/all.css';
  

二、非规范方案：集成Kendo Scheduler jQuery组件到Angular 5 #

虽然官方强烈不推荐这种方式（毕竟Angular和jQuery的DOM操作逻辑完全不同，很容易引发变更检测异常、数据不同步等问题），但技术上确实能实现，步骤如下：

• 步骤1：安装jQuery和Kendo UI jQuery包

  npm install --save jquery @progress/kendo-ui
  

• 步骤2：配置Angular全局依赖
  在angular.json的scripts数组中添加jQuery和Kendo的脚本文件，让Angular能全局访问它们：

  "scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/@progress/kendo-ui/js/kendo.all.min.js"
  ]
  

  同时在styles数组中添加Kendo的样式：

  "styles": [
    "node_modules/@progress/kendo-ui/css/web/kendo.default.min.css",
    "src/styles.css"
  ]
  

• 步骤3：在组件中初始化jQuery Scheduler
  要等到Angular组件的DOM渲染完成后再初始化jQuery组件，所以要在ngAfterViewInit钩子中操作：

  import { Component, AfterViewInit, ElementRef } from '@angular/core';
  // 声明jQuery全局变量
  declare var $: any;
  
  @Component({
    selector: 'app-jquery-scheduler',
    template: '<div id="jquery-scheduler"></div>'
  })
  export class JquerySchedulerComponent implements AfterViewInit {
    constructor(private elRef: ElementRef) {}
  
    ngAfterViewInit(): void {
      // 获取DOM元素并初始化Scheduler
      $(this.elRef.nativeElement.querySelector('#jquery-scheduler')).kendoScheduler({
        date: new Date('2024-05-20'),
        views: ['day', 'week', 'month'],
        dataSource: [
          {
            id: 1,
            title: 'jQuery组件演示会议',
            start: new Date('2024-05-20T11:00:00'),
            end: new Date('2024-05-20T12:30:00')
          }
        ]
      });
    }
  }
  

• 重要提醒
  • 这种方式会绕开Angular的变更检测，后续数据更新需要手动处理，很容易出现难以排查的bug
  • 无法利用Angular的组件化、依赖注入等特性，代码耦合度高
  • 后续Angular或Kendo版本升级时，大概率会出现兼容性问题

三、Angular 5可用的Scheduler替代组件 #

如果不想用Kendo的组件，这些选项也能满足日程管理的需求：

• Angular Material Scheduler：基于Angular Material的开源组件，风格统一，适合采用Material Design的项目
• FullCalendar Angular Wrapper：流行的FullCalendar的Angular封装版本，功能强大，支持多种视图，社区活跃度高
• PrimeNG Schedule：PrimeNG组件库的一部分，提供丰富的日程管理功能，集成简单，文档完善
• Syncfusion Angular Scheduler：商业组件，功能全面，提供专业的技术支持和详细的文档

内容的提问来源于stack exchange，提问作者Ana