CODEWITHSUNDEEP
react-big-calendar
I am
I am

Reputation: 1067

react-big-calendar How to update SASS variables?

I need to style react-big-calendar as per my application styling. This can be achieved by writing custom css classes and importing them. But I am wondering if there is any way to change SCSS variables. Thanks in advance!!

Upvotes: 1

Views: 854

Answers (2)

Chun
Chun

Reputation: 487

To override the default values, the variables should be defined before the @import, you may write in your own .scss as follows,

$out-of-range-color: lighten(#333, 40%);
$out-of-range-bg-color: lighten(#333, 70%);

$calendar-border: red;
$cell-border: red;

$border-color: red;

// Each calendar segment is 1/7th.
$segment-width: 0.14286%;

$time-selection-color: red;
$time-selection-bg-color: rgba(0, 0, 0, 0.5);
$date-selection-bg-color: rgba(0, 0, 0, 0.1);

$event-bg: #3174ad !default;
$event-border: darken(#3174ad, 10%);
$event-outline: #3b99fc;
$event-color: red;
$event-border-radius: 5px;
$event-padding: 2px 5px;
$event-zindex: 4;

$btn-color: #373a3c;
$btn-bg: #fff;
$btn-border: #ccc;

$current-time-color: red;

$rbc-css-prefix: rbc-i;

$today-highlight-bg: #eaf6ff;

@import "react-big-calendar/lib/sass/styles";

Upvotes: 0

Steve -Cutter- Blades
Steve -Cutter- Blades

Reputation: 5432

RBC provides SCSS for you to use in compiling your own CSS, overriding any of it's variables with your own. In your own SCSS file:

@import '~react-big-calendar/lib/sass/styles';
// your override variables and classes

Upvotes: 0

Related Questions