【问题标题】:How can i get the data from Scheduler of syncfusion using angular?如何使用角度从同步融合的调度程序获取数据?
【发布时间】:2019-07-12 16:18:28
【问题描述】:

我正在使用 angular 的 Scheduler 的 syncfusion-ej2,我想在添加事件后获取数据!但我的 html 代码中只有这个

<div class="control-section">
        <div class="col-lg-9 content-wrapper">
            <ejs-schedule #schedule height='650px' [(selectedDate)]="selectedDate" [eventSettings]="eventSettings">
            </ejs-schedule>
        </div>
        <div class="col-lg-3 property-section">
            <div class="property-panel-section">
                <div class="property-panel-header">Properties</div>
                <div class="property-panel-content">
                    <div id="property" class="property-panel-table" title="Properties">
                        <table id="property" title="Properties" style="width: 100%">
                            <tbody>
                                <tr style="height: 50px">
                                    <td style="width: 30%">
                                        <div> Current Date
                                        </div>
                                    </td>
                                    <td style="width: 70%;">
                                        <div>
                                            <ejs-datepicker #datepicker [(value)]='selectedDate' [showClearButton]=false></ejs-datepicker>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

【问题讨论】:

  • 欢迎来到 SO!您可以包含您的代码示例吗?您可以使用降价来帮助以干净的方式格式化它。这将有助于其他人更容易理解您的问题。

标签: angular syncfusion


【解决方案1】:

这是 .ts 代码 `

import { Component, OnInit } from '@angular/core';
import { EventSettingsModel } from '@syncfusion/ej2-schedule';
import { extend } from '@syncfusion/ej2-base';
import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, ResizeService, DragAndDropService } from '@syncfusion/ej2-angular-schedule';
//import {scheduleData} from './data';

@Component({
  selector: 'app-calendrier2',
  templateUrl: './calendrier2.component.html',
  styleUrls: ['./calendrier2.component.css'],
  providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService, ResizeService, DragAndDropService]
})
export class Calendrier2Component implements OnInit {
  informations='helloChelly';
  public selectedDate: Date = new Date();
  public eventSettings: any = { dataSource: <Object[]>extend([], scheduleData, null, true) };


  constructor() { }

  ngOnInit() {
    console.log(this.eventSettings)
  }
  afficher(){
    console.log(this.eventSettings.dataSource.length); // how many events do u have 
    console.log(this.eventSettings.dataSource);       // list of the events

  }

}

export let scheduleData: Object[] = [
  {
      Id: 1,
      Subject: 'rendez-vous',
      Location: 'Space Centre USA',
      StartTime: new Date(2019, 6, 7, 9, 30),
      EndTime: new Date(2019, 6, 7, 11, 0),
      CategoryColor: '#1aaa55'
  }, {
      Id: 2,
      Subject: 'Thule Air Crash Report',
      Location: 'Newyork City',
      StartTime: new Date(2019, 0, 7, 12, 0),
      EndTime: new Date(2019, 0, 7, 14, 0),
      CategoryColor: '#357cd2'
  }]

` 您可以从 dataSource 属性中获取新事件。

【讨论】:

    【解决方案2】:

    Syncfusion 问候。

    在调度程序中的初始加载和执行操作(CRUD/导航)期间,actionComplete 事件将引发我们可以使用 requestType 参数区分操作的位置。在该事件函数中,可以使用 data 参数访问添加的事件,请参考以下链接。 https://ej2.syncfusion.com/angular/demos/#/material/schedule/events https://ej2.syncfusion.com/angular/documentation/api/schedule/#actioncomplete https://ej2.syncfusion.com/angular/documentation/api/schedule/actionEventArgs/#name

    我们使用以下公共方法获取当前视图范围/整个调度程序事件。 https://ej2.syncfusion.com/angular/documentation/api/schedule#getcurrentviewevents https://ej2.syncfusion.com/angular/documentation/api/schedule#getevents

    问候,

    卡西

    【讨论】:

    • 如何添加无法删除的常量事件?
    猜你喜欢
    • 2020-09-16
    • 1970-01-01
    • 2021-02-20
    • 2018-08-05
    • 2021-05-29
    • 1970-01-01
    • 2018-06-17
    • 2020-01-03
    • 1970-01-01
    相关资源
    最近更新 更多