Any way to colorize specific days in FullCalendar?_问答_开发者

Using FullCalendar, is there any way I can programmatically colorize specific days differently than the rest of the d开发者_开发知识库ays? For example, in the "month" or "week" views, I'd like to colorize days with no events on them "red", and days with some events (but not yet a full schedule) "yellow". Days with a full schedule would be colorized normally (white background). Are there any callbacks or CSS tags I can take advantage of to add this behavior? Thank you.

According to Regin's answer here you can change the color by setting the dayRender event in the calendar like this:

$( "#calendar" ).fullCalendar(function() {  
    dayRender: function (date, cell) {

        if ( !dateHasEvent(date) )
            cell.css("background-color", "red");
        else if ( dateHasEvent(date) )
            cell.css("background-color", "yellow");
    }
});

function dateHasEvent(date) {
   // some code here
}

use view render to color specific days.

viewRender: function(view,element){
                    $.ajax({
                        url: //your custom url,
                        data: {start:view.start.format(),end:view.end.format()},
                        type: 'GET',
                        dataType: "json",
                        contentType: "application/json",                
                        success: function (data) {
                            $.each(data, function(i) {
                                $('.fc-day[data-date="'+data[i]["date"]+'"]').css('background', Your Color Code);
                            });
                        }
                    });
                },

I agree with gravityone's original response. You can track the feature request.

I don't believe there's a error proof way of implementing this type of feature without core code modification. I think the closest you can come now is something like the following. However, you'll need to build these calls to addClass() using your event source(s). This only works on the full calendar view and "breaks" when you have a day of the month that appears twice in the view (from the previous or next month).

$("div.fc-day-number:contains('15')").parent().addClass("vacation");

<style>
            .fc-grid .vacation {
                background-color:#F00;
            }
</style>

FullCalendar seems to be a very robust jquery calendar and editing the source code for this could cause you some pain down the road when it is updated by the author. My suggestion would be to email the author and ask for the feature to be added, or some information on how to edit the fields how you need.

Second idea would be to look at what css selectors are produced when each of your situations are met and change background colors to suit the situation. That would leave the FullCal source free for updating and give you what you need.

Hope that helps.

I needed to highlight multiple days using data from the server, without using any of the fullcalendar events. It turned out to be relatively easy using jQuery. In the sample code, you will have to populate the days object with dates in the fullcalendar format (probably via JSON). The format is (YYYY-MM-DD). This must be followed by a value: 0 is false 1 or more is true. The days object must be initialized prior to the document ready event (so var days should be global to document.ready). In the example, 2016-03-05 and 2016-03-30 will be highlighted, 2016-03-09 will not.

$(document).ready(function(){
  var days = {'2016-03-05': 1,'2016-03-09': 0,'2016-03-30': 1};
  $("td, th").each(function(){
    if(days[$(this).attr("data-date")]){
      $(this).css("background-color","lime");
    }
  });
});

I have searched the web for a general solution like this with no success. Many people have come close, but this one does what others have asked for.

Hope it helps.

Don

If anyone still looking for the same solution, here is a a JSFiddle.

JQuery

$(document).ready(function() {

  $('#calendar').fullCalendar({
    theme: true,
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    defaultDate: '2014-07-04',
    editable: true,
    events: [{
      title: 'All Day Event',
      start: '2014-07-01'
    }, {
      title: 'Long Event',
      start: '2014-07-07',
      end: '2014-07-10'
    }, {
      id: 999,
      title: 'Repeating Event',
      start: '2014-07-09T16:00:00'
    }, {
      id: 999,
      title: 'Repeating Event',
      start: '2014-07-16T16:00:00'
    }, {
      title: 'Meeting',
      start: '2014-07-12T10:30:00',
      end: '2014-07-12T12:30:00'
    }, {
      title: 'Lunch',
      start: '2014-07-12T12:00:00'
    }, {
      title: 'Birthday Party',
      start: '2014-07-13T07:00:00'
    }, {
      title: 'Click for Google',
      url: 'http://google.com/',
      start: '2014-07-28'
    }],
    eventAfterAllRender: function(view) {
      //Use view.intervalStart and view.intervalEnd to find date range of holidays
      //Make ajax call to find holidays in range.
      var fourthOfJuly = moment('2014-07-04', 'YYYY-MM-DD');
      var holidays = [fourthOfJuly];
      var holidayMoment;
      for (var i = 0; i < holidays.length; i++) {
        holidayMoment = holidays[i];
        if (view.name == 'month') {
          $("td[data-date=" + holidayMoment.format('YYYY-MM-DD') + "]").addClass('holiday');
        } else if (view.name == 'agendaWeek') {
          var classNames = $("th:contains(' " + holidayMoment.format('M/D') + "')").attr("class");
          if (classNames != null) {
            var classNamesArray = classNames.split(" ");
            for (var j = 0; j < classNamesArray.length; j++) {
              if (classNamesArray[j].indexOf('fc-col') > -1) {
                $("td." + classNamesArray[j]).addClass('holiday');
                break;
              }
            }
          }
        } else if (view.name == 'agendaDay') {
          if (holidayMoment.format('YYYY-MM-DD') == $('#calendar').fullCalendar('getDate').format('YYYY-MM-DD')) {
            $("td.fc-col0").addClass('holiday');
          };
        }
      }
    }
  });

});

CSS

body {
  margin: 0;
  padding: 50px 0 0 0;
  font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
  font-size: 14px;
}

#calendar {
  width: 100%;
}

.holiday {
  background: lightgray;
}

HTML