Our pure JavaScript Scheduler component


Post by gergo.szathmari »

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 } } ] });

Post by alex.l »

Hi Gergő,

I cannot reproduce bugs you described here. I always see timeRanges and current time line. The only thing is that you have listeners that change startDate when preset changed, so sometimes it jumps to another date range with no current time line in visible area, so I need to scroll to see the time line.

Could you please attach video with bug you meant and steps to reproduce the problem?

All the best,
Alex


Post by gergo.szathmari »

Hi Alex, of course. As you can see when I switch view the current line is stuck to the left side (midnight 02/12) even though it shouldn't be visible at all and all of the timerange shading disappeared from weekends as well

Attachments
2023-02-09 09-38-22.mp4
(1.2 MiB) Downloaded 21 times

Post by alex.l »

I don't see that problem. Did you test it with our online examples?
Please check the video attached.

Attachments
Screen Recording 2023-02-10 at 16.35.22.mov
(5.08 MiB) Downloaded 19 times

All the best,
Alex


Post by gergo.szathmari »

Hi Alex, thank you for your reply. The issue indeed seems to be present only on my computer as it is working fine on my co-worker's PC as well. You can mark this ticket closed


Post by marcio »

Hey gergo.szathmari,

Glad that everything is ok now! Ticket closed! :)

Best regards,
Márcio


Post Reply