Hi Team
Do we have time operator support on bryntum-scheduler. We have a requirement to show data for few hours on bryntum scheduler selected by the user via a time range selector.
We tried setting the working time for the Partial<SchedulerConfig> as below
To display only a few hours on the Bryntum Scheduler, you can use the setTimeSpan method to adjust the visible time range. The workingTime configuration is used to define non-continuous time axes, but it might not be suitable for your requirement to show a specific time range.
Here's how you can set the time span to show only the selected hours:
Make sure to call this method after the Scheduler has been initialized. This will adjust the Scheduler's time axis to only display the specified hours.
If you need further assistance, please provide more details like a screenShot of your design
Hey
Thanks for the reply!!
I did try the setTimeSpan approach as well but again the scheduler scrolls to some other date and it is not displaying the honouring time span.
Please, could you share a working example where the scheduler shows just 4 hours. I'll use that as ref and check if I am setting anything wrong on my side.
import { Scheduler } from '../../build/scheduler.module.js?484832';
import shared from '../_shared/shared.module.js?484832';
//region Data
const
resources = [
{ id : 'r1', name : 'Mike' },
{ id : 'r2', name : 'Linda' },
{ id : 'r3', name : 'Don' },
{ id : 'r4', name : 'Karen' },
{ id : 'r5', name : 'Doug' },
{ id : 'r6', name : 'Peter' },
{ id : 'r7', name : 'Sam' },
{ id : 'r8', name : 'Melissa' },
{ id : 'r9', name : 'John' },
{ id : 'r10', name : 'Ellen' }
],
events = [
{
id : 1,
resourceId : 'r1',
startDate : new Date(2017, 0, 1, 10),
duration : 2,
durationUnit : 'h',
name : 'Click me',
iconCls : 'b-fa b-fa-mouse-pointer'
},
{
id : 2,
resourceId : 'r2',
startDate : new Date(2017, 0, 1, 12),
duration : 1.5,
durationUnit : 'h',
name : 'Drag me',
iconCls : 'b-fa b-fa-arrows-alt'
},
{
id : 3,
resourceId : 'r3',
startDate : new Date(2017, 0, 1, 14),
duration : 2,
durationUnit : 'h',
name : 'Double click me',
eventColor : 'purple',
iconCls : 'b-fa b-fa-mouse-pointer'
},
{
id : 4,
resourceId : 'r4',
startDate : new Date(2017, 0, 1, 8),
duration : 2,
durationUnit : 'h',
name : 'Right click me',
iconCls : 'b-fa b-fa-mouse-pointer'
},
{
id : 5,
resourceId : 'r5',
startDate : new Date(2017, 0, 1, 15),
duration : 2,
durationUnit : 'h',
name : 'Resize me',
iconCls : 'b-fa b-fa-arrows-alt-h'
},
{
id : 6,
resourceId : 'r6',
startDate : new Date(2017, 0, 1, 16),
duration : 2,
durationUnit : 'h',
name : 'Important meeting (read-only)',
iconCls : 'b-fa b-fa-exclamation-triangle',
eventColor : 'red',
readOnly : true
},
{
id : 7,
resourceId : 'r6',
startDate : new Date(2017, 0, 1, 6),
duration : 3,
durationUnit : 'h',
name : 'Sports event',
iconCls : 'b-fa b-fa-basketball-ball'
},
{
id : 8,
resourceId : 'r7',
startDate : new Date(2017, 0, 1, 9),
duration : 1.5,
durationUnit : 'h',
name : 'Dad\'s birthday!',
iconCls : 'b-fa b-fa-birthday-cake',
// Custom styling from data
style : 'background-color : teal; font-size: 18px',
// Prevent default styling
eventStyle : 'none'
}
];
//endregion
const scheduler = new Scheduler({
appendTo : 'container',
resources,
events,
startDate : new Date(2017, 0, 1, 6),
endDate : new Date(2017, 0, 1, 10),
viewPreset : 'hourAndDay',
rowHeight : 50,
barMargin : 5,
multiEventSelect : true,
columns : [
{ text : 'Name', field : 'name', width : 130 }
]
});
The important thing to note here is the viewPreset, as you can see it is set to the hourAndDay. But it may not work if you have view preset like dayAndWeek which requires larger range.
Hi
we tried the code shared in the example but while setting the date dynamically post processing the task response from the api the bryntum-scheduler is not honouring it and is scrolling to some other date and showing 12 hours only whereas, we have set the start date as current time and end date as4 hours ahead of current time.
We are using hourAndDay in the viewPreset. Please, could you help on this.
I do not understand what you meant. Can you please explain the issue with the help of steps and a video clip? I tried changing the date using setTimeSpan method and it worked. See the clip:
Hi
We are on version - 5.6.8
We are fetching the data dynamically and then setting the response on the bryntum-scheduler.
Before this we have set the start and end date as below -
and in the HTML template we have added the schedulerConfig.startDate and schedulerConfig.endDate in the startDate and endDate attributes.
And now if we are trying to use the setTimeSpan then the bryntum-scheduler is scrolling to some other date and the time span is always showing 12 hours. It is not honouring the start and end date that we are trying to set. Even if we update the schedulerConfig.start and end date dynamically then also it is showing 12 hours only.
I am not able to reproduce it in the example shared above but this is what we are facing while trying to set the data dynamically.
I have also restricted the events to load only for the hours set between start and end date.
Please, let me know if you need any other details on it.
Thankyou!!
I am not able to reproduce it in the example shared above but this is what we are facing while trying to set the data dynamically.
I believe there must be bug in some older versions and you will have to upgrade as the issue is not reproducible in the latest versions. I am sorry, we can not fix something that is broken in the older versions but already works in the latest one. You will have to upgrade. Can you please try upgrading and see if everything works for you? If not please share a small runnable test case, which we can debug and log a ticket after reproducing the issue.
