Search code examples
javascriptreactjsfullcalendarfullcalendar-scheduleroutsystems

FullCalendar Multiple businesshours per resource in Resource TimeLineView

I want to view multiple business hours in the ResourceTimeLine view, so I implemented multiple business hours for by resource. For example, Monday to Wednesday - 8H to 17H and Thursday to Friday - 15H to 23H for a resource, other resource with another business hour.

In Docs of Fullcalendar component (https://fullcalendar.io/docs/businessHours-per-resource) says its possible with an array:

businessHours: [ // specify an array instead
      {
        daysOfWeek: [ 1, 2, 3 ], // Monday, Tuesday, Wednesday
        startTime: '08:00', // 8am
        endTime: '18:00' // 6pm
      },
      {
        daysOfWeek: [ 4, 5 ], // Thursday, Friday
        startTime: '10:00', // 10am
        endTime: '16:00' // 4pm
      }
    ]

In Outsystems I define my Business Hours an array and It's ok, appears the correct information, but when I drag and drop an event to a resource it doesn't invoke the action to save the change.

enter image description here

If I implement a single business hour it already invoke the action and save the change information when I drag and drop an event to a resource. But I need multiple business hours. I don't find the source of this problem. Can you please help me?

My Json object about Outsystems component of the Full Calendar, :

"newResource":{
        "id":"8547",
        "title":"Adelino Silva",
        "parentId":"1",
        "businessHours":{
            "defs":{
                "0":    {"groupId":"_businessHours", "title":"", "url":"", "rendering":"inverse-background", "extendedProps":{}, "publicId":"", "ui":{"startEditable":null, "durationEditable":null, "constraints":[], "overlap":null, "allows":[], "backgroundColor":"", "borderColor":"", "textColor":"", "classNames":["fc-nonbusiness"]}, "defId":"0", "sourceId":"", "allDay":false, "hasEnd":true, "resourceIds":[], "resourceEditable":null, "recurringDef":{"typeId":0,"typeData":{"daysOfWeek":[1,2,3,4,5],"startTime":{"years":0,"months":0,"days":0,"milliseconds":28800000},"endTime":{"years":0, "months":0,"days":0, "milliseconds":45000000}, "startRecur":null,"endRecur":null}, "duration":{"years":0, "months":0, "days":0, "milliseconds":16200000}}},
                "1":{"groupId":"_businessHours", "title":"", "url":"", "rendering":"inverse-background", "extendedProps":{},"publicId":"","ui":{"startEditable":null,"durationEditable":null,"constraints":[],"overlap":null,"allows":[],"backgroundColor":"","borderColor":"","textColor":"","classNames":["fc-nonbusiness"]},"defId":"1","sourceId":"","allDay":false,"hasEnd":true,"resourceIds":[],"resourceEditable":null,"recurringDef":{"typeId":0,"typeData":{"daysOfWeek":[1,2,3,4,5],"startTime":{"years":0,"months":0,"days":0,"milliseconds":48600000},"endTime":{"years":0,"months":0,"days":0,"milliseconds":61200000},"startRecur":null,"endRecur":null},"duration":{"years":0,"months":0,"days":0,"milliseconds":12600000}}}
                },
            "instances":{}
        },

Next video example without business hours and with multiple business hours.

Solution

  • I found the problem. The problem is on CallbackEvent Structure, not accept the BusinessHours list by Resource. The solution: I created a Resource structure with single business hour for CallbackEvent Structure and it's work.

    enter image description here