0

I'm using @syncfusion/ej2-react-schedule component in my React app. I've been trying to modify the default UI of the but nothing works. There is no post about it on Google and their docs is confusing to me.

My question is: how do I modify the component's default look? Like changing to background color or add hover effect ...

import { ScheduleComponent, HeaderRowDirective, HeaderRowsDirective, TimelineMonth, Inject, ViewsDirective, ViewDirective, DragAndDrop, Resize } from '@syncfusion/ej2-react-schedule';
import './Timeline.css';

export default function Timeline() {
    return (
        <div className='timeline'>
            <ScheduleComponent width='100%' height='100%' allowDragAndDrop={true}>
                <HeaderRowsDirective>
                    <HeaderRowDirective option='Month'/>
                    <HeaderRowDirective option='Date'/>
                </HeaderRowsDirective>
                <ViewsDirective>
                    <ViewDirective option='TimelineMonth' interval={12}/>
                </ViewsDirective>
                <Inject services={[TimelineMonth, Resize, DragAndDrop]}/>
            </ScheduleComponent>
        </div>
    );
}

I've tried className. I've also tried to inspect the elements and get their name, and then use their name in the css file too but nothing works

quachhengtony
  • 125
  • 4
  • 17

1 Answers1

0

Greetings from Syncfusion Support.

We have validated your requirement at our end and prepared a sample based on that by making use of the below CSS and code snippets.

CSS:

.e-schedule .e-schedule-toolbar .e-toolbar-items.e-tbar-pos,
.e-schedule .e-timeline-month-view .e-header-month-cell,
.e-schedule .e-timeline-month-view .e-header-week-cell,
.e-schedule .e-timeline-month-view .e-header-cells,
.e-schedule .e-timeline-month-view .e-work-cells  {
    background-color: #ffd9df !important;
}

.e-schedule .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn,
.e-schedule .e-timeline-month-view .e-work-cells.custom {
    background-color: pink !important;
}

Index.js:

onHover(args) {
  if (args.element.classList.contains('e-work-cells')) {
    let workCells = document.querySelectorAll(".e-work-cells");
    [].forEach.call(workCells, function (ele) {
      ele.classList.remove("custom");
    });
    args.element.classList.add('custom');
  }
}

Sample: https://stackblitz.com/edit/react-header-rows-material-theme-1rcxrc?file=index.js

And also let you know that we can change the scheduler UI by using the themes. We have prepared the samples with fabric and high-contrast theme for your reference that can be viewed from the below links.

Fabric theme: https://stackblitz.com/edit/react-header-rows-fabric-theme-ygtrxs?file=index.html High contrast theme: https://stackblitz.com/edit/react-header-rows-highcontrast-theme?file=index.html UG: https://ej2.syncfusion.com/react/documentation/appearance/theme/#theming

Kindly refer to the above links and let us know if you need further assistance.

Balasubramanian Sattanathan
  • 76
  • 4
  • Thank you for the support. This is exactly what I was struggling with. – quachhengtony Dec 11 '20 at 04:58
  • Actually I have 1 more question. How do I change that "box shadow border-bottom" thing under the e.schedule-toolbar ? (using css) – quachhengtony Dec 11 '20 at 05:56
  • Also how do I change that 1px border around the schdule component? – quachhengtony Dec 11 '20 at 06:00
  • We can change CSS values by making use of the below code snippet. Kindly change it as per your requirement. `.e-schedule { border: 0px solid rgba(0, 0, 0, 0.12) !important; } .e-schedule .e-schedule-toolbar { border-bottom: 0 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important; }` Sample: [https://stackblitz.com/edit/react-header-rows-material-theme-1rcxrc-j5ynx7?file=index.css] UG: [https://ej2.syncfusion.com/react/documentation/schedule/getting-started/] Kindly let us know if you need further assistance. – Balasubramanian Sattanathan Dec 17 '20 at 08:48