I am a beginner in JS and php and I tried to make an agenda with the plugin full calendar. I'm using a database with fullcalendar.
My table :
CREATE TABLE evenement (
id int(11) NOT NULL AUTO_INCREMENT,
title varchar(255) COLLATE utf8_bin NOT NULL,
start datetime NOT NULL,
end datetime DEFAULT NULL,
url varchar(255) COLLATE utf8_bin NOT NULL,
allDay varchar(255) COLLATE utf8_bin NOT NULL DEFAULT 'false',
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin AUTO_INCREMENT=7 ;
My agenda page :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href='fullcalendar/fullcalendar.css' rel='stylesheet' />
<script src='fullcalendar/lib/jquery.min.js'></script>
<script src='fullcalendar/lib/jquery-ui.custom.min.js'></script>
<script src='fullcalendar/lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.min.js'></script>
<script src='fullcalendar/lang/fr.js'></script>
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#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 exists:');
if (title) {
var start=moment(start).format('YYYY-MM-DDTHH:mm:ssZ');
var end=moment(end).format('YYYY-MM-DDTHH:mm:ssZ');
$.ajax({
url: 'add_events.php',
data: 'title='+ title+'&start='+ start +'&end='+ end +'&url='+ url ,
type: "POST",
success: function(json) {
alert('Added Successfully');
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
eventDrop: function(event, delta) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: '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) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Updated Successfully");
}
});
}
});
});
</script>
<style>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<?php //echo json_encode($title); ?>
<div id='calendar'></div>
</body>
</html>
My add_events page :
<?php
// Values received via ajax
$title = $_POST['title'];
$start = $_POST['start'];
$end = $_POST['end'];
$url = $_POST['url'];
// connection to the database
try {
$bdd = new PDO('mysql:host=localhost;dbname=elevage', 'root', 'admin');
} catch(Exception $e) {
exit('Unable to connect to database.');
}
// insert the records
$sql = "INSERT INTO evenement (title, start, end, url) VALUES (:title, :start, :end, :url)";
$q = $bdd->prepare($sql);
$q->execute(array(':title'=>$title, ':start'=>$start, ':end'=>$end, ':url'=>$url));
?>
My update_events page :
<?php
/* Values received via ajax */
$id = $_POST['id'];
$title = $_POST['title'];
$start = $_POST['start'];
$end = $_POST['end'];
// connection to the database
try {
$bdd = new PDO('mysql:host=localhost;dbname=elevage', 'root', 'admin');
} catch(Exception $e) {
exit('Unable to connect to database.');
}
// update the records
$sql = "UPDATE evenement SET title=?, start=?, end=? WHERE id=?";
$q = $bdd->prepare($sql);
$q->execute(array($title,$start,$end,$id));
?>
Can anybody tells me what's wrong with my code and why ? My problems atm are that events do not show properly in week/day views and when I try to add an event it doesnt add in the database (so disappear after an refresh). Also the time isnt displayed.
Thanks.
