Fullcalendar add class to weekView

0
votes

I wanted to add a class like ".today-date" to the weekView Table Header in fullCalendar. Because I wanted to highlight the Today Date Header with a background-color, like the td row is highlighted.

The cell Content of the weekView already have a class ".fc-today .fc-state-highlight".

I try with dayRender function from fullcalendar, but my Javascript understanding is a bit to low... I hope someone can help the noob ;)

My Html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 

<script src="http://momentjs.com/downloads/moment.js"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.js"></script> 

<div id="calendar"></div>

My Javascript

$(document).ready(function() {
    $("#calendar").fullCalendar({
       defaultView: "basicWeek",
    });
});

My Pen: codepen.io

2
javascriptfullcalendar

2 Answers

1
votes

dayRender will work http://jsfiddle.net/6zq50vzc/3/

$('#calendar').fullCalendar({
    defaultView: 'basicWeek',
    dayRender: function(date, cell) {
        if (cell.hasClass('fc-today')) { // looking for today's cell
            var index = cell.index(); // get the td offset
            // find the corresponding item in header table
            var header = $('#calendar thead.fc-head th').eq(index);
            header.addClass('fc-today'); // update it with a class
        }
    }
});
0
votes
viewRender: function(view, element) {
  if($('.fc-today').hasClass("fc-state-highlight")) {
    $('.fc-head .fc-head-container th').eq($('.fc-today.fc-state-highlight').index()).addClass("today");
  }
}

This will take the index of highlighted element and use that index to add a today class in header of calendar where day names are displayed.