Fullcalendar add Custom Text to Date if there is not Event

Hello to all, welcome to therichpost.com. In this post, I will tell you, How Fullcalendar add Custom Text to Date if there is not Event?

fullcalendar is the best A JavaScript event calendar.

Here is the working Image:

fullcalendar-add-custom-text

Here is the complete working and tested code and you need to add this into you html file:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.min.css' rel='stylesheet' />
<link href='https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='https://fullcalendar.io/releases/fullcalendar/3.9.0/lib/moment.min.js'></script>
<script src='https://fullcalendar.io/releases/fullcalendar/3.9.0/lib/jquery.min.js'></script>
<script src='https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.min.js'></script>
<script>

  $(document).ready(function() {

    $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
      },
      defaultDate: new Date(),
      navLinks: true, // can click day/week names to navigate views
      editable: true,
      eventLimit: true, // allow "more" link when too many events
      events: [{
          title: 'All Day Event',
          start: '2018-09-12'
        },],
     dayRender: function(date, cell) {
        cell.append('<div style="text-align:center; background-color:blue; color:#fff;padding:2px 0;margin-top:20px;">Add Your Text!</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();
      }
    });
    }
    });

  });

</script>
<style>

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

  #calendar {
    max-width: 900px;
    margin: 0 auto;
  }

</style>
</head>
<body>

  <div id='calendar'></div>

</body>
</html>

If you have any query related to this post, then please do comment below or ask question.