Events Calendar - User Specific

SalientAnimal · January 30, 2014

Hi All,

I have some source code that generates a full sized calendar. I would like to be able to have this calendar populate events from my MySQL database, but I am not entirely sure how to include this into the existing javascript.

Here is the code pertaining to the java script that generates the calendar.:

<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='cupertino/jquery-ui.min.css' />
<link href='fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='lib/jquery.min.js'></script>
<script src='lib/jquery-ui.custom.min.js'></script>
<script src='fullcalendar/fullcalendar.min.js'></script>
<script>

	$(document).ready(function() {
	
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
		
		$('#calendar').fullCalendar({
			theme: true,
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			editable: true,
			events: [
				//EVENTS GET POPULATED HERE WITH A MAUNAL ENTRY. HOW WOULD I INCLUDE PHP TO SELECT THE CALENDAR EVENTS FROM A MYSQL DATABASE
			]
		});
		
	});

</script>
<style>

	body {
		margin-top: 40px;
		text-align: center;
		font-size: 13px;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		}

	#calendar {
		width: 900px;
		margin: 0 auto;
		}

</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>

The events are populated between the [ ] preceded by the word events.

I know that it would be a

SELECT * FROM events_table WHERE username = $username

, but the question is to do a MySQLi query inside the javascript.

This is how each event is normally added manually to the calendar:

				{
					title: 'Birthday Party',
					start: new Date(y, m, d+1, 19, 0),
					end: new Date(y, m, d+1, 22, 30),
					allDay: false
				},
				{
					title: 'Click for Google',
					start: new Date(y, m, 28),
					end: new Date(y, m, 29),
					url: 'http://google.com/'
				}

SalientAnimal · January 30, 2014

Hi there,

I have updated my code as follows:

<!doctype html>
<?php
include_once '../includes/db_connect.php';
include_once '../includes/functions.php';
include_once '../includes/session_management.php';
?>


<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<html>
<head>
<link rel='stylesheet' href='cupertino/jquery-ui.min.css' />
<link href='fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='lib/jquery.min.js'></script>
<script src='lib/jquery-ui.custom.min.js'></script>
<script src='fullcalendar/fullcalendar.min.js'></script>
<script>

	$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: "events.php",
// Convert the allDay from string to boolean
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
var url = prompt('Type Event url, if exits:');
if (title) {
start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'http://localhost/events/add_events.php',
data: 'title='+ title+'&start='+ start +'&end='+ end +'&url='+ url ,
type: "POST",
success: function(json) {
alert('Added Successfully');
location.reload();
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true
);
}
calendar.fullCalendar('unselect');
},
editable: true,
eventDrop: function(event, delta) {
start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'http://localhost/events/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Updated Successfully");
}
});
},
eventResize: function(event) {
start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'http://localhost/events/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Updated Successfully");
}
});
}
});
});

However, my events.php file is not populating into the calendar. Here is my events.php file. If I open just this file I get the array returned.

<?php
include_once '../includes/db_connect.php';
include_once '../includes/functions.php';
include_once '../includes/session_management.php';

                        
                        // get the records from the database
                        if ($result = $mysqli->query("SELECT * FROM schedule ORDER BY id"));
						$arr = array();
						while($row = mysqli_fetch_assoc($result))
                        {
						$arr[] = $row;
						}
						echo json_encode($arr); 
          





?>

Sign In

Events Calendar - User Specific

Recommended Posts

SalientAnimal

Link to comment

Share on other sites

SalientAnimal

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information