bryntum / support

An issues-only repository for the Bryntum project management component suite which includes powerful Grid, Scheduler, Calendar, Kanban Task Board and Gantt chart components all built in pure JS / CSS / TypeScript
https://www.bryntum.com
53 stars 6 forks source link

`schedulerPro.features` doesn't have the timeRanges included in module bundle #8888

Closed taauntik closed 5 months ago

taauntik commented 5 months ago

Forum post

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
        }
    }
]
});

Here is a video of reproduction

https://github.com/bryntum/support/assets/75997756/4a84817b-723c-4c62-a09d-015340692c23

SergeyMaltsev commented 5 months ago

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