How to change background color of selected date in FullCalendar

Question

I am trying to change the background color of the selected date in my calendar. In my below code, it highlights all the clicked date, how can I only highlight the last clicked date?

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

score 5 · Accepted Answer · answered Mar 26 '19 at 01:34

I have finally solved it this way:

$(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>

Just triggered the .fc-highlight class and it does the trick.

ADyson · Answer 2 · 2019-03-26T08:57:01.093

4

You've made this way more complicated than it needs to be.

Simply define a CSS class which will set the colours as you wish them to be when added to a day's HTML element.

Then, in the dayClick function, first find all elements which have that class, and remove the class from them. That will stop it showing on previously clicked days.

Next, add the class to the current element (represented by this). Simple!

JS:

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

CSS:

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

(!important is necessary to override the colour highlight on the current date which is set by fullCalendar automatically.)

Live demo: http://jsfiddle.net/zs9g5a8k/

edited Mar 26 '19 at 08:57

answered Mar 25 '19 at 13:12

ADyson

57,178
14
51
63

Thanks for this. But selecting the current date doesn't change the background color. – Eem Jee Mar 26 '19 at 01:24
1

@EemJee that's a good point, thanks. You can override that by adding `!important` to the rules. See the edited answer and updated demo, above. – ADyson Mar 26 '19 at 08:57

score 0 · Answer 3 · answered Apr 10 '20 at 12:56

If someone is wondering how to do it in 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>

In the typescript file:

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');
      }
    })
  }

}

How to change background color of selected date in FullCalendar

3 Answers3

Linked