Schedule component is not showing events that were bind from API?

[Wioletta Manka]

I'm using Angular 6 and .NET Core Web API. My controller is sending calendar events as json like this:

My angular component template looks like this:

<ejs-schedule

  #scheduleObj

  width="100%"

  height="650px"

  [currentView]="currentView"

  [views]="views"

  [readonly]="true"

  [selectedDate]="selectedDate"

  [eventSettings]="eventSettings"

  [allowDragAndDrop]="false"

  [allowResizing]="false"

  (eventRendered)="oneventRendered($event)"

  (popupOpen)="onPopupOpen($event)"

>

</ejs-schedule>

And this is CalendarComponent.ts file

export class CalendarComponent {

  public currentView: View = 'Month';

  public views: View[] = ['Day', 'Week', 'Month'];

  public scheduleObj: ScheduleComponent;

  public selectedDate: Date = new Date();

  private dataManger: DataManager = new DataManager({

    url:

      environment.apiUrl +

      'calendar/' +

      this.authService.getCurrentlyLoggedInUserId(),

    adaptor: new ODataV4Adaptor(),

    crossDomain: true

  });

  public eventSettings: EventSettingsModel = { dataSource: this.dataManger };

  public temp: string =

    '<div class="tooltip-wrap">' +

    '<div class="image ${EventType}"></div>' +

    '<div class="content-area"><div class="name">${Subject}</></div>' +

    '${if(Location !== null && Location !== undefined)}<div class="location">Location&nbsp;:&nbsp;${Location}</div>${/if}' +

    '<div class="time">From&nbsp;:&nbsp;${StartTime.toLocaleString()} </div>' +

    '<div class="time">To&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;${EndTime.toLocaleString()} </div></div></div>';

  constructor(private router: Router, private authService: AuthService) {}

  onChange(args: ChangeEventArgs): void {

    if (args.checked) {

      this.scheduleObj.eventSettings.enableTooltip = true;

    } else {

      this.scheduleObj.eventSettings.enableTooltip = false;

    }

    this.scheduleObj.dataBind();

  }

  onTemplateChange(args: ChangeEventArgs): void {

    if (args.checked) {

      this.scheduleObj.eventSettings.tooltipTemplate = this.temp;

    } else {

      this.scheduleObj.eventSettings.tooltipTemplate = null;

    }

    this.scheduleObj.dataBind();

  }

  oneventRendered(args: EventRenderedArgs): void {

    const categoryColor: string = args.data.CategoryColor as string;

    if (!args.element || !categoryColor) {

      return;

    }

    args.element.style.backgroundColor = categoryColor;

  }

  onPopupOpen(args: PopupOpenEventArgs): void {

    if (args.type === 'Editor' || args.type === 'QuickInfo') {

      args.cancel = true;

      this.router.navigate(['/']);

    }

  }

}

Currently the data is send correctly but calendar component is still empty, what should I do to fix that?

[Vinitha Devi Murugan]

Hi Wioletta, 

 

Syncfusion Greetings. 

 

We have checked your shared code in which field mapping is incorrect, which is the root cause of the reported issue. We prepared the sample below with the right field mapping, please refer to it. 

 

https://stackblitz.com/edit/angular-ex4nyx-2qh4bp?file=app.component.ts  

 

 public eventSettings: EventSettingsModel = { dataSource: [ { 

        id: 1, 

        subject: 'Story Time for Kids', 

        startTime: new Date(2018, 1, 11, 10, 0), 

        endTime: new Date(2018, 1, 11, 11, 30), 

        CategoryColor: '#1aaa55' 

    }], 

     fields: { 

            id: 'id', 

            subject: { name: 'subject' }, 

            startTime: { name: 'startTime' }, 

            endTime: { name: 'endTime' } 

        }}; 

 

Please refer below UG link. 

UG Link:https://ej2.syncfusion.com/angular/documentation/schedule/appointments/#binding-different-field-names 

 

Regards, 

M. Vinitha devi