Expert Guidance for MSc, BIT, BSc, HND Projects: PHP, Python Automation, Freelancing and ICT Tuition: Laravel Tutorial

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.

How to start a software project ? Pre conditions to follow.

Sample Project Proposal: Absence Request and Vacation Schedule Management
Example Project Proposal: Online Examination and Evaluation System

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.

javascript popup window with drop down
var oModal=window.showModalDialog("filename.html","","dialogHeight:100px");
inside filename.html have an html file with a dropdown and return the data using returnValue

YouTube https://www.youtube.com/channel/UCJojbxGV0sfU1QPWhRxx4-A
LinkedIn https://www.linkedin.com/in/ict-bit-tuition-class-software-development-colombo/
WordPress https://computerclassinsrilanka.wordpress.com
quora https://www.quora.com/profile/BIT-UCSC-UoM-Final-Year-Student-Project-Guide
Newsletter https://sites.google.com/view/the-leaning-tree/newsletter
Wix https://itclasssl.wixsite.com/icttraining
Web https://itclass-bit-ucsc-uom-php-final-project.business.site/
mystrikingly https://bit-ucsc-uom-final-year-project-ideas-help-guide-php-class.mystrikingly.com/
https://elakiri.com/threads/bit-ucsc-uom-php-mysql-project-guidance-and-individual-classes-in-colombo.1627048/
ucsc bit registration 2023 bit (ucsc syllabus) bit colombo university fees bit results bit vle bit course fee bit exam time table 2023 bit moratuwa

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;

Ref https://www.webslesson.info/2017/12/jquery-fullcalandar-integration-with-php-and-mysql.html


Blog http://localedxcelcambridgeictcomputerclass.blogspot.com

Join Facebook Fan page https://www.facebook.com/pages/Itsoftware-Classin-Srilanka/380768322055448

Join Linkedin http://www.linkedin.com/pub/it-class-sri-lanaka/7b/948/a26

Google plus https://plus.google.com/+itclassFaazSoftwareProjectsAssignmentsSriLanka

Wordpress http://computerclassinsrilanka.wordpress.com/author/itclasssl/

SlideShare http://www.slideshare.net/BITUCSCUoMFinalyearp




Individual / Group / Online ICT classes in English / Sinhala / Tamil. Sample Projects/Assignments Exam Papers, Tutorials, Notes and Answers will be provided. 

Call +94 777 33 7279 | eMail itclasssl@gmail.com | Skype ITClassSL

Expert Guidance for MSc, BIT, BSc, HND Projects: PHP, Python Automation, Freelancing and ICT Tuition

Main Menu

Sunday, September 2, 2018

Jquery Fullcalendar Integration with PHP and Mysql web development project classes in sri lanka ICT