change style of row in react big calendar

Question

I need to make a calendar with events and I decided to use react-big-calendar. But I need to make rows with different style. So each row should be in 30minutes that I did it with timeslots, but I also need to remove default borders and make new border around each four rows . How can I change the style?

score 1 · Answer 1 · answered Feb 09 '20 at 21:44

1

I couldn't find any information on the npmjs.org site... and since the divs are created dynamically, we can use CSS to get this effect;

relevant CSS:

.rbc-timeslot-group:nth-child(1), .rbc-timeslot-group:nth-child(2), .rbc-timeslot-group:nth-child(3), .rbc-timeslot-group:nth-child(23), .rbc-timeslot-group:nth-child(24)
{ background-color: lightpink; }

sample working stackblitz here

answered Feb 09 '20 at 21:44

Akber Iqbal

14,487
12
48
70

Thanks Akber, how can I set border around these four elements, it should apply for every 4 rows. – Hamid Shoja Feb 10 '20 at 04:56
and why did you select children number 23,34 ?? – Hamid Shoja Feb 10 '20 at 04:59
Hi Hamid, i selected a few rows to signify out-of-work hours... true if you're from south asia ;-) – Akber Iqbal Feb 10 '20 at 19:41

score 0 · Answer 2 · answered Feb 10 '20 at 05:37

Thanks to @akber-iqbal I found my answer, so these styles worked for me, if you can optimize it, you can share it, thank you.

 .rbc-day-slot .rbc-time-slot {
  border: unset;
}
.rbc-timeslot-group:nth-child(4n+1),
.rbc-timeslot-group:nth-child(4n+2),
.rbc-timeslot-group:nth-child(4n+3),
.rbc-timeslot-group:nth-child(4n+4)
 {  /* or 4n+1 */
  background-color: #fefefe;
  border-width:0px; 
  margin:0;
  padding:0;
  border-color:black;
}


.rbc-timeslot-group:nth-child(4n+1)
 { border-top: 1px solid #ccc;
}

see https://stackblitz.com/edit/big-calendar-demo-jv11jb

change style of row in react big calendar

2 Answers2