Our pure JavaScript Scheduler component


Post by Highnoon »

Hello,

i am using your nested events for drawing my events prepending a travel time.

        eventBodyTemplate: function (value) {
                return "<div class=\"nested\" style=\"left: " + value.left + "px;width: " + value.width + "px\">" + value.name + "</div >";
        },
        // Custom event renderer that applies colors and display events location
        eventRenderer: function (_ref) {
            var eventRecord = _ref.eventRecord,
                resourceRecord = _ref.resourceRecord,
                tplData = _ref.tplData;

        var dateToPx = function (date) { return scheduler.getCoordinateFromDate(date) - tplData.left;};
        var datediffToPx = function (d1, d2) { return scheduler.getCoordinateFromDate(d2) - scheduler.getCoordinateFromDate(d1);};
        var eventText = "";

        if (eventRecord.TRAVELTIME) {
            var dTP = bryntum.scheduler.DateHelper.add(eventRecord.startDate, eventRecord.TRAVELTIME, "seconds");
            return {
                left: dateToPx(dTP),
                width: datediffToPx(dTP, eventRecord.endDate),
                name: eventText
            };
        } else {
            return {
                left: dateToPx(eventRecord.startDate),
                width: datediffToPx(eventRecord.startDate, eventRecord.endDate),
                name: eventText
            };
        }
    },

This is close to your solution in the examples. It works perfect but now i want to integrate 'working time'.

        workingTime : {
             fromDay  : 0,
             toDay    : 7,
             fromHour : 6,
             toHour : 22
        },

The nested event is not working anymore. dateToPx and datediffToPx are not working properly. Is there something to to look for. Properties in presets or setting start/end according to preset?

THX


Post by saki »

Which version of Scheduler? workingTime results in non-continuous time axis however, this should be supported by getCoordinateFromDate function.

In any case a runnable showcase that would show the issue would expedite analysis and/or fixing the issue.


Post by Highnoon »

Hello saki,

i am using Scheduler Version 2-2-5 because of IE11. Maybe this could be part of the problem.


Post by saki »

4.1.0-4.1.2 should supports IE11, we are only going to drop IE11 support fully in the next major version. So the first advise would be to try to upgrade.


Post by Highnoon »

Hi,

this problems keeps me busy so i will do a second shot.
This is my event it keeps a travel time (2 hours). So please start Bryntum.html.

bry1.png
bry1.png (19.86 KiB) Viewed 981 times

The hatched area is the 2 hours travel time. event start at 9:15 shown in tooltip.

The eventRenderer + eventBodyTemplate uses getCoordinateFromDate or getTimeSpanDistance to calculate left and width of the event similar as in nested event example.

It works except a workingTime is set in scheduler.

So please activate workingTime by setting this in Bryntum.html.

 var workingTime = true;//false;

And start it again. Now the following workingTime is used.

            let currentWorkingTime = {
                fromDay: 1,
                toDay: 6,
                fromHour: 8,
                toHour: 17
            };

The shown event from above is now completely hatched. If you resize browser its ok. Now please change preset in combobox by selecting 'Kalenderwoche'. In this preset and others width and left is not calculated in a right way as you see.

Is it necessary to align data with workingTime?
Am I using the presets in the right way?
Is it necessary to modify renderer?
.. or is there a bug?

Thank you


Post by Maxim Gorkovsky »

Hello.

The shown event from above is now completely hatched. If you resize browser its ok.

If you check DOM, you will see that <div class="nested"> is misplaced and has 0 height. It happens because event start before time span start (scheduler start date). For such events we add special CSS class b-sch-event-startsoutside and we use transform: translateX(..) style to shift content to the visible area.
Simplest way around would be to set scheduler start date a bit earlier. More difficult way would be to calculate this shift:

if (eventRecord.REISEDAUER) {
                        var dTP = bryntum.scheduler.DateHelper.add(eventRecord.startDate, eventRecord.REISEDAUER, "seconds");
                        return {
                            left: dateToPx(dTP) + (_ref.renderData.startsOutsideView ? _ref.renderData.left : 0),
                            width: datediffToPx(dTP, eventRecord.endDate),
                            name: eventText,
                            fixed: fix,
                            read: eventRecord.REZUGELESEN
                        };
                    } else {
                        return {
                            left: dateToPx(eventRecord.startDate) + (_ref.renderData.startsOutsideView ? _ref.renderData.left : 0),
                            width: datediffToPx2(eventRecord.startDate, eventRecord.endDate),
                            name: eventText,
                            fixed: fix,
                            read: eventRecord.REZUGELESEN
                        };
                    }

And also add some styles:

.b-sch-event-startsoutside .b-sch-event-content {
  overflow : visible;
  height: 100%;
}

Now please change preset in combobox by selecting 'Kalenderwoche'. In this preset and others width and left is not calculated in a right way as you see.

I am not sure what is wrong with event size? I'm hovering events and see they last for 1 day each. Please clarify what is expected result?

Is it necessary to align data with workingTime?

No, data should not be changed. View is meant to show data as is.

Am I using the presets in the right way?

Please refer to our configuration demo for guidance. presets should be array of view preset instances. It has changed in one of the major releases.


Post by Highnoon »

Hi,

your modifications are not successful. So I will try it again.
The html in the zip contains a variable which is set to false. In this case there is no working time and it works perfect. Please check the events this is the expected outcome.

and then change workingTime to true:

var workingTime = true;

The scheduler has now a working Time Monday to Friday from 8 to 5 as decribed above.

The first event left/top looks like this because his startDate is before visible Date.

nexttry1.png
nexttry1.png (7.3 KiB) Viewed 940 times

If you scroll the event out of the visible area and back it looks like this.

nexttry2.png
nexttry2.png (5.26 KiB) Viewed 940 times

This is the event shown above. 2 hours hatched and the rest with event color.

If you go to schedulers end date events with end after visible end looks like this.

nexttry3.png
nexttry3.png (5.23 KiB) Viewed 940 times

The whole event should be drawn in event color.


Post by Highnoon »

Maximum Attachment capacity exceed, so i need one more.
Please change to preset 'Woche'. The events are not drawn properly!

nexttry5.png
nexttry5.png (15.85 KiB) Viewed 940 times

If you choose 'Tag' it looks much better. So my question is there something wrong with presets. I did some modifications.

Could you please check this again.

Thank you


Post by alex.l »

Hi Highnoon,

You didn't attach your application, so there is nothing to check.

Unfortunately, our nested events demo doesn't support workingTime feature, we plan to add this functionality for SchedulerPro only for now, here is a feature request: https://github.com/bryntum/support/issues/1959
If you want to have this feature in the Scheduler, you could contact our sales and be a sponsor: https://www.bryntum.com/services/

All the best,
Alex

All the best,
Alex


Post by mats »

@highnoon - would this be useful? https://www.youtube.com/watch?v=oqlXbXmCvQI


Post Reply