Rota Design

[Mahmoud]

I am currently designing a scheduler system based on a rota model.(REACT JS) The core components of this model include a rota period, a variety of shifts, and staff resources.

The rota period signifies a specific duration, typically ranging between one to three months, during which each staff member is allocated a pattern of shifts. The shifts represent different time slots within a day - such as morning, afternoon, and night - that can be assigned to a staff member. As for the staff members, they act as resources in the system.

All of these components are predefined and stored in a PostgreSQL database, with Express running on a Node.js framework. The rota period acts as a boundary for the scheduler, inactivating all dates that fall outside of the start and end dates of the rota period. The shift acts as a time element within the scheduler.

At present, we are uncertain about the best approach to implement this system. Our shifts are persistent and do not change. A typical staff member will have one or two shifts per day based on their work pattern.

The predefined shifts look like the following JSON structure:

{

"count": 3,

"data": [

{

"id": "1aa05c99-5804-46f6-b7b1-5d79bb556af5",

"name": "morning shift",

"color": "#ffffff",

"startTime": "7:0:0",

"endTime": "15:0:0"

},

{

"id": "eb6404ae-c5e8-4ab3-I 7e4b-c2e4801b4810",

"name": "late shift",

"color": "#fff88f",

"startTime": "12:0:0",

"endTime": "19:0:0"

},

{

"id": "a46a0a7a-06cf-4e70-82fa-e1ec199e779b",

"name": "nigh shift",

"color": "#ffffff",

"startTime": "19:0:0",

"endTime": "7:0:0"

}

]

}

A typical rota is represented as:

{

"count": 1,

"data": [

{

"id": "e8dee326-54d8-49b0-b8c4-afbd5dd54b29",

"name": "test rota 10",

"startDate": "2023-07-20T00:00:00.000Z",

"endDate": "2023-08-20T00:00:00.000Z"

}

]

}

The backend of our system expects the data in the following format:

{

"schedule": {

"rotaId": "30bee9df-2bb3-4905-adb6-4e93b077f2fd",

"staffSchedule": [

{

"staffId": "5584e7e0-330a-452c-99bd-2d513c215eac",

"shift":

{

"2023-07-20": ["a46a0a7a-06cf-4e70-82fa-e1ec199e779b","eb6404ae-c5e8-4ab3-I 7e4b-c2e4801b4810"],

"2023-07-21": ["eb6404ae-c5e8-4ab3-I 7e4b-c2e4801b4810"],

"2023-07-22": ["a46a0a7a-06cf-4e70-82fa-e1ec199e779b"],

"2023-07-23": ["1aa05c99-5804-46f6-b7b1-5d79bb556af5"]

}

}

]

}

Any insights on how we could approach the implementation would be greatly appreciated.

Thank you in advance for your assistance.
​

[Swathi Ravi]

Mahmoud,

You can achieve your requirement by giving the resource id to the respective shift tasks as shown in the below shared snippet.

Sample: https://stackblitz.com/edit/react-2wztgg-w3uqrt?file=index.js

[index.js]

 const data = extend([], dataSource.resourceData, null, true);

const categoryData = [

        { text: 'Staff 1', id: 1, color: '#df5286' },

        { text: 'Staff 2', id: 2, color: '#7fa900' },

        { text: 'Staff 3', id: 3, color: '#ea7a57' },

        { text: 'Staff 4', id: 4, color: '#5978ee' },

        { text: 'Staff 5', id: 5, color: '#df5286' },

        { text: 'Staff 6', id: 6, color: '#00bdae' }

    ];

    return (<div className='schedule-control-section'>

            <div className='col-lg-12 control-section'>

                <div className='control-wrapper'>

                    <ScheduleComponent eventSettings={{ dataSource: data }} >

                        <ViewsDirective>

                            <ViewDirective option='TimelineDay'/>

                            <ViewDirective option='TimelineWeek'/>

                            <ViewDirective option='TimelineWorkWeek'/>

                            <ViewDirective option='TimelineMonth'/>

                            <ViewDirective option='Agenda'/>

                        </ViewsDirective>

                    </ScheduleComponent>

                </div>

            </div>

        </div>);

[dataSource.json]

{

    "resourceData": [

        {

            "Id": 1,

            "Subject": "Morning Shift",

            "StartTime": "2023-01-01T04:00:00.000Z",

            "EndTime": "2023-01-01T06:30:00.000Z",

            "IsAllDay": false,

            "TaskId": 1

        },

        {

            "Id": 2,

            "Subject": "Evening Shift",

            "StartTime": "2023-01-01T07:00:00.000Z",

            "EndTime": "2023-01-01T09:15:00.000Z",

            "IsAllDay": false,

            "TaskId": 2

        },

        {

            "Id": 3,

            "Subject": "Night SHift",

            "StartTime": "2023-01-03T04:30:00.000Z",

            "EndTime": "2023-01-03T07:00:00.000Z",

            "IsAllDay": false,

            "TaskId": 3

        },

    ]

}

[Mahmoud]

Thank you that has worked flawlessly. 

[Mahmoud]

How we can set different working hours for different days for each resources? so that user allow booking on these specific time slots

Alice's Schedule 

Date: 01-01-2023 --- Business Hours: Morning (09:00 AM - 11:00 AM), Evening (03:00 PM - 05:00 PM) 

Date: 02-01-2023 ---  Business Hours: Morning (09:00 AM - 11:00 AM)

[Venkateshwaran Saravanakumar]

Hi Mahmoud,

Sample: https://stackblitz.com/edit/react-2wztgg-jygnbr?file=index.js

You can set the Multiple work hours on same day for every resource by using the setWorkHours method with the help of dataBinding and renderCell event, as shown in the below shared snippet.

[index.js]

 function onRenderCell(args) {

        if (args.element.classList.contains('e-work-hours') || args.element.classList.contains('e-work-cells')) {

            const groupIndex = parseInt(args.element.getAttribute('data-group-index'), 10);

            // Create an array with the classes 'staff1', 'staff2', 'staff3'

            const staffClasses = ['staff1', 'staff2', 'staff3'];

            // Get the class corresponding to the group index from the staffClasses array

            const selectedClass = staffClasses[groupIndex];

            // Now, update the class of the React component element

            args.element.classList.add(selectedClass);

        }

    }

    function onDataBind() {

        if (scheduleObj.currentView !== "Month" && scheduleObj.currentView !== "Agenda") {

            let currentViewDates = scheduleObj.getCurrentViewDates();

            scheduleObj.resetWorkHours();

            for (var i = 0; i < currentViewDates.length; i++) {

                switch ((currentViewDates[i]).getDay()) {

                    case 1:

                        scheduleObj.setWorkHours([currentViewDates[i]], '09:00', '11:00', 0);//Business Hours: Morning (09:00 AM - 11:00 AM) for 1st resource

                        scheduleObj.setWorkHours([currentViewDates[i]], '15:00', '17:00', 0);//Business Hours: Evening (03:00 PM - 05:00 PM) for 1st resource

                        scheduleObj.setWorkHours([currentViewDates[i]], '09:00', '11:00', 1);

                        scheduleObj.setWorkHours([currentViewDates[i]], '13:00', '15:00', 1);

                        scheduleObj.setWorkHours([currentViewDates[i]], '10:00', '17:00', 2);

                        break;

                    case 2:

                        scheduleObj.setWorkHours([currentViewDates[i]], '09:00', '11:00', 0);

                        scheduleObj.setWorkHours([currentViewDates[i]], '09:00', '11:00', 1);//Business Hours: Morning (09:00 AM - 11:00 AM) for 2nd resource

                        scheduleObj.setWorkHours([currentViewDates[i]], '11:00', '16:00', 1);//Business Hours: Evening (11:00 AM - 16:00 PM) for 2nd resource

                        scheduleObj.setWorkHours([currentViewDates[i]], '09:00', '18:00', 2);

                        break;

                    case 3:

                        scheduleObj.setWorkHours([currentViewDates[i]], '10:00', '13:00', 0);

                        scheduleObj.setWorkHours([currentViewDates[i]], '11:00', '15:00', 1);

                        scheduleObj.setWorkHours([currentViewDates[i]], '10:00', '14:00', 2);//Business Hours: Morning (10:00 AM - 14:00 PM) for 3rd resource

                        scheduleObj.setWorkHours([currentViewDates[i]], '15:00', '17:00', 2);//Business Hours: Morning (15:00 AM - 17:00 PM) for 3rd resource

                        break;

                    case 4:

                        scheduleObj.setWorkHours([currentViewDates[i]], '10:00', '15:00', 0);

                        scheduleObj.setWorkHours([currentViewDates[i]], '09:00', '12:00', 1);

                        scheduleObj.setWorkHours([currentViewDates[i]], '09:00', '13:00', 2);

                        break;

                }

            }

        }

        flag = false;

    }

Regards,
Venkatesh