react-event-calendar/dist/react-event-calendar.css

react-event-calendar

.flexContainer {
  max-width: 100%;
  width: 100%;
  border-top: 1px solid #3b91ad;
  border-left: 1px solid #3b91ad;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.flexColumn {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 14.2857142857%;
  border-bottom: 1px solid #3b91ad;
  border-right: 1px solid #3b91ad;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.day.inactive {
  background-color: #f8f8f8;
  color: #ccc;
}
.day.today {
  background-color: #fcf8e3;
}
.day .inner-grid {
  width: 100%;
  position: relative;
}
.day .event-slot {
  margin: 0.5rem 0;
  padding: 0.25rem 0.5rem;
}
.day .event-slot.event {
  background: #3b91ad;
  color: #3b91ad;
}
.day .event-slot.event-has-label {
  color: #fff;
}
.day .event.event-first-day {
  margin-left: 0.5rem;
  border-top-left-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}
.day .event.event-last-day {
  margin-right: 0.5rem;
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
.day .date {
  padding: 0.25rem 0.5rem;
  text-align: right;
}