jQuery fullcalendar：如何定位和更改不属于当前月份的日期的背景色？

Question

I'm building a calendar that shows different events for a given month. I am using jQuery fullcalendar .

I have a specific color for every day of the month.

For that, I'm using the following code:

dayRender: function (date, cell) {
    var cellDate = date.format('D');
    cell.css('background-color', json_backgrundColor[cellDate]);      
},

json_backgrundColor[cellDate] is an array that contains the specific color for each day. cellDate is an integer (1-end of the specific month (28/29/30/31)).

My problem is that the days of the previous month and the next month are also affected by it. They are getting colored according to the values of the specific month.

eg: - Day 29 of the previous month is getting the background color of the day 29 of the current month - Day 1 of the next month is getting the background color of the day 1 of the current month

See this picture:

[

I want the background color of days from previous/next month will be white. (see the marked days in the picture attachted. they don't belong to the specific month and I want them to be with white background color)

Anybody knows how can I target them and do it?

Answer 1

The cells that fall outside of the current month get the class fc-other-month - so all you need to do should be to check the class, and only work on the cell if it doesn't have it:

dayRender: function(date, cell) {
  if(!cell.hasClass('fc-other-month')) {
    cell.css('background-color', 'blue'); // or whatever
  }
}

Answer 2

Try This: .fc-other-month{ background-color: red; }`

Answer 3

Try this:

.fc-other-month{

background-color: red; }

Click here[ https://jsfiddle.net/Venkatachalam_Perisetla/hzq47kbg/][1]