用于创建日历表或jquery完整解决方案的PHP脚本

时间：2010-04-19 08:39:06

标签： php jquery

好的，这就是我想要的：

alt text http://i44.tinypic.com/eiwphl.jpg

红色=已预订

绿色=可用

我在mysql中有以下格式的数据： property_id, booked_from, booked_until。

在我开始尝试创建正确的循环等来创建和设置表格之前，我想我最好问是否已经有好的jquery插件/ php类创建这个可视化界面并且整洁得足以允许我添加选择日期范围方法（如谷歌分析）？

我正在寻找在循环上创建基本日历表的东西，然后我可以设置样式并添加jquery功能。虽然值得一提的是，是否已经完成了我计划制作的完整套餐？!!

（jquery ui的日期选择器看起来不够强大/不够容易修改）

8 个答案:

答案 0 :(得分：3)

我不得不在很久以前用PHP和MySQL构建一个基于日历的整个Web应用程序。 我发现David Walsh的文章是救命的。

如果要调整JQuery UI DatePicker，您应该阅读： http://davidwalsh.name/jquery-datepicker-disable-days

如果你想构建和展示自己的日历，这篇文章给了我很多帮助： http://davidwalsh.name/php-calendar 这个PHP + MySQL日历有一个完整的系列。

此类应用程序的真正挑战是用于存储和检索数据库中数据的模型。显示信息不应该那么复杂。

正如第二个链接所示，您可以轻松地将特定月份的所有预订日期带到一个数组，然后循环每天打印一个“单元格”。如果预订了单元格，请将“红色”类添加到div。否则，添加“绿色”类。

希望这有帮助。

答案 1 :(得分：3)

如何构建我的第一个日历应用

  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

    9. 已打开任何其他建议和链接！

答案 2 :(得分：1)

对我来说，我认为你应该阅读article。

从那里，您可以使用php为日历生成html表，然后应用jQuery。

答案 3 :(得分：1)

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>

在土耳其月份名称和日期名称从js更改。我们在星期一开始一周，最后一天是星期日。 你可以改变你的视觉效果！

这是示例评论http://i40.tinypic.com/35nd4yf.jpg

答案 4 :(得分：0)

我不知道有什么能做到这一点，尽管我已经将这样的事情作为假期请求系统实现了。虽然我发现使用ul li标签比使用表格更容易，但是我认为它可以更好地控制风格。

答案 5 :(得分：0)

这是我用来显示下个月12个月（包括当前版本）的脚本，并根据它们是否被预订在单元格上设置不同的样式。

看起来很长但并不复杂。

查询数据库，询问所有预订日期，将它们添加到数组中，然后在编写所有单元格时相应地设置不同的样式。

说是否不清楚。

    // 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;

}`

答案 6 :(得分：0)

您是否尝试过调查PEAR Calendar（PHP）？我已将它用于许多项目，一旦将其安装到您的网络服务器上，它就非常容易配置和设计。您可以使用它来生成HTML，WML，SOAP等，虽然我总是使用它生成表格HTML日历或事件列表（有时使用Javascript添加其他功能）。

除官方文档外，以下是各种选项的良好参考：http://pearcalendar.sourceforge.net/examples/。特别是如果要将其用于事件调度，请查看附加有效负载的示例11。

此外，以下是我已完成的PEAR日历的个人实施示例：http://www.research.chop.edu/calendar/

答案 7 :(得分：0)

FullCalendar是一个jQuery日历插件，它应该提供类似于您需要的功能，允许您返回事件列表，其中您为预订的事件提供不同的标题或ID，如果事件已预订，使用CSS设置不同的样式。

相关问题
最新问题