Изменить цвет всей ячейки на выбранную дату fullCalendar

Question

Я использую полный календарь и меняю цвет фона выбранной даты. Моя проблема теперь в том, что если дата является текущей датой, не все ячейки имеют цвет выбранной даты, половина из них имеет сегодняшний цветовой код, а половина имеет выбранный цвет ячейки.

Выбранная дата имеет зеленый цвет, а текущая дата - желтый. Вот мой код CSS:

.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

Функция fullCalendar () подсвечивает текущую дату по умолчанию как встроенную функцию. Таким образом, когда вы устанавливаете цвет bg вручную, он перекрывается с цветом по умолчанию.

Я только что удалил приведенный ниже фрагмент из вашего кода, и он работал нормально

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

Answer 2

Только что понял! Я только что добавил этот CSS:

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

А теперь он блокирует все клетки. :)