Untitled
unknown
plain_text
a year ago
5.5 kB
53
Indexable
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'); }
Editor is loading...
Leave a Comment