Our pure JavaScript Scheduler component


Post by hltob »

We use the scheduler pro with german locale (@bryntum/schedulerpro/locales/schedulerpro.locale.De.js)
Weekends are workingtime. When we add an allday entry on March 26th the entry will be extended to the next day. Only on this day! It must have something to do with the summertime changeover on this day.

allDay: true
draggable: false
duration: 1
durationUnit: "d"
eventColor: "#C4E538"
id: 11050
name: "FS1"
note: "TEST"
resizable: false
resourceId: 11044
startDate: "2023-03-26"
supportsRecurring: false
Attachments
scheduler-summertime-issue.PNG
scheduler-summertime-issue.PNG (14.43 KiB) Viewed 224 times

Post by marcio »

Hey hltob,

Are you able to reproduce that behavior in one of our demos? Or perhaps provide a sample project with your configuration for us to check? We would need more context regarding your implementation to understand better the issue.

Best regards,
Márcio


Post by hltob »

@marcio

I 've made some changes in a bryntum demo.

  • set new resources
  • set new events with an event on March 26.
  • removed zoom-levels
  • set startDate and edDate of scheduler

Is that enough to comprehend?

You see the event on march 26. is expanded to 2 days.

Attachments
scheduler-march-26-issue.PNG
scheduler-march-26-issue.PNG (118.4 KiB) Viewed 204 times

Post by alex.l »

Here is the code I used in our example https://bryntum.com/products/schedulerpro/examples/non-working-time/
and I cannot reproduce the issue.

import { SchedulerPro, EventHelper, PresetManager, StringHelper, EventModel } from '../../build/schedulerpro.module.js?466403';
import shared from '../_shared/shared.module.js?466403';

const
    zoomLevels = {
        minuteAndHour : 1,
        hourAndDay    : 1
    };

class ProEvent extends EventModel {
    static fields = [
        { name : 'durationUnit', defaultValue : 'hour' }
    ];
}

const scheduler = new SchedulerPro({
    // Limit zoom levels to those which use hours to make filtering non-working time works better in this demo
    
// A Project holds the data and the calculation engine for Scheduler Pro. It also acts as a CrudManager, allowing // loading data into all stores at once appendTo : 'container', startDate : '2023-03-23', endDate : '2023-03-28', rowHeight : 90, barMargin : 15, eventStyle : 'border', resourceImagePath : '../_shared/images/users/', // Custom viewPreset (based on 'hourAndDay') that displays a compact 24-hour bottom header viewPreset : { base : 'hourAndDay', tickWidth : 30, displayDateFormat : 'll HH:mm', headers : [ { unit : 'day', dateFormat : 'ddd DD/MM' //Mon 01/10 }, { unit : 'hour', dateFormat : 'HH' } ] }, features : { // Not using the dependencies feature dependencies : false }, columns : [ // Column that displays a thumb for the resource { type : 'resourceInfo', text : 'Manager' } ], // Custom event renderer that displays small thumbs for assigned resources eventRenderer({ eventRecord, renderData }) { const durationColors = { 0 : 'blue', 1 : 'indigo', 2 : 'violet' }; // Project length determines color renderData.eventColor = durationColors[Math.min(Math.floor(eventRecord.duration / 9), 2)]; // Custom content, displays images for assigned resources + event name return [ { html : StringHelper.encodeHtml(eventRecord.name) }, { className : 'assigned', children : eventRecord.resources.map(resource => ({ tag : 'img', draggable : false, src : resource.image !== false ? this.resourceImagePath + resource.name.toLowerCase() + '.jpg' : null, dataset : { resourceId : resource.id } })) } ]; }, listeners : { paint({ firstPaint }) { if (firstPaint) { // To have resource images in events redrawn when assignments change, do a full refresh this.assignmentStore.on({ add : 'refreshWithTransition', remove : 'refreshWithTransition', thisObj : this }); // Select row when clicking a resource image on an event EventHelper.on({ element : this.element, delegate : '.assigned img', thisObj : this, click(event) { this.selectRow({ record : event.target.dataset.resourceId }); } }); } } }, tbar : [ // Add a button to filter out non-working time { ref : 'filterButton', type : 'button', text : 'Filter out non-working time', toggleable : true, icon : 'b-fa-square', pressedIcon : 'b-fa-check-square', onToggle({ pressed }) { if (pressed) { // Filter that keeps working time ticks in time axis scheduler.timeAxis.filter(t => scheduler.project.calendar.isWorkingTime(t.startDate, t.endDate)); } else { // Restore all ticks scheduler.timeAxis.clearFilters(); } } } ] }); scheduler.resources = [{ id: 1, name : 'Name' }]; scheduler.events = [{ allDay: true, draggable: false, duration: 1, durationUnit: "d", eventColor: "#C4E538", id: 11050, name: "FS1", note: "TEST", resizable: false, resourceId: 1, startDate: "2023-03-26", supportsRecurring: false }]

Could you please attach here the code you used and link to example you used so we will be able to reproduce this.

I also tried to reproduce in https://bryntum.com/products/schedulerpro/examples/localization/ using Deutch language as current.

Screenshot 2023-03-21 at 09.05.52.png
Screenshot 2023-03-21 at 09.05.52.png (120.54 KiB) Viewed 186 times

All the best,
Alex


Post by hltob »

Good morning alex,

here is all what i did 1 minute ago:

  1. I opened the linked demo of your last post (https://bryntum.com/products/schedulerpro/examples/non-working-time/)
  2. I pressed "copy-code"-Button of you last post
  3. I pasted the code in the demo

That's all. And I see the event expanded over TWO DAYS instead of ONE DAY.

Attachments
scheduler-march-26-issue-2023-03-21.PNG
scheduler-march-26-issue-2023-03-21.PNG (163.36 KiB) Viewed 183 times

Post by alex.l »

Hi hltob,

I found the cause, I was needed to change timezone to Germany or other country that has DST at March 26.
I reproduced this, confirmed a bug. Here is a ticket to track the status: https://github.com/bryntum/support/issues/6419

All the best,
Alex


Post by hltob »

Ok thank you, alex.


Post Reply