I hope this helps . JQuery fullCalendar comes with a function
for the current date of the calendar.
For not refreshing the page, you need to use AJAX. Try below code
code :
<?php
session_start();
include_once 'dbconnect.php';
if(!isset($_SESSION['user']))
{
header("Location: index.php");
}
$res=mysql_query("SELECT users.*, employees.* FROM users NATURAL JOIN employees WHERE user_id=".$_SESSION['user']);
$userRow=mysql_fetch_array($res);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../favicon.ico">
<title>Welcome - <?php echo $userRow['username']; ?></title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="jumbotron-narrow.css" rel="stylesheet">
<!-- debug and js -->
<script src="../assets/js/ie-emulation-modes-warning.js"></script>
<!-- CSS FOR MY CALENDAR -->
<link href="../../dist/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="//arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css" rel="stylesheet" />
<link href="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.print.css" rel="stylesheet" />
<link href="kalenda.css" rel="stylesheet">
<!-- SCRIPTS FOR MY CALENDAR -->
<script class="cssdesk" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script class="cssdesk" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<script class="cssdesk" src="netd-bostpdn.js" type="text/javascript"></script>
<script class="cssdesk" src="//arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="header clearfix">
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation"><a href="logout.php?logout">Log Out</a></li>
</ul>
</nav>
<h2 class="text-muted">Hi, <?php echo $userRow['last_name'];?> | Employee No: <?php echo $userRow['emp_no'];?></h2>
</div>
<div class="jumbotron">
<h2>Please time stamp</h2>
<div class="container">
<div id='calendar'></div>
</div>
</div>
<br>
<tr>
<td>
<center>
<p>
<form>
<input type="button" class="btn btn-lg btn-success" value="Clock In" id="my-button">
</form>
</p>
</center>
</td>
</tr>
<!-- Javascript -->
<script>
$(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true
});
});
// add button click code here
$('#my-button').click(function() {
var moment = $('#calendar').fullCalendar('getDate');
var dateObj = new Date(moment) /* Or empty, for today */
dateIntNTZ = dateObj.getTime() - dateObj.getTimezoneOffset() * 60 * 1000;
dateObjNTZ = new Date(dateIntNTZ);
var nd = dateObjNTZ.toISOString().slice(0, 19);
$.ajax({
url: 'clockin.php',
data: { inDate: nd.replace('T', ' ')},
type: 'post',
success: function(data) {
alert(data);
},
error: function(data) {
alert("Error.");
}
});
});
</script>
</div>
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
session_start();
/* connect to DB */
include_once 'dbconnect.php';
if(isset($_POST['inDate']))
{
$indate = mysql_real_escape_string($_POST['inDate']);
$clock_id = NULL;
$clock_in = $indate;
$timestamp_in = $indate;
$user_id = $_SESSION['user'];
$res2 = mysql_query("INSER INTO emp_log (`clock_id`, `clock_in`, `timestamp_in`, `user_id`)
VALUES($clock_id, '$clock-in', '$timestamp-in', '$user_id')");
if($res2)
echo "User in time entry successfully made.";
else
echo "Error inserting entry data: ".mysql_error();
}
else
echo "No date received.";
<form>
<input type="button" class="btn btn-lg btn-success" value="Clock In" id="my-button">
</form>
var dateObj = new Date(moment) /* Or empty, for today */
dateIntNTZ = dateObj.getTime() - dateObj.getTimezoneOffset() * 60 * 1000;
dateObjNTZ = new Date(dateIntNTZ);
var nd = dateObjNTZ.toISOString().slice(0, 19);
$('#my-button').click(function() {
var moment = $('#calendar').fullCalendar('getDate');
var dateObj = new Date(moment) /* Or empty, for today */
dateIntNTZ = dateObj.getTime() - dateObj.getTimezoneOffset() * 60 * 1000;
dateObjNTZ = new Date(dateIntNTZ);
var nd = dateObjNTZ.toISOString().slice(0, 19);
$.ajax({
url: 'clickin.php',
data: { inDate: nd.replace('T', ' ')},
type: 'post',
success: function(data) {
alert(data);
},
error: function(data) {
alert("Error.");
}
});
})
<?php
session_start();
/* connect to DB */
include_once 'dbconnect.php';
$indate = mysql_real_escape_string($_POST['inDate']);
$intime = date('H:i:s');
$clock_id = NULL;
$clock_in = $indate." ".$intime;
$timestamp_in = $indate." ".$intime;
$user_id = $_SESSION['user'];
$res2 = mysql_query("INSERT INTO emp_log (`clock_id`, `clock-in`, `timestamp-in`, `user_id`) VALUES ($clock_id, '$clock-in', '$timestamp-in', '$user_id')");
if($res2)
echo "User in time entry successfully made.";
else
echo "Error inserting entry data";
?>