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
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
}
}
]
});
Forum post
We are unable to change (enable) the showCurrentTimeLine at runtime. Normally we can just set a feature flag like this:
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/
Here is a video of reproduction
https://github.com/bryntum/support/assets/75997756/4a84817b-723c-4c62-a09d-015340692c23