Untitled

JS CODE

import * as React from 'react';
import { useEffect } from 'react';
import '@syncfusion/ej2-react-schedule/styles/material.css';
import { ScheduleComponent, ResourcesDirective, ResourceDirective, ViewsDirective, ViewDirective, Inject, TimelineViews, Resize, DragAndDrop, TimelineMonth, Day } from '@syncfusion/ej2-react-schedule';
import './index.css';
import { extend } from '@syncfusion/ej2-base';
import * as dataSource from './datasource.json';
import { registerLicense } from '@syncfusion/ej2-base';
 // Replace 'material.css' with your preferred theme
registerLicense('Ngo9BigBOggjHTQxAR8/V1NAaF5cWWJCf0x3Qnxbf1x0ZFNMZV9bQHVPIiBoS35RdURhWHZfdnRXRWBZVkVw');
/**
 * schedule block events sample
 */
const BlockEvents = () => {
    const data = extend([], dataSource, null, true);
    const employeeData = [
        { Text: 'Alice', Id: 1, GroupId: 1, Color: '#bbdc00', Designation: 'Content writer' },
        { Text: 'Nancy', Id: 2, GroupId: 2, Color: '#9e5fff', Designation: 'Designer' },
        { Text: 'Robert', Id: 3, GroupId: 1, Color: '#bbdc00', Designation: 'Software Engineer' },
        { Text: 'Robson', Id: 4, GroupId: 2, Color: '#9e5fff', Designation: 'Support Engineer' },
        { Text: 'Laura', Id: 5, GroupId: 1, Color: '#bbdc00', Designation: 'Human Resource' },
        { Text: 'Margaret', Id: 6, GroupId: 2, Color: '#9e5fff', Designation: 'Content Analyst' }
    ];
    const getEmployeeName = (value) => {
        return value.resourceData[value.resource.textField];
    };
    const getEmployeeImage = (value) => {
        return getEmployeeName(value).toLowerCase();
    };
    const getEmployeeDesignation = (value) => {
        return value.resourceData.Designation;
    };
    const resourceHeaderTemplate = (props) => {
        return (<div className="template-wrap">
                <div className="employee-category">
                    <div className={"employee-image " + getEmployeeImage(props)}/>
                    <div className="employee-name"> {getEmployeeName(props)}</div>
                    <div className="employee-designation">{getEmployeeDesignation(props)}</div>
                </div>
            </div>);
    };
    return (<div className='schedule-control-section'>
            <div className='col-lg-12 control-section'>
                <div className='control-wrapper drag-sample-wrapper'>
                    <div className="">
                        <ScheduleComponent cssClass='block-events' width='100%' height='650px' selectedDate={new Date(2021, 7, 2)} currentView='TimelineDay' resourceHeaderTemplate={resourceHeaderTemplate} eventSettings={{ dataSource: data }} group={{ enableCompactView: false, resources: ['Employee'] }}>
                            <ResourcesDirective>
                                <ResourceDirective field='EmployeeId' title='Employees' name='Employee' allowMultiple={true} dataSource={employeeData} textField='Text' idField='Id' colorField='Color'/>
                            </ResourcesDirective>
                            <ViewsDirective>
                                <ViewDirective option='Day'/>
                                <ViewDirective option='TimelineDay'/>
                                <ViewDirective option='TimelineMonth'/>
                            </ViewsDirective>
                            <Inject services={[Day, TimelineViews, TimelineMonth, Resize, DragAndDrop]}/>
                        </ScheduleComponent>
                    </div>
                </div>
            </div>
        </div>);
};
export default BlockEvents;



CSS CODE

.block-events.e-schedule .template-wrap {
    width: 100% ;
}

.block-events.e-schedule .e-vertical-view .e-resource-cells {
    height: 58px;
}

.block-events.e-schedule .e-timeline-view .e-resource-left-td,
.block-events.e-schedule .e-timeline-month-view .e-resource-left-td {
    width: 170px;
}

.block-events.e-schedule .e-resource-cells.e-child-node .employee-category,
.block-events.e-schedule .e-resource-cells.e-child-node .employee-name {
    padding: 5px
}

.block-events.e-schedule .employee-image {
    width: 45px;
    height: 40px;
    float: left;
    border-radius: 50%;
    margin-right: 10px;
    background-repeat: no-repeat;
    background-size: 45px;
}

.block-events.e-schedule .employee-name {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.block-events.e-schedule .employee-designation {
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.block-events.e-schedule .template-wrap .employee-image.alice {
    background-image: url('https://ej2.syncfusion.com/react/demos/src/schedule/images/alice.png') ;
}

.block-events.e-schedule .template-wrap .employee-image.robert {
    background-image: url('https://ej2.syncfusion.com/react/demos/src/schedule/images/robert.png');
}

.block-events.e-schedule .template-wrap .employee-image.robson {
    background-image: url('https://ej2.syncfusion.com/react/demos/src/schedule/images/robson.png');
}

.block-events.e-schedule .template-wrap .employee-image.laura {
    background-image: url('https://ej2.syncfusion.com/react/demos/src/schedule/images/laura.png');
}

.block-events.e-schedule .template-wrap .employee-image.nancy {
    background-image: url('https://ej2.syncfusion.com/react/demos/src/schedule/images/nancy.png');
}

.block-events.e-schedule .template-wrap .employee-image.margaret {
    background-image: url('https://ej2.syncfusion.com/react/demos/src/schedule/images/margaret.png');
}