Gerekli takvim tablo veya jquery komple bir çözüm oluşturmak için PHP komut dosyası

8 Cevap php

Tamam, böylece bu benim yapmak istediğim şey:

alt text

rezervasyonu kırmızı =

Mevcut yeşil =

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

Ben tablo oluşturmak ve stil doğru döngüler vb oluşturmak için çalışıyor başlamadan önce, ben zaten iyi jquery eklentileri / php sınıfları (bu görsel arayüzü ve bana bir select tarih aralığı yöntemi eklemek için yeterince derli toplu oluşturmak varsa ben iyi sormak düşündüm Google Analytics gibi)?

Ben bir döngü üzerinde temel bir takvim tablo oluşturmak için bir şey arıyorum hangi i stil sonra can ve jquery özellikler eklemek. Zaten i yapma planı ne yapar tam bir paket var soran değer olsa da?!

(JQuery UI adlı tarih seçici değiştirmek için yeterince kolay / yeterince güçlü görünmüyor)

8 Cevap

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.

Uygulamalarda bu tür gerçek bir meydan okuma size veritabanından veri depolamak ve almak için kullandığınız model. Bilgisini gösteren bu karmaşık olmamalıdır.

Ikinci bağlantı da anlaşılacağı gibi, kolayca bir dizi için bir "hücre" baskı her gün boyunca sonra tüm rezervasyonu bir belirli ayın tarihleri ​​ve döngü getirebilir. Hücre rezervasyonu ise, div "kırmızı" sınıf ekleyin. Aksi takdirde, "yeşil" sınıf ekleyin.

Umarım bu yardımcı olur.

Benim için, ben bu article okumak gerektiğini düşünüyorum.

bundan, sonra jQuery uygulamak php kullanarak takvim için html tablo üretmek olabilir.

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!

Burada örnek gözden http://i40.tinypic.com/35nd4yf.jpg

Ben bir tatil isteği sistemi olarak böyle bir şey kendimi hayata olsa ben bu yapabileceği bir şey bilmiyorum. Ben daha kolay bir tablo daha ul li etiketleri ile çalışmak bulmak olsa olsa ben daha iyi kontrol sağlar düşünmek biraz daha yer stil bilge var.

İşte (şimdiki dahil) 12 sonraki ay görüntüleyebilir ve onlar rezervasyonu veya değilse bağlı hücreler üzerinde farklı bir stil ayarlamak için kullanabileceğiniz yazısıdır.

Bu uzun gibi görünüyor ama karmaşık değil.

Bu, tüm rezervasyonu tarihleri ​​soran, DB sorgulayan bir dizi içine ekler ve tüm hücreleri yazarken daha sonra buna göre farklı bir stili ayarlamak.

Açık değilse söylüyorlar.

    // 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('Y-m-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;

}`

Eğer PEAR Calendar (PHP) içine bakarak denediniz mi? Ben bir takım projeler için kullandım ve bunu web sunucunuza yüklü olsun bir kez oldukça yapılandırmak için kolay ve tarzı. Ben her zaman (bazen ek fonksiyonlar eklemek için JavaScript kullanarak) bu tablo HTML takvimler veya olay listeleri oluşturmak kullandım karşın, vb HTML, WML, SOAP, oluşturmak için kullanabilirsiniz.

Resmi belgelere ek olarak, burada çeşitli seçenekler iyi bir referanstır: http://pearcalendar.sourceforge.net/examples/. Eğer olay zamanlama için kullanmak istiyorsanız, özellikle yük bağlama, örneğin 11 bakmak.

Ayrıca, burada ben yaptım ARMUT Takvim kişisel bir uygulama bir örnek: http://www.research.chop.edu/calendar/

FullCalendar bir jQuery takvim ki olay ise size rezervasyonu olanlar için farklı bir başlık ya da kimliği sağlamak ve olayların bir listesini döndürmek için izin vererek ne gerek benzer bir işlevsellik sağlamalıdır plug-in Bu farklı CSS kullanarak rezervasyonu, tarzı.