ReactJS - How to style React Calendar
Solution 1
Use className prop that will be added along with "react-calendar" to the main React-Calendar element. and it can be used to style the calendar as you want
<Calendar className={['c1','c2']}/>
Solution 2
Go to node_modules / react-calender / dist / Calender.css, copy all the content in your own css or scss file and there you will have all the default styles and you can change only the ones you want.
To this date the file looks something like this:
.react-calendar {
width: 350px;
max-width: 100%;
background: white;
border: 1px solid #a0a096;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.125em;
}
.react-calendar--doubleView {
width: 700px;
}
.react-calendar--doubleView .react-calendar__viewContainer {
display: flex;
margin: -0.5em;
}
.react-calendar--doubleView .react-calendar__viewContainer > * {
width: 50%;
margin: 0.5em;
}
.react-calendar,
.react-calendar *,
.react-calendar *:before,
.react-calendar *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.react-calendar button {
margin: 0;
border: 0;
outline: none;
}
.react-calendar button:enabled:hover {
cursor: pointer;
}
.react-calendar__navigation {
height: 44px;
margin-bottom: 1em;
}
.react-calendar__navigation button {
min-width: 44px;
background: none;
}
.react-calendar__navigation button:enabled:hover,
.react-calendar__navigation button:enabled:focus {
background-color: #e6e6e6;
}
.react-calendar__navigation button[disabled] {
background-color: #f0f0f0;
}
.react-calendar__month-view__weekdays {
text-align: center;
text-transform: uppercase;
font-weight: bold;
font-size: 0.75em;
}
.react-calendar__month-view__weekdays__weekday {
padding: 0.5em;
}
.react-calendar__month-view__weekNumbers {
font-weight: bold;
}
.react-calendar__month-view__weekNumbers .react-calendar__tile {
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75em;
padding: calc(0.75em / 0.75) calc(0.5em / 0.75);
}
.react-calendar__month-view__days__day--weekend {
color: #d10000;
}
.react-calendar__month-view__days__day--neighboringMonth {
color: #757575;
}
.react-calendar__year-view .react-calendar__tile,
.react-calendar__decade-view .react-calendar__tile,
.react-calendar__century-view .react-calendar__tile {
padding: 2em 0.5em;
}
.react-calendar__tile {
max-width: 100%;
text-align: center;
padding: 0.75em 0.5em;
background: none;
}
.react-calendar__tile:disabled {
background-color: #f0f0f0;
}
.react-calendar__tile:enabled:hover,
.react-calendar__tile:enabled:focus {
background-color: #e6e6e6;
}
.react-calendar__tile--now {
background: #ffff76;
}
.react-calendar__tile--now:enabled:hover,
.react-calendar__tile--now:enabled:focus {
background: #ffffa9;
}
.react-calendar__tile--hasActive {
background: #76baff;
}
.react-calendar__tile--hasActive:enabled:hover,
.react-calendar__tile--hasActive:enabled:focus {
background: #a9d4ff;
}
.react-calendar__tile--active {
background: #006edc;
color: white;
}
.react-calendar__tile--active:enabled:hover,
.react-calendar__tile--active:enabled:focus {
background: #1087ff;
}
.react-calendar--selectRange .react-calendar__tile--hover {
background-color: #e6e6e6;
}
Solution 3
import './Calender.scss';
<Calendar onChange={onChange} value={state.date} className="react-calendar" />
Calender.scss
.react-calendar { width: 600px;
.react-calendar__navigation {
.react-calendar__navigation__arrow {
display: none;
}
.react-calendar__navigation__label {
font-size: 32px;
}
}
.react-calendar__tile {
height: 70px;
}
.react-calendar__month-view__weekdays__weekday {
font-size: 16px;
color: rgb(15, 70, 15);
}
.react-calendar__tile--active {
background: #e70220;
color: white;
}
.react-calendar__tile--active:enabled:hover,
.react-calendar__tile--active:enabled:focus {
background: #e70220;
}
.react-calendar__tile,
.react-calendar__month-view__days__day {
font-size: 18px;
}
}
Related videos on Youtube
Comments
-
brainoverflow about 2 years
I've just installed the react-calendar package using
npm install react-calendar
but I have no idea how to style it, or to give it some color. The instructions in react-calendar - npm do not provide any information about that. I was wondering if anyone that has used this package could help me here. This is the code I have:
import React, {Component} from 'react' import Calendar from 'react-calendar' export default class EventModifier extends Component { state = { date: new Date(2018, 6, 1) } render(){ let calendar = <Calendar onChange={this.onChange} value={this.state.date} onClickDay={(value) => alert("day" + value + "clicked")}/> return( <div> {calendar} </div> ) } }