Our pure JavaScript Scheduler component


Post by pennyp »

Hi all and thanks for the amazing library. We are using SchedulerPro v4.3.9.

In our business we have the need to display days that start with an offset from a regular day. We have achieved to generate the bottom header ticks as we need via the 'generateTicks' callback (e.g. offset the tick 2 hours from a regular day) but we also need to align the top header tick.

Essentially we need to display that the day starts from the offset given.

Is there a similar way to do this as we did for the bottom ticks?

Another approach we thought is to display this through header renderers but this way we would have to also adjust schedule tooltips etc. (much more effort)

Any info on this would be appreciated.
Thanks a lot!

Attachments
scheduleDay.PNG
scheduleDay.PNG (4.44 KiB) Viewed 420 times

Post by marcio »

Hey,

Did you check our timeaxis example?? https://bryntum.com/examples/scheduler/timeaxis/ I believe that will help you solve your issue?

Do you want to keep the 0 am and 1 am time, and move the "start" to 2 am?

Best regards,
Márcio


Post by pennyp »

Exactly, I need the 0am and 1am to be considered as ticks of the previous day and the day (top header tick) to start from 2am. I checked the timeaxis examples but I wasn't able to achieve this. I generate the ticks as expected but I can't handle in which top header tick they will be under.

Is there sth I miss from the example ? Thanks again


Post by tasnim »

Is it what you are looking for?
Image

Please check the code below to achieve that :

const scheduler = new SchedulerPro({
    project : {
        // autoLoad : true,
        // transport : {
        //     load : {
        //         url : './data/data.json'
        //     }
        // }
    },

appendTo : 'container',
startDate : new Date(2019, 1, 11),
endDate   : new Date(2019, 1, 16),
viewPreset : {
    displayDateFormat : 'H:mm',
    tickWidth         : 25,
    shiftIncrement    : 1,
    shiftUnit         : 'WEEK',
    timeResolution    : {
        unit      : 'MINUTE',
        increment : 60
    },
    headers           : [
        {
            unit       : 'DAY',
            align      : 'center',
            dateFormat : 'ddd L'
        },
        {
            unit       : 'HOUR',
            align      : 'center',
            dateFormat : 'H'
        }
    ]
},

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 : 'Fred' },
            { id : 'r8', name : 'Lisa' },
            { id : 'r9', name : 'Annie' },
            { id : 'r10', name : 'Dan' }
        ],

        events : [
            {
                id         : 1,
                resourceId : 'r9',
                startDate  : '2019-02-11 12:00',
                endDate    : '2019-02-11 16:00',
                name       : 'Some task',
                eventColor : 'pink'
            },
            {
                id         : 2,
                resourceId : 'r2',
                startDate  : '2019-02-12 08:00',
                endDate    : '2019-02-12 14:00',
                name       : 'Other task',
                eventColor : 'gray'
            },
            {
                id         : 3,
                resourceId : 'r10',
                startDate  : '2019-02-15 08:00',
                endDate    : '2019-02-15 14:00',
                name       : 'Important task',
                eventColor : 'orange'
            }
        ],

        // Setup static columns
        columns : [
            { text : 'Name', width : 100, field : 'name' }
        ],

timeAxis : {
    continuous : false,
    generateTicks(start, end, unit, increment) {
        const ticks = [];
        while (start < end) {
            if (unit !== 'hour' || start.getHours() >= 2 && start.getHours() <= 21) {
                ticks.push({
                    id        : ticks.length + 1,
                    startDate : start,
                    endDate   : DateHelper.add(start, increment, unit)
                });
            }
            start = DateHelper.add(start, increment, unit);
        }
        return ticks;
    }
}
});

Post by pennyp »

Hi and thanks for the quick replies!
Unfortunately no, what I am looking for is
| Tue 2/10/19_________________________________________________________________________|
|-------------------------------------------------------------------------------------------------------------|
|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18|19|20|21|22|23|24|1|

Last edited by pennyp on Thu Jun 30, 2022 3:51 pm, edited 1 time in total.

Post by tasnim »

Please check the code below to achieve it:

const scheduler = new SchedulerPro({
    rowHeight                 : 60,
    zoomOnTimeAxisDoubleClick : false,
    appendTo : 'container',
    startDate : new Date(2019, 1, 11, 2),
    endDate   : new Date(2019, 1, 16),
    viewPreset : {
        displayDateFormat : 'H:mm',
        tickWidth         : 25,
        shiftIncrement    : 1,
        shiftUnit         : 'WEEK',
        timeResolution    : {
            unit      : 'MINUTE',
            increment : 60
        },
        headers           : [
            {
                unit       : 'DAY',
                align      : 'center',
                dateFormat : 'ddd L'
            },
            {
                unit       : 'HOUR',
                renderer   : (startDate) => startDate.getHours() === 0 ? 24 : startDate.getHours(),
                align      : 'center',
                dateFormat : 'HH'
            }
        ]
    },

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 : 'Fred' },
    { id : 'r8', name : 'Lisa' },
    { id : 'r9', name : 'Annie' },
    { id : 'r10', name : 'Dan' }
],

events : [
    {
        id         : 1,
        resourceId : 'r9',
        startDate  : '2019-02-11 12:00',
        endDate    : '2019-02-11 16:00',
        name       : 'Some task',
        eventColor : 'pink'
    },
    {
        id         : 2,
        resourceId : 'r2',
        startDate  : '2019-02-12 08:00',
        endDate    : '2019-02-12 14:00',
        name       : 'Other task',
        eventColor : 'gray'
    },
    {
        id         : 3,
        resourceId : 'r10',
        startDate  : '2019-02-15 08:00',
        endDate    : '2019-02-15 14:00',
        name       : 'Important task',
        eventColor : 'orange'
    }
],

// Setup static columns
columns : [
    { text : 'Name', width : 100, field : 'name' }
],

timeAxis : {
    continuous : false,
    generateTicks(start, end, unit, increment) {
        const ticks = [];
        while (start < end) {
            if (unit !== 'hour' || start.getHours() >= 0 && start.getHours() <= 23) {
                ticks.push({
                    id        : ticks.length + 1,
                    startDate : start,
                    endDate   : DateHelper.add(start, increment, unit)
                });
            }
            start = DateHelper.add(start, increment, unit);
        }
        return ticks;
    }
}
});

Docs : https://bryntum.com/docs/gantt/api/Scheduler/preset/ViewPreset#defining-custom-header-rows


Post by pennyp »

Tansim, the code snippet above just displays the 0am as 24 and 'generateTicks' does not really add sth!

What I need is to shift the start of a day to another hour. Please check the screenshot and the example I have posted.

Think of it similar to start of the week. If first day of the week was Tuesday and I had a unit-increment= 1-week the header row would generate ticks like:
|Tue. 28/06/2022|Tue 05/07/2022 |

right?

So, If I have start of day at 2 am, I need a relevant iteration on the headers generated.
unit = 'day', increment = 1
|2 am___1am|2am_1am|2am__1am,|

Though I can successfully generate the ticks of the bottom header, I need to align the start of a day! (screenshot on initial post)


Post by pennyp »

What I was actually looking for was 'cellGenerator' on view presets headers! This way I can generate the cells I need.

Thanks for your time everyone!!


Post Reply