Scheduler Week View

[Xela]

Hello,

Is it possible to have a week view like: seven columns (one column for foeach day of the week) and 24 lines for each hour of the day?

Thanks!

[alex.l]

Hi Xela,

That you need here is ViewPreset https://www.bryntum.com/docs/scheduler/#Scheduler/preset/ViewPreset

I prepared an example how it may looks like - a week day with hours:

weekday-hours.png (422.49 KiB) Viewed 1922 times

Amount of days that will be displayed depends from period via startDate and endDate in your scheduler.
Here is an example of ViewPreset from the screenshot above:

const scheduler = new Scheduler({
 ...
     viewPreset : 'myPreset',
 ...
});

const myViewPreset = new ViewPreset({
    id   : 'myPreset',              // Unique id value provided to recognize your view preset. Not required, but having it you can simply set new view preset by id: scheduler.viewPreset = 'myPreset'

name : 'My view preset',        // A human-readable name provided to be used in GUI, e.i. preset picker, etc.

tickWidth  : 24,                // Time column width in horizontal mode
tickHeight : 50,                // Time column height in vertical mode
displayDateFormat : 'ddd HH:mm',// Controls how dates will be displayed in tooltips etc

shiftIncrement : 1,             // Controls how much time to skip when calling shiftNext and shiftPrevious.
shiftUnit      : 'day',         // Valid values are 'millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year'.
defaultSpan    : 7,             // By default, if no end date is supplied to a view it will show 12 hours

timeResolution : {              // Dates will be snapped to this resolution
    unit      : 'hour',         // Valid values are 'millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year'.
    increment : 1
},

headers : [                     // This defines your header rows from top to bottom
    {                           // For each row you can define 'unit', 'increment', 'dateFormat', 'renderer', 'align', and 'thisObj'
        unit       : 'day',
        dateFormat : 'ddd DD/MM'
    },
    {
        unit       : 'hour',
        dateFormat : 'HH'
    }
],

columnLinesFor : 1              // Defines header level column lines will be drawn for. Defaults to the last level.
});

PresetManager.add(myViewPreset);
scheduler.presets.add(myViewPreset);

More detailed information you can find in our docs:
https://www.bryntum.com/docs/scheduler/#Scheduler/preset/PresetManager
https://www.bryntum.com/docs/scheduler/#Scheduler/preset/ViewPreset

All best,
Alex

[Xela]

Hi Alex,

Thank you for your quick answer, but I'm not sure this is what I need.

Please take a look at the image below to make a better idea about what I'd want:

sample.png (31.35 KiB) Viewed 1911 times

Is it possible to implement such a view using the ViewPresent?

Thanks!

[mats]

That's a Calendar view, this will be possible in our upcoming Calendar product which should be out in 2-3 weeks time.

[Xela]

OK. Thank you for your clarification!