fullcal

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='css/fullcalendar.min.css' rel='stylesheet' />
<link href='css/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='js/moment.min.js'></script>
<script src='js/jquery.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
<script>

	$(document).ready(function() {

		/*var date = new Date() ;
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();*/

	var calendar =	$('#calendar').fullCalendar({
			defaultDate: '2017-07-24',
		//	defaultTimedEventDuration: '0:01:00',
			 header: {
					        left: 'prev,next today',
					        center: 'title',
					        right: 'month,agendaWeek,agendaDay'
					    },
    defaultView: 'agendaWeek',
   // weekends: false ,// will hide Saturdays and Sundays
    //scrollTime :  "15:00:00", //3pm

    slotDuration: '01:00:00',


			editable: true,
			events: "http://localhost/openfield/calendar/events.php",
				selectable: true,


				selectHelper: true,
				select: function(start, end, allDay) {
				 var title = prompt('Event Title:');
				 if (title) {
				 start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
				 end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
				 $.ajax({
				 url: 'http://localhost/openfield/calendar/add_events.php',
				 data: 'title='+ title+'&start='+ start +'&end='+ end ,
				 type: "POST",
				 success: function(json) {
				 alert('OK');
				 }
				 });
				 calendar.fullCalendar('renderEvent',
				 {
				 title: title,
				 start: start,
				 end: end,
				 allDay: allDay
				 },
				 true // make the event "stick"
				 );
				 }
				 calendar.fullCalendar('unselect');
				} ,

				editable: true,


/*
					title: 'Click for Google',
					url: 'http://google.com/',
					start: '2017-05-28'

		PEUt ETRE INTERRESSANT RESA 			*/


		//	eventLimit: true, // allow "more" link when too many events

		});

	});

</script>
<style>

	body {
		margin: 40px 10px;
		padding: 0;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		font-size: 14px;
	}

	#calendar {
		max-width: 900px;
		margin: 0 auto;
	}

</style>
</head>
<body>

	<div id='calendar'></div>

</body>
</html>