CODEWITHSUNDEEP
cssreactjsfullcalendarfullcalendar-5fullcalendar-6
elanpras
elanpras

Reputation: 29

Full Calendar React: How can we customize / override the CSS class in a React version of full calendar

I'm using an React Full Calendar example, that was shared as a part of the example in the Full Calendar documentation (https://github.com/fullcalendar/fullcalendar-examples/tree/main/react17).

I am using the code base of react-17 for reference, I wanted to customize/override some of the CSS classes. Requirements:

  1. I want to display the date label of a calender cell, to be on the top left corner of each cell.
  2. I want to show week number as a separate columns as shown in the below image / screenshot.

Expectation: enter image description here

In the index.css file I added the following code:

.fc { /* the calendar root */
  max-width: 1100px;
  margin: 0 auto;


  .fc-daygrid-day-top {
    display: flex;
    flex-direction: row **!important;**
  }
}

so in the actual code 'flex-direction' was set to 'row-reverse' and I modified it to 'row' to display the cell values in top left of the cell, but to get this to work I had to add the !important 'specificity' to get this to work, but this would be a temporary work around, so is there a way to makie this to work without adding '!imporatant' and I wanted the week number to be shown as a separate columns, any pointers for this. BAsically I wanted to oevrride the css classes of react version full calendar, If there are some example or if someone can point me to the right documentation it would be of great help.

Upvotes: 0

Views: 308

Answers (0)

Related Questions