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

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

Выбранная дата зеленая, а текущая дата желтая. Вот мой 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>


javascript css fullcalendar
person Eem Jee    schedule 25.03.2019    source источник
comment
Пожалуйста, добавьте демонстрацию скрипки   -  person NIsham Mahsin    schedule 25.03.2019
comment
@NIshamMahsin Пожалуйста, смотрите обновление,   -  person Eem Jee    schedule 25.03.2019
comment
@AndyHoffman Пожалуйста, смотрите обновление   -  person Eem Jee    schedule 25.03.2019
comment
у кого-нибудь есть идеи по этому поводу?   -  person Eem Jee    schedule 25.03.2019

Ответы (2)


arrow_upward
1
arrow_downward

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

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

И теперь он блокирует всю ячейку. :)

person Eem Jee    schedule 25.03.2019
comment
Хорошо! рекомендуется пометить свой ответ как принятый, чтобы другие пользователи знали, какой ответ сработал для вас. - person Gouda; 25.03.2019
comment
@Gouda Да, я буду завтра. - person Eem Jee; 26.03.2019

arrow_upward
1
arrow_downward

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

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

.fc-today {
  background: #ffffa1 !important;
}
person Gouda    schedule 25.03.2019
comment
Да, у меня нет проблем, если он по умолчанию, проблема в моем клиенте, потому что они хотят, чтобы он был желтым. Спасибо. - person Eem Jee; 25.03.2019