Our pure JavaScript Scheduler component


Post by flamarre »

Greetings,
Two Questions:
First- Is there a way to remove the concept of hours and minutes completely from the Scheduler even at the most zoomed in? We are only working with Days and it's causing me some time zone issues and when resizing an Event the time comes into play and I would like to avoid that completely.

Second-
I have something of a specific demand that came to me to have the normal non-working days of Sat-Sun but still be able to have events end on Saturday and Sunday and not count them in the duration. ( i can handle the duration manually if it's not possible to do that.)

The reason is we want to retain the styling that comes with the non-working days that separate weekends from the rest visually. I found that Events could have calendars assigned to them specifically and hoped to have one calendar for the project and one calendar for each event.

I also have an added complexity of having two Scheduler Pro on the same page which are Linked together. In both cases the weekends should not be added to the duration but at this point I will probably calculate the duration manually. My goal is to be able to display events that end on a weekend and have the specific styling the comes with the non-working time setting from the calendar.

I have a project calendar which is setup like this:

return new CalendarModel({
    id: 'weekends',
    name: 'Weekends',
    intervals: [
      {
        recurrentStartDate: 'on Sat at 0:00',
        recurrentEndDate: 'on Mon at 0:00',
        isWorking: false,
      },
    ],
  });
  

Now I wanted to create essentially the same calendar where weekends are working days which is identical but isWorking = true.

  return new CalendarModel({
    id: 'week',
    name: 'Week',
    intervals: [
      {
        recurrentStartDate: 'on Sat at 0:00',
        recurrentEndDate: 'on Mon at 0:00',
        isWorking: true,
      },
    ],
  });
  

The way I wanted to assign them is when i'm initializing the day I want to set the project calendar, then each event's calendar afterwards like so:

 
        schedulerProRef.project = project;
        schedulerProRef.project.calendar = createWeekendCalendar();

    project.eventStore.forEach((event: EventModel) => {
      event.calendar = createAllWeekCalendar();
    });

It doesn't seem to work. I have the same result as before when Events will not end on a Saturday and will end on Friday instead.
Do I have the correct approach? What should I do ?

Thanks for the support.


Post by marcio »

Hey flamarre,

Thanks for reaching out.

To address your first question, you can check the following documentation https://bryntum.com/products/schedulerpro/docs/api/Scheduler/preset/PresetManager#intro, where you'll need to remove or override the presets that contain the hours/minutes configuration to visually don't show hours/minutes. Regarding the scheduling calculation, you'll need to work with Date objects even though you don't consider the time in the calculation, but you could try to set https://bryntum.com/products/schedulerpro/docs/api/SchedulerPro/model/CalendarModel#field-ignoreTimeZone to true to ignore the timeZone in the calculations.

Regarding your second question, you can achieve the styling for non-working days while allowing events to end on weekends by using two calendars: one for the project and one for the events. The project calendar can define weekends as non-working, while the event calendar can define weekends as working. This way, the visual separation of weekends will be maintained, but events can still end on weekends.

The snippets that you shared look correct, so besides ensuring that the calendar property is correctly set for both the project and the events, if events are still not ending on weekends, check if there are any constraints or dependencies affecting the scheduling.

If you have linked Scheduler Pro instances, make sure both are configured similarly to maintain consistency in styling and scheduling logic.

Let me know if you need further assistance! If that doesn't work for you, a test case would help a lot to provide you with better assistance.

Best regards,
Márcio

How to ask for help? Please read our Support Policy


Post by flamarre »

Hello, thanks for the reply.

I have tried several ways to make this work but it seems like despite my best efforts the calendar doesn't seem to set on the events. Is there perhaps a priority system that is preventing the events from using their calendars?

It seems to be set correctly on the EventModel when the code I provided before is ran, but I can't find the calendar on the SchedulerEventModel once it's been rendered to validate. It seems to me like the project calendar overrules everything.

Is there an example or a demo that I can examine to see it in action or use as a base to replicate my problem?

Alternatively, would it be possible to add styling on Saturdays and Sundays while using only a Project Calendar and no event calendar. What would be the best way to replicate the styling that non-working time is using?

Thanks


Post by marcio »

Hey flamarre,

Events calendar should have priority over project calendar, you can see that in action here https://bryntum.com/products/schedulerpro/examples/event-non-working-time/.

Regarding styling weekends without using an event calendar, you can use the ResourceNonWorkingTime feature to visually highlight non-working days like Saturdays and Sundays. You can enable this feature and customize the styling using CSS classes. Here's a basic setup:

const scheduler = new SchedulerPro({
    features : {
        resourceNonWorkingTime : true
    },
    project : {
        calendar : createWeekendCalendar()
    }
});

For more detailed examples, you can refer to the Resource Non-Working Time Demo.

If you continue to face issues, providing a minimal test case would help in diagnosing the problem further.

Best regards,
Márcio

How to ask for help? Please read our Support Policy


Post by flamarre »

Upon further testing I found that events don't ever apply a calendar even when I don't set a Project calendar and the events get assigned a Weekend non-working time calendar (the one project had) I can end an event on a weekend even though the calendar doesn't allow it. I think my problem may be that events don't register as having a calendar assigned to them.

About the styling, I actually meant styling saturdays and sundays without any calendar on either project or event. If I can't get this calendar to work, my best alternative would be to style saturdays and sundays and calculate the duration manually.

Could you provide a base working sample code that I could adjust to make the test case? My own code is quite big and I can't easily make a new project from scratch.

Thank you!


Post by flamarre »

I attached 2 files which shows the calendar attached to my event on the event store (which indicates the weekend is non-working) and the event in the scheduler which i'm able to end on a saturday.

This is the reason why I feel my calendar is not being considered on the events. Is there something else I am missing?

Thank you for the help!

Attachments
Capture d’écran 2025-05-16 152100.png
Capture d’écran 2025-05-16 152100.png (8.99 KiB) Viewed 136 times
Capture d’écran 2025-05-16 152008.png
Capture d’écran 2025-05-16 152008.png (44.66 KiB) Viewed 136 times

Post by marcio »

Hey,

You can use the demo that I shared earlier https://bryntum.com/products/schedulerpro/examples/event-non-working-time/ to base yourself, or this React one https://bryntum.com/products/schedulerpro/examples/frameworks/react-vite/highlight-event-calendars/dist/.

From there, we have a starting point to better assist you on this, with an example.

Best regards,
Márcio

How to ask for help? Please read our Support Policy


Post by flamarre »

Hello thank you for providing the examples.

In the second example provided, if you try to slot the event "Moderna #2" into a weekend it doesn't allow it even though the calendar on the event should accept it. This seems similar to the problem I am having. The slot shows as open, but when I drag it there it gets bounced to following open spot on Monday.

Capture d’écran 2025-05-16 162518.png
Capture d’écran 2025-05-16 162518.png (37.18 KiB) Viewed 128 times

Here is the related calendar info:

 {
        "id"                       : "vaccination",
        "name"                     : "Vaccination slots",
        "unspecifiedTimeIsWorking" : false,
        "intervals"                : [
          {
            "name"               : "Morning slot",
            "recurrentStartDate" : "at 9:00",
            "recurrentEndDate"   : "at 10:00",
            "isWorking"          : true
          },
          {
            "name"               : "Lunch slot",
            "recurrentStartDate" : "at 11:00",
            "recurrentEndDate"   : "at 12:00",
            "isWorking"          : true
          },
          {
            "name"               : "Afternoon slot",
            "recurrentStartDate" : "at 13:00",
            "recurrentEndDate"   : "at 14:00",
            "isWorking"          : true
          },
          {
            "name"               : "Late afternoon slot",
            "recurrentStartDate" : "at 15:00",
            "recurrentEndDate"   : "at 16:00",
            "isWorking"          : true
          }
        ]
      }

Thanks


Post by marcio »

Hey flamarre,

The start date is not a valid slot (you don't have the blue highlight there). That's why you can drop the event there.

What changes did you make in the demo?

Best regards,
Márcio

How to ask for help? Please read our Support Policy


Post by flamarre »

I didn't change anything, that is the online demo, I just zoomed out and dragged the task on the friday next to it then tried to drag in an open slot on the weekend. The highlight is present in the weekend as you can see in the screenshot which reflects the calendar set on the event "Late afternoon slot".

I just took a screenshot while resizing the event to show the content inside but it's not actually on that slot, it's just in the middle of being resized.

After i took the screenshot it slotted back in the blue space on the monday slot it is in. I just wanted to show the blue highlight on the weekend day which should be a valid spot since it fits the vaccination calendar.


Post Reply