Unable to set timerange showCurrentTimeLine at runtime

[24flow]

We are unable to change (enable) the showCurrentTimeLine at runtime. Normally we can just set a feature flag like this:

this.scheduler.timeRanges.showCurrentTimeLine = !this.scheduler.timeRanges.showCurrentTimeLine;

But with this feature this does not work. We are able to reproduce this on the public demo for example this one: https://bryntum.com/products/schedulerpro/examples/dependencies/

import { SchedulerPro, Toast, StringHelper } from '../../build/schedulerpro.module.js?474872';
import shared from '../_shared/shared.module.js?474872';

const scheduler = new SchedulerPro({
    // A Project holds the data and the calculation engine for Scheduler Pro. It also acts as a CrudManager, allowing
    // loading data into all stores at once
    project : {
        autoLoad   : true,
        loadUrl    : './data/data.json',
        eventStore : {
            fields : ['highlight']
        }
    },

appendTo              : 'container',
startDate             : '2024-03-26',
endDate               : '2024-03-26',
rowHeight             : 60,
barMargin             : 15,
eventStyle            : 'colored',
viewPreset            : 'hourAndDay',
highlightSuccessors   : true,
highlightPredecessors : true,

features : {
    dependencies : {
        // Rounded line joints
        radius                            : 10,
        // Easier to click on lines
        clickWidth                        : 5,
        // Highlight dependency lines when hovering over an event
        highlightDependenciesOnEventHover : true
    },
    dependencyEdit : {
        // Allow editing lag in the dependency editor
        showLagField : true
    },
    eventDrag : {
        // Prevent reassigning events using drag and drop
        constrainDragToResource : true
    },
    resourceTimeRanges : true,
timeRanges: {showCurrentTimeLine: false}
    },

columns : [
    // A column using a custom render to display an icon + text
    {
        text       : 'Resource',
        width      : 150,
        field      : 'name',
        // We want to use custom markup
        htmlEncode : false,
        // Renderer that returns a DOM config object, a more performant way than returning a html string, allows
        // reusing elements as cells are re-rendered
        renderer   : ({ record }) => ({
            children : [
                // <i> tag with the icon
                record.icon ? {
                    tag       : 'i',
                    className : `b-fa b-fa-fw ${record.icon}`,
                    style     : 'margin-right: .5em'
                } : null,
                // text node with the name
                record.name
            ]
        })
    }
],

eventRenderer({ eventRecord, renderData }) {
    // Add 'highlight' css class for highlighted records
    renderData.cls.highlight = eventRecord.highlight;

    return StringHelper.encodeHtml(eventRecord.name);
},

tbar : [
    {
        type    : 'checkbox',
        label   : 'Highlight dependent events',
        checked : true,
        onChange({ checked }) {
          scheduler.timeRanges.showCurrentTimeLine = true
        }
    }
]
});

[tasnim]

Thanks for your report. We'll investigate it. Here is a ticket to track progress https://github.com/bryntum/support/issues/8888

Best regards,
Tasnim

[sergey.maltsev]

Hi!

scheduler.timeRanges is not a feature instance. It should be scheduler.features.timeRanges

Docs for this feature
https://bryntum.com/products/schedulerpro/docs/api/Scheduler/feature/TimeRanges

Docs for using features
https://bryntum.com/products/schedulerpro/docs/guide/Grid/basics/features

Please refer to this demo:
https://bryntum.com/products/scheduler/examples/timeranges/

It shows how to use checkboxes to configure timeRanges feature at runtime.

        {
            type : 'button',
            ref  : 'settingsButton',
            text : 'Settings',
            menu : [
                {
                    text    : 'Show current time line',
                    checked : true,
                    onToggle({ checked }) {
                        scheduler.features.timeRanges.showCurrentTimeLine = checked;
                    }
                },
                {
                    text    : 'Show header elements',
                    checked : true,
                    onToggle({ checked }) {
                        scheduler.features.timeRanges.showHeaderElements = checked;
                    }
                }
            ]
        },

Also this is a SchedulerPro demo with enabled feature:
https://bryntum.com/products/schedulerpro/examples/travel-time/

You may try adding a new slider there for a Toolbar:

    tbar : [
        {
            type    : 'slidetoggle',
            label   : 'Show header elements',
            checked : true,
            onChange({ checked }) {
                scheduler.features.timeRanges.showHeaderElements = checked;
            }
        }
    ]

[24flow]

That works thanks!