Cannot read appointment information in cellTemplate

[Anna Koponen]

Hello!

I used to have a working custom implementation of showing appointment data in my scheduler. I have a custom field in my appointment called "Status".

After I updated to Angular 9.1 and updated the Schduler also, the appointment data does not show up in the scheduler as before. I noticed in the documentation that now #cellTemplate should be used instead of #eventSettingsTemplate. I changed it, but still it does not work. Has the data-object changed somehow? It does not seem to have the StartTime, EndTime and other properties anymore...

Here are code examples of what I had working:

BEFORE WITH eventSettingsTemplate:

<ejs-schedule #scheduleObj width='100%' height='550px' [selectedDate]="selectedDate" [eventSettings]="eventSettings" [showQuickInfo]="showQuickInfo"
                          [readonly]="isReadOnly" (eventClick)="onEventClick($event)"
                          locale="fi" timezone="Europe/Helsinki">
              <e-views>
                <e-view option='Month'></e-view>
              </e-views>
              <ng-template #eventSettingsTemplate let-data>
                <div class="template-wrap">
                  {{getTimeString(data.data.startTime)}}- {{getTimeString(data.data.endTime)}}
                </div>
              </ng-template>
            </ejs-schedule>

IN THE .ts file:

public eventSettings: EventSettingsModel = {
    fields: {
      id: 'id',
      startTime: { name: 'startTime', title: 'Alkaa' },
      endTime: { name: 'endTime', title: 'Loppuu' },
      subject: { name: 'subject', title: 'Jotain' }
    }
  };

  private instance: Internationalization = new Internationalization();
  getTimeString(value: Date): string {
    this.instance.culture = "fi-FI";
    return this.instance.formatDate(value, { type: 'time', format: 'HH.mm' });
  }

When getting the appointments on the server:

var dtoEvents = new List<DTO.CalendarEvent>();

            foreach (var calendarEvent in events)
            {
                var e = new DTO.CalendarEvent() { Id = calendarEvent.Id,
                                                    StartTime = calendarEvent.StartTime,
                                                    EndTime = calendarEvent.EndTime,
                                                    Status = DTO.CalendarEventStatus.Free.ToString(),
                                                    Subject = DTO.CalendarEventStatus.Free.ToString()
                };
                dtoEvents.Add(e);
            }

           
            return Ok(dtoEvents);

What could be wrong in the above? The data object only seems to be a date... How do I access the start- and end times of the data object?

Thank you,

Anna

[Vengatesh Maniraj]

Hi Anna Koponen, 

Greetings from Syncfusion Support. 

We have validated your reported issue in Angular 9 and we have already noted this issue and logged the defect in the below feedback.  

Feedback: https://www.syncfusion.com/feedback/13221/schedule-templates-are-not-working-in-angular-9-version 

Currently, we are working with high priority on this issue and we will include the solution as soon as possible. 

Meantime, we suggest you use the view based event template like below to overcome this issue. 

  <e-views> 

        <e-view option="Month"> 

          <ng-template #eventTemplate let-data> 

                 <div class="time" [style.background]="data.PrimaryColor">Time: {{getTimeString(data.StartTime)}} - {{getTimeString(data.EndTime)}}</div> 

              </ng-template> 

        </e-view> 

      </e-views>   

For your reference, we have prepared the sample which is available in the below link. 

Sample: https://stackblitz.com/edit/angular-tmx5gp-rcefbs?file=app.component.html 

Please check the above sample and get back to us if you need any other assistance. 

Regards, 

Vengatesh 

[Vengatesh Maniraj]

Hi Anna,

 

We are glad to announce that the “Template issue in Angular 9” has been fixed and included in our Essential Studio 2020 Volume 1 SP release v18.1.0.52. So we suggest you please upgrade your package version to the latest version to get the solution.

 

Feedback: https://www.syncfusion.com/feedback/13221/schedule-templates-are-not-working-in-angular-9-version

Release Notes: https://ej2.syncfusion.com/angular/documentation/release-notes/18.1.48/#common

 

We thank you for your support and appreciate your patience for this solution. Please get in touch with us if you need any further assistance.

 

Regards,

Vengatesh