Event Calendar Using FullCalendar and MySQL

Good evening blogger friend how are you? Have you prepared your Christmas and New Year?

This time we will share how to make a calendar event using fullCalendar and Mysql. Immediately, we turn to the core discussion.

calender event using fullcalendar


First create a database with the name of the calender then enter the database structure below.

 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


CREATE TABLE IF NOT EXISTS `events` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `color` varchar(7) DEFAULT NULL,
  `start` datetime NOT NULL,
  `end` datetime DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=15 ;
 

Next, create a file with the name bdd.php. This file functions as a database.

 <?php
try
{
 $bdd = new PDO('mysql:host=localhost;dbname=calender;charset=utf8', 'root', '');
}
catch(Exception $e)
{
        die('Erreur : '.$e->getMessage());
}
 

Create a file with the name addEvent.php file to add events to the database.

 <?php

// Connexion à la base de données
require_once('bdd.php');
//echo $_POST['title'];
if (isset($_POST['title']) && isset($_POST['start']) && isset($_POST['end']) && isset($_POST['color'])){
 
 $title = $_POST['title'];
 $start = $_POST['start'];
 $end = $_POST['end'];
 $color = $_POST['color'];

 $sql = "INSERT INTO events(title, start, end, color) values ('$title', '$start', '$end', '$color')";
 //$req = $bdd->prepare($sql);
 //$req->execute();
 
 echo $sql;
 
 $query = $bdd->prepare( $sql );
 if ($query == false) {
  print_r($bdd->errorInfo());
  die ('Erreur prepare');
 }
 $sth = $query->execute();
 if ($sth == false) {
  print_r($query->errorInfo());
  die ('Erreur execute');
 }

}
header('Location: '.$_SERVER['HTTP_REFERER']);

 
?>
 

Blind file with the name editEventDate.php file works when you want to update the event date

 <?php

// Connexion à la base de données
require_once('bdd.php');

if (isset($_POST['Event'][0]) && isset($_POST['Event'][1]) && isset($_POST['Event'][2])){
 
 
 $id = $_POST['Event'][0];
 $start = $_POST['Event'][1];
 $end = $_POST['Event'][2];

 $sql = "UPDATE events SET  start = '$start', end = '$end' WHERE id = $id ";

 
 $query = $bdd->prepare( $sql );
 if ($query == false) {
  print_r($bdd->errorInfo());
  die ('Erreur prepare');
 }
 $sth = $query->execute();
 if ($sth == false) {
  print_r($query->errorInfo());
  die ('Erreur execute');
 }else{
  die ('OK');
 }

}
//header('Location: '.$_SERVER['HTTP_REFERER']);

 
?>
 

Next create a file named editEventTitle.php file that works when you want to change the event title.

 <?php

require_once('bdd.php');
if (isset($_POST['delete']) && isset($_POST['id'])){
 
 
 $id = $_POST['id'];
 
 $sql = "DELETE FROM events WHERE id = $id";
 $query = $bdd->prepare( $sql );
 if ($query == false) {
  print_r($bdd->errorInfo());
  die ('Erreur prepare');
 }
 $res = $query->execute();
 if ($res == false) {
  print_r($query->errorInfo());
  die ('Erreur execute');
 }
 
}elseif (isset($_POST['title']) && isset($_POST['color']) && isset($_POST['id'])){
 
 $id = $_POST['id'];
 $title = $_POST['title'];
 $color = $_POST['color'];
 
 $sql = "UPDATE events SET  title = '$title', color = '$color' WHERE id = $id ";

 
 $query = $bdd->prepare( $sql );
 if ($query == false) {
  print_r($bdd->errorInfo());
  die ('Erreur prepare');
 }
 $sth = $query->execute();
 if ($sth == false) {
  print_r($query->errorInfo());
  die ('Erreur execute');
 }

}
header('Location: index.php');

 
?>
 

Finally create a file named index.php file as a display form where all processes are executed.

 <?php
require_once('bdd.php');
$sql = "SELECT id, title, start, end, color FROM events ";
$req = $bdd->prepare($sql);
$req->execute();
$events = $req->fetchAll();
?>

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Full Calender</title>
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
 <!-- FullCalendar -->
 <link href='css/fullcalendar.css' rel='stylesheet' />
    <!-- Custom CSS -->
    <style>
    body {
        padding-top: 70px;
        /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
    }
 #calendar {
  max-width: 800px;
 }
 .col-centered{
  float: none;
  margin: 0 auto;
 }
    </style>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Celender Event From Full Calender - MySQL</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <!-- Page Content -->
    <div class="container">

        <div class="row">
            <div class="col-lg-12 text-center">
                <h3>FullCalendar PHP MySQL</h3>
                <div id="calendar" class="col-centered">
                </div>
            </div>
   
        </div>
        <!-- /.row -->
  
  <!-- Modal -->
  <div class="modal fade" id="ModalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
   <div class="modal-content">
   <form class="form-horizontal" method="POST" action="addEvent.php">
   
     <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Add Event</h4>
     </div>
     <div class="modal-body">
    
      <div class="form-group">
     <label for="title" class="col-sm-2 control-label">Title</label>
     <div class="col-sm-10">
       <input type="text" name="title" class="form-control" id="title" placeholder="Title">
     </div>
      </div>
      <div class="form-group">
     <label for="color" class="col-sm-2 control-label">Color</label>
     <div class="col-sm-10">
       <select name="color" class="form-control" id="color">
        <option value="">Choose</option>
        <option style="color:#0071c5;" value="#0071c5">&#9724; Dark blue</option>
        <option style="color:#40E0D0;" value="#40E0D0">&#9724; Turquoise</option>
        <option style="color:#008000;" value="#008000">&#9724; Green</option>        
        <option style="color:#FFD700;" value="#FFD700">&#9724; Yellow</option>
        <option style="color:#FF8C00;" value="#FF8C00">&#9724; Orange</option>
        <option style="color:#FF0000;" value="#FF0000">&#9724; Red</option>
        <option style="color:#000;" value="#000">&#9724; Black</option>
        
      </select>
     </div>
      </div>
      <div class="form-group">
     <label for="start" class="col-sm-2 control-label">Start date</label>
     <div class="col-sm-10">
       <input type="text" name="start" class="form-control" id="start" readonly>
     </div>
      </div>
      <div class="form-group">
     <label for="end" class="col-sm-2 control-label">End date</label>
     <div class="col-sm-10">
       <input type="text" name="end" class="form-control" id="end" readonly>
     </div>
      </div>
    
     </div>
     <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="submit" class="btn btn-primary">Save changes</button>
     </div>
   </form>
   </div>
    </div>
  </div>
  
  
  
  <!-- Modal -->
  <div class="modal fade" id="ModalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
   <div class="modal-content">
   <form class="form-horizontal" method="POST" action="editEventTitle.php">
     <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Edit Event</h4>
     </div>
     <div class="modal-body">
    
      <div class="form-group">
     <label for="title" class="col-sm-2 control-label">Title</label>
     <div class="col-sm-10">
       <input type="text" name="title" class="form-control" id="title" placeholder="Title">
     </div>
      </div>
      <div class="form-group">
     <label for="color" class="col-sm-2 control-label">Color</label>
     <div class="col-sm-10">
       <select name="color" class="form-control" id="color">
        <option value="">Choose</option>
        <option style="color:#0071c5;" value="#0071c5">&#9724; Dark blue</option>
        <option style="color:#40E0D0;" value="#40E0D0">&#9724; Turquoise</option>
        <option style="color:#008000;" value="#008000">&#9724; Green</option>        
        <option style="color:#FFD700;" value="#FFD700">&#9724; Yellow</option>
        <option style="color:#FF8C00;" value="#FF8C00">&#9724; Orange</option>
        <option style="color:#FF0000;" value="#FF0000">&#9724; Red</option>
        <option style="color:#000;" value="#000">&#9724; Black</option>
        
      </select>
     </div>
      </div>
        <div class="form-group"> 
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
       <label class="text-danger"><input type="checkbox"  name="delete"> Delete event</label>
        </div>
      </div>
     </div>
      
      <input type="hidden" name="id" class="form-control" id="id">
    
    
     </div>
     <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="submit" class="btn btn-primary">Save changes</button>
     </div>
   </form>
   </div>
    </div>
  </div>

    </div>
    <!-- /.container -->

    <!-- jQuery Version 1.11.1 -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
 
 <!-- FullCalendar -->
 <script src='js/moment.min.js'></script>
 <script src='js/fullcalendar.min.js'></script>
 
 <script>

 $(document).ready(function() {
  
  $('#calendar').fullCalendar({
   header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,basicWeek,basicDay'
   },
   defaultDate: '2018-01-01',
   editable: true,
   eventLimit: true, // allow "more" link when too many events
   selectable: true,
   selectHelper: true,
   select: function(start, end) {
    
    $('#ModalAdd #start').val(moment(start).format('YYYY-MM-DD HH:mm:ss'));
    $('#ModalAdd #end').val(moment(end).format('YYYY-MM-DD HH:mm:ss'));
    $('#ModalAdd').modal('show');
   },
   eventRender: function(event, element) {
    element.bind('dblclick', function() {
     $('#ModalEdit #id').val(event.id);
     $('#ModalEdit #title').val(event.title);
     $('#ModalEdit #color').val(event.color);
     $('#ModalEdit').modal('show');
    });
   },
   eventDrop: function(event, delta, revertFunc) { // si changement de position

    edit(event);

   },
   eventResize: function(event,dayDelta,minuteDelta,revertFunc) { // si changement de longueur

    edit(event);

   },
   events: [
   <?php foreach($events as $event): 
   
    $start = explode(" ", $event['start']);
    $end = explode(" ", $event['end']);
    if($start[1] == '00:00:00'){
     $start = $start[0];
    }else{
     $start = $event['start'];
    }
    if($end[1] == '00:00:00'){
     $end = $end[0];
    }else{
     $end = $event['end'];
    }
   ?>
    {
     id: '<?php echo $event['id']; ?>',
     title: '<?php echo $event['title']; ?>',
     start: '<?php echo $start; ?>',
     end: '<?php echo $end; ?>',
     color: '<?php echo $event['color']; ?>',
    },
   <?php endforeach; ?>
   ]
  });
  
  function edit(event){
   start = event.start.format('YYYY-MM-DD HH:mm:ss');
   if(event.end){
    end = event.end.format('YYYY-MM-DD HH:mm:ss');
   }else{
    end = start;
   }
   
   id =  event.id;
   
   Event = [];
   Event[0] = id;
   Event[1] = start;
   Event[2] = end;
   
   $.ajax({
    url: 'editEventDate.php',
    type: "POST",
    data: {Event:Event},
    success: function(rep) {
     if(rep == 'OK'){
      alert('Saved');
     }else{
      alert('Could not be saved. try again.'); 
     }
    }
   });
  }
  
 });

</script>

</body>

</html>
 

You can download the file directly by pressing the download button below.


For a brief share above, hopefully what we share above is useful for all of you.

Referencess : https://github.com/jamelbaz/FullCalendar-BS3-PHP-MySQL

No comments:

Post a Comment