Create dynamic calendar using jQuery, Ajax and PHP

Create dynamic calendar using jQuery, Ajax and PHP

In this Post We Will Explain About is Create dynamic calendar using jQuery, Ajax and PHP With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Create a jQuery calendar with AJAX, PHP, and MySQL Example

In this post we will show you Best way to implement Create Simple Dynamic Calendar Using Jquery and HTML, hear for Build an event calendar using jQuery, Ajax and PHPwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




how to Create dynamic calendar using jQuery, Ajax and PHP

The simple event calendar is a very most useful element for a simple scedules web project as well as web-application. Using it we can put the all the event to the calendar and reminder along with the some respective date. Today we’ll some discuss how can we create a PHP simple Event Calendar easily using jQuery and Ajax.

Also Read :   Display Image Preview Before Upload Multiple Images using jQuery,Ajax And PHP

Now we are going to simple creating an All the event calendar using Ajax jQuery, Ajax, PHP and MySQL db.

index.php

<?php
 
//Live24u.com require class
require_once 'class.calendar.php';
//Live24u.com object of class
$phpCalendar = new PHPCalendar ();
?>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
<title>Live24u Create dynamic calendar using jQuery, Ajax and PHP</title>
</head>
<body>
<h2>Step by step Create dynamic calendar in jQuery, Ajax and PHP</h2><hr><hr><hr>
<div id="body-overlay"><div><img src="loading.gif" width="64px" height="64px"/></div></div>
<div id="res-calc-html">
<?php
$CalcHTMLData = $phpCalendar->LiveCalcHtml();
echo $CalcHTMLData;
?>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(document).on("click", '.last', function(event) { 
        var month =  $(this).data("last-month");
        var year =  $(this).data("last-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", '#liveCyear', function(event) { 
        var month =  $('#liveCmonth').text();
        var year = $('#liveCyear').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);
            $("#res-calc-html").html(response);  
        },
        error: function(){} 
    });
     
}
</script>
</body>
</html>

calendar-ajax.php

<?php
//Live24u.com require class
require_once 'class.calendar.php';
$phpCalendar = new PHPCalendar ();
//Live24u.com object of class
$CalcHTMLData = $phpCalendar->LiveCalcHtml();
echo $CalcHTMLData;
?>

class.calendar.php

<?php
//Live24u.com class
class PHPCalendar {
    private $weekDayName = array ("MON","TUE","WED","THU","FRI","SAT","SUN");
    private $liveCday = 0;
    private $liveCmonth = 0;
    private $liveCyear = 0;
    private $liveCmonthstart = null;
    private $liveCmonthDaysLength = null; 
    //Live24u.com construct function
    function __construct() {
        $this->liveCyear = date ( "Y", time () );
        $this->liveCmonth = date ( "m", time () );
         
        if (! empty ( $_POST ['year'] )) {
            $this->liveCyear = $_POST ['year'];
        }
        if (! empty ( $_POST ['month'] )) {
            $this->liveCmonth = $_POST ['month'];
        }
        $this->liveCmonthstart = $this->liveCyear . '-' . $this->liveCmonth . '-01';
        $this->liveCmonthDaysLength = date ( 't', strtotime ( $this->liveCmonthstart ) );
    }
    //Live24u.com LiveCalcHtml function
    function LiveCalcHtml() {
        $CalcHTMLData = '<div id="calc-outer">'; 
        $CalcHTMLData .= '<div class="calendar-nav">' . $this->LiveCalcNav() . '</div>'; 
        $CalcHTMLData .= '<ul class="week-name-title">' . $this->getWeekDayName () . '</ul>';
        $CalcHTMLData .= '<ul class="week-day-cell">' . $this->getWeekDays () . '</ul>';     
        $CalcHTMLData .= '</div>';
        return $CalcHTMLData;
    }
     
    //Live24u.com LiveCalcNav function
    function LiveCalcNav() {
        $lastMonthYear = date ( 'm,Y', strtotime ( $this->liveCmonthstart. ' -1 Month'  ) );
        $lastMonthYearArray = explode(",",$lastMonthYear);
         
        $nextMonthYear = date ( 'm,Y', strtotime ( $this->liveCmonthstart . ' +1 Month'  ) );
        $getnextMyear = explode(",",$nextMonthYear);
         
        $navigationHTML = '<div class="last" data-last-month="' . $lastMonthYearArray[0] . '" data-last-year = "' . $lastMonthYearArray[1]. '"><</div>'; 
        $navigationHTML .= '<span id="liveCmonth">' . date ( 'M', strtotime ( $this->liveCmonthstart ) ) . '</span>';
        $navigationHTML .= '<span contenteditable="true" id="liveCyear" style="margin-left:5px">'.  date ( 'Y', strtotime ( $this->liveCmonthstart ) ) . '</span>';
        $navigationHTML .= '<div class="next" data-next-month="' . $getnextMyear[0] . '" data-next-year = "' . $getnextMyear[1]. '">></div>';
        return $navigationHTML;
    }
     
    //Live24u.com getWeekDayName function
    function getWeekDayName() {
        $WeekDayName= '';       
        foreach ( $this->weekDayName as $dayname ) {         
            $WeekDayName.= '<li>' . $dayname . '</li>';
        }       
        return $WeekDayName;
    }
     
    //Live24u.com getWeekDays function
    function getWeekDays() {
        $calWeekLan = $this->getWeekLengthByMonth ();
        $firstDayOfTheWeek = date ( 'N', strtotime ( $this->liveCmonthstart ) );
        $totalWkday = "";
        for($i = 0; $i < $calWeekLan; $i ++) {
            for($j = 1; $j <= 7; $j ++) {
                $cellIndex = $i * 7 + $j;
                $cellValue = null;
                if ($cellIndex == $firstDayOfTheWeek) {
                    $this->liveCday = 1;
                }
                if (! empty ( $this->liveCday ) && $this->liveCday <= $this->liveCmonthDaysLength) {
                    $cellValue = $this->liveCday;
                    $this->liveCday ++;
                }
                $totalWkday .= '<li>' . $cellValue . '</li>';
            }
        }
        return $totalWkday;
    }
     
    //Live24u.com getWeekLengthByMonth function
    function getWeekLengthByMonth() {
        $calWeekLan =  intval ( $this->liveCmonthDaysLength / 7 ); 
        if($this->liveCmonthDaysLength % 7 > 0) {
            $calWeekLan++;
        }
        $getmonthSdate= date ( 'N', strtotime ( $this->liveCmonthstart) );     
        $monthEndingDay= date ( 'N', strtotime ( $this->liveCyear . '-' . $this->liveCmonth . '-' . $this->liveCmonthDaysLength) );
        if ($monthEndingDay < $getmonthSdate) {          
            $calWeekLan++;
        }
         
        return $calWeekLan;
    }
}
?>

style.css

.next,.last{cursor:pointer;display:inline-block}.next,.last,.week-day-cell li{display:inline-block}body{font-family:calihri}#calc-outer{width:574px}#calc-outer ul{margin:0;padding:0}#calc-outer ul li{margin:0;padding:0;list-style-type:none}.last{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}#calc-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}





Example

Also Read :   jQuery ToggleClass to Switch Between Classes

I hope you have Got What is Add Event to Calendar using jQuery Ajax and PHP And how it works.I would Like to have FeadBack From My Blog(live24u.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(live24u.com) Are Most Always Welcome.