Как изменить цвет фона выбранной даты в FullCalendar - PullRequest
Новая
       16

Как изменить цвет фона выбранной даты в FullCalendar

4 голосов
/ 24 марта 2019

Я пытаюсь изменить цвет фона выбранной даты в моем календаре. В приведенном ниже коде она выделяет всю дату, на которую кликнули, как я могу выделить только дату, на которую последний кликнули? 

dayClick: function (day){
  var mydate = new Date(this[0].getAttribute("data-date"));
  var dateArray = mydate.toDateString().split(" ");
  document.querySelectorAll(".calendar-mobile p")[0].innerHTML = j_monthNames[mydate.getMonth()] + " " + mydate.getDate() + "日" + "(" + j_dayNames[dateArray[0].toLocaleLowerCase()] + ")";
  document.body.classList.remove("calendar-open");

  $month = '' + (mydate.getMonth() + 1);
  $day = '' + mydate.getDate();
  $year = mydate.getFullYear();

  if ($month.length < 2) $month = '0' + $month;
  if ($day.length < 2) $day = '0' + $day;
  $dates = [$year, $month, $day].join('-');
  $('[data-date='+$dates+']').css({"color": "red", "backgroundColor": "yellow",});
},

Ответы [ 2 ]

3 голосов
/ 25 марта 2019

Вы сделали этот способ более сложным, чем нужно.

Просто определите класс CSS, который будет устанавливать цвета так, как вы хотите, чтобы они были при добавлении в элемент HTML дня.

Затем в функции dayClick сначала найдите все элементы, которые имеют этот класс, и удалите класс из них.Это остановит его отображение в ранее выбранные дни.

Затем добавьте класс к текущему элементу (представленному this).Просто!

JS: 

dayClick: function (day){
  $(".day-highlight").removeClass("day-highlight");
  $(this).addClass("day-highlight");
}

CSS: 

.day-highlight {
  background-color: yellow !important;
  color: red !important;
}

(!important необходимо переопределить подсветку цвета на текущую дату, которая устанавливается fullCalendarавтоматически.)

Демонстрация в реальном времени: http://jsfiddle.net/zs9g5a8k/

2 голосов
/ 26 марта 2019

Я наконец решил это так: 

$(document).ready(function() {
  $('#calendars').fullCalendar({
    header: {
      left: 'prev',
      center: 'title',
      right: 'next'
    },
    selectable: true,
  });
});
.fc-highlight {
  background: 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>

Просто запустил класс .fc-highlight, и он добился цели.

...