Scheduler Month View - show summary instead of rendering only a few events

[Bryan]

The Month view is not very useful when there are many events in a day - it currently only displays 1 or 2 event titles and then the "click for more" (ellipses) button.  I was hoping to override the template to show a summary of how many events exist for that day.  The attached screenshot shows what I am trying to achieve using an open-source calendar component.

When I tried to override the kendoSchedulerMonthDaySlotTemplate, the events for that day covered the actual text of the template.  Is there a way to at least suppress the rendering of the events themselves so I can just use my own template to display some summary data?

Thanks,

Bryan

 

 

[Martin Bechev]

Hi Bryan,

Thank you for the provided screenshot.

Due to the rendering of the Scheduler component, there isn't a built-in option or workaround that I can suggest in order to render many events in a single day slot (or in a scrollable container). The current design of the Scheduler relies on the button with three dots in order to show the extra events that aren't currently displayed for the respective day in a separate day view.

The key feature that the jQuery Scheduler support is adaptive slot height. This allows the scheduler cell to increase its height when there are more events. Up to now, this functionality is not supported by Kendo Angular Scheduler, but it would be a nice enhancement to have. That is why we are currently tracking the following feature request item demand:

https://feedback.telerik.com/kendo-angular-ui/1458736-scheduler-adaptive-slot-height

If you have the time please cast your vote. Basically, we periodically check all requested items in the Feedback Portal. Based on several factors (the feature request votes is one of them) we add the respective item to our roadmap. However, I am afraid that the discussed feature request has not yet made its way to our roadmap.

Meanwhile, a possible option is to modify the event or header templates and add information regarding how many events this day have. 

Regards,
Martin
Progress Telerik

[Bryan]

Hi Martin,

Thank you for your reply.  I don't think the adaptive slot height would solve my issues, as we don't want to show ALL the events in the monthly view.  We often have more than 10 events per day, so it wouldn't be feasible.

I am attempting to modify the monthly slot template, but the events themselves are interfering with the custom date text:

<kendo-scheduler
            [kendoSchedulerBinding]="allEvents$ | async"
            [showWorkHours]="true"
            style="height: 1050;"
        >
            <kendo-scheduler-day-view>
            </kendo-scheduler-day-view>
            <kendo-scheduler-week-view>
            </kendo-scheduler-week-view>
            <kendo-scheduler-month-view>
                <ng-template kendoSchedulerMonthDaySlotTemplate let-date="date">
                    {{ date | kendoDate: "M/dd/yyy"}}
                </ng-template>
            </kendo-scheduler-month-view>
        </kendo-scheduler>

Do you have any more detail on how I can modify the event or slot templates to show a summary for each day?

Regards,

Bryan

[Martin Bechev]

Hi Bryan,

Thank you for the provided code snippet.

Using the kendoSchedulerMonthDaySlotTemplate is a valid approach to showing a summary of the total events counts per day or some other event metrics.

The HTML looks valid, but I have no clue what could cause the issue shown in the screenshot. I've created an example utilizing the template to test the component with it, but it works as expected. Please check it out:

https://stackblitz.com/edit/angular-g2smaf-mqz5kr

Let me know if the experienced issue still appears after comparing the local configuration with the StackBlitz.

Regards

 

[Bryan]

Martin,

I found an interesting issue.  For the kendoSchedulerMonthDaySlotTemplate, when there is formatting defined in the template, it works as expected:

<ng-template kendoSchedulerMonthDaySlotTemplate let-date="date">
        <strong>{{ date | kendoDate: 'dd'  }}</strong>
</ng-template>

But this template with just the data (and no strong tag) does not - the events will cover up the slot template:

<ng-template kendoSchedulerMonthDaySlotTemplate let-date="date">
        {{ date | kendoDate: 'dd'  }}
 </ng-template>

I also managed to hide the events by handling the date change event when the Month view is selected and removing the events from the bound array.

Thanks,

Bryan

[Martin Bechev]

Hi Bryan,

Thank you for the provided feedback.

Actually, this is by design, and the date or any other information needs to be wrapped inside an element. Thus the events will be notified that there is some content above them and they should be rendered with some offset from the top.

Otherwise, the space for the template will be always there, even when there should be no date rendered in the month cell.