4

Would it be possible to add background text in full calendar when there is no event found for day, need help please

e.g enter image description here

dEL
  • 482
  • 1
  • 6
  • 23

1 Answers1

9

Just an idea:

$('#calendar').fullCalendar({

  defaultView: 'month',
  events: [{
    title: 'event',
    start: '2017-01-05 11:00',
    end: '2017-01-06 13:00',
  }, {
    title: 'event 2',
    start: '2017-01-18'
  }],
  dayRender: function(date, cell) {
    cell.append('<div class="unavailable">Unavailable</div>');
  },
  eventAfterAllRender: function(view) {
    var dayEvents = $('#calendar').fullCalendar('clientEvents', function(event) {
      if (event.end) {
        var dates = getDates(event.start, event.end);
        $.each(dates, function(index, value) {
          var td = $('td.fc-day[data-date="' + value + '"]');
          td.find('div:first').remove();
        });
      } else {
        var td = $('td.fc-day[data-date="' + event.start.format('YYYY-MM-DD') + '"]');
        td.find('div:first').remove();
      }
    });
  }
});

function getDates(startDate, endDate) {
  var now = startDate,
    dates = [];

  while (now.format('YYYY-MM-DD') <= endDate.format('YYYY-MM-DD')) {
    dates.push(now.format('YYYY-MM-DD'));
    now.add('days', 1);
  }
  return dates;
};

Try this fiddle.

Enlico
  • 23,259
  • 6
  • 48
  • 102
Krzysztof Kaźmierczak
  • 1,401
  • 1
  • 11
  • 15