Fullcalendar 3 - цвет границы текущего дня

Question

У меня проблема с полным календарем. Я бы хотел, чтобы у текущего дня был другой цвет рамки. Я нашел несколько решений, однако они для более ранних версий fullcalendar. Я пытался сделать все это с помощью CSS, но тогда нижняя граница не хочет менять цвет.

$(document).ready(function() {

  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next title',
      right: ''
    },
    editable: true,
    droppable: true,



    dayRender: function(date, cell) {

      var today = new Date();
      var end = new Date();
      end.setDate(today.getDate() + 7);

      /* 
      NOT WORK
      if (date.moment() === today.moment()) {
        cell.css("background-color", "red");
        cell.css("border-width", "20px");
      } 
      */

      if (date > today && date <= end) {
        cell.css("background-color", "yellow");
      }

    }



  });
});

.fc-body tr td .fc-scroller.fc-day-grid-container .fc-day-grid.fc-unselectable .fc-row.fc-week.fc-widget-content .fc-bg table tbody tr td.fc-day {
  background-color: #fff;
}
.fc-body tr td .fc-scroller.fc-day-grid-container .fc-day-grid.fc-unselectable .fc-row.fc-week.fc-widget-content .fc-bg table tbody tr td.fc-day.fc-past.fc-other-month {
  background-color: #f2f2f3;
}
.fc-body tr td .fc-scroller.fc-day-grid-container .fc-day-grid.fc-unselectable .fc-row.fc-week.fc-widget-content .fc-bg table tbody tr td.fc-day.fc-today {
  background-color: #ffefe8;
  border-color: #e8b09d;
  border-width: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>
<div id="calendar"></div>

Answer 1

Надеюсь, что эта помощь

Пожалуйста, попробуйте .fc table{border-collapse: collapse;} до .fc table{border-collapse: separate !important;}

Дайте мне знать дополнительные разъяснения.

$(document).ready(function() {

  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next title',
      right: ''
    },
    editable: true,
    droppable: true,



    dayRender: function(date, cell) {

      var today = new Date();
      var end = new Date();
      end.setDate(today.getDate() + 7);

      /* 
      NOT WORK
      if (date.moment() === today.moment()) {
        cell.css("background-color", "red");
        cell.css("border-width", "20px");
      } 
      */

      if (date > today && date <= end) {
        cell.css("background-color", "yellow");
      }

    }



  });
});

.fc-body tr td .fc-scroller.fc-day-grid-container .fc-day-grid.fc-unselectable .fc-row.fc-week.fc-widget-content .fc-bg table tbody tr td.fc-day {
  background-color: #fff;
}
.fc-body tr td .fc-scroller.fc-day-grid-container .fc-day-grid.fc-unselectable .fc-row.fc-week.fc-widget-content .fc-bg table tbody tr td.fc-day.fc-past.fc-other-month {
  background-color: #f2f2f3;
}
.fc-body tr td .fc-scroller.fc-day-grid-container .fc-day-grid.fc-unselectable .fc-row.fc-week.fc-widget-content .fc-bg table tbody tr td.fc-day.fc-today {
  background-color: #ffefe8;
  border-color: #e8b09d;
  border-width: 2px;
}
.fc table{border-collapse: separate !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>
<div id="calendar"></div>