使用Javascript/Ajax的PHP日历

我正在创建一个php日历，并且我正在使用Javascript/Ajax以在几个月之间滚动而无需刷新页面。日历工作正常，没有JavaScript/Ajax，但现在它只显示一个普通的白色屏幕。使用Javascript/Ajax的PHP日历

对不起，我的代码一大堆

代码： ** ** show_calendar.php

<html> 
    <head> 
    <link href="calstyle.css" rel="stylesheet" type="text/css" media="all" /> 
    <script language="JavaScript" type="text/javascript"> 
    function initialCalendar(){ 
     var hr = new XMLHttpRequest(); 
     var url = "calendar_start.php"; 
     var currentTime = new date(); 
     var month = currentTime.getMonth() + 1; 
     var year = currentTime.getFullYear(); 
     showmonth = month; 
     showyear = year; 
     var vars= "showmonth="+showmonth+"&showyear="+showyear; 
     hr.open("POST", url, true); 
     hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
     hr.onreadystatechange = function() { 
      if (hr.readyState == 4 && hr.status == 200) { 
       var return_data = hr.responseText; 
        document.getElementById("showCalendar").innerHTML = return_data; 
      } 
     } 
     hr.send(vars); 
     document.getElementbyId("showCalendar"). innerHTML = "processing..."; 
    } 
    </script> 
    <script language="JavaScript" type="text/javascript"> 
    function next_month() { 
     var next_month = showmonth + 1; 
     if(nextmonth > 12) { 
      nextmonth = 1; 
      showyear = showyear+1; 
     } 
     showmonth = nextmonth; 
     var hr = new XMLHttpRequest(); 
     var url = "calendar_start.php"; 
     var vars= "showmonth="+showmonth+"&showyear="+showyear; 
     hr.open("POST", url, true); 
     hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
     hr.onreadystatechange = function() { 
      if (hr.readyState == 4 && hr.status == 200) { 
       var return_data = hr.responseText; 
        document.getElementById("showCalendar").innerHTML = return_data; 
      } 
     } 
     hr.send(vars); 
     document.getElementbyId("showCalendar"). innerHTML = "processing..."; 
    } 
    </script> 
    <script language="JavaScript" type="text/javascript"> 
    function last_month() { 
     var last_month = showmonth - 1; 
     if(lastmonth <1) { 
      lasttmonth = 12; 
      showyear = showyear-1; 
     } 
     showmonth = lastmonth; 
     var hr = new XMLHttpRequest(); 
     var url = "calendar_start.php"; 
     var vars= "showmonth="+showmonth+"&showyear="+showyear; 
     hr.open("POST", url, true); 
     hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
     hr.onreadystatechange = function() { 
      if (hr.readyState == 4 && hr.status == 200) { 
       var return_data = hr.responseText; 
        document.getElementById("showCalendar").innerHTML = return_data; 
      } 
     } 
     hr.send(vars); 
     document.getElementbyId("showCalendar"). innerHTML = "processing..."; 
    } 
    </script> 
    </head> 
    <body onload="initialCalendar();"> 
    <div id="showCalendar"> </div> 
    </body> 
    </html> 

**Calendar_start.php** 

<?php 
$showmonth = $_POST['showmonth']; 
$showyear = $_POST['showyear']; 
$showmonth= preg_replace('#[^0-9]#i', '', $showmonth); 
$showyear= preg_replace('#[^0-9]#i', '', $showyear); 

$day_count = cal_days_in_month(CAL_GREGORIAN, $showmonth, $showyear); 
$pre_days = date('w', mktime(0,0,0, $showmonth, 1, $showyear)); 
$post_days = (6-(date('w', mktime(0,0,0, $showmonth, $day_count, $showyear)))); 

echo '<div id="calendar_wrap">'; 
echo '<div class="title_bar">'; 
echo '<div class="previous_month"><input name="submit" type="submit" value="Previous Month" onClick="javascript:last_month();"></div>'; 
echo '<div class="show_month">' . date('F', mktime(0, 0, 0, $showmonth)) . ' ' . $showyear . '</div>'; 
echo '<div class="next_month"><input name="submit" type="submit" value="Next Month" onClick="javascript:next_month();"></div>'; 
echo '</div>'; 

echo '<div class="week_days">'; 
echo '<div class="days_of_the_week">Sun</div>'; 
echo '<div class="days_of_the_week">Mon</div>'; 
echo '<div class="days_of_the_week">Tues</div>'; 
echo '<div class="days_of_the_week">Wed</div>'; 
echo '<div class="days_of_the_week">Thur</div>'; 
echo '<div class="days_of_the_week">Fri</div>'; 
echo '<div class="days_of_the_week">Sat</div>'; 
echo '<div class="clear"></div>'; 
echo '</div>'; 

if ($pre_days != 0) { 
    for($i=1; $i<=$pre_days; $i++) { 
     echo '<div class="non_cal_day"></div>'; 
    } 
} 

for ($i=1; $i<= $day_count; $i++) { 
    echo '<div class="cal_day">'; 
    echo '<div class="day_heading">' . $i . '</div>'; 
    echo '</div>'; 
} 

if ($post_days !=0) { 
    for($i=1; $i<=$post_days; $i++) { 
     echo '<div class="non_cal_day"></div>'; 
    } 
} 
echo '</div>'; 
?>

来源

2014-01-12 user3181157

任何人？我真的需要帮助 – user3181157

让我们去一部分一部分。

首先，你必须一式三份的代码，你真的应该擀成一个功能，让我们说，function load_month(n)调用load_mont(current)，分别load_month(current+1)和load_month(current-1)（我离开你在这里做实际的代码）。

二，您至少有两个案例错误：var currentTime = new date();应该有Date并在第23行，getElementbyId缺少大写B。

三，在我本地服务器默认的PHP安装中，日历扩展名似乎缺失（至少是cal_days_in_month方法）。所以，如果在之前的更正之后，你的代码仍然不起作用，那么你可能需要研究一下。

来源

2014-01-12 17:20:45 delCano

非常感谢，我修复了2个错误，现在显示日历，但是当您点击下个月或上个月时，它不会改变月份。有任何想法吗？ – user3181157

现在不用担心问题了，谢谢你的帮助。第28行next_month需要成为下个月 – user3181157

使用Javascript/Ajax的PHP日历

回答

相关问题