How To Create Web Calendar In Php With Jquery And Ajax
Before we proceed there are some basic things we need to know to make the feature more effectively.
• We need to build a style for our our calendar
• We need a JQuery script to run this feature,you can download your JQuery Script online
• We need to build an Ajax page that will call our PHP class
• We need to build a PHP class
• Finally we also need to create an index page
Steps To Create Our Web Calendar
- Create a page and name it style.css with the below codes
body { font-family: calibri; } #calendar-outer { width: 574px; } #calendar-outer ul { margin: 0px; padding: 0px; } #calendar-outer ul li { margin: 0px; padding: 0px; list-style-type: none; } .prev { display: inline-block; float: left; cursor: pointer } .next { display: inline-block; float: right; cursor: pointer } :focus { outline: none; background: #ff8e8e; } div.calendar-nav { background-color: #ff8e8e; border-radius: 4px; text-align: center; padding: 10px; color: #FFF; box-sizing: border-box; font-weight: bold; } #calendar-outer .week-name-title li { display: inline-block; padding: 10px 27px; color: #90918b; font-size: 0.95em; font-weight: 600; } .week-day-cell li { display: inline-block; 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, 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;} 2. Create a PHP Class and name it class.calender.php with the code given below.
<?php 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; 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 ) ); } 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; } 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; } function getWeekDayName() { $WeekDayName= ''; foreach ( $this->weekDayName as $dayname ) { $WeekDayName.= '<li>' . $dayname . '</li>'; } return $WeekDayName; } 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; } 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; } } ?> 3. Next proceed by creating PHP Ajax page and name it calendar-ajax.php with the below code
<?php require_once 'class.calendar.php'; $phpCalendar = new PHPCalendar (); $calendarHTML = $phpCalendar->getCalendarHTML(); echo $calendarHTML; ?>
4. Finally create an index.php page with the given code below
<?php require_once 'class.calendar.php'; $phpCalendar = new PHPCalendar (); ?> <html> <head> <link href="style.css" type="text/css" rel="stylesheet" /> <title>PHP Calendar</title> </head> <body> <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="jquery-1.11.2.min.js" type="text/javascript"></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> Note:You have to put all this code in the same folder,also note that the line (35,36,37) which is highlighted is calling the JQuery script I ask you to download earlier before we proceeded to this tutorial.
