如何自定义Syncfusion React Scheduler组件？

Question

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

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

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。我们准备了面料和高对比度主题的样品供您参考，可以通过以下链接查看。

Fabric 主题：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

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

Answer 2

我不知道它是否有帮助，但我更新了另一条评论中提供的代码以使所有组件变暗：

.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: #313135 !important;
    color: #FFF !important;
    border-color: #3B3B3F !important;
}

.e-schedule,
.e-schedule .e-resource-left-td,
.e-schedule .e-resource-cells,
.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: #313135 !important;
    color: #FFF !important;
    border-color: #3B3B3F !important;
}
.e-schedule .e-tbar-btn-text,
.e-schedule .e-resource-text {
  color: #FFF !important;
  border-color: #3B3B3F !important;
}

.e-schedule .e-appointment {
  border: none !important;
}