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>

Fullcalendar 3-当日边框颜色

1 个答案: