Kendo UI scheduler - event rendering template

[Saquib]

I can't seem to get the event template to display data from the event object, apart from the title. I'm trying to do this with custom properties that I've added to the events object and that does not work. But also, existing properties, such as description, also do not display.

Used the documentation from here:

https://www.telerik.com/kendo-angular-ui/components/scheduler/templates/#toc-all-day-events

So in the example below, description will not display.

Is this a feature or bug?

<div class="row col-md-12" *ngIf="fixingEvents.length > 0">

  <kendo-scheduler

    [kendoSchedulerBinding]="fixingEvents"

    [selectedDate]="fixingFromDate"

  >

    <kendo-scheduler-week-view> </kendo-scheduler-week-view>

    <ng-template kendoSchedulerAllDayEventTemplate let-event="event">

      <p>{{ event.title }}</p>

      <p>{{ event.description }}</p>

    </ng-template>

  </kendo-scheduler>

</div>

[Dimiter Topalov]

Hello Saquib,

To display various event properties, they should exist and have some visible value (the description of the sample data objects used in the all-day event template in the mentioned documentation demo is an empty string). Furthermore, the Scheduler eventHeight option needs to be set to allow displaying event data that requires more height. The following example demonstrates the suggested approach:

https://stackblitz.com/edit/angular-deme7y?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fevents-utc.ts

On a side note, using custom models and their respective properties is possible through the approach, described in the following documentation section:

https://www.telerik.com/kendo-angular-ui/components/scheduler/data-binding/#toc-binding-to-models

The developer can use the modelFields options to map the custom property names to the ones, expected by the Scheduler, e.g.:

<kendo-scheduler
      [kendoSchedulerBinding]="events"
      [modelFields]="eventFields"

...

public eventFields: SchedulerModelFields = {
    id: "TaskID",
    title: "Title",
    description: "Description",
    startTimezone: "StartTimezone",
    start: "Start",
    end: "End",
    endTimezone: "EndTimezone",
    isAllDay: "IsAllDay",
    recurrenceRule: "RecurrenceRule",
    recurrenceId: "RecurrenceID",
    recurrenceExceptions: "RecurrenceException",
  };

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Saquib]

Thanks Dimiter. That works well in the week view, the issue was I was not setting the event height.

In the month view, I only see a line with some dots and no data (I've added a month view to your example to demonstrate). Clicking on the line or dots does not do anything?

[Dimiter Topalov]

Hi Saquib,

The Scheduler needs to have a Day view defined too so that clicking the dots in the Month view can open the details about the given day in a Day view. When there is not enough Scheduler space available, setting higher values for event height (for the whole Scheduler, or the Month View explicitly) leads to cutting off the events, and displaying dots indicating that there are more events for the day which are not rendered.

It seems that setting the event height for the whole Scheduler (or the Month view explicitly) to values such that there is not enough space for all events to be rendered will lead to the observed behavior.

Providing enough height for the whole Scheduler ensures that all events in all views are rendered and visible on the screen:

https://stackblitz.com/edit/angular-deme7y-aerlyn?file=src%2Fapp%2Fapp.component.ts

To sum up, events in the Month view will be rendered as long as there is enough space/height in the Scheduler viewport, otherwise the dots element indicating there is more to show will display the day details in Day view upon clicking (given there is a Day view defined).

I understand that all this might seem a bit confusing and counterintuitive, but we will do our best to document all rendering specifics accordingly.

Regards,
Dimiter Topalov
Progress Telerik