如何自定义 Syncfusion React Scheduler 组件？

Question

我在我的 React 应用程序中使用 @syncfusion/ej2-react-schedule 组件。我一直在尝试修改默认的 UI 但没有任何效果。 Google 上没有关于它的 post，他们的文档让我感到困惑。

我的问题是：如何修改组件的默认外观？喜欢更改背景颜色或添加悬停效果...

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

我试过className。我还尝试检查元素并获取它们的名称，然后也在 css 文件中使用它们的名称，但没有任何效果

Answer 1

来自 Syncfusion 支持的问候。

我们最终验证了您的要求，并使用以下 CSS 和代码片段在此基础上准备了一个示例。

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

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

同时让您知道我们可以使用主题更改调度程序 UI。我们准备了面料和高对比度主题的样品供您参考，可以从以下链接查看。

面料主题：https://stackblitz.com/edit/react-header-rows-fabric-theme-ygtrxs?file=index.html 高对比度主题：https://stackblitz.com/edit/react-header-rows-highcontrast-theme?file=index.html UG：https://ej2.syncfusion.com/react/documentation/appearance/theme/#theming

请参阅以上链接，如果您需要进一步的帮助，请告诉我们。

如何自定义 Syncfusion React Scheduler 组件？

How to customize Syncfusion React Scheduler component?

css

reactjs

scheduler

syncfusion

ej2-syncfusion