Hi Bryntum team,
I've tried to create a few viewPresets based on this example
https://bryntum.com/products/scheduler/examples/configuration/
It does work, however, I've run into a strange issue when I'm switching between the Weekly presets, all the Non-working time shading and the CurrentTime indicator disappears but this isn't the case when I'm switching between the Monthly views, also switching to Monthly and then Weekly fixes it.
Here's a draft code what I was trying to do in the online editor and the result is the same. Can you give me hint what I'm doing wrong?
Thank you in advance,
Gergő
import { DateHelper, EventModel, Scheduler, PresetManager } from '../../build/scheduler.module.js?465296';
import shared from '../_shared/shared.module.js?465296';
//region Presets & Widgets
PresetManager.registerPreset("currentWeek", {
name: 'Current Week',
displayDateFormat: 'H:mm',
tickWidth: 35,
defaultSpan: 1,
shiftUnit: 'day',
shiftIncrement: 1,
timeResolution: {
unit: 'hour',
increment: 1
},
headers: [
{
unit: 'Week',
align: 'center',
renderer : (startDate, endDate) => `CW ${DateHelper.format(startDate, 'WW')}`
},
{
unit: 'Day',
align: 'center',
dateFormat: 'ddd L'
},
{
unit: 'HOUR',
align: 'center',
increment : 6,
dateFormat: 'HH'
}
],
mainHeaderLevel: 0
});
PresetManager.registerPreset("nextWeek", {
name: 'Next Week',
base: 'currentWeek'
});
PresetManager.registerPreset("lastWeek", {
name: 'Last Week',
base: 'currentWeek'
});
PresetManager.registerPreset("today", {
name: 'Today',
displayDateFormat: 'H:mm',
tickWidth: 35,
defaultSpan: 1,
shiftUnit: 'day',
shiftIncrement: 1,
timeResolution: {
unit: 'minutes',
increment: 15
},
headers: [
{
unit: 'Week',
align: 'center',
renderer : (startDate, endDate) => `CW ${DateHelper.format(startDate, 'WW')}`
},
{
unit: 'Day',
align: 'center',
dateFormat: 'ddd L'
},
{
unit: 'HOUR',
align: 'center',
increment : 1,
dateFormat: 'HH'
}
],
mainHeaderLevel: 1
});
PresetManager.registerPreset("currentMonth", {
name: 'Current Month',
displayDateFormat: 'H:mm',
tickWidth: 50,
defaultSpan: 4,
shiftUnit: 'week',
shiftIncrement: 1,
timeResolution: {
unit: 'hour',
increment: 1
},
headers: [
{
unit: 'Week',
align: 'center',
renderer : (startDate, endDate) => `CW ${DateHelper.format(startDate, 'WW')}`
},
{
unit: 'Day',
align: 'center',
dateFormat: 'dd DD'
}
],
mainHeaderLevel: 0
});
PresetManager.registerPreset("nextMonth", {
name: 'Next Month',
base: 'currentMonth'
});
const requiredPresetIds = {
currentWeek : 1,
today: 1,
nextWeek: 1,
lastWeek: 1,
currentMonth: 1,
nextMonth: 1
},
// The set of available Presets is what provides the zoom levels.
presets = PresetManager.records.filter(p => requiredPresetIds[p.id]);
//endregion
//region Data
const
resources = [
{ id : 1, name : 'Arcady', role : 'Core developer', eventColor : 'purple' },
{ id : 2, name : 'Dave', role : 'Tech Sales', eventColor : 'indigo' },
{ id : 3, name : 'Henrik', role : 'Sales', eventColor : 'blue' },
{ id : 4, name : 'Linda', role : 'Core developer', eventColor : 'cyan' },
{ id : 5, name : 'Maxim', role : 'Developer & UX', eventColor : 'green' },
{ id : 6, name : 'Mike', role : 'CEO', eventColor : 'lime' },
{ id : 7, name : 'Lee', role : 'CTO', eventColor : 'orange' }
],
events = [
{
id : 1,
resourceId : 1,
percentDone : 60,
startDate : new Date(2017, 0, 1, 10),
endDate : new Date(2017, 0, 1, 12)
},
{
id : 2,
resourceId : 2,
percentDone : 20,
startDate : new Date(2017, 0, 1, 12),
endDate : new Date(2017, 0, 1, 17)
},
{
id : 3,
resourceId : 3,
percentDone : 80,
startDate : new Date(2017, 0, 1, 14),
endDate : new Date(2017, 0, 1, 16)
},
{
id : 4,
resourceId : 4,
percentDone : 90,
startDate : new Date(2017, 0, 1, 8),
endDate : new Date(2017, 0, 1, 11)
},
{
id : 5,
resourceId : 5,
percentDone : 40,
startDate : new Date(2017, 0, 1, 15),
endDate : new Date(2017, 0, 1, 17)
},
{
id : 6,
resourceId : 6,
percentDone : 70,
startDate : new Date(2017, 0, 1, 16),
endDate : new Date(2017, 0, 1, 18)
}
];
//endregion
class EventModelWithPercent extends EventModel {
static get fields() {
return [
{ name : 'percentDone', type : 'number', defaultValue : 0 }
];
}
}
const scheduler = new Scheduler({
appendTo : 'container',
resourceImagePath : '../_shared/images/users/',
features : {
stripe : true,
sort : 'name',
nonWorkingTime : true,
resourceTimeRanges : true,
timeRanges : {
showCurrentTimeLine : true
}
},
columns : [
{
type : 'resourceInfo',
text : 'Staff',
width : '10em'
}
],
resources : resources,
project: {
eventStore : {
modelClass : EventModelWithPercent,
data : events
},
calendar : 'workinghours',
// Inline calendar tree
calendarsData : [
// Calendar definition
{
id : 'workinghours',
name : 'Working Hours',
unspecifiedTimeIsWorking : false,
// Intervals to define all SA and SU as non-working days
intervals : [
{
recurrentStartDate : 'on Sat at 0:00',
recurrentEndDate : 'on Mon at 0:00',
isWorking : false
},
{
recurrentStartDate : 'at 8:00',
recurrentEndDate : 'at 16:00',
isWorking : true
}
]
}
]
},
startDate : DateHelper.startOf(new Date(), 'week'),
// Use our custom list of just the ones we plucked out of the PresetManager
presets,
viewPreset : 'currentWeek',
eventRenderer : ({ eventRecord, renderData }) => {
const value = eventRecord.percentDone || 0;
// Add a child to the event element (b-sch-event)
renderData.children.push({
className : 'value',
style : {
width : `${value}%`
},
html : value
});
},
listeners : {
presetChange: function ({from, to}) {
if (to.id == 'today') {
this.startDate = DateHelper.startOf(new Date());
}
else if (to.id == 'currentWeek') {
this.startDate = DateHelper.startOf(new Date(), 'week');
}
else if (to.id == 'nextWeek') {
this.startDate = DateHelper.startOf(DateHelper.add(new Date(), 1, 'week'), 'week');
}
else if (to.id == 'lastWeek') {
this.startDate = DateHelper.startOf(DateHelper.add(new Date(), -1, 'week'), 'week');
}
else if (to.id == 'currentMonth') {
this.startDate = DateHelper.startOf(new Date(), 'month');
}
else if (to.id == 'nextMonth') {
this.startDate = DateHelper.startOf(DateHelper.add(new Date(), 1, 'month'), 'month');
}
}
},
tbar : [
{
type : 'viewpresetcombo',
width : 200,
ref : 'presetCombo',
presets : presets.map(p => p.id),
picker : {
maxHeight : 500
}
}
]
});