Search code examples
fullcalendarfullcalendar-scheduler

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


Solution

  • 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.