Change whole cell color on selected date fullCalendar

Question

I am using full calendar and I change the background color of the selected date. My problem now is, if the date is the current date, not all of the cells are of the selected date's color, half of them have today's color code and half are having the selected cell color.

The selected date is green and current date is yellow. Here is my css code:

.fc-event-container {
  display: none;
}
.fc-day-top {
  border-color: solid green 3px;
}
.fc-today {
  background: #ffffa1 !important;
}
.fc-highlight {
  background: green !important;
}
.fc-row .fc-content-skeleton td, .fc-row .fc-helper-skeleton td {
  border-color: inherit !important;
}

 $(function () { $('#calendars').fullCalendar({ height: 395, header: { // title, prev, next, prevYear, nextYear, today left: 'prev', center: 'title', right: 'next' }, events: [ { title : 'event1', start : '2019-03-01' }, { title : 'event2', start : '2019-03-05', }, { title : 'event3', start : '2019-03-15' }, { title : 'event5', start : '2019-05-15' } ], eventRender: function (event, element, view) { // like that var eventStart = moment(event.start); $("td[data-date='"+eventStart.format('YYYY-MM-DD')+"']").addClass('dayWithEvent'); }, // 選択可selectable: true, // 選択時にプレースホルダーを描画selectHelper: true, }) })

 .fc-event-container { display: none; } .fc-day-top { border-color: solid green 3px; } .fc-today { background: #ffffa1 !important; } .fc-highlight { background: green !important; } .fc-row .fc-content-skeleton td, .fc-row .fc-helper-skeleton td { border-color: inherit !important; } .dayWithEvent { background: #b0e0e6; cursor: pointer; } .change-bg { background-color : green !important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css" defer/> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js" defer></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js" defer></script> <div id="calendars"></div>

Answer 1

Just got it! I just added this css:

td.fc-day-top.fc-today.fc-state-highlight {
   display: block;
}

And now it blocks all cell. :)

Answer 2

The fullCalendar() function highlights current date by default as a built-in feature. So, when you set the bg color manually it overlaps with the default color.

I have just removed the below snippet from your code, and it worked fine

.fc-today {
  background: #ffffa1 !important;
}