[Solved] How to provide a custom "Current Time" to Kendo Scheduler instead of the OS clock?

[Durgesh]

I am running into a limitation with the <kendo-scheduler>  component regarding how it determines the current time.

In our Angular application, we do not rely on the user's local operating system clock. Instead, we calculate a synchronized "Server Time" to ensure our scheduling is 100% accurate, regardless of whether a user's physical machine clock is drifting or set incorrectly.

The issue is that Kendo UI internally relies on the browser's native new Date() and Date.now() to determine the current time. Because of this, the Scheduler has no way to know about our application's synchronized time.

Example of the Impact: Let's say a user's physical laptop clock is set to 10:00 AM, but our application's synchronized server time is actually 1:00 PM.

• The Scheduler's red "Current Time" marker line will render at 10:00 AM.

• The Scheduler will highlight "ongoing" events that are happening at 10:00 AM.

• Clicking the "Today" navigation button calculates the active day based on the 10:00 AM OS time.

Currently, I don't see an Input or API in Kendo to pass a custom "Now" value or time-provider function to the component, so the Scheduler constantly forces the physical OS time onto the UI.

If you have any built-in solution or recommended workaround for this scenario, please let me know.

[Yanmario]

Hi Durgesh,

Your observations are correct, and there is a limited API to control the current time marker and the "Today" button behavior.

One possible workaround is to handle the navigate event when the Today button is pressed, prevent the default behavior, and set the date that the Scheduler should navigate to. The current time marker is more complex to adjust. One option is to intercept the browser clock and return a modified date when the Scheduler requests the current time. This approach is somewhat fragile. Another option is to implement a custom time marker, which may require additional work and adjustments.

The following example demonstrates both suggestions and adjusting the time marker with a 3-hour offset:

https://stackblitz.com/edit/angular-81xoviry-mb5crswf

I will also look into the feature request logged from this account, as I’ve noticed the connection between the forum and feature request threads. 

I hope the provided workarounds are helpful.

Regards,
Yanmario
Progress Telerik

[Durgesh]

Hi Yanmario,

Thank you for the detailed response and the StackBlitz example!

The workaround for the Maps event using event.preventDefault() works perfectly for overriding the "Today" button behavior. I have successfully integrated that into our application.

Regarding the Current Time Marker, I agree that intercepting the global browser clock is a fragile approach, but it was the route we ultimately had to take. For anyone else who might find this thread, we initially ran into severe performance bottlenecks (infinite RxJS/Zone.js loops freezing the browser thread) because Kendo's internal layout engines call new Date() and Date.now() constantly during rendering and dragging.

To bypass the performance issues, we implemented an ES6 class-based override that caches the calculated time drift. The critical fix was to strictly avoid overriding Date.now() (leaving it to return the physical OS time for Angular's internal intervals) and only apply the offset to the constructor, which successfully shifts the Kendo time marker without crashing the app.

Here is a simplified snippet of our implementation for reference:

// Preserve the native V8 Date reference
const OriginalDate = Date;
const cachedOffsetMs = /* Calculated time drift between OS and Server */;

class ServerAwareDate extends OriginalDate {
  constructor(...args: any[]) {
    if (args.length === 0) {
      // Apply cached server drift strictly to the constructor for Kendo UI rendering
      super(OriginalDate.now() + cachedOffsetMs);
    } else {
      super(...(args as [any]));
    }
  }

  // CRITICAL FIX: Do NOT apply the offset here! 
  // Returning native OriginalDate.now() stops RxJS/Zone.js from entering infinite "catch-up" loops.
  static now(): number {
    return OriginalDate.now();
  }

  static UTC(...args: Parameters<typeof OriginalDate.UTC>): number {
    return OriginalDate.UTC(...args);
  }

  static parse(s: string): number {
    return OriginalDate.parse(s);
  }
}

// Apply the patch globally
if (!(window as any).Date.__serverPatched) {
  (window as any).Date = ServerAwareDate;
  (window as any).Date.__serverPatched = true;
  (window as any).Date.__trueOriginal = OriginalDate;
}

While we have a working implementation using this global patch, it is still a heavy-handed approach for an enterprise application. I am very glad to hear you are looking into the feature request! A native Angular provider/InjectionToken for "Current Time" would be an incredibly powerful addition to the Scheduler component.

Thanks again for your support and the provided workarounds.

Regards,
Durgesh