Users will find it easy to manage events in a calendar. For form-based event management, users will need to provide more information such as event title, date range, and other details. In calendar view management, however, the user can only give the title and select the date. This will allow the user to manage his daily events quickly.
I used FullCalendar JavaScript to add and manage events with a PHP calendar. It is open-source and easy to integrate it into your application.
This library supports event CRUD functionality. I used jQuery AJAX to call PHP to handle event CRUD operation with the database. FullCalendar allows you to drag and drop events from one date to the next.
It supports event resizing, which allows you to increase or decrease the event duration.
This is the output of the PHP event management example using FullCalendar library.
full calendar PHP MySQL example
You can add, edit and delete events.
Step 1. Download FullCalendar plugin from here.
Step 2. Create database table events
CREATE TABLE events ( id int(11) NOT NULL AUTO_INCREMENT, start datetime DEFAULT NULL, end datetime DEFAULT NULL, title text, uid varchar(100), PRIMARY KEY (id) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
Step 3. Code includes below jQuery and CSS scripts
<!— jQuery —> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <!— custom scripts —> <script type="text/javascript" src="js/script.js"></script> <!— bootstrap —> <script src="bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script> <link href="bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" > <!— fullcalendar —> <link href="css/fullcalendar.css" rel="stylesheet" /> <link href="css/fullcalendar.print.css" rel="stylesheet" media="print" /> <script src="js/moment.min.js"></script> <script src="js/fullcalendar.js"></script>
PHP Files and coding:
database.php
<?php $con = mysqli_connect('localhost','DataBaseUser','DataBasePassword','DataBaseName') or die(mysqli_error($con)); ?>
Edit this file and add your database credentials.
index.php
The index file contains all the actions add an event, edit an event, delete events, and load events.
You can separate all actions in different files as addevent.php, editevent.php, deleteevent.php, and loadevents.php, etc.
<?php include("database.php"); if(isset($_POST['action']) or isset($_GET['view'])) //show all events { if(isset($_GET['view'])) { header('Content-Type: application/json'); $start = mysqli_real_escape_string($connection,$_GET["start"]); $end = mysqli_real_escape_string($connection,$_GET["end"]); $result = mysqli_query($connection,"SELECT id, start ,end ,title FROM events where (date(start) >= ‘$start’ AND date(start) <= ‘$end’)"); while($row = mysqli_fetch_assoc($result)) { $events[] = $row; } echo json_encode($events); exit; } elseif($_POST['action'] == "add") // add new event section { mysqli_query($connection,"INSERT INTO events ( title , start , end ) VALUES ( '".mysqli_real_escape_string($connection,$_POST["title"])."', '".mysqli_real_escape_string($connection,date('Y-m-d H:i:s',strtotime($_POST["start"])))."‘, '".mysqli_real_escape_string($connection,date('Y-m-d H:i:s',strtotime($_POST["end"])))."‘ )"); header('Content-Type: application/json'); echo '{"id":"'.mysqli_insert_id($connection).'"}'; exit; } elseif($_POST['action'] == "update") // update event { mysqli_query($connection,"UPDATE events set start = '".mysqli_real_escape_string($connection,date('Y-m-d H:i:s',strtotime($_POST["start"])))."', end = '".mysqli_real_escape_string($connection,date('Y-m-d H:i:s',strtotime($_POST["end"])))."' where id = '".mysqli_real_escape_string($connection,$_POST["id"])."'"); exit; } elseif($_POST['action'] == "delete") // remove event { mysqli_query($connection,"DELETE from events where id = '".mysqli_real_escape_string($connection,$_POST["id"])."'"); if (mysqli_affected_rows($connection) > 0) { echo "1"; } exit; } } ?>
script.js
This file contains all the actions and sends a request to a server and receives a response.
$(document).ready(function(){ var calendar = $('#calendar').fullCalendar({ header:{ left: 'prev,next today', center: 'title', right: 'agendaWeek,agendaDay' }, defaultView: 'agendaWeek', editable: true, selectable: true, allDaySlot: false, events: "index.php?view=1", eventClick: function(event, jsEvent, view) { endtime = $.fullCalendar.moment(event.end).format('h:mm'); starttime = $.fullCalendar.moment(event.start).format('dddd, MMMM Do YYYY, h:mm'); var mywhen = starttime + ' - ' + endtime; $('#modalTitle').html(event.title); $('#modalWhen').text(mywhen); $('#eventID').val(event.id); $('#calendarModal').modal(); }, //header and other values select: function(start, end, jsEvent) { endtime = $.fullCalendar.moment(end).format('h:mm'); starttime = $.fullCalendar.moment(start).format('dddd, MMMM Do YYYY, h:mm'); var mywhen = starttime + ' - ' + endtime; start = moment(start).format(); end = moment(end).format(); $('#createEventModal #startTime').val(start); $('#createEventModal #endTime').val(end); $('#createEventModal #when').text(mywhen); $('#createEventModal').modal('toggle'); }, eventDrop: function(event, delta){ $.ajax({ url: 'index.php', data: 'action=update&title='+event.title+'&start='+moment(event.start).format()+'&end='+moment(event.end).format()+'&id='+event.id , type: "POST", success: function(json) { //alert(json); } }); }, eventResize: function(event) { $.ajax({ url: 'index.php', data: 'action=update&title='+event.title+'&start='+moment(event.start).format()+'&end='+moment(event.end).format()+'&id='+event.id, type: "POST", success: function(json) { //alert(json); } }); } }); $('#submitButton').on('click', function(e){ // We don't want this to act as a link so cancel the link action e.preventDefault(); doSubmit(); }); $('#deleteButton').on('click', function(e){ // We don't want this to act as a link so cancel the link action e.preventDefault(); doDelete(); }); function doDelete(){ $("#calendarModal").modal('hide'); var eventID = $('#eventID').val(); $.ajax({ url: 'index.php', data: 'action=delete&id='+eventID, type: "POST", success: function(json) { if(json == 1) $("#calendar").fullCalendar('removeEvents',eventID); else return false; } }); } function doSubmit(){ $("#createEventModal").modal('hide'); var title = $('#title').val(); var startTime = $('#startTime').val(); var endTime = $('#endTime').val(); $.ajax({ url: 'index.php', data: 'action=add&title='+title+'&start='+startTime+'&end='+endTime, type: "POST", success: function(json) { $("#calendar").fullCalendar('renderEvent', { id: json.id, title: title, start: startTime, end: endTime, }, true); } }); } });
That’s all for a unique and straightforward events application. I hope you all like this script, please feel free to comment your issues below.
Please comment below if you face any issues.
13 Comments
Peekaboo Sales
May 16, 2017 at 2:16 amHi, thanks for this codes. I am able to add the events to database, but when i refresh the page the event gone. What could be the problem? Thanks.
Faiz Aiman Zulkarnain
August 7, 2017 at 9:43 amHi, I am having the same issue. Did yours fixed?
min
March 20, 2018 at 10:38 ami am having the same problem. do you have the solution ?
Huzoor Bux
June 25, 2018 at 8:05 amcheck console for errors
Matías Gabriel Leites Do Santo
June 5, 2017 at 5:18 pmnice its working perfect.
Faiz Aiman Zulkarnain
August 7, 2017 at 7:47 amI only have Week & Day view. How can i enable Month view? Thanks thought for the tutorial!. ‘)
martin-martin
September 7, 2017 at 12:20 pmwhen i’m try to add months on header it does not look on main page and also not able to run minTime and maxTime
Arsalan Jawaid
November 20, 2017 at 8:42 amI can add event but when refresh its gone
PHP Warning: mysqli_fetch_assoc() expects parameter 1 to be mysqli_result, boolean given in index.php on line 20
this is the code in line 20
while($row = mysqli_fetch_assoc($result))
Tom
March 6, 2018 at 9:48 amgreat code .
how can i get add external-events drag and drop and how to add description when i add a event .
min
March 20, 2018 at 9:30 amHi, thanks for this codes. I am able to add the events to database, but when i refresh the page the event gone. What could be the problem? Thanks.
Lalendra Dias
December 11, 2018 at 8:23 amcannot download the sourcecode please share a link
Ruddi Aagaard
April 9, 2021 at 8:02 amI notice that in fullcalendar.js there is working hours, how can i set that?
Can i change the timeformat to 24 hour format also in the left collum where it says am and pm ?
Dzmitri
June 1, 2021 at 10:47 amI used fullcalendar with php, js and Mysql in CRM BItrix24