Our powerful JS Calendar component


Post by nvondru »

When changing the nonWorkingDays property of a calendar after initialization I encountered some unintended behavior (see attached video and follow my list of findings).

In the video i have watches for some relevant properties:

  • calendar.views[0] is a resource view, which in term has several dayViews as subviews. In the video this view is called "Gruppiert nach Kanal" and starts from 0:41 m
  • calendar.views[1] is a dayresource view. IN the video this is called "Gruppiert nach Tag" and goes from 0:00m - 0:43m

Now, when I set a day as nonWorkingDay during runtime, I made the following observations:

  • setting the value on a calendar doesn't update the views reegistered on that calendar (see 0:17 m)
  • after manually setting the value on all views, the dayresourceview updates correctly as intended (see m 0:22)
  • when doing the same action however, the resourceview does NOT update correctly (see from 0:41 m)
  • only the first subview of that resourceview reacts to the changes, and even though the allDayEvents updates it nonWorkingDays correctly, the dayHeaders of that view do not render correctly (see from 1:35 m)

Here is the initial configuration, as well as the code I use to update the nonWorking days, called by the menu. I hope this information is sufficient to help me out / fix a potential bug.

....

resource: {
    title: "Gruppiert nach Kanal",
    view: {
        type: "dayview",
        syncCalendarDate: false,
        range: rangeInDays + "d",
        allDayEvents: {
            fullWeek: false,
        },
        minEventHeight: "0px",
    },
    listeners: {
        layoutUpdate: "up.onViewLayout",
        show({ source: Widget }) {
            const { hourHeightSlider } = calendar.widgetMap;
            Widget.views?.forEach(subView => {
                subView.zoomTo?.(hourHeightSlider.value);
            });
        }
    },
},
dayresource: {
    title: "Gruppiert nach Tag",
    minEventHeight: "0px",
    syncCalendarDate: false,
    range: rangeInDays + "d",
    listeners: {
        layoutUpdate: "up.onViewLayout",
        show({ source: Widget }) {
            if (calendar) {
                const { hourHeightSlider } = calendar.widgetMap;
                Widget.zoomTo?.(hourHeightSlider.value);
            }
        }
    },
    
}, .... onToggleDay({ item, checked }) { var toggledDayIndex; switch (item.initialConfig.text) { case "Montag": toggledDayIndex = 1; break; case "Dienstag": toggledDayIndex = 2; break; case "Mittwoch": toggledDayIndex = 3; break; case "Donnerstag": toggledDayIndex = 4; break; case "Freitag": toggledDayIndex = 5; break; case "Samstag": toggledDayIndex = 6; break; case "Sonntag": toggledDayIndex = 0; break; default: } calendar.nonWorkingDays[toggledDayIndex] = !checked; calendar.views.forEach(v => { v.nonWorkingDays = calendar.nonWorkingDays; }); }, ...
Attachments
2024-03-27_19-32-01.mp4
(29.31 MiB) Downloaded 21 times

Post by Animal »

Changing nonWorkingDays dynamically should definitely work. I will add that to the current batch of fixes.


Post by Animal »

OK, You are mutating the object. It does work if you set the object:

myCalendar.nonWorkingDays = {1 : 1, 2 : 1};

That will make Mondays and Tuesdays disappear from all views.


Post by Animal »

I'll make Calendar observe its nonWorkingDays object and update on mutation in the next version. It's a much easier way for app developers. Keep that code and it will soon work.


Post by nvondru »

Very much appreciated!


Post by nvondru »

I implemented your suggested changes and the views now populate the 'nonWorkingDays' state correctly without manually looping through them and setting it. However a key issue still remains which I described above, visible in the video from 1:35m

In the resourceView only the first subview visibly reacts to the changes in nonWorkingDays and the dayHeaders (not quite sure what the correct naming on this is) don't update at all:

2024-03-28_08-15-52.png
2024-03-28_08-15-52.png (489.33 KiB) Viewed 325 times

Post by Animal »

In the next version, simply myCalendar.nonWorkingDays['1'] = true will work.

See how Monday disappears from all views as soon as the prop is set.

All will be fixed.

changeNonWorkingDay.gif
changeNonWorkingDay.gif (759.72 KiB) Viewed 320 times

Post by nvondru »

Ah I see, I thought those were two unrelated issues.
Thanks for clarification and quick action :)


Post Reply