Third Party PHP/Ajax calendar help

lauren_etherington · September 11, 2014

I found a tutorial on youtube that would allow me to create a calendar of events.

We have the calendar html page: This includes the onload="initialCalendar();" function

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

The script to show to actual calendar is called from here....

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="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('Databaseconnection Things')
	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('SELECT calid FROM calendar WHERE caldate = "'.$date.'"') or trigger_error("Query Failed! SQL: $sql - Error: ".mysqli_error($query), E_USER_ERROR);
        $num_rows = mysqli_num_rows($conn, $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

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

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

$events = '';
$query = mysqli_query('SELECT calid 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['eventtitle'];
		$desc = $row['description'];
		$loc = $row['eventlocation'];

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

I have posted all the code so you can see how it fits together ect ect however the issue I am having is an error message that repeats across the page.

it reads:

Warning: mysqli_error() expects parameter 1 to be mysqli, boolean given in /home/sites/agile-cms.co.uk/public_html/mfcf/calendar/calendar_start.php on line 49 Fatal error: Query Failed! SQL: - Error: in /home/sites/agile-cms.co.uk/public_html/mfcf/calendar/calendar_start.php on line 49

    for ($i=1; $i<= $day_count; $i++) {
        //get event logic
        $date = $i.'/'.$showmonth.'/'.$showyear;
        $query = mysqli_query($conn, 'SELECT eventid FROM events WHERE eventdate = "'.$date.'"') or trigger_error("Query Failed! SQL: $sql - Error: ".mysqli_error($query), 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>';
    }

I think I have missed something being so close to it and I think I need an outside P.O.V to look at it and point me in the right direction....

Any help would be much appreciated....

lauren_etherington · September 11, 2014

Okay so good news!!!

I have removed all the errors from the script all on my lonesome

However, I am unable to view the Event Button that should display on top of the correct date. It would be helpful if I could actually edit my original post

Is there any reason why the button would not be showing up?

Code is basically the same with a few ammendments to the calendar_start.php

<?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("Database Connection")
		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>';
?>

I do wonder if there is anything to do with the $deets variable? I don't know.

I have never built a calendar before I just need a bit of advice.....

Thanks

Sign In

Third Party PHP/Ajax calendar help

Recommended Posts

lauren_etherington

Link to comment

Share on other sites

lauren_etherington

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information