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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<div id="calendar"></div>
<div class="modal fade" id="calendarModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<form action="">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel">Add new calendar entry</h4>
				</div>
				<br>
				<div class="container-fluid">
					<div class="row">
						<div class="col-sm-12">
							<div class="row">
								<div class="col-sm-12 form-group">
									<input class="form-control" id="startTime" name="startTime" type="text" readonly>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-12 form-group">
									<input class="form-control" id="endTime" name="endTime" type="text" readonly>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-12 form-group">
									<input class="form-control" id="title" name="title" placeholder="title" type="text">
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
					<button type="button" class="btn btn-primary" id="save">Save</button>
				</div>	
			</div>
		</form>
	</div>
</div>

JavaScript

$('#calendar').fullCalendar({
	header: {
		left: 'prev,next today',
		center: 'title',
		right: 'month,agendaWeek,agendaDay,listMonth'
	},
	selectable: true,
	selectHelper: true,
	select: function(start, end) {
			$('#calendarModal').modal('show');
			$('#calendarModal #startTime').val(start);
			$('#calendarModal #endTime').val(end);
	}
});
    
$('#calendarModal').on('click', '#save', function(){
	var title = $('#calendarModal #title').val();
	var start = new Date($('#calendarModal #startTime').val());
	var end = new Date($('#calendarModal #endTime').val());
	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');
	$('#calendarModal').modal('hide');
});