fullcalendar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<div id='calendar'></div>

JavaScript

$('#calendar').fullCalendar({
	defaultView: 'agendaDay',
	//defaultDate: '2017-12-07',
	editable: true,
	selectable: true,
	eventLimit: true,
	header: {
		left: 'prev,next today',
		center: 'title',
		right: 'agendaDay,agendaTwoDay,agendaWeek,month'
  },
	views: {
		agendaDay: {
  		type: 'agendaDay',
			minTime: '-12:00:00',
			maxTime: '36:00:00',
			slotDuration: '00:30:00'
    }
  },
  dayRender: function (element) {
  	colorToday();
  }
});



function colorToday() {
	var color = '#EEEEEE';
  var fullArray = $('.fc-slats tr .fc-widget-content:nth-child(2)');
  var todayArray = fullArray.slice(24, 72);
  
  for(var i = 0; i < todayArray.length; i++) {
    var data = $(todayArray[i]);
    $(data).css('background', color);
  }
}