Skip to content

Instantly share code, notes, and snippets.

@adijvlian

adijvlian/CalendarController.php

Created May 28, 2018 04:11
Show Gist options
  • Save adijvlian/1de3fd2e0d6c05c53de135c001c5cbd6 to your computer and use it in GitHub Desktop.
Save adijvlian/1de3fd2e0d6c05c53de135c001c5cbd6 to your computer and use it in GitHub Desktop.
Download ZIP
JQuery FullCalendar Integration with PHP and MySQL
Raw
CalendarController.php
<?php
class CalendarController extends ControllerBase
{
public function indexAction()
{
include "incld/load.php";
include "incld/insert.php";
include "incld/update.php";
include "incld/delete.php";
}
}
Raw
delete.php
<?php
//delete.php
if(isset($_POST["id"]))
{
$connect = new PDO('mysql:host=localhost;dbname=test', 'root', '');
$query = "
DELETE from event WHERE id=:id
";
$statement = $connect->prepare($query);
$statement->execute(
array(
':id' => $_POST['id']
)
);
}
?>
Raw
index.php
<!DOCTYPE html>
<html>
<head>
<title>Jquery Fullcalandar Integration with PHP and Mysql</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="#">Jquery Fullcalandar Integration with PHP and Mysql</a></h2>
<br />
<div class="container">
<div id="calendar"></div>
</div>
</body>
</html>
Raw
insert.php
<?php
//insert.php
$connect = new PDO('mysql:host=localhost;dbname=test', 'root', '');
if(isset($_POST["title"]))
{
$query = "
INSERT INTO event
(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']
)
);
}
?>
Raw
load.php
<?php
//load.php
$connect = new PDO('mysql:host=localhost;dbname=test', 'root', '');
$data = array();
$query = "SELECT * FROM event 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);
?>
Raw
update.php
<?php
//update.php
$connect = new PDO('mysql:host=localhost;dbname=test', 'root', '');
if(isset($_POST["id"]))
{
$query = "
UPDATE event
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']
)
);
}
?>
@darkterminal
Copy link

I have got it working for v4.

`eventDrop: function(info) { // called when an event (already on the calendar) is moved
console.log('Afspraak verplaats', info.event.title);
var start = info.event.start.toISOString().slice(0, 19).replace('T', ' ');
var end = info.event.end.toISOString().slice(0, 19).replace('T', ' ');
var id = info.event.id;
if (info.newResource) {
var recourceid = info.newResource.id;

        $.ajax({
          type: 'POST',
          url: 'update.php',
          data: 'id=' + id + '&start=' + start + '&end=' + end + '&resourceId=' + recourceid,
          success: function(response) {
            console.log('succes:', info.event.title);
            console.log('Eind tijd:', info.event.end.toISOString().slice(0, 19).replace('T', ' '));
            console.log('ID:', info.event.id);
            calendar.rerenderEvents();
          },
        });

      } else {

        var recourceid = "";
        console.log('Type Auto:', recourceid);
        $.ajax({
          type: 'POST',
          url: 'update.php',
          data: 'id=' + id + '&start=' + start + '&end=' + end + '&resourceId=' + recourceid,
          success: function(response) {
            console.log('succes:', info.event.title);
            console.log('start tijd:', info.event.start.toISOString().slice(0, 19).replace('T', ' '));
            console.log('Eind tijd:', info.event.end.toISOString().slice(0, 19).replace('T', ' '));
            console.log('ID:', info.event.id);
            console.log('auto:', recourceid);
            calendar.rerenderEvents();
          },
        });

      }




    }`

Do you have a full example?

@noseve
Copy link

noseve commented May 17, 2020

I don't understand - where is the original class 'ControllerBase' which 'CalendarController' extends?
Also - darkterminal - have you successfully tested this under ver. 4 yet?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment