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

How to integrate jQuery Fullcalendar with PHP and MySQL

May 3rd, 2017 Huzoor Bux Bootstrap, jQuery, MySQL, PHP 11 comments

Facebook Twitter Google+ LinkedIn Pinterest
How to integrate jQuery Fullcalendar with PHP and MySQL

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.

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="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.

 

 

Share this:

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

Related

Facebook Twitter Google+ LinkedIn Pinterest
Next article 8 Best PHP Frameworks Of 2017 For Developers
Previous article Useful JavaScript globals

Huzoor Bux

I am a PHP Developer

Related Posts

Stripe Payment Gateway Charge Credit Card with PHP API
February 15th, 2021

Stripe Payment Gateway Charge Credit Card with PHP

How to building responsive WordPress theme using Bootstrap Bootstrap
February 4th, 2021

How to building responsive WordPress theme using Bootstrap

6 Reasons Laravel is the Top PHP Framework in the Web Development Industry Framework
February 1st, 2021

6 Reasons Laravel is the Top PHP Framework in the Web Development Industry

11 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

Leave a Reply to Lalendra Dias Cancel reply

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

Advertisement
Recent Posts
  • Stripe Payment Gateway Charge Credit Card with PHP
  • How to building responsive WordPress theme using Bootstrap
  • 6 Reasons Laravel is the Top PHP Framework in the Web Development Industry
  • 9 Best Programming languages you should learn in 2021
  • 12 Reasons to Choose PHP for Developing Website
Categories
  • API
  • Bootstrap
  • CSS
  • CSS 3
  • Designing
  • Framework
  • Guide
  • HTML
  • HTML 5
  • JavaScript
  • jQuery
  • MySQL
  • Node.js
  • oAuth
  • Payment
  • PHP
  • Python
  • Social
  • Tips
  • WordPress
Weekly Tags
  • PHP
  • api
  • How to
  • PHP Basics
  • Programming Habits
  • HTML5
  • PHP framework
  • Download
  • laravel
  • css
  • About
  • Privacy Policy
  • Back to top
© PHPLift 2020. All rights reserved.