CODEWITHSUNDEEP
javascriptjquerycssfullcalendar
codingnighter2000
codingnighter2000

Reputation: 529

jQuery fullcalendar: How can I target and change the background color of the days that don't belong to the current month?

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.

e.g: - 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:

[Example month

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?

Upvotes: 0

Views: 860

Answers (3)

C3roe
C3roe

Reputation: 96455

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
  }
}

Upvotes: 1

Venkatachalam
Venkatachalam

Reputation: 154

Try this: 

.fc-other-month{

background-color: red; }

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

Upvotes: 0

Venkatachalam
Venkatachalam

Reputation: 154

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

Upvotes: 0

Related Questions