reference
http://fullcalendar.io/
Is a jQuery plugin that provides a full-sized, drag & drop event calendar like the one below. It uses AJAX to fetch events on-the-fly and is easily configured to use your own feed format. It is visually customizable with a rich API.
copy
- fullcalendar.min.css
- fullcalendar.print.css
- moment.min.js
- jquery.min.js
- fullcalendar.min.js
//main.php
<?php
session_start();
require_once ('config.php');
$users_rows=null;
if(!isset($_SESSION["u"])){
header("Location: login.php");
exit ;
}
else
if($_SESSION['level'] != -89){
$db = connect();
$users_rows = getSet($db, "SELECT * FROM users order by user_level_id", null);
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='fullcalendar.min.css' rel='stylesheet' />
<link href='fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='lib/moment.min.js'></script>
<script src='lib/jquery.min.js'></script>
<script src='fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
///////////////////////////////////////////////////////////// FILL users
var jArray_users = <?php echo json_encode($users_rows); ?>;
var combo_users_rows = "<option value='0'></option>";
for (var i = 0; i < jArray_users.length; i++)
{
combo_users_rows += "<option value='" + jArray_users[i]["user_id"] + "'>" + jArray_users[i]["fullname"] + "</option>";
}
$("[name=user_id]").html(combo_users_rows);
$("[name=user_id]").change(); //select row 0 - no conflict on POST validation @ PHP
///////////////////////////////////////////////////////////// FILL users
//when combo change
$('#user_id').change(function () {
//http://stackoverflow.com/a/10229981
var selectedSite = $(this).val();
var events = {
url: 'x.php',
data: {
user_id: $('#user_id').val()
},
error: function() {
alert("error");
}
}
$('#calendar').fullCalendar('removeEventSource', events);
$('#calendar').fullCalendar('addEventSource', events);
});
//instantiate calendar
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2015-01-01',
editable: false,
eventLimit: true, // allow "more" link when too many events
events: {
url: 'x.php',
data: {
user_id: $_SESSION['id']
},
error: function() {
alert("error");
}
},
loading: function(bool) {
$('#loading').toggle(bool);
},
eventClick: function(calEvent, jsEvent, view) {
console.log(calEvent.id);
// $(this).css('border-color', 'red');
}
});
});
</script>
<style>
body {
margin: 0;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#loading {
display: none;
position: absolute;
top: 10px;
right: 10px;
}
#calendar {
max-width: 900px;
margin: 40px auto;
padding: 0 10px;
}
</style>
</head>
<body>
<div id='loading'>loading...</div>
<select id="user_id" name="user_id"></select>
<div id='calendar'></div>
</body>
</html>
//x.php
//x.php
<?php
require_once ('config.php');
$db = connect();
//create an array
$record = array();
//query for records
$rows = getSet($db,"select client_appointment_id as id,client_name as title,client_appointment_datetime as start from client_appointments
left join clients on clients.client_id = client_appointments.client_appointment_client_id
where client_appointment_owner_id=".$_GET["user_id"]." and client_appointment_datetime between '".$_GET["start"]."' and '".$_GET["end"]."'", null);
//for each record
foreach($rows as $row) {
$datetime = new DateTime($row['start']);
//convert mysql datetime to ISO8601 format FullCalendar compatible
$record[] = array("id" => $row['id'],"title" => $row['title'],"start" => $datetime->format(DateTime::ISO8601));
//add it to array
}
echo json_encode($record);
?>
PHP produces something like (response to line main.html 51+75) :
