Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Full calendar - add text to day when there is no event

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

like image 409
dEL Avatar asked Jan 04 '23 18:01

dEL


1 Answers

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.

like image 93
Krzysztof Kaźmierczak Avatar answered Mar 05 '23 17:03

Krzysztof Kaźmierczak