如何在 FullCalendar 中更改所选日期的背景颜色

Question

我正在尝试更改日历中所选日期的背景颜色。在我下面的代码中，它突出显示了所有点击的日期，我怎样才能只突出显示最后点击的日期？

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",});
},

Answer 1

你使这种方式变得比它需要的更复杂。

只需定义一个 CSS class，当添加到一天的 HTML 元素时，它将设置您希望的颜色。

然后，在 dayClick 函数中，首先找到所有具有 class 的元素，然后从中删除 class。这将停止它在之前点击的日期显示。

接下来，将 class 添加到当前元素（由 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/

Answer 2

我终于这样解决了：

$(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 class 并且成功了。

Answer 3

如果有人想知道如何在 Angular2+ 中做到这一点：

<full-calendar #calendar
               id="calendar"
               (dateClick)="handleDateClick($event)"
               deepChangeDetection="true"
               defaultView="dayGridMonth"
               [locales]="[itLocale]"
               locale="it"
               [selectable]="true"
               [header]="options.header"
               [plugins]="calendarPlugins">
</full-calendar>

在 typescript 文件中：

import { Component, OnInit, ViewChild } from '@angular/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import { FullCalendarComponent } from '@fullcalendar/angular';
import itLocale from '@fullcalendar/core/locales/it';
import interactionPlugin from '@fullcalendar/interaction';

interface iDay {
  dayLabel: string,
  dayMs: number
}
@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.scss']
})
export class CalendarComponent implements OnInit {

  @ViewChild('calendar') calendarComponent: FullCalendarComponent;

  public itLocale = itLocale;
  public calendarPlugins = [interactionPlugin, dayGridPlugin];
  public calendarEvents = [];
  public options = {
    header: {
      left: 'prev title',
      right: 'next'
    }
  }

  constructor() { }

  ngOnInit(): void {

  }

  handleDateClick(event) {
    document.querySelectorAll("td[data-date='" + event.dateStr + "']").forEach((nodeElement: HTMLElement) => {
      if(nodeElement.classList.value.includes('fc-day-top')){
        nodeElement.classList.add('selected-day');
      }
    })
  }

}

如何在 FullCalendar 中更改所选日期的背景颜色

How to change background color of selected date in FullCalendar

javascript

css

fullcalendar

fullcalendar-3