Fullcalendar how to add bottom border to calendar view except grid axis?

user_11135590 0
Viewed 179

Greetings I have problem. How get rid of border-bottom on calendar view(see image 1)? This appears if using this css.

  .fc-scrollgrid-section-body > td {
    border-bottom: 1px solid gray;
  }

how error looks like What happens if you change border-bottom to border and sets to 0px then? Well calendar loses completely its bottom row(see image 2) It also did not showing in dayView and monthView. calendar without bottom line

I tried add another custom styles to css(before that setting .fc-scrollgrid-section-body > td its border to 0px ) 1)I know what (investigated in inspector) what days have fc-day style(see image 3) styles inside colum

I added this styles to CSS but it also not working it completely not showing red border

.fc .fc-timegrid-col{
  .fc-day{
  border-bottom: 1px solid red;
  }
}
//and 
.fc-day{
 border-bottom: 1px solid red;
}

another try

.fc .fc-timegrid-cols{
  .fc-day,
  .fc-timegrid-col{
  border-bottom: 1px solid red;
  }
}

using role tag to achieve same result

[role=gridcell] {
  .fc-timegrid-col
  .fc-day {
    border-bottom: 1px solid red;
  }
}

What I want is to have day columns bottom line and grid axe do not have one.

fullcalendar-5 typescript fullcalendar css html
1 Answers

I found solution for dayGrid and WeekGrid not for month yet.

.fc-day .fc-timegrid-col-frame {
    border-bottom: 1px solid $pitch-black-100;
}

UPDATE after 3+ hours of investigating to add line for gridView month need to add this thing to styles

.fc-daygrid-body {
  border-bottom: 1px solid $pitch-black-100;
}
user_111355900
Related