JSFiddle - React, Tailwind, and code Playground

by Sven Cazier

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.1/fullcalendar.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.1/fullcalendar.js"></script>
	<div id="calendar"></div>

JavaScript

$('#calendar').fullCalendar({
	header: {
		left: 'prev,next today',
		center: 'title',
		right: 'month,agendaWeek,agendaDay,listMonth'
	},
	selectable: true,
	selectHelper: true,
	select: function(start, end) {
		var title = prompt('Event Title:');
		var eventData;
		if (title) {
    	if (title === "holiday"){
				eventData = {
					start: start,
					end: end,
      	  rendering: 'background',
     	   color: '#ff9f89'
				};
      }
      else{
      	eventData = {
      		title: title,
					start: start,
					end: end
        };
			}
		}
    $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
		$('#calendar').fullCalendar('unselect');
	}
});
    
var eventData = {
	start: '2016-10-01',
	end: '2016-10-04',
	rendering: 'background',
	color: '#ff9f89'
};
$('#calendar').fullCalendar('renderEvent', eventData, true);