How to render per-day custom text in parent resource row (e-resource-group) based on events?

[Tu?n Nguy?n]

I'm using the `ScheduleComponent` with `TimelineWeek` and resource grouping. I want to display a "custom text or number" (e.g., the count of events) per day, in the parent row only,  just like in the screenshot below.

[Vijay Ravi]

Hi Tu?n Nguy?n,
 

We have reviewed and validated your query. Based on your requirements, we recommend utilizing the dataBound event of the ScheduleComponent to customize the resource parent row, enabling the display of the event count for child resources. Please refer to the code snippet provided below for implementation details and the shared sample for further reference.

[index.js]
 

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

import './index.css';

import * as React from 'react';

import { useEffect, useRef } 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, null, true);

    const scheduleObj = useRef(null);

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

    const timeScale = { enable: false };

    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' }

    ];

    const onDataBound = () => {

        const workCells = document.querySelectorAll(".e-work-cells.e-resource-group-cells");

        workCells.forEach((cell, index) => {

            let projectEvents = [];

            const timestamp = Number(cell.getAttribute('data-date'));

            const startDate = new Date(timestamp);

            const endDate = new Date(startDate);

            endDate.setDate(startDate.getDate() + 1); // add one day

            const events = scheduleObj.current.getEvents(startDate, endDate);

            const cellProjectId = scheduleObj.current.getResourcesByIndex(Number(cell.getAttribute("data-group-index"))).groupData.ProjectId;

            events.forEach(event => {

                if (event.ProjectId === cellProjectId) {

                    projectEvents.push(event);

                }

            });

            (cell).innerText = projectEvents.length.toString();

        });

    };

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

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

                <div className='control-wrapper'>

                    <ScheduleComponent ref={scheduleObj} 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'] }} timeScale={timeScale} dataBound={onDataBound}>

                        <ResourcesDirective>

                            <ResourceDirective field='ProjectId' title='Choose Project' name='Projects' allowMultiple={false} dataSource={projectData} textField='text' idField='id' colorField='color'/>

                            <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 />);

Sample link: https://stackblitz.com/edit/react-l8cp9awq-yu7narzz?file=index.js,datasource.json

DataBound event API: https://ej2.syncfusion.com/react/documentation/api/schedule/#databound
 

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

Regards,

Vijay