Unplanned
Last Updated: 27 Jan 2020 13:47 by ADMIN
Toine
Created on: 23 Jan 2020 23:50
Category: MultiViewCalendar
Type: Feature Request
0
Month description above each month section when using multiple views

I would like to show the description of the month above each block that represent the month when using multiple views. 

currently the first and last month are shown on the left but when u use 4 or 5 views things get difficult for users to see which month they are looking at.

3 comments
ADMIN
Svetlin
Posted on: 27 Jan 2020 13:47

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

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Toine
Posted on: 25 Jan 2020 14:40
That is nice to read but it doesn't solve my problem at this moment. We cannot wait for enought votes and a couple development cicles for we can use this. Maybe you can suggest some sort of workaround for the time being?
ADMIN
Svetlin
Posted on: 24 Jan 2020 11:17

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

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.