I have used this fantastic plugin in a project and found it very helpful for your websites, and it’s super easy and straightforward to integrate into your website.
I have used bootstrap With PHP & MySQL straightforward and easy steps.
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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script> <link href="https://maxcdn.bootstrapcdn.com/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 event 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 send a request to a server and receive 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.
11 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