• Home
  • PHP
  • MySQL
  • Demos
  • HTML
  • CSS
  • jQuery
  • Framework
  • Social
  • Request Tutorial
PHP Lift
  • Home
  • Demos
  • Advertisement
PHP Lift
  • Home
  • PHP
  • MySQL
  • Demos
  • HTML
  • CSS
  • jQuery
  • Framework
  • Social
  • Request Tutorial
  • Follow
    • Facebook
    • Twitter
    • Google+
    • Pinterest
    • Youtube
    • Instagram
    • RSS
Home
Bootstrap

How to integrate jQuery FullCalendar with PHP & MySQL Example

May 21st, 2021 Huzoor Bux Bootstrap, jQuery, MySQL, PHP 13 comments

Facebook Twitter Google+ LinkedIn Pinterest
How to integrate jQuery FullCalendar with PHP & MySQL Example

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.

See Also: Simple PHP REST API with Slim, PHP & MySQL

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.

DEMO
DOWNLOAD CODE

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.

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)

Related

  • Tags
  • Fullcalendar
  • How to
  • jQuery
  • MYSQL
  • PHP
Facebook Twitter Google+ LinkedIn Pinterest
Next article Is the Life of a Programmer Lonely?
Previous article How do I send an auto-reply message on Skype?

Huzoor Bux

I am a PHP Developer

Related Posts

How to Create PDFs from HTML with PHP and Dompdf HTML
June 29th, 2022

How to Create PDFs from HTML with PHP and Dompdf

Is PHP dead in 2021? Is PHP still relevant or worth the effort? PHP
May 22nd, 2022

Is PHP dead in 2021? Is PHP still relevant or worth the effort?

How to Extract Text from PDF using PHP PHP
May 17th, 2022

How to Extract Text from PDF using PHP

13 Comments

  1. Peekaboo Sales
    May 16, 2017 at 2:16 am Reply ↓

    Hi, 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.

    1. Faiz Aiman Zulkarnain
      August 7, 2017 at 9:43 am Reply ↓

      Hi, I am having the same issue. Did yours fixed?

      1. min
        March 20, 2018 at 10:38 am Reply ↓

        i am having the same problem. do you have the solution ?

    2. Huzoor Bux
      June 25, 2018 at 8:05 am Reply ↓

      check console for errors

  2. Matías Gabriel Leites Do Santo
    June 5, 2017 at 5:18 pm Reply ↓

    nice its working perfect.

  3. Faiz Aiman Zulkarnain
    August 7, 2017 at 7:47 am Reply ↓

    I only have Week & Day view. How can i enable Month view? Thanks thought for the tutorial!. ‘)

  4. martin-martin
    September 7, 2017 at 12:20 pm Reply ↓

    when i’m try to add months on header it does not look on main page and also not able to run minTime and maxTime

  5. Arsalan Jawaid
    November 20, 2017 at 8:42 am Reply ↓

    I 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))

  6. Tom
    March 6, 2018 at 9:48 am Reply ↓

    great code .
    how can i get add external-events drag and drop and how to add description when i add a event .

  7. min
    March 20, 2018 at 9:30 am Reply ↓

    Hi, 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.

  8. Lalendra Dias
    December 11, 2018 at 8:23 am Reply ↓

    cannot download the sourcecode please share a link

  9. Ruddi Aagaard
    April 9, 2021 at 8:02 am Reply ↓

    I 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 ?

  10. Dzmitri
    June 1, 2021 at 10:47 am Reply ↓

    I used fullcalendar with php, js and Mysql in CRM BItrix24

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Advertisement
    Like us
    Recent Posts
    • How to Create PDFs from HTML with PHP and Dompdf
    • How to create a screen recorder in JavaScript
    • Best 10 Programming Languages that will rule in 2022
    • Top 7 Websites To Get Your First Paid Internship
    • How to Create Bar Chart Race in JavaScript
    Categories
    • API
    • Bootstrap
    • Bot
    • CSS
    • CSS 3
    • Database
    • Designing
    • Framework
    • Guide
    • HTML
    • HTML 5
    • JavaScript
    • jQuery
    • MySQL
    • Node.js
    • oAuth
    • Payment
    • PHP
    • Python
    • Social
    • Tips
    • WordPress
    Weekly Tags
    • PHP
    • How to
    • javascript
    • api
    • MYSQL
    • jQuery
    • HTML to PDF
    • PHP Basics
    • Programming Habits
    • HTML5
    • About
    • Privacy Policy
    • Back to top
    © PHPLift 2021. All rights reserved.