CODEWITHSUNDEEP
javascriptcssfullcalendarfullcalendar-3
Eem Jee
Eem Jee

Reputation: 1309

How to change background color of selected date in FullCalendar

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

Upvotes: 5

Views: 11148

Answers (3)

Giulia R
Giulia R

Reputation: 1

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

}

Upvotes: 0

ADyson
ADyson

Reputation: 61849

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/

Upvotes: 4

Eem Jee
Eem Jee

Reputation: 1309

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.

Upvotes: 5

Related Questions