Premium support for our pure JavaScript UI components


Post by gorakh.nath »

Hi Team,
I have to show more then one working and non-working time in single day, for that I have to assign more then one calendar to the resources.
for example : https://www.bryntum.com/docs/scheduler-pro/api/SchedulerPro/feature/ResourceNonWorkingTime
We can see in the calendar we have added "calendar" : "day", but I have to assign here multiple values.

  "resources" : {
      "rows" : [
          {
              "id"         : 1,
              "name"       : "George",
              "calendar"   : "day",
              "role"       : "Office",
              "eventColor" : "blue"
          },
          {
              "id"         : 2,
              "name"       : "Rob",
              "calendar"   : "day",
              "role"       : "Office",
              "eventColor" : "blue"
          }
       ]

I want to achieve this:-

Attachments
Screenshot 2022-09-20 at 1.35.52 PM.png
Screenshot 2022-09-20 at 1.35.52 PM.png (141.98 KiB) Viewed 180 times

Post by arcady »

You don't need multiple calendars for a resource. Each calendar has a collection of intervals (working or non working ones). So you basically need to add intervals for those working/non-working periods.

Calendars guide: https://www.bryntum.com/docs/scheduler-pro/guide/SchedulerPro/basics/calendars


Post by tasnim »

Hi,

I've changed a bit in our resources-non-working time example

            {
                "id"                       : "early",
                "name"                     : "Early shift",
                "unspecifiedTimeIsWorking" : false,
                "intervals"                : [
                    {
                        "recurrentStartDate" : "at 6:00",
                        "recurrentEndDate"   : "at 14:00",
                        "isWorking"          : true
                    },
                    {
                        "recurrentStartDate" : "at 16:00",
                        "recurrentEndDate"   : "at 20:00",
                        "isWorking"          : true
                    }
                ]
            }

Here is how it looks like

Attachments
Screenshot 2022-09-20 193353.png
Screenshot 2022-09-20 193353.png (35.7 KiB) Viewed 163 times

Post by gorakh.nath »

Can we add different color here:-
Always it is coming white for working time but I need different color as shown in the screenshot above.

"intervals"                : [
                    {
                        "recurrentStartDate" : "at 6:00",
                        "recurrentEndDate"   : "at 14:00",
                        "isWorking"          : true
                    },
                    {
                        "recurrentStartDate" : "at 16:00",
                        "recurrentEndDate"   : "at 20:00",
                        "isWorking"          : true
                    }
                ]

Post by tasnim »

You can use this css to achieve it

.b-grid-cell.b-timeaxis-cell.b-sch-timeaxis-cell {
    background-color: #00e0ffd4;
}
.b-sch-resourcetimerange.b-sch-resourcenonworkingtime {
    background-color: rgb(247,247,247);
}
Attachments
Screenshot 2022-09-20 214753.png
Screenshot 2022-09-20 214753.png (24.21 KiB) Viewed 151 times

Post Reply