JSFiddle - React, Tailwind, and code Playground

by iulianmihu

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.2.0/fullcalendar.print.css" media='print'/>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js'></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.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.1.0/fullcalendar.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

<div id='calendar'></div>
<!-- Modal -->
		<div class="modal fade" id="ModalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
			<div class="modal-content">
			<form class="form-horizontal" method="POST" action="addEvent.php">
			
			  <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 Event</h4>
			  </div>
			  <div class="modal-body">
				
				  <div class="form-group">
					<label for="title" class="col-sm-2 control-label">Title</label>
					<div class="col-sm-10">
 <!-- this DIV have my val -->
          <div id="lunaTime"></div>
 <!-- end -->
					</div>
				  </div>
				  <div class="form-group">
<?php


$query = mysql_query("SELECT * FROM `clients` WHERE month = '$var'") or die('error');
?>
					<select class="form-control" id="title" name="title">
<?php
					while($row=mysql_fetch_array($query)){
						echo '<option...

JavaScript

$(document).ready(function() {
$('#calendar').fullCalendar({
	header: {
		left: 'prev,next today',
		center: '',
		right: 'title'
	},
	dayClick: function(start, end, jsEvent) {
		lunatime = $.fullCalendar.moment(start).format('MMM');
		endtime = $.fullCalendar.moment(end).format('HH:mm');
		starttime = $.fullCalendar.moment(start).format('dddd, DD MMMM YYYY, HH:mm');
		var mywhen = starttime + ' - ' + endtime;
		var myluna = lunatime;
		start = moment(start).format();
		end = moment(end).format();
		$('#ModalAdd #lunaTime').text(myluna);
		$('#ModalAdd #startTime').val(start);
		$('#ModalAdd #endTime').val(end);
		$('#ModalAdd #when').text(mywhen);
		$('#ModalAdd').modal('show');
	}
});
});