PHP script to create the necessary calendar or a complete set of jquery

So here is what I want to do:

alt text

red = booked

green = available

I have data in MySQL in the format: property_id, booked_from, booked_until .

Before I try to create the correct loops, etc. To create and style the table, I thought it would be better to ask if there are already good jquery plugins / php classes that create this visual interface and are messy enough to allow me to add a date range selection method (like Google Analytics)?

I am looking for something to create a base calendar table in a loop, which I can then style and add jquery functions to. Although it is worth asking, is there a complete package that is already doing what I plan to do? !!

(JQuery UI Date-Picker doesn't look powerful enough / easy enough to change)

+4
source share
8 answers

Not so long ago, I needed to create a calendar-based web application with PHP and MySQL. I found that David Walsh's articles are life savers.

If you want to customize the jQuery UI DatePicker you should read the following: http://davidwalsh.name/jquery-datepicker-disable-days

If you want to create and display your own calendar, this article helped me a lot: http://davidwalsh.name/php-calendar There is a complete series on this PHP + MySQL calendar.

The real problem with such applications is the model you use to store and retrieve data from the database. Displaying information does not have to be so complicated.

As the second link shows, you can easily bring to the array all the registered dates from a specific month, and then scroll through the “cell” print every day. If the cell is reserved, add a “red” class to the div. Otherwise, add a green class.

Hope this helps.

+3
source

for me, I think you should read this article article .

you can create html table for calendar using php and then apply jQuery.

+1
source

PHP: callendar.inc

 <?php $b_gun=date("j"); $b_ay=date("n"); $b_yil=date("Y"); echo '<script type="text/javascript">'; echo 'takvim('.$b_ay.','.$b_yil.','.$b_gun.',1);'; echo "</script>"; ?> 

JavaScript: callendar.js

 function takvim(ay,yil,bugun,ilk_baslama) { if (ilk_baslama==1) { ana_gun=bugun; ana_ay=ay; ana_yil=yil; } else if (ay==ana_ay && yil==ana_yil) { bugun=ana_gun; } var kac_gun= new Date(yil,ay,0).getDate(); var son_gun= new Date(yil,ay,0).getDay(); var bol=Math.round(kac_gun/7); var carp=bol*7; var isle=kac_gun-carp-1; if (isle>son_gun) { son_gun=son_gun+7; } var ilk_gun=son_gun-isle;//0 pazar 6 cumartesi var g_ay=ay-1; if (g_ay==0) { g_ay=12; g_yil=yil-1; } else { g_yil=yil; } var i_ay=ay+1; if (i_ay==13) { i_ay=1; i_yil=yil+1; } else { i_yil=yil; } var t_geri_fonk='<a class="calendar_prev" href="#" onclick="takvim('+g_ay+','+g_yil+',0,0)">&laquo; </a>'; var t_ileri_fonk='<a class="calendar_next" href="#" onclick="takvim('+i_ay+','+i_yil+',0,0)">&raquo; </a>'; document.getElementById('t_geri').innerHTML=t_geri_fonk; document.getElementById('t_ileri').innerHTML=t_ileri_fonk; // Ay Yıl yazan üst kısım var aylar=new Array("Ocak","Şubat","Mart","Nisan","Mayıs","Haziran","Temmuz","Ağustos","Eylül","Ekim","Kasım","Aralık"); document.getElementById('t_ay_yil').innerHTML=(aylar[ay-1])+" "+yil; ///////////////////////// var ekle=new Array(6,0,1,2,3,4,5); var islem_yap=(ekle[ilk_gun])+kac_gun; var hafta_sayisi=Math.ceil(islem_yap/7); var yeni_sira=new Array(7,1,2,3,4,5,6); ilk_gun=(yeni_sira[ilk_gun]); var say=1; for (hafta=1;hafta<=6;hafta++) { if (hafta<=hafta_sayisi) { //haftada gün war for (gun=1;gun<=7;gun++) { if (say<=kac_gun) { if (hafta==1) { //ilk hafta if (gun<ilk_gun) { //bo? g?n kutusu var duzenle=document.getElementById('t_'+hafta+'_'+gun).innerHTML="<span></span>"; } else { //doldurmaya ba?la if (bugun!=0 && bugun==say) { var gizleme=document.getElementById('t_'+hafta+'_'+gun).style.display=""; var kirmizi=document.getElementById('t_'+hafta+'_'+gun).innerHTML="<a href=\"#\" style=\"background-color:#F39\">"+bugun+"</a>"; say++; } else if (gun==6 || gun==7) { //hafta sonu var duzenle=document.getElementById('t_'+hafta+'_'+gun).innerHTML='<a href="#" style=\"background-color:#F90\">'+say+'</a>'; say++; } else { //hafta i?i var duzenle=document.getElementById('t_'+hafta+'_'+gun).innerHTML='<a href="#">'+say+'</a>'; say++; } } } else { //di?er haftalar var gizleme=document.getElementById('t_'+hafta+'_'+gun).style.display=""; if (bugun!=0 && bugun==say) { var gizleme=document.getElementById('t_'+hafta+'_'+gun).style.display=""; var kirmizi=document.getElementById('t_'+hafta+'_'+gun).innerHTML="<a href=\"#\" style=\"background-color:#F39\">"+bugun+"</a>"; say++; } else if (gun==6 || gun==7) { //hafta sonu var duzenle=document.getElementById('t_'+hafta+'_'+gun).innerHTML='<a href="#" style=\"background-color:#F90\">'+say+'</a>'; say++; } else { //hafta i?i var duzenle=document.getElementById('t_'+hafta+'_'+gun).innerHTML='<a href="#">'+say+'</a>'; say++; } } } else { //kalan bo? g?nler var gizleme=document.getElementById('t_'+hafta+'_'+gun).style.display=""; var duzenle=document.getElementById('t_'+hafta+'_'+gun).innerHTML="<span></span>"; say++; } } } else { //haftada g?n bitti for (gun=1;gun<=7;gun++) { var gizle=document.getElementById('t_'+hafta+'_'+gun).style.display="none"; } } } } 

Html: index.html

 <div class="calendar_data"> <!--[if !IE]>start calendar data<![endif]--> <div class="cmonth"> <div class="ctrl"><center> <table cellspacing="0" cellpadding="0"> <tr> <td align="left" style="width: 15px;" id="t_geri"><a class="calendar_prev" href="#">&laquo; </a></td> <td align="center"><span><strong id="t_ay_yil">Ay Yıl</strong></span></td> <td align="right" style="width: 15px;" id="t_ileri"><a class="calendar_next" href="#">&raquo;</a></td> </tr> </table> </center> </div> </div> <div class="cont"> <ul class="chead"> <li><span>P.te</span></li> <li><span>Salı</span></li> <li><span>Çar</span></li> <li><span>Per</span></li> <li><span>Cum</span></li> <li><span>C.te</span></li> <li><span>Paz</span></li> </ul> <ul class="cdays"> <li id="t_1_1"><span></span></li> <li id="t_1_2"><span></span></li> <li id="t_1_3"><span></span></li> <li id="t_1_4"><span></span></li> <li id="t_1_5"><span></span></li> <li id="t_1_6"><span></span></li> <li id="t_1_7"><span></span></li> <li id="t_2_1"><span></span></li> <li id="t_2_2"><span></span></li> <li id="t_2_3"><span></span></li> <li id="t_2_4"><span></span></li> <li id="t_2_5"><span></span></li> <li id="t_2_6"><span></span></li> <li id="t_2_7"><span></span></li> <li id="t_3_1"><span></span></li> <li id="t_3_2"><span></span></li> <li id="t_3_3"><span></span></li> <li id="t_3_4"><span></span></li> <li id="t_3_5"><span></span></li> <li id="t_3_6"><span></span></li> <li id="t_3_7"><span></span></li> <li id="t_4_1"><span></span></li> <li id="t_4_2"><span></span></li> <li id="t_4_3"><span></span></li> <li id="t_4_4"><span></span></li> <li id="t_4_5"><span></span></li> <li id="t_4_6"><span></span></li> <li id="t_4_7"><span></span></li> <li id="t_5_1"><span></span></li> <li id="t_5_2"><span></span></li> <li id="t_5_3"><span></span></li> <li id="t_5_4"><span></span></li> <li id="t_5_5"><span></span></li> <li id="t_5_6"><span></span></li> <li id="t_5_7"><span></span></li> <li id="t_6_1"><span></span></li> <li id="t_6_2"><span></span></li> <li id="t_6_3"><span></span></li> <li id="t_6_4"><span></span></li> <li id="t_6_5"><span></span></li> <li id="t_6_6"><span></span></li> <li id="t_6_7"><span></span></li> </ul> </div> <!--[if !IE]>end calendar data<![endif]--> </div> 

in Turkey, month names and day names change from js. And we start the week on Monday, the last day is Sunday. You can change the visual way as you want!

here is an example of a review http://i40.tinypic.com/35nd4yf.jpg

+1
source

I do not know anything that could do this, although I myself have implemented something similar as a vacation request system. Although it’s easier for me to work with ul li tags than with a table, there is a slightly more attractive style, although I think it gives better control.

0
source

Here is the script that I use to display the next 12 months (including the current one) and set a different style on the cells, depending on whether they are booked or not.

It seems long, but it is not difficult.

It queries the database, queries all the dates booked, adds them to the array, and then sets a different style when writing all the cells.

Tell me if this is not clear.

  // Create an empty array, in which we will put all the booked dates from the database $bookedDates = array(); // Select all the existing bookings $sql = "SELECT * FROM reservation WHERE status = 'Confirmed'"; $result = mysql_query($sql); // For each reservation, we add all the days into the booking array while ($line = mysql_fetch_array($result)) { // Convert the SQL dates into mktime objects $splitStart = preg_split('/-/', $line['startDate']); $splitEnd = preg_split('/-/', $line['endDate']); $startDate = mktime(0, 0, 0, $splitStart[1], $splitStart[2], $splitStart[0]); $endDate = mktime(0, 0, 0, $splitEnd[1], $splitEnd[2], $splitEnd[0]); // We go through all the dates between the start date and end date of a specific reservation // to add them to the booking array $currentDate = $startDate; while ($currentDate < $endDate) { // We add the current day into the booked dates array $bookedDates[date('Ym-d', $currentDate)] = 'Booked'; $currentDate += 86400; //seconds in a day (which means 1 day) } } // The year and month of today (init) $currentYear = date('Y'); $currentMonth = date('m'); // We do 12 times the code in the while which writes 1 month, from 1 to 12 $monthIndex = 1; while ($monthIndex <= 12) { // Write the opening div of a calendar $resultString .= '<div class="oneCalendar">'; // We create a mktime object of the month we are writing $monthObject = mktime (0,0,0, $currentMonth, 1, $currentYear); $resultString .= '<table class="cal">'; $resultString .= '<caption>' . date('F Y', $monthObject) . '</caption>'; $resultString .= '<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>'; $dayIndex = 1; // Number of the day the month (the 1st) starts on (0 = Sun, 1 = Mon, etc.) $dayOffset = date('w', $monthObject); // Beginning of the first line $resultString .= '<tr>' . "\n"; for ($k = 0; $k < $dayOffset; $k++) $resultString .= '<td>&nbsp;</td>' . "\n"; // create an empty cell for every offset day for ($k = 0; $k < 7 - $dayOffset; $k++) // 7 - the day number that the month starts on (7 - 2 (Tuesday) = 5 which is Friday { $currentDate = $currentYear . '-' . $currentMonth . '-' . formatDay($k + 1); if (mktime(0, 0, 0, $currentMonth, $k + 1, $currentYear) < mktime(0, 0, 0, date('m'), date('d'), date('Y'))) $resultString .= '<td class="past" id="d'. $currentDate .'">' . ($k + 1) . '</td>' . "\n"; else if (isset($bookedDates[$currentDate]) && $bookedDates[$currentDate] == 'Booked') $resultString .= '<td class="booked" id="d'. $currentDate .'">' . ($k + 1) . '</td>' . "\n"; else $resultString .= '<td class="available" id="d'. $currentDate .'">' . ($k + 1) . '</td>' . "\n"; } $resultString .= '</tr>' . "\n"; // End of the first line // The remaining lines for ($i = 0; $i <= 4; $i++) // do all of the rows below 4 times { $resultString .= '<tr>' . "\n"; for ($j = 1; $j <= 7; $j++) //go through all 7 days { if ($dayIndex + (7 - $dayOffset) <= date('t', $monthObject)) { $currentDay = $dayIndex + (7 - $dayOffset); $currentDate = $currentYear . '-' . $currentMonth . '-' . formatDay($currentDay); if (mktime(0, 0, 0, $currentMonth, $currentDay, $currentYear) < mktime(0, 0, 0, date('m'), date('d'), date('Y'))) $resultString .= '<td class="past" id="d'. $currentDate .'">' . $currentDay . '</td>' . "\n"; else if (isset($bookedDates[$currentDate]) && $bookedDates[$currentDate] == 'Booked') $resultString .= '<td class="booked" id="d'. $currentDate .'">' . $currentDay . '</td>' . "\n"; else $resultString .= '<td class="available" id="d'. $currentDate .'">' . $currentDay . '</td>' . "\n"; } else { $resultString .= '<td>&nbsp;</td>' . "\n"; } $dayIndex++; } $resultString .= '</tr>' . "\n"; } $resultString .= '</table>'; $monthIndex++; $currentMonth++; if ($currentMonth > 12) { $currentYear++; $currentMonth = 1; } $currentMonth = formatDay($currentMonth); $resultString .= '</div>'; } return $resultString; } function formatDay($d) { if ($d < 10) return '0' . $d; else return $d; }` 
0
source

Have you tried looking in PEAR Calendar (PHP)? I used it for a number of projects and it is easy to set up and stylish as soon as you install it on your web server. You can use it to generate HTML, WML, SOAP, etc., although I always used it to create HTML table calendars or event lists (sometimes using Javascript to add additional features).

In addition to the official documentation, there is a good link to various options here: http://pearcalendar.sourceforge.net/examples/ . Especially pay attention to example 11 of attaching a payload if you want to use it for event planning.

There is also an example of a personal implementation of the PEAR calendar that I made: http://www.research.chop.edu/calendar/

0
source

FullCalendar is a jQuery calendar plugin that should provide functionality similar to the one you need, allowing you to return a list of events in which you specify a different name or identifier for the booked, and if the event is booked, use it differently with CSS .

0
source

Source: https://habr.com/ru/post/1307326/


All Articles