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>