How To Usage Spider Web Calendar Inward Php Amongst Jquery In Addition To Ajax
Before nosotros buy the farm on at that spot are or then basic things nosotros postulate to know to brand the characteristic to a greater extent than effectively.
• We postulate to build a mode for our our calendar
• We postulate a JQuery script to run this feature,you tin give the sack download your JQuery Script online
• We postulate to build an Ajax page that volition telephone outcry upwardly our PHP class
• We postulate to build a PHP class
• Finally nosotros too postulate to practise an index page
Steps To Create Our Web Calendar
- Create a page in addition to elevate it style.css alongside 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 corporation #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 in addition to elevate it class.calender.php alongside the code given below.
<?php shape PHPCalendar { someone $weekDayName = array ("MON","TUE","WED","THU","FRI","SAT","SUN"); someone $currentDay = 0; someone $currentMonth = 0; someone $currentYear = 0; someone $currentMonthStart = null; someone $currentMonthDaysLength = null; component division __construct() { $this->currentYear = engagement ( "Y", fourth dimension () ); $this->currentMonth = engagement ( "m", fourth dimension () ); 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 = engagement ( 't', strtotime ( $this->currentMonthStart ) ); } component division 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>'; furnish $calendarHTML; } component division getCalendarNavigation() { $prevMonthYear = engagement ( 'm,Y', strtotime ( $this->currentMonthStart. ' -1 Month' ) ); $prevMonthYearArray = explode(",",$prevMonthYear); $nextMonthYear = engagement ( '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">' . engagement ( 'M', strtotime ( $this->currentMonthStart ) ) . '</span>'; $navigationHTML .= '<span contenteditable="true" id="currentYear" style="margin-left:5px">'. engagement ( 'Y', strtotime ( $this->currentMonthStart ) ) . '</span>'; $navigationHTML .= '<div class="next" data-next-month="' . $nextMonthYearArray[0] . '" data-next-year = "' . $nextMonthYearArray[1]. '">></div>'; furnish $navigationHTML; } component division getWeekDayName() { $WeekDayName= ''; foreach ( $this->weekDayName equally $dayname ) { $WeekDayName.= '<li>' . $dayname . '</li>'; } furnish $WeekDayName; } component division getWeekDays() { $weekLength = $this->getWeekLengthByMonth (); $firstDayOfTheWeek = engagement ( 'N', strtotime ( $this->currentMonthStart ) ); $weekDays = ""; for($i = 0; $i < $weekLength; $i ++) { for($j = 1; $j <= 7; $j ++) { $cellIndex = $i * vii + $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>'; } } furnish $weekDays; } component division getWeekLengthByMonth() { $weekLength = intval ( $this->currentMonthDaysLength / vii ); if($this->currentMonthDaysLength % vii > 0) { $weekLength++; } $monthStartDay= engagement ( 'N', strtotime ( $this->currentMonthStart) ); $monthEndingDay= engagement ( 'N', strtotime ( $this->currentYear . '-' . $this->currentMonth . '-' . $this->currentMonthDaysLength) ); if ($monthEndingDay < $monthStartDay) { $weekLength++; } furnish $weekLength; } } ?> 3. Next buy the farm on past times creating PHP Ajax page in addition to elevate it calendar-ajax.php alongside the below code
<?php require_once 'class.calendar.php'; $phpCalendar = novel PHPCalendar (); $calendarHTML = $phpCalendar->getCalendarHTML(); echo $calendarHTML; ?>
4. Finally practise an index.php page alongside the given code below
<?php require_once 'class.calendar.php'; $phpCalendar = novel 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 calendar month = $(this).data("prev-month"); var twelvemonth = $(this).data("prev-year"); getCalendar(month,year); }); $(document).on("click", '.next', function(event) { var calendar month = $(this).data("next-month"); var twelvemonth = $(this).data("next-year"); getCalendar(month,year); }); $(document).on("blur", '#currentYear', function(event) { var calendar month = $('#currentMonth').text(); var twelvemonth = $('#currentYear').text(); getCalendar(month,year); }); }); component division 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 accept to position all this code inwards the same folder,also greenback that the job (35,36,37) which is highlighted is calling the JQuery script I inquire you lot to download before before nosotros proceeded to this tutorial.
