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']
)
);
}
?>
@jonathanrivasmendez
Copy link

Y the database structure?

@dwhyte4
Copy link

dwhyte4 commented Mar 28, 2019

do you understand how to implement this with the version 4?

@ahmaddaghestani
Copy link

Hi,
Great work :)
How I can display an image as title on calendar ?
Thank you

@simmani5
Copy link

Very good ^^

@pepijndik
Copy link

do you understand how to implement this with the version 4?

Any one who have it working with version 4??? need some exmaples on how to do it for this version thanks!

@Slampan
Copy link

Slampan commented Jul 23, 2019

do you understand how to implement this with the version 4?

Any one who have it working with version 4??? need some exmaples on how to do it for this version thanks!

I am also very interested!

@pepijndik
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();
          },
        });

      }




    }`

@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