Full-calender add color based on external event

Question

I am using jquery full-calender. In page I have two input element

1- startdate( its date to start some event)

2- frequency( no of day for that event after that

Answer 1

You can use the dayRender callback which is the "hook for modifying a day cell."

This example does the following on dayRender:

1) Checks that the start date from the input is valid.

2) Adds the # of days for the frequency. The result will be the initial day selected + the number of days for frequency (so if frequency is 2 then total # of days highlighted will be 3). If this isn't the expected behavior, then change the check in the if statement to < endDate.format("YYYYMMDD").

3) When the calendar draws and each day is rendered, it checks to see if the day being rendered is within the start date + frequency. If so, add a class to highlight it.

$(document).ready(function() {
  var loadCal = function() {
    $('#fullCal').fullCalendar({
      header: {
        left: '',
        center: 'prev title next today',
        right: ''
      },
      dayRender: function(date, cell) {
        var startDate = moment($("#startdate").val());
        if (startDate.isValid()) {
          var endDate = moment(startDate).add($("#frequency").val(), 'days');
          //just compare the YYYYMMDD so don't run into problems with hour/minute/second, etc. if we used valueOf() or similar
          if (moment(date).format("YYYYMMDD") >= startDate.format("YYYYMMDD") && moment(date).format("YYYYMMDD") <= endDate.format("YYYYMMDD")) {
            cell.addClass("pjpDay");
          };
        }
      }
    });
  };

  //reload calendar on input change
  $("input").on("change", function() {
    $('#fullCal').fullCalendar('destroy'); //must redraw the calendar, so destroy it and then reload.
    loadCal();
  });

  loadCal(); //initial load of calendar
});

.pjpDay {
  background-color: #6666cc !important;
}

  PJP start date:
  


  PJP cycle frequency: