How to only display working and available slots using FullCalendar?

Question

I have a calendar using FullCalendar, which is going to be used as a reservation system for a small massage salon.

Instead of showing all events including it's data to the website visitor, I want existing events to be not-clickable, while being grayed out without showing it's text so visitors just get an unavailable/available slots effect.

I have tried to find a solution on the internet but without any luck. My code to reproduce my situation:

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

<script>
 $('#calendar').fullCalendar({
         events: [
        {
            title  : 'event1',
            start  : '2019-03-20'
        },
        {
            title  : 'event2',
            start  : '2019-03-15',
            end    : '2019-03-18'
        }
    ],
 })
</script>

I'm almost sure I have to use viewRender, I just don't know how. Hope any of you guys is able to help me out.

http://jsfiddle.net/24973uey/7/

Answer 1

you can do this with eventRender like this.

Edit: other possibilities with eventRender

$(function() {
  $('#calendar').fullCalendar({
 events: [
  {
   title  : 'event1',
   start  : '2019-03-20'
  },
  {
   title  : 'event2',
   start  : '2019-03-15',
   end    : '2019-03-18'
  }
 ],
 eventRender: function(event, element) {
  /* the following block will mark days with event
  // get container
  var container = element.closest('.fc-content');
  if ((typeof event.start != 'undefined') && (event.start!=null)) {
   // create new instance of date start to iterate
   var dcurr = new Date(event.start);
   var dend = (typeof event.end != 'undefined') && (event.end!=null)? event.end : event.start;
   // paint date cell
   while(dcurr<=dend){
    var strDate = dcurr.getFullYear()+'-'+('0'+(dcurr.getMonth()+1)).slice(-2)+'-'+('0'+dcurr.getDate()).slice(-2);
    // get cell reference & set background
    $('td[data-date="'+strDate+'"]',container).css('background-color','#ccc');
    // iterate next date
    dcurr.setDate(dcurr.getDate()+1);
   }
  }
  // prevent this event to be displayed on table
  return false;
  */
  
  // the following block will change event block style only 
  element.css({backgroundColor:'#ccc',border:'1px solid #999'});
  $('.fc-event-title',element).html('');
   }
  });
});

<link type="text/css" rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.min.js"></script>

<div id="calendar">

</div>

Edit :

another scenario : unclickable date when there is an event. (I'm using latest fullCalendar on this example)

  $(function() {
    var cal = new FullCalendar.Calendar($('#calendar')[0], {
   events: [
    {
     title  : '',
     start  : '2019-03-20'
    },
    {
     title  : '',
     start  : '2019-03-15',
     end    : '2019-03-18'
    }
   ],
   plugins: [ 'dayGrid','interaction' ],
   dateClick:function(info) {
        // check class we've set on eventRender
    if(!$(info.dayEl).hasClass('hasEvent')) {
     alert(info.dateStr)
    }
   },
   eventRender: function(info) {
    if ((typeof info.event.start != 'undefined') && (info.event.start!=null)) {
     var container = info.el.closest('.fc-content');
     // create new instance of date start to iterate
     var dcurr = new Date(info.event.start);
     var dend = (typeof info.event.end != 'undefined') && (info.event.end!=null)? info.event.end : info.event.start;
     // paint date cell
     while(dcurr<=dend){
      var strDate = dcurr.getFullYear()+'-'+('0'+(dcurr.getMonth()+1)).slice(-2)+'-'+('0'+dcurr.getDate()).slice(-2);
      // get cell reference & add class to mark it
      $('td[data-date="'+strDate+'"]',container).addClass('hasEvent');
      // iterate next date
      dcurr.setDate(dcurr.getDate()+1);
     }
    }
    $(info.el).css({backgroundColor:'#ccc',border:'1px solid #999'});
   }
    });
    cal.render();
  });

 <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.0.1/main.min.css">
 <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.0.1/main.min.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.0.1/main.min.js"></script>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.0.1/main.min.js"></script>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@4.0.1/main.min.js"></script>
 <div id="calendar">

 </div>