Our pure JavaScript Scheduler component

Post by mcarner5 »

The client is asking for a line that shows the "current time". As time marches on, it would update every minute or so to show the current time in relation to everything for a given displayed daterange.

I figure we could do this with a timerange, however I'm having trouble pulling this off. I am using the crudManager with autoSync enabled, but load() calls are manual. I figured I could load a changeset into the crudManager, however the timerange is not actually updating. Is there something I'm missing? Here is a selection of my code:

useEffect(() => {
        const intervalId = setInterval(() => {

        if (schedulerRef.current?.instance?.crudManager) {
            var crudManager = schedulerRef.current?.instance?.crudManager

            const newTimeRange = {
                "name": getCurrentTime12HourFormat(),
                "id": "CURRENT_TIME",
                "startDate": getCurrentDateTimeString(),
                "endDate": getCurrentDateTimeString(),

            const timeRangeChangeSet = {
                timeranges: {
                    added: [],
                    updated: [newTimeRange],
                    removed: []

    }, 5000); // 5 seconds for testing purposes

The initial crudManager.load() call is getting the timeRange from the backend with an id of "CURRENT_TIME". If I watch the timerange and use logging statements, the startDate and endDate never actually update.

The changeset I'm producing looks like this. I've tried "timeranges" as well as "timeRanges":

    "timeranges": {
        "added": [],
        "updated": [
                "name": "10:55PM",
                "id": "CURRENT_TIME",
                "startDate": "2024-04-17T22:55:17.814",
                "endDate": "2024-04-17T22:55:17.814"
        "removed": []

This is what the timerange I'm trying to update looks like when i inspect crudManager.timeRangeStore:

    "name": "10:39PM",
    "id": "CURRENT_TIME",
    "startDate": "2024-04-17T22:39:23.310604200",
    "endDate": "2024-04-17T22:39:23.310604200",
    "cls": "now-timeframe",
    "iconCls": null,
    "style": null,
    "recurrenceRule": null,
    "exceptionDates": null

Here are the other datetime functions listed above:

function getCurrentDateTimeString(): string {
        const now = new Date();
        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0');
        const day = String(now.getDate()).padStart(2, '0');
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');
        const milliseconds = String(now.getMilliseconds()).padStart(3, '0');

    return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}.${milliseconds}`;
function getCurrentTime12HourFormat(): string {
    const now = new Date();
    let hours = now.getHours();
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const ampm = hours >= 12 ? 'PM' : 'AM';
    hours = hours % 12;
    hours = hours ? hours : 12; // Convert midnight (0 hours) to 12 AM

    return `${hours}:${minutes}${ampm}`;

Post by mcarner5 »

Also, more of a general question, but how frequently can one update via crudManager.applyChangeSet before it starts to cause problems? For instance, if I have a websocket connection that is sending updates very frequently and I process them using that function. Could it handle something like Y position changing as another user drags an event around?

Post by mats »

Also, more of a general question, but how frequently can one update via crudManager.applyChangeSet before it starts to cause problems?

Something you'd have to try yourself, there's no limitation in our codebase. You can see how the Scheduler deals with high frequency outside changes here: https://bryntum.com/products/scheduler/examples/stress/

Post Reply