PHP script for creating calendar table or jquery complete solution required

Question

Ok so this is what I want to make:

red = booked

green = available

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

Before I start trying to create the correct loops etc to create and style the table, i thought i best ask if there are already good jquery plugins / php classes create this visual interface and uncluttered enough to allow me to add a select date range method (like Google Analytics)?

I'm looking for something to create a basic calendar table on a loop, which i can then style and add jquery features. Though worth asking if there's a complete package that already does what i plan on making?!!

(jquery ui's date-picker doesn't look powerful enough / easy enough to modify)

Answer 1

for me, I think you should read this article.

from that, you could produce html table for the calendar using php then apply jQuery.

Answer 2

I don't know of anything that could do this, though I have implemented something like this myself as a holiday request system. Though I find it easier to work with ul li tags than a table, there is a bit more involved style wise though I think it gives better control.

Answer 3

see this link here is many good feature and easy to understand , u can use it according to your need.

Answer 4

Have you tried looking into PEAR Calendar (PHP)? I've used it for a number of projects and it is pretty easy to configure and style once you get it installed on your webserver. You can use it to generate HTML, WML, SOAP, etc, although I've always used it generate tabular HTML calendars or event lists (sometimes using Javascript to add additional functions).

In addition to the official documentation, here is a good reference of various options: http://pearcalendar.sourceforge.net/examples/. Especially look at example 11 of attaching a payload if you want to use it for event scheduling.

Also, here is an example of a personal implementation of PEAR Calendar I have done: http://www.research.chop.edu/calendar/

Answer 5

I had to build an entire calendar based web app with PHP and MySQL not so long ago. I found that David Walsh articles are life savers.

If you want to tweak the JQuery UI DatePicker, you should read this: http://davidwalsh.name/jquery-datepicker-disable-days

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

The real challenge in this kind of applications is the model you use to store and retrieve data from the database. Showing information should't be that complex.

As the second link suggests, you can easily bring to an array all the booked dates from an specific month and then loop through each day printing a "cell". If the cell is booked, add the "red" class to the div. Otherwise, add the "green" class.

Hope this helps.

Greetings from Argentina.

Answer 6

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 are changed from js.And we start the week in monday,last day is sunday. you can change the visual how do you want!

here is the example review http://i40.tinypic.com/35nd4yf.jpg

Answer 7

FullCalendar is a jQuery calendar plug-in that should provide functionality similar to what you need by allowing you to return a list of events where you provide a different title or ID for the booked ones and, if the event is booked, style it differently using CSS.

Answer 8

How To Build my first Calendar App

---

1. Lightweight Calendar Script
2. Knowledge of Standard Date and Time Formats
3. PHP Date/Time Function you needs to play with
4. MYSQL Date/Time Function you needs to play with
5. XHTML & CSS Style for your Calendar
6. JAVASCRIPT Framework and Calendar Widget for easy Access
7. JAVASCRIPT Date/Time Functions you may need to play with
8. USEFULL STUFF
   1. List of PHP Date Time Examples
   2. Highlight multiple dates in jQuery datepicker
   3. PHP Date Generator

---

Opened to any other suggestions and links!