CODEWITHSUNDEEP
javascriptcssreactjscalendarreact-big-calendar
Hamid Shoja
Hamid Shoja

Reputation: 4768

change style of row in react big calendar

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?

r

Upvotes: 0

Views: 5087

Answers (2)

Hamid Shoja
Hamid Shoja

Reputation: 4768

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

Upvotes: 0

Akber Iqbal
Akber Iqbal

Reputation: 15031

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

Upvotes: 1

Related Questions