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

就知道了！我刚刚添加了这个CSS：

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

现在它阻止了所有单元格。：）

Answer 2

fullCalendar（）函数默认将当前日期突出显示为内置功能。因此，当您手动设置bg颜色时，它会与默认颜色重叠。

我刚刚从您的代码中删除了以下代码段，并且效果很好

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

更改所选日期全单元格的颜色

2 个答案: