PHP/Ajax Calendar 3rd Party Script Help!!

[LaurenE]

Hi Guys,
I found a tutorial online on how to build an events calendar using PHP and Ajax.
I am however a little stuck, I have ran debuggers and have error messages printed throughout the code and whilst the basic calendar functionality works, it does not actually display any events.

The code is as follows:
On my actual calendar page you can see:

<script type="text/javascript">
/* <![CDATA[ */
function initialCalendar(){
    var hr = new XMLHttpRequest();
    var url = "calendar/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 type="text/javascript">
/* <![CDATA[ */
function next_month() {
    var nextmonth = showmonth + 1;
    if(nextmonth > 12) {
        nextmonth = 1;
        showyear = showyear+1;
    }
    showmonth = nextmonth;
    var hr = new XMLHttpRequest();
    var url = "calendar/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 type="text/javascript">
/* <![CDATA[ */
function last_month() {
    var lastmonth = showmonth - 1;
    if(lastmonth < 1 ) {
        lastmonth = 12;
        showyear = showyear-1;
    }
    showmonth = lastmonth;
    var hr = new XMLHttpRequest();
    var url = "calendar/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 type="text/javascript">
/* <![CDATA[ */
function overlay() {
    el = document.getElementById("overlay");
    el.style.display = (el.style.display == "block") ? "none" : "block";
    el = document.getElementById("events");
    el.style.display = (el.style.display == "block") ? "none" : "block";
    el = document.getElementById("eventsBody");
    el.style.display = (el.style.display == "block") ? "none" : "block";
}
/* ]]> */
</script>
<script type="text/javascript">
/* <![CDATA[ */
function show_details(theId) {
    var deets = (theId.id);
    el = document.getElementById("overlay");
    el.style.display = (el.style.display == "block") ? "none" : "block";
    el = document.getElementById("events");
    el.style.display = (el.style.display == "block") ? "none" : "block";
    var hr = new XMLHttpRequest();
    var url = "calendar/events_fns.php";
    var vars = "deets="+deets;
    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("events").innerHTML = return_data;
        }
    }
    hr.send(vars);
    document.get ElementById("events").innerHTML = "processing...";
}
/* ]]> */
</script>
</head>

<body onload="initialCalendar();">
    <div id="showCalendar"></div>
        <div id="overlay">
            <div id="events"></div>
        </div>

Then in the calendar sub directory we have the calendars PHP functions, so we have calendar_start:

<?php

ini_set('display_errors', 'On');
error_reporting(E_ALL);

$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="button" 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="button" type="submit" value="Next Month" onClick="javascript:next_month();"></div>';
    echo '</div>';

    echo '<div class="week_days">';
        echo '<div class="days-of-week">Sun</div>';
        echo '<div class="days-of-week">Mon</div>';
        echo '<div class="days-of-week">Tues</div>';
        echo '<div class="days-of-week">Wed</div>';
        echo '<div class="days-of-week">Thur</div>';
        echo '<div class="days-of-week">Fri</div>';
        echo '<div class="days-of-week">Sat</div>';
        echo '<div class="clear"></div>';
    echo '</div>';

    //Previous Month days
    if ($pre_days != 0) {
        for($i=1; $i<=$pre_days; $i++) {
            echo '<div class="non-cal-days"></div>';
        }
    }

    //Current Month Days
    $conn = mysqli_connect("Thanks","for","all the","fish")
        or die ("Could not connect to the Database");

    for ($i=1; $i<= $day_count; $i++) {
        //get event logic
        $date = $i.'/'.$showmonth.'/'.$showyear;
        $query = mysqli_query($conn, 'SELECT calid FROM calendar WHERE caldate = "'.$date.'"') or trigger_error("Query Failed! SQL: $query - Error: ".mysqli_error($conn), E_USER_ERROR);
        $num_rows = mysqli_num_rows($query);
        if($num_rows > 0) {
            $event = "<input name='$date' type='submit' value='Details' id='$date' onClick='javascript:show_details(this);'>";
        }
        echo '<div class="cal-days">';
        echo '<div class="day-heading">' . $i . '</div>';
        if($num_rows != 0) { echo "<div class='opening'><br/>" . $event . "</div>";}
        echo '</div>';
    }

    //Next Months Days
    if ($post_days !=0) {
        for($i=1; $i<=$post_days; $i++) {
            echo '<div class="non-cal-days"></div>';
        }
    }
echo '</div>';
?>

and events_fns:

<?php
ini_set('display_errors', 'On');
error_reporting(E_ALL);


$deets = $_POST['deets'];
$deets = preg_replace('#[^0-9/]#i', '', $deets);

$conn = mysqli_connect("Cheeeeers",":)",":)",":)")
    or die ("Could not connect to the Database");

$events = '';
$query = mysqli_query('SELECT * FROM calendar WHERE caldate = "'.$deets.'"') or die ("Error:".mysqli_errno());

//echo "$query";

$num_rows=0;
if ($result = mysqli_query($query,$conn)) {
    $num_rows = mysqli_num_rows($result);
    }

if ($num_rows > 0) {
    $events .= '<div id="eventsControl"><button onMouseDown="overlay()">Close</button><br /><br />'.$deets.'<br /><br /></div>';

    while ($row = mysqli_fetch_array($query)) {
        $title = $row['caltitle'];
        $desc = $row['caldesc'];
        $loc = $row['callocation'];

        $events .='<div id="eventsBody">'.$title.'<br />'.$desc.'<br />'.$loc.'<hr /></div>';
    }
}
echo $events;
?>

There are no error messages on the page, it just doesn't display the events. I have been through the tutorial COUNTLESS times and I can't see where I have gone wrong and I think I need an outside perspective to help nudge me in the right direction so any help would be greatly appreciated. I have a feeling it has something to do with the "$deets" variable but I'm not sure.....

Thanks!!!

[veedeoo]

did you fill this up properly?

$conn = mysqli_connect("Thanks","for","all the","fish")

mysqli connector syntax is like this

$conn = mysqli_connect("db_host","db_user_name","db_user_password","datbase_name") or die("Error " . mysqli_error($link)); 

I remember a similar question was asked some two years ago. It has something to do with the database columns.

[veedeoo]

Another question, was the original tutorial uses regular mysql extesion or was it MySQlI as shown on your codes. May I see the original sourcecodes or the tutorial page?

[LaurenE]

I couldn't find the original source code, it was a youtube video I followed and yea it was in MYSQL. It was from a while ago. Struggled to find something more recent.

And yes I did fill in the connections correctly :)

[LaurenE]

Also, can I ask what you mean by "something to do with the database columns"

[veedeoo]

I couldn't find the thread here on Daniweb. It was from 2 or 3 years ago. I am relying here on my memory and I think it was the column 'caldesc', but it could have been 'description'.

Can you double check and make sure that all of your database columns matched with the database query and query results?

so for example if we have

 $title = $row['caltitle'];
$desc = $row['caldesc'];
$loc = $row['callocation'];

then those columns should exist as

+ caltitle + caldesc + callocation +
+----------+---------+-------------+
+          +         +             +
+----------+---------+-------------+

Here is another calendar you may want to take a look.

For this type of function, I normally use libraries e.g. CodeIgniter Calendaring Class and calendar plugin for Symfony2. So, there are pretty people would write this script from the ground up.

[LaurenE]

Thanks,
My database columns all match up, Copied and pasted from the database so I knew there wouldn't be any spelling mistakes ect ect....

I am beginning to think a plug in might be a better idea.