I am trying to create calendar where I can add event(class with student), edit and delete event. And it’s ok, it’s working, but I would like to have an dropdown menu/list with students names (the names are stored in database “calendar” table “students”), so I can just click on student name not to type it every time. I have this files and code:
index.php:
<?php
//index.php
?>
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<script>
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
editable:true,
header:{
left:'prev,next today',
center:'title',
right:'month,agendaWeek,agendaDay'
},
events: 'load.php',
selectable:true,
selectHelper:true,
select: function(start, end, allDay)
{
var title = prompt("Enter Event Title");
if(title)
{
var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
$.ajax({
url:"insert.php",
type:"POST",
data:{title:title, start:start, end:end},
success:function()
{
calendar.fullCalendar('refetchEvents');
alert("Added Successfully");
}
})
}
},
editable:true,
eventResize:function(event)
{
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
var title = event.title;
var id = event.id;
$.ajax({
url:"update.php",
type:"POST",
data:{title:title, start:start, end:end, id:id},
success:function(){
calendar.fullCalendar('refetchEvents');
alert('Event Update');
}
})
},
eventDrop:function(event)
{
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
var title = event.title;
var id = event.id;
$.ajax({
url:"update.php",
type:"POST",
data:{title:title, start:start, end:end, id:id},
success:function()
{
calendar.fullCalendar('refetchEvents');
alert("Event Updated");
}
});
},
eventClick:function(event)
{
if(confirm("Are you sure you want to remove it?"))
{
var id = event.id;
$.ajax({
url:"delete.php",
type:"POST",
data:{id:id},
success:function()
{
calendar.fullCalendar('refetchEvents');
alert("Event Removed");
}
})
}
},
});
});
</script>
</head>
<body>
<br />
<h2 align="center"><a href="#">Title</a></h2>
<br />
<div class="container">
<div id="calendar"></div>
</div>
</body>
</html>
load.php
<?php
//load.php
$connect = new PDO('mysql:host=localhost;dbname=calendar', 'root', 'password');
$data = array();
$query = "SELECT * FROM events ORDER BY id";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row)
{
$data[] = array(
'id' => $row["id"],
'title' => $row["title"],
'start' => $row["start_event"],
'end' => $row["end_event"]
);
}
echo json_encode($data);
?>
insert.php
<?php
//insert.php
$connect = new PDO('mysql:host=localhost;dbname=calendar', 'root', 'password');
if(isset($_POST["title"]))
{
$query = "
INSERT INTO events
(title, start_event, end_event)
VALUES (:title, :start_event, :end_event)
";
$statement = $connect->prepare($query);
$statement->execute(
array(
':title' => $_POST['title'],
':start_event' => $_POST['start'],
':end_event' => $_POST['end']
)
);
}
?>
update.php
<?php
//update.php
$connect = new PDO('mysql:host=localhost;dbname=calendar', 'root', 'password');
if(isset($_POST["id"]))
{
$query = "
UPDATE events
SET title=:title, start_event=:start_event, end_event=:end_event
WHERE id=:id
";
$statement = $connect->prepare($query);
$statement->execute(
array(
':title' => $_POST['title'],
':start_event' => $_POST['start'],
':end_event' => $_POST['end'],
':id' => $_POST['id']
)
);
}
?>
delete.php
<?php
//delete.php
if(isset($_POST["id"]))
{
$connect = new PDO('mysql:host=localhost;dbname=calendar', 'root', 'password');
$query = "
DELETE from events WHERE id=:id
";
$statement = $connect->prepare($query);
$statement->execute(
array(
':id' => $_POST['id']
)
);
}
?>
Database “calendar”.
Table “students” with columns: id, student_name
Table “event” with columns: id, title, start_event, end_event
I try some changes but I didn’t get result which I want.
