how to Create dynamic calendar using jQuery, Ajax and PHP
In this post we will show you Create dynamic calendar using jQuery, Ajax and PHP, hear for Create dynamic calendar using jQuery, Ajax and PHP we will give you demo and example for implement.
code for Create dynamic calendar using jQuery, Ajax and PHP
index.php file
<?php
// require class
require_once 'class.calendar.php';
// object of class
$phpCalendar = new PHPCalendar ();
?>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
<title>Create dynamic calendar using jQuery, Ajax and PHP - onlinecode</title>
</head>
<body>
<h2>Create dynamic calendar using jQuery, Ajax and PHP</h2><br><br><br>
<div id="body-overlay"><div><img src="loading.gif" width="64px" height="64px"/></div></div>
<div id="calendar-html-output">
<?php
$calendarHTML = $phpCalendar->getCalendarHTML();
echo $calendarHTML;
?>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(document).on("click", '.prev', function(event) {
var month = $(this).data("prev-month");
var year = $(this).data("prev-year");
getCalendar(month,year);
});
$(document).on("click", '.next', function(event) {
var month = $(this).data("next-month");
var year = $(this).data("next-year");
getCalendar(month,year);
});
$(document).on("blur", '#currentYear', function(event) {
var month = $('#currentMonth').text();
var year = $('#currentYear').text();
getCalendar(month,year);
});
});
function getCalendar(month,year){
$("#body-overlay").show();
$.ajax({
url: "calendar-ajax.php",
type: "POST",
data:'month='+month+'&year='+year,
success: function(response){
setInterval(function() {$("#body-overlay").hide(); },500);
$("#calendar-html-output").html(response);
},
error: function(){}
});
}
</script>
</body>
</html>
calendar-ajax.php file
<?php // require class require_once 'class.calendar.php'; $phpCalendar = new PHPCalendar (); // object of class $calendarHTML = $phpCalendar->getCalendarHTML(); echo $calendarHTML; ?>
class.calendar.php file
<?php
// class
class PHPCalendar {
private $weekDayName = array ("MON","TUE","WED","THU","FRI","SAT","SUN");
private $currentDay = 0;
private $currentMonth = 0;
private $currentYear = 0;
private $currentMonthStart = null;
private $currentMonthDaysLength = null;
// construct function
function __construct() {
$this->currentYear = date ( "Y", time () );
$this->currentMonth = date ( "m", time () );
if (! empty ( $_POST ['year'] )) {
$this->currentYear = $_POST ['year'];
}
if (! empty ( $_POST ['month'] )) {
$this->currentMonth = $_POST ['month'];
}
$this->currentMonthStart = $this->currentYear . '-' . $this->currentMonth . '-01';
$this->currentMonthDaysLength = date ( 't', strtotime ( $this->currentMonthStart ) );
}
// getCalendarHTML function
function getCalendarHTML() {
$calendarHTML = '<div id="calendar-outer">';
$calendarHTML .= '<div class="calendar-nav">' . $this->getCalendarNavigation() . '</div>';
$calendarHTML .= '<ul class="week-name-title">' . $this->getWeekDayName () . '</ul>';
$calendarHTML .= '<ul class="week-day-cell">' . $this->getWeekDays () . '</ul>';
$calendarHTML .= '</div>';
return $calendarHTML;
}
// getCalendarNavigation function
function getCalendarNavigation() {
$prevMonthYear = date ( 'm,Y', strtotime ( $this->currentMonthStart. ' -1 Month' ) );
$prevMonthYearArray = explode(",",$prevMonthYear);
$nextMonthYear = date ( 'm,Y', strtotime ( $this->currentMonthStart . ' +1 Month' ) );
$nextMonthYearArray = explode(",",$nextMonthYear);
$navigationHTML = '<div class="prev" data-prev-month="' . $prevMonthYearArray[0] . '" data-prev-year = "' . $prevMonthYearArray[1]. '"><</div>';
$navigationHTML .= '<span id="currentMonth">' . date ( 'M', strtotime ( $this->currentMonthStart ) ) . '</span>';
$navigationHTML .= '<span contenteditable="true" id="currentYear" style="margin-left:5px">'. date ( 'Y', strtotime ( $this->currentMonthStart ) ) . '</span>';
$navigationHTML .= '<div class="next" data-next-month="' . $nextMonthYearArray[0] . '" data-next-year = "' . $nextMonthYearArray[1]. '">></div>';
return $navigationHTML;
}
// getWeekDayName function
function getWeekDayName() {
$WeekDayName= '';
foreach ( $this->weekDayName as $dayname ) {
$WeekDayName.= '<li>' . $dayname . '</li>';
}
return $WeekDayName;
}
// getWeekDays function
function getWeekDays() {
$weekLength = $this->getWeekLengthByMonth ();
$firstDayOfTheWeek = date ( 'N', strtotime ( $this->currentMonthStart ) );
$weekDays = "";
for($i = 0; $i < $weekLength; $i ++) {
for($j = 1; $j <= 7; $j ++) {
$cellIndex = $i * 7 + $j;
$cellValue = null;
if ($cellIndex == $firstDayOfTheWeek) {
$this->currentDay = 1;
}
if (! empty ( $this->currentDay ) && $this->currentDay <= $this->currentMonthDaysLength) {
$cellValue = $this->currentDay;
$this->currentDay ++;
}
$weekDays .= '<li>' . $cellValue . '</li>';
}
}
return $weekDays;
}
// getWeekLengthByMonth function
function getWeekLengthByMonth() {
$weekLength = intval ( $this->currentMonthDaysLength / 7 );
if($this->currentMonthDaysLength % 7 > 0) {
$weekLength++;
}
$monthStartDay= date ( 'N', strtotime ( $this->currentMonthStart) );
$monthEndingDay= date ( 'N', strtotime ( $this->currentYear . '-' . $this->currentMonth . '-' . $this->currentMonthDaysLength) );
if ($monthEndingDay < $monthStartDay) {
$weekLength++;
}
return $weekLength;
}
}
?>
style.css file
.next,.prev{cursor:pointer;display:inline-block}.next,.prev,.week-day-cell li{display:inline-block}body{font-family:calibri}#calendar-outer{width:574px}#calendar-outer ul{margin:0;padding:0}#calendar-outer ul li{margin:0;padding:0;list-style-type:none}.prev{float:left}.next{float:right}:focus{outline:0;background:#ff8e8e}div.calendar-nav{background-color:#ff8e8e;border-radius:4px;text-align:center;padding:10px;color:#FFF;box-sizing:border-box;font-weight:700}#calendar-outer .week-name-title li{display:inline-block;padding:10px 27px;color:#90918b;font-size:.95em;font-weight:600}.week-day-cell li{width:80px;height:80px;text-align:center;line-height:80px;vertical-align:middle;background-color:#f6ffc6;color:#ff8e8e;border:1px solid #f1f0f0;border-radius:4px;font-size:1.2em}#body-overlay{background-color:rgba(0,0,0,.6);z-index:999;position:absolute;left:0;top:0;width:100%;height:100%;display:none}#body-overlay div{position:absolute;left:50%;top:50%;margin-top:-32px;margin-left:-32px}
Hope this code and post will helped you for implement Create dynamic calendar using jQuery, Ajax and PHP. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve onlincode. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs onlincode.org