Search code examples
reactjscomponentsschedulersyncfusion

How to change secondary colo rof syncfusion react scheduler component

I need change the color pink when item is selected, to another color, how i do ? enter image description here

Solution

  • You can achieve it using below mentioned CSS, you also refer the following sample. Sample: https://stackblitz.com/edit/react-schedule-change-selected-item-color?file=index.js

    Index.css
.e-schedule .e-schedule-toolbar .e-active-view .e-tbar-btn-text,
.e-schedule .e-schedule-toolbar .e-active-view .e-icons,
.e-schedule .e-vertical-view .e-header-cells.e-current-day,
.e-schedule .e-vertical-view .e-clone-time-indicator,
.e-schedule .e-vertical-view .e-current-time {
  color: blue;
}

.e-schedule .e-vertical-view .e-current-timeline {
  border-top: 1px solid blue;
}

.e-schedule .e-vertical-view .e-previous-timeline {
  border-top: 1px dotted blue;
}

.e-schedule .e-month-view .e-current-date .e-date-header,
.e-schedule .e-month-agenda-view .e-current-date .e-date-header {
  background-color: blue;
}

.e-schedule .e-month-view .e-date-header-wrap table td.e-current-day,
.e-schedule .e-month-agenda-view .e-date-header-wrap table td.e-current-day {
  color: blue;
}

    Regards,

    Praveenkumar.