Our powerful JS Calendar component


Post by Animal »

I think if you are using a start and end date, you should switch to the other mode of specifying the range.

Do not use range, but instead use

myView.setConfig({
    startDate,
    endDate
});

There are two different “modes” of specifying a date range. startDate to endDate, or startDate and range.


Post by nvondru »

I achieve the very same behavior (as shown in my last attached video) by doing any of the following:

v.range = rangeInDays + "d";
v.allDayEvents.range = rangeInDays + "d";

or

v.startDate = startDate;
v.allDayEvents.startDate = startDate;
v.range = rangeInDays + "d";
v.allDayEvents.range = rangeInDays + "d";

or

 v.setConfig({
     startDate: startDate,
     endDate: endDate,
     allDayEvents: {
         startDate: startDate,
         endDate: endDate,
     }
 });

For single days, it works perfectly fine.
For a range of days, the calendar needs some help to update properly, by toggling a resource (i didn't further investigate what events fired by that action actually causes the calendar to re-render)

Hoping this will be fixed as u mentioned.


Post by Animal »

As mentioned, this is the ticket under which these issues will be fixed: https://github.com/bryntum/support/issues/8891


Post by nvondru »

Thanks again!
One last request: Since toggling a resource causes the views to update correctly, could you lead me to a temporary workaround?
I'm having a hard time understanding what happens behind the scenes when a resource is turned on/off. I would like to somehow automatically trigger this "what ever it is" that leads to the views updating, after setting the ranges on my views.
As mentioned before, calendar.refresh() and view.refresh() both don't yield the intended result.


Post by Animal »

This is a very complex thing. I don't think there can be a temporary workaround.

I have the set of fixes and it's spread across six source files. We do issue patch releases frequently though, so you will not have long to wait.

One hint I can give you. If you are going to use an arbitrary date range, for the subviews of ResourceView, don't stay with using the default WeekView. That is tied to the assumption that it encapsulates one week.

Use

view : {
    type : 'dayview',
    ...other configs...
}

A DayView can encapsulate any arbitrary range of days, and this seems to be your requirement. Here is an example which is configured to use range : '2d': https://codepen.io/Animal-Nige/pen/RwdJgjR?editors=0010

WeekView is a small subclass of DayView with some presets to cover a range of one week.

I would like to create an example which illustrates this capability. Do you have a set of test data to share that I can use in a public-facing example which would make it look realistic? These types of examples are always the most useful to customers.


Post by nvondru »

I can share the data i'm working with, since it's no sensitive data. The data represents a radio broadcast grid.

I'm not quite sure what kind of data you would be interested in (what kind of demo you want to build), but i'm happy to provide a dataset to help you out. I'll give you a detailed insight into what solution i'm trying to build using Bryntum, so you you understand what my data is.

The goal is to create very flexible views that allow for comparison between scheduled broadcast events on different radio channels over arbitrary time ranges.

What i'm trying to achieve using you library is:

  • create 2 views (one grouping resource by day -> dayresource view/ and one grouping days by resource -> resource view)
  • both views should be capable of:
  • displaying an arbitrary range of days (could be a single day / could be multiple months)
  • displaying any combination of weekdays (show only mondays / show mondays and fridays / show all weekdays / etc.)
  • displaying any combination of existing resources

Some challenges i'm facing are:

  • the nature of the data leads to many very short events (only a couple of minutes long) -> the height of an event MUST match the actual length
  • the flexibility to choose arbitrary ranges and multiple resources lead to huge amounts of events, resources and days to be displayed at the same time. This leads to a very messy screen and need to be filtered (by using the above mentioned methods such as displaying only selected days & resources) as well as zooming vertically and horizontally
  • because a single event can be very tiny on the screen, i'm working on solutions how to display an event sensibly on mouseover
  • because resource view and dayresource view work quite a bit differently behind the scenes (e.g. resource view doesn't load it's subviews when it's not being displayed) i have a hard time syncing all the settings (such as nonworking days, zoom levels and eventfilters) accross both views

Post by nvondru »

I added a new video to my initial post (at the very bottom) showcasing the functionality described above, so you get a better picture of what my data is and what i'm trying to build. Let me know what data you would like me to provide for your demo.


Post by Animal »

Looks like it's mostly working

At 1:00 though, I see that "Breite" slider change and the resource widths become mismatched between the header and main event section:

Screenshot 2024-03-27 at 16.16.30.png
Screenshot 2024-03-27 at 16.16.30.png (97.92 KiB) Viewed 191 times

I think the header cannot shrink more because of its content:

Screenshot 2024-03-27 at 16.19.46.png
Screenshot 2024-03-27 at 16.19.46.png (75.76 KiB) Viewed 191 times

So use a min on that slider which prevents trying to shrink it too far.

Apart from that it looks good, and it seems to respond well.

If you can send me a JSON dataset with that data, I can make an example using it. I think it would be a good showcase.


Post by Animal »

I think there's some CSS from outside of Bryntum affecting things:

Screenshot 2024-03-27 at 16.28.47.png
Screenshot 2024-03-27 at 16.28.47.png (211.12 KiB) Viewed 189 times

Also, do you need the "Hoehe" slider? CTRL+mousewheel zooms the hour height in and out.


Post by nvondru »

Yes, i've noticed that issue too (there's some more that were not visible during this showcase). And i'll continue working on those.
I'm working off the docs and examples as much as i can, but there are some thigns i couldn't figure out yet. May i bother you with some (hopefully) minor questions about specific things i'd like to adjust?
If yes (i don't want to take too much of your time) where should i do so? Open new posts or continue in here?

Also, I have the JSON ready for you, where/how can I send it to you?


Post Reply