Set custom work hours depending on a resource

[Dimitri Beziau]

Hello,

I already set the start and end times based on a resource, but I’d also like to define a "lunch break" depending on that same resource.

The goal is to apply a different class name to the cells that fall within the custom lunch break for each resource.

Is that possible?

[Vijay Ravi]

Hi Dimitri Beziau,
 

We have reviewed and validated your query. To adding a custom class, such as "lunch-break," to work cells between 1:00 PM and 2:00 PM time range for each resource in the Syncfusion Scheduler, you can using the scheduler renderCell event to identify cells within this time range and apply the custom CSS class. Refer the below shared code and sample for your reference.

[index.js]
 

import { createRoot } from 'react-dom/client';

import './index.css';

import * as React from 'react';

import { useEffect } from 'react';

import { TimelineViews, TimelineMonth, Agenda, ScheduleComponent, ViewsDirective, ViewDirective, ResourcesDirective, ResourceDirective, Inject, Resize, DragAndDrop } from '@syncfusion/ej2-react-schedule';

import { extend } from '@syncfusion/ej2-base';

import * as dataSource from './datasource.json';

/**

 * Schedule timeline resource grouping sample

 */

const TimelineGrouping = () => {

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

  const workDays = [0, 1, 2, 3, 4, 5];

  const projectData = [

    { text: 'PROJECT 1', id: 1, color: '#cb6bb2' },

    { text: 'PROJECT 2', id: 2, color: '#56ca85' },

    { text: 'PROJECT 3', id: 3, color: '#df5286' }

  ];

  const categoryData = [

    { text: 'Nancy', id: 1, groupId: 1, color: '#df5286' },

    { text: 'Steven', id: 2, groupId: 1, color: '#7fa900' },

    { text: 'Robert', id: 3, groupId: 2, color: '#ea7a57' },

    { text: 'Smith', id: 4, groupId: 2, color: '#5978ee' },

    { text: 'Michael', id: 5, groupId: 3, color: '#df5286' },

    { text: 'Root', id: 6, groupId: 3, color: '#00bdae' }

  ];

  // Function to handle the renderCell event

  const onRenderCell = (args) => {

    if (args.elementType === 'workCells') {

      const cellDate = new Date(args.date);

      const hours = cellDate.getHours();

      // Check if the cell's time is between 1 PM (13:00) and 2 PM (14:00)

      if (hours >= 13 && hours < 14) {

        args.element.classList.add('lunch-break');

      }

    }

  };

  return (

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

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

        <div className='control-wrapper'>

          <ScheduleComponent 

            cssClass='timeline-resource-grouping' 

            width='100%' 

            height='650px' 

            selectedDate={new Date(2023, 0, 4)} 

            currentView='TimelineWeek' 

            workDays={workDays} 

            eventSettings={{ dataSource: data }} 

            group={{ resources: ['Projects', 'Categories'] }}

            renderCell={onRenderCell}

          >

            <ResourcesDirective>

              <ResourceDirective 

                field='TaskId' 

                title='Category' 

                name='Categories' 

                allowMultiple={true} 

                dataSource={categoryData} 

                textField='text' 

                idField='id' 

                groupIDField='groupId' 

                colorField='color'

              />

            </ResourcesDirective>

            <ViewsDirective>

              <ViewDirective option='TimelineDay'/>

              <ViewDirective option='TimelineWeek'/>

              <ViewDirective option='TimelineWorkWeek'/>

              <ViewDirective option='TimelineMonth'/>

              <ViewDirective option='Agenda'/>

            </ViewsDirective>

            <Inject services={[TimelineViews, TimelineMonth, Agenda, Resize, DragAndDrop]}/>

          </ScheduleComponent>

        </div>

      </div>

    </div>

  );

};

export default TimelineGrouping;

const root = createRoot(document.getElementById('sample'));

root.render(<TimelineGrouping />);

[index.css]
 

.lunch-break {

    background-color: rgba(255, 220, 40, 0.2) !important;

    position: relative;

  }

 

  .lunch-break::before {

    content: '🍽️';

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    font-size: 14px;

  }

Sample link: https://stackblitz.com/edit/react-cxbecymp-6zhguzab?file=index.js,index.css

RenderCell event API: https://ej2.syncfusion.com/react/documentation/api/schedule/#rendercell

https://ej2.syncfusion.com/react/demos/#/bootstrap5/schedule/timeline-resources

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay

[Dimitri Beziau]

Hi Vijay,

Thank you for your quick reply.

The solution you gave me works perfectly.

Regards,

Dimitri

[Vijay Ravi]

Hi Dimitri Beziau,

 

Thank you for the update. We're glad to hear that the provided solution meets your requirements. Reach out to us if you need any further assistance. We are here to help you.

 

Regards,

Vijay

[Clone12 job]

Wow, i agree

[Swathi Ravi]

Dear Customer,

You're welcome! Feel free to reach out to us if you need any assistance.

Regards,
Swathi