如何使用angular从syncfusion的Scheduler中获取数据?

时间:2019-07-12 16:18:28

标签: angular syncfusion

我正在使用Scheduler的syncfusion-ej2并使用angular,我想在添加事件后获取数据!但我的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>

2 个答案:

答案 0 :(得分:0)

这是.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属性获取新事件。

答案 1 :(得分:0)

融合问候。

在初始加载和在Scheduler中执行操作(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

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

此致

卡尔蒂