Membuat Kalender Event Menggunakan FullCalendar

Kalender Event dengan FullCalendar

Ini sama halnya pada artikel sebelumnya yang berjudul membuat calender event menggunakan full calendar dengan framework Codeigniter. Tidak ada perbedaan antara artikel sbeelumnya cuma hanya ini tidak menggunakan frameword, jadi ini mengunakan php native dan tentu dari segi pengerjaan ini lebih mudah menurut kami.

Langsung saja mari kita ke pembahasan intinya yaitu membuat calender event dengan Fullcalendar.

1. Buat database dengan nama calender kemudian masukkan struktur database dibawah ini. 

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 ;

2. Buat file dengan nama bdd.php file ini berfungsi sebagai koneksi kedatabase.

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

3. Buat file dengan nama addEvent.php file ini mempunyai fungsi addevent atau menambahkan event kedalam 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']);

 
?>

4. Buat file dengan nama editEventDate.php file ini berfungsi ketika pengguna sistem ingin memperbaharui tanggal event.

<?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']);

 
?>

5. Buat file dengan nama editEventTitle.php file berfungsi sebagai untu memperbaharui judul dari event yang telah ditambahkan kedalam database.

<?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');

 
?>

6. Buat file dengan nama index.php file berfungsi sebagai form, dan semua proses di atas dipenggil dan di eksekusi dalam file ini.

<?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">×</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">◼ Dark blue</option>
        <option style="color:#40E0D0;" value="#40E0D0">◼ Turquoise</option>
        <option style="color:#008000;" value="#008000">◼ Green</option>        
        <option style="color:#FFD700;" value="#FFD700">◼ Yellow</option>
        <option style="color:#FF8C00;" value="#FF8C00">◼ Orange</option>
        <option style="color:#FF0000;" value="#FF0000">◼ Red</option>
        <option style="color:#000;" value="#000">◼ 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">×</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">◼ Dark blue</option>
        <option style="color:#40E0D0;" value="#40E0D0">◼ Turquoise</option>
        <option style="color:#008000;" value="#008000">◼ Green</option>        
        <option style="color:#FFD700;" value="#FFD700">◼ Yellow</option>
        <option style="color:#FF8C00;" value="#FF8C00">◼ Orange</option>
        <option style="color:#FF0000;" value="#FF0000">◼ Red</option>
        <option style="color:#000;" value="#000">◼ 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>

Kalian bisa mendownload filenya langsung dengan menekan button download dibawah ini.

Jika kalian belum begitu paham silahkan tinggalkan komentar diabawh dan mulai berdiskusi dengan kami.

Leave a Reply

Your email address will not be published. Required fields are marked *