I'm trying to install the Scheduler in an Angular project but I'm getting the following error:

Could not resolve dependency:
@angular/localize@"^19.0.0" from the root project

Conflicting peer dependency: @angular/[email protected]
node_modules/@angular/compiler
  peer @angular/compiler@"19.0.6" from @angular/[email protected]
  node_modules/@angular/localize
    @angular/localize@"^19.0.0" from the root project

Fix the upstream dependency conflict, or retry
this command with --force or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

I did tried with the --legacy-peer-deps flag but no luck. 

Here is the version of what I'm running on my project

Angular CLI: 19.0.6
Node: 22.13.0
Package Manager: npm 11.0.0
OS: win32 x64

Hello.

We are using scheduler timeline view to show workers work schedule. We treat workers as resources. In some production environments we have more than 800 workers and in such cases application is very laggy or even not responding. In real life scenario we have custom styling for each slot depending on workers out of work days or configured work shift color. In provided stackblitz sample we limited ourselves to simple scheduler and still for hundreds of resources there are problems with performance.

Can you suggest solution for this issue or provide paging/virtualization for timeline view?

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

how to change the click function of the ellipsis in kendo ui kendo-scheduler-month-view?

i need to change the click function of the ellipsis on the shown screenshot below:

<kendo-scheduler
    [resources]="[]"
    [kendoSchedulerBinding]="events"
    [(selectedViewIndex)]="schedulerView"
    [slotClass]="getSlotClass"
    [selectedDate]="selectedDate"
    [slotDivisions]="1"
    [selectable]="true"
    [isSlotSelected]="isSlotSelected"
    (slotDragStart)="onSlotDragStart($event)"
    (slotDrag)="onSlotDrag($event)">

    <kendo-scheduler-month-view [eventHeight]="18" [eventClass]="getEventClass">
      <ng-template kendoSchedulerEventTemplate let-event="event" let-resources="resources">
        <ng-template *ngTemplateOutlet="eventTemplate; context: { $implicit: event.dataItem }"></ng-template>
      </ng-template>
    </kendo-scheduler-month-view>

</kendo-scheduler>
<kendo-scheduler
    [resources]="[]"
    [kendoSchedulerBinding]="events"
    [(selectedViewIndex)]="schedulerView"
    [slotClass]="getSlotClass"
    [selectedDate]="selectedDate"
    [slotDivisions]="1"
    [selectable]="true"
    [isSlotSelected]="isSlotSelected"
    (slotDragStart)="onSlotDragStart($event)"
    (slotDrag)="onSlotDrag($event)">

    <kendo-scheduler-month-view [eventHeight]="18" [eventClass]="getEventClass">
      <ng-template kendoSchedulerEventTemplate let-event="event" let-resources="resources">
        <ng-template *ngTemplateOutlet="eventTemplate; context: { $implicit: event.dataItem }"></ng-template>
      </ng-template>
    </kendo-scheduler-month-view>

</kendo-scheduler>

hi, I want the scroll bar to always be visible. It appears when I start scrolling, but I want it to always be visible.
so   #scheduler .k-scheduler-content {
    overflow-y: scroll;
    } this isn't  working

please give some exaple on schedule timeline view

Hello everyone,

I'm currently working on implementing a Kendo UI Calendar in our project. However, I encountered an issue with the design output.

Expected Output: (Refer to Image 1 below)

Actual Output: (Refer to Image 2 below)

Despite using the same code, the output doesn't match the design we expected. The first image shows the correct design we're aiming for, while the second image reflects what we currently see.

In addition to the design issue, I need to bind dynamic colors to the year view of the calendar. These colors will be fetched from an API. However, I'm unsure how to correctly implement this.

Has anyone encountered similar issues or has experience with binding dynamic colors in Kendo UI's year view? Any guidance or code examples would be greatly appreciated!

I'm working with the Kendo Scheduler and need help displaying different types of leave requests with specific background colors. For example, if an employee applies for a "Sick Leave," I want the event to appear with a specific background color in the Scheduler across different views (Year, Month, and Day).

Is there a way to dynamically apply these colors based on the leave type, so that each leave type (e.g., Sick Leave, Casual Leave, Privilege Leave) has a distinct background color in all views?

Any guidance or code samples would be greatly appreciated.

Thanks in advance!

Hi.
In JQueryUI Scheduler component is possible to customize views extending class.
Here's Kendo documentation with example:
https://docs.telerik.com/kendo-ui/knowledge-base/custom-view

Our old schduler application used a custom view obtained with this feature and we need to port same behaviour in the new angular application.

Is possible to customize Scheduler' views in Kendo UI for Angular in the same way you gave possibility with JQueryUI and how?

Hi,

Is there a possibility to give background colour to a weekday in Kendo Scheduler based on some conditions like how we can do it for weekends as seen in the screenshot.. We want to mark holidays in a different colour in the scheduler.

Thanks

Varun

Hi,

In Kendo Scheduler (Month View option) would like to set short form of week names, also in the cells, event height dynamic, like below image

To reproduce this issue please select your time zone as any time zone of US (eastern, central or pacific) select the date of date light saving change either the start or end of day light saving i.e the 2nd Sunday of March or November click on 4 am (or to be precise add your time zone offset to 2 am and click on any for example for eastern standard time any time from 2am to  7 am) it returns the wrong time. This can be observed for any kendo scheduler version from 2.1.6 to 15..1.0. 

The ideal behavior for any time after the change time i,e 2 am should return the value of the slot clicked but as of now it is incorrect for any value till 2+offest of the the time zone with day light saving. 

To reproduce this select a US time zone as mentioned (eastern, central or pacific) select 10th march 2024 or 3rd November 2024 and select 3am, 4 am , 5am etc. 

https://stackblitz.com/edit/angular-st2crm

Let me know if you need more details