Php calendar with Javascript/Ajax

Question

I am creating a php calendar and I am using Javascript/Ajax in order to scroll between months without having to refresh the page. The calendar worked fine without the Javascript/Ajax but now it just displays a plain white screen.

Sorry for the big heap of code

Code: **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>';
?>

Answer 1

Let's go part by part.

First, you have triplicated code, which you really should roll into one function, let's say, function load_month(n) called with load_mont(current) , load_month(current+1) and load_month(current-1) respectively (I leave you to do the actual code here).

Second, you have at least two case errors: var currentTime = new date (); should have Date and in line 23, getElementbyId is missing a capital B .

Three, in my local server default php installation, the Calendar extension seems to be missing (at least the cal_days_in_month method). So, if after the previous corrections, your code still doesn't work, you might want to look into that.

Php calendar with Javascript/Ajax

Question

1 answers

solution1
0 ACCPTED 2014-01-12 17:20:45

Php calendar with Javascript/Ajax

Question

1 answers

solution1 0 ACCPTED 2014-01-12 17:20:45

solution1
0 ACCPTED 2014-01-12 17:20:45