Hi,

You can expect this feature to be released with our next major release scheduled for January 2021.

Regards,
Svetlin
Progress Telerik

Hi Toine,

Indeed, currently there isn't a workaround that fits all use-cases available at the moment. The limitation comes from the currently rendered DOM and the usage of the different views of the MultiViewCalendar component. What could be done as a workaround is to utilize the HeaderTitleTemplateDirective in order to pass a custom text for the header title (it should consist of the current months). The header title can be further adjusted to take 100% of the available width and to split its content evenly across the occupied space using some custom CSS:

      .k-button.k-bare.k-title{
        width: 100%;
        justify-content: space-around;
      }

Then the content of the header title should remain as it is by default if the current view is changed. That can be achieved by adding some conditional logic using the *ngIf directive:

      <kendo-multiviewcalendar  [views]="views">
        <ng-template kendoCalendarHeaderTitleTemplate let-title let-date=date let-activeView>
          <ng-container *ngIf="isMonthView(title)">
            <div *ngFor="let month of getMonths(date.getMonth())">
            {{month}}
            </div>
          </ng-container>
          <div *ngIf="!isMonthView(title)">{{title}}</div>
        </ng-template>
      </kendo-multiviewcalendar>

The ng-container is required in that case as, an Angular template cannot have both *ngFor and *ngIf directives.

Please check the following example demonstrating that approach:

https://stackblitz.com/edit/angular-nfgcmf-9gy745?file=app%2Fapp.component.ts

Another cleaner option would be to just extend the width of the header title to be 100%. That will ensure that it is displayed in the middle and the default header title content will be used:

https://stackblitz.com/edit/angular-zwrjoz?file=app%2Fapp.component.ts

I understand that the provided workarounds do not fit the requirements perfectly and they might need some further adjustment in order to achieve the requirement, but I am afraid that currently there isn't a better approach until a separate template is provided for each month title. I hope the provided suggestions help.

Regards,
Svetlin
Progress Telerik

Hi Toine,

Thank you for reaching out to us.

Indeed, at the moment there isn't such feature available. However, it would be a valuable addition to the MultiViewCalendar. That is why, I converted this ticket to be a public feature request item so that other users can vote for it. Please check it at the following link:

https://feedback.telerik.com/kendo-angular-ui/1450652-month-description-anode-each-month-ween-using-multiple-views

That will further allow us to track the demand for such feature and eventually provide an option for achieving it in a future release.

Thank you for the provided feedback.

Regards,
Svetlin
Progress Telerik