Month View, current date/days out of month indication?

[Mykhailo]

Hello!
I've checked Scheduler docs + forum but couldn't find the answer for my question.

Does Month View support:
1) indicating/styling current day
2) indicating/styling days that are out of current month

Thanks in advance!

[Hetali]

Hi Mykhailo,

In order to style the current day and the days out of current month, get the selectedDate from the dateChange event and use the ngIf directive in the MonthDaySlotTemplateDirective to accordingly show/style the date. For example:

<kendo-scheduler
  [selectedDate]="selectedDate"
  (dateChange)="dateChange($event)"
>
  <kendo-scheduler-month-view>

    <ng-template kendoSchedulerMonthDaySlotTemplate let-date="date">
      <span class="todaysDate"
        *ngIf = "date.getDate() === todaysDate.getDate()
        && date.getMonth() === todaysDate.getMonth()    
        && date.getFullYear() === todaysDate.getFullYear()"
      >
        {{ date | kendoDate }}
      </span>

      <span class="otherDate"
        *ngIf = "date.getMonth() !== selectedDate.getMonth()"
      >
        {{ date | kendoDate }}
      </span>

      <span
        *ngIf = "date.getMonth() === selectedDate.getMonth() 
        && !(date.getDate() === todaysDate.getDate()
          && date.getMonth() === todaysDate.getMonth()    
          && date.getFullYear() === todaysDate.getFullYear())"
      >
        {{ date | kendoDate }}
      </span>
    </ng-template> 
  </kendo-scheduler-month-view>
</kendo-scheduler>

public dateChange(e) {
  this.selectedDate = e.selectedDate;
}

.todaysDate {
  color: blue;
}

.otherDate {
  color: red;
}

In this StackBlitz example, I have changed the today's date color to blue and the dates of the other months to red in the Month View of the Kendo UI Scheduler.

I hope this helps. Please let me know if I can further assist you.

Regards,
Hetali
Progress Telerik

[Mykhailo]

Hetali, thanx for your help!

[Rita]

Hi Hetali,

I'm wondering if there is a possibility to switch to the day view by clicking on a day number with the current approach? Kendo scheduler has this feature by default but it doesn't work while using kendoSchedulerMonthDaySlotTemplate.

Thanks,
Rita

[Martin Bechev]

Hi Rita,

What can be done is to handle the click event of the desired elements in the template and manually update the selectedViewIndex index property in the handler:

https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/views/#toc-setting-the-selected-view

Here is the update example, where the Scheduler view is changed when the user clicks the month date:

https://stackblitz.com/edit/angular-qn9zbr-7dufvw

Regards,

Martin
Progress Telerik