If you looking for Web tutorial for How to use FullCalendar.js plugin with PHP dynamic website for scheduling our meeting or event on particular date and time. So in this post we have discuss How to Integrate Jquery FullCalendar Plugin with PHP server side script and Mysql database table. If you have working website for event management like schedule meeting or plan any task on particular date and that details we can see on web page in calendar format. For this things you can use this Fullcalender plugin is the better option than other.
FullCalendar.js plugin is javascript event calendar and this plugin we can use any web technology and it is easy to use any server side script like PHP. In short with this plugin we can play with database like Mysql also. It is a jquery library and it is displays calendar on web page with events which we have schedule on particular date and time. This is also provide not only month calendar details but also it also display details calendar like week and particular day hours details also. This plugin is very easy to use, for example we want to initialize this plugin on particular page then we have just write fullCalendar() method and this plugin will activate on particular page.
For discuss how to integrate this plugin with PHP and Mysql database, here we have make simple CRUD(Create, Read, Update, Delete) operation has been done with PHP Script with Mysql Data. First we have load data from database and display on calendar, so for this we have use events method. This method will called PHP page and from server it will send data in JSON string format and that data will display on calendar. Same way for add new event, so we have use select method of this plugin. By this method we can click on particular date cell then we can add new event of that day. After adding new event now we want to change date or time of particular event, so for this we have use eventResize and eventDrop method. By using this method we can change date and time of event. And lastly we want to remove particular event. So for this we have use eventClick method, by using this method when we have click on any event this it will triggered ajax request for remove event data from mysql table. So this way we can do Insert, Update, Delete and Select data operation with this Plugin by using PHP script with Mysql. Below we have also provide source code also.
Source Code
index.php
<?php
//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>
load.php
<?php
//load.php
$connect = new PDO('mysql:host=localhost;dbname=testing', 'root', '');
$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=testing', 'root', '');
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=testing', 'root', '');
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=testing', 'root', '');
$query = "
DELETE from events WHERE id=:id
";
$statement = $connect->prepare($query);
$statement->execute(
array(
':id' => $_POST['id']
)
);
}
?>
Database
--
-- Database: `testing`
--
-- --------------------------------------------------------
--
-- Table structure for table `events`
--
CREATE TABLE IF NOT EXISTS `events` (
`id` int(11) NOT NULL,
`title` varchar(255) NOT NULL,
`start_event` datetime NOT NULL,
`end_event` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Indexes for dumped tables
--
--
-- Indexes for table `events`
--
ALTER TABLE `events`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `events`
--
ALTER TABLE `events`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
nice
ReplyDeletehow to create gps based vehicle tracking system in php mysql.
ReplyDeletephp or javascript based live video chating using webcam
ReplyDeletevery good. most useful
ReplyDeleteCool..
ReplyDeleteSir, I am not able to see the events on my calendar , but when I open my load.php page all the events are present, so basically ny insert page is also working properly. So plz help me in bring my events to the calendar page.... ??
ReplyDeleteVery good. thanks
ReplyDeletevery useful code...
ReplyDeletesometimes we see but it dosen't work but this is workable nd useful
Sir, Events Is Successfully added But not showing on Calendar.....Please Solve it
ReplyDeleteThank you very much for the tutorial, but when I try it, the click on existing event, it only allows deletion, I want to click on the event and modify the event name and save. Also modify db to include another field and show the new field under the event name and update accordingly. Could you show an example of how to code this? I would be greatly appreciative. I am learning but have tried everything I know to try to achieve this. Thank you for your time.
ReplyDeleteThank you for sharing this integration that you were able to create! I have implemented it at the small business I work at as a time-off request calendar/database. Thanks again!
ReplyDeleteI tried this work..but i can't see events on my calendar....when i add new events (the message "added successfully " don't appear) also events are not saved in database.....not visible on the calendar.....can you please guide me to resolve this issue ..
ReplyDeletethanks, it's nice
ReplyDeleteGreat job brother. Every thing is working. Thanks a lot.
ReplyDeletenice tutorial helpfu
ReplyDeleteReally great article. Is there any way i can block the dates so that only one event can be added in a date range.
ReplyDeleteSuper cool, thank you so much!
ReplyDeletehow can I minimize the size of calendar?
ReplyDeleteAmazing
ReplyDeleteedit and update is not working, when click on events it gives the option to remove event
ReplyDeleteIf you are creative, you can tweak it on your own. I did it and it's working perfectly for this site: https://social.beraty.com
Deletetry this one : CREATE TABLE IF NOT EXISTS `events` (
Delete`id` int(11) NOT NULL,
`title` varchar(255) NOT NULL,
`start_event` date NOT NULL,
`end_event` date NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
if you want to update, all you have to do is to drag and drop.
DeleteTosey, It is working for you because you must have refresh page and then edit or deleted event. then its working fine. but when you add and immidiate delete it without reloading its not working. ID UNDEFINED.
DeleteShare source code
DeleteHi.
ReplyDeletehow to remove 12a in calendar
just change the variable type of you end_event and start_event in your database. instead of using DATETIME change it in DATE type. :)
DeleteCREATE TABLE IF NOT EXISTS `events` (
Delete`id` int(11) NOT NULL,
`title` varchar(255) NOT NULL,
`start_event` date NOT NULL,
`end_event` date NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
How to change color dynamically fc-content class. The code stops working when i wrote a script to apply css for current class?
Deletethe type of start_event and end_event in your database that change to "data"
Deletethe type of start_event and end_event in your database that change to "data"
Delete
Delete.fc-time {
visibility: hidden;
}
update function not working
ReplyDeleteIf I click a date then I click day button then i want that day's day view and similarly by clicking Week button I want to see that week's week view. Is there any method to do that?
ReplyDeleteT.I.A.
hi..
ReplyDeletehow to remove 12a in calendar
Add: displayEventTime: false
Deleteunder these lines:
events: 'load.php',
selectable:true,
selectHelper:true,
Thanks
Deletethe type of start_event and end_event change to "data" in your database
DeleteThank you so much for the extra code!
DeleteHow can you got the id value by event.id ?
ReplyDeleteI got "undefined" instead, when i debugged that, there's no "id" key in event value
Did you find a solution? I am so frustrated about this...
DeleteLooks like your code can't handle update "All Day" for eventDrop, but can remove and create new for allDay instead
ReplyDeletehow to remove – in week view
ReplyDeletehow to remove – in week view?
ReplyDeleteMy event is not on calendar and also database. Need help please :(
ReplyDeletehi, your project is really cool. I followed your work. While i am inserting any event, its shows event updated successfully. but, in appearing on it.
ReplyDeletehow to update and delete event from calender
ReplyDeletehow to add a dropdown below enter event title
ReplyDeleteload.php not working for me any idea event not load on calender the value i enter in it store in database
ReplyDeleteMe also encountered with same problem... Can anybody help me? Please.....
DeleteI got the same problem. On localhost it works fine but on server i see no items. Has anyone an idea?
Deletewhere to write code for load.php and insert.php
ReplyDeleteexcelente
ReplyDelete12a problem
ReplyDeletesolving!!!
the type of start_event and end_event in your database that change to "data"
how to add national holiday?
ReplyDeleteit's working ! thanks. I have a question, if I want to add more info like telefon number is there a limitation on string lenght ?
ReplyDeleteHow would I go about changing the CSS of this page? Currently designing a booking portal for my company and I need certain dates to be inaccessible depending on IF ELSE statements and when they do pick an available date they then need to fill out a form and all the information is sent to an email address? All help would be appreciated.
ReplyDeletehi the load.php don`t work
ReplyDeletedata are stored in db
if i call the load.php in browser i can see the json output
but noting in calendar
can you help
thx
can i change language? for example italian?
ReplyDeleteanyone know how to make this a week view only?
ReplyDeleteI too am looking for this
DeleteGot it! add "defaultView: 'agendaWeek'," above the "events: ' events: 'load.php'," that will make week view default then you can hide the buttons
Deletei would like to change language settings... is it possible?
ReplyDeleteHow to change colour of each event cell dynamically?
ReplyDeleteMy events is being stored in database but not in my website calendar
ReplyDeletehow to add the edit function? please help me.
ReplyDeleteOn loading no events appear in the calander and insert work well in database but cant appear also in the calander what is the problem ????
ReplyDeleteplease help if i convert this code according to laravel i dont get the events accordingly date what should do for thata
ReplyDeleteplease help if i convert this code according to laravel i dont get the events accordingly date what should do for thata
ReplyDeleteEvents are stored in database but now showing on calendar
ReplyDeletePerfect, everything works, I'm using it to mark vacation rental dates. To each insert I have attributed an id for each rent. Thank you
ReplyDeletePerfect, everything works, I'm using it to mark vacation rental dates. To each insert I have attributed an id for each rent. Thank you
ReplyDeleteIs there any way to change the language, or the Startdate, the things mentioned in the FullCalandar Doc seem to not be working.
ReplyDeleteCan you help me to Connect it with the Newer version of FullCalendar? (V4).
ReplyDeleteKind regards
mobile user can't add a new events
ReplyDeleteHow could i add the mouseover Tooltip ? i try but dost show
ReplyDeletehi. why if i'm entering an event,it didnt view at the calendar
ReplyDeletecomo anexar un formulario para capturar el evento
ReplyDeletehelp me to make update event success
ReplyDeleteHow to get a popup on event Click method
ReplyDeletefullcalendar.min.js:6 Uncaught TypeError: Cannot read property 'hasTime' of undefined when try to load data
ReplyDeleteYou are genius, no wasting time THX dude
ReplyDeletecan someone help me to add log in and register to this
ReplyDeletehi brother need help
ReplyDeleteif date example : start_event : 25 and end_event : 27
why calendar just color 25 and 26 how to color with 27
thank before
excelente ejemplo
ReplyDeletehow to change event color dynamically
ReplyDeleteso thanks (Y)
ReplyDeletethe edit is working but there's no output in the calendar. Any help?
ReplyDeleteYour free Printable calendar2021 templates are ready. Choose from a selection of 2021 annual blank calendars and agendas. Just click on any of the thumbnails to see the full sized image, then you can print from your browser or save the image for later.
ReplyDeletein the case of nested json, how would the ajax script look?
ReplyDeletehow to get id from url insert in ajax ?
ReplyDeleteHi sir can you writehow to add payment method in php... Its a request plz. Your ocde is very simple and easy to understand. Thanks !
ReplyDeleteworking?
ReplyDeleteeasy css change for different events color ?
ReplyDeletethank you!
ReplyDeleteHi, how to change the time slot of the calendar?
ReplyDeleteanyone knows how to pass a variable to load.php?
ReplyDeletewant to select all where...
error TS2300: Duplicate identifier 'editable'.
ReplyDeletei drop it and all works without the delete commande
can i know how to change the color of the background
ReplyDeleteHi. Did you manage to solve this? if yes, how did you do it?
DeleteThank you!
ReplyDeleteHelped me a lot.
How to add the background color on events?
ReplyDeleteDid you manage to solve it?
DeleteHow can you make the calendar display by week as default and how do you only show the tomes 9-5
ReplyDeletei want show more value on calander
ReplyDeleteit is not allowing the events to show up on the page. giving the option to add event but not showing up on calendar. PLease help
ReplyDeletethank you so much, it is working perfectly for me
ReplyDeletehow can i put calendar marker colors
ReplyDeleteHow can I change 12a to 00:00 in "month"
ReplyDeletehow to set so that the past date cannot be clicked
ReplyDeleteMonth view is fine. but in week & day view events are not showing. please help to resolve.
ReplyDeleteSir how can I see all the bookings made by an individual customer
ReplyDelete