Блог

Я использую компонент @syncfusion / ej2-react-schedule в своем приложении React. Я пытался изменить пользовательский интерфейс по умолчанию, но ничего не работает. В Google нет сообщения об этом, и их документы сбивают меня с толку.

Мой вопрос: как мне изменить внешний вид компонента по умолчанию? Например, изменить цвет фона или добавить эффект наведения…

 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, но ничего не работает

Привет от службы поддержки 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

А также сообщим вам, что мы можем изменить пользовательский интерфейс планировщика, используя темы. Мы подготовили для вас образцы ткани и высококонтрастной темы, которые можно просмотреть по ссылкам ниже.

Тканевая тема: 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

Пожалуйста, перейдите по приведенным выше ссылкам и дайте нам знать, если вам понадобится дополнительная помощь.