1

In a dayClick event, I can change the CSS of the current cell using this as shown in the fullcalendar documentation. For example, I just have to do $(this).css('background-color', 'red');

Assuming I have a date stored as a moment, how can do the same thing outside of the dayClick event?

Billybobbonnet
  • 3,156
  • 4
  • 23
  • 49

1 Answers1

2

Have a look at dayRender() method. I know... There isn't that much documentation... Here is a working fiddle of how to change the background color of the current date and all the 7 days after current date using this event:

$(document).ready(function(){
  $('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
    },
    defaultView: 'month',
    dayRender: function (date, cell) {
        var today = $.fullCalendar.moment();
        var end = $.fullCalendar.moment().add(7, 'days');
        
        if (date.get('date') == today.get('date')) {
            cell.css("background-color", "red");
        }
        
        if(date > today && date <= end) {
            cell.css("background-color", "yellow");
        }
      
    }   
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/fullcalendar/2.0.1/fullcalendar.min.js"></script>
<link href="https://cdn.jsdelivr.net/fullcalendar/2.0.1/fullcalendar.css" rel="stylesheet"/>
<div id='calendar'></div>

Have also a look at moment.js documentation in order to manipulate the date objects.

EDIT

I assume you're using fullCalendar v2. For v1 have a look here and here

Community
  • 1
  • 1
IlGala
  • 3,331
  • 4
  • 35
  • 49
  • I am indeed using the V2. How can I rerun the `dayRender()` at will? – Billybobbonnet Nov 26 '15 at 14:45
  • From the docs: "_This callback is called each time a cell needs to be freshly rendered._" so you need to refetch the events with [`refetchEvents()`](http://fullcalendar.io/docs/event_data/refetchEvents/) method – IlGala Nov 26 '15 at 14:49
  • It does not work. I assume that the cell needs an event to be rerendered. I also tried the answer from here: http://stackoverflow.com/questions/10324311/re-draw-fullcalendar-on-the-fly but it didn't work either in my context (I am using meteor). – Billybobbonnet Nov 26 '15 at 14:53
  • 1
    I finally managed to get the cell using plain jQuery: `$("td").find("[data-date='" + this.date.format() + "']").css("background-color", "");` I will give you a +1 anyway, but if you want to update your answer, I will validate it as well. – Billybobbonnet Nov 26 '15 at 14:59
  • Yes... That seems the only "workaround" actually for your specific need there's an [openIssue](https://github.com/fullcalendar/fullcalendar/issues/2709) on GitHub... So no solutions are available atm... Just use plain JQuery... Anyway if my answer has solved your question please consider [accepting it](http://meta.stackexchange.com/q/5234/179419) by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this. – IlGala Nov 26 '15 at 15:07