Membuat Schedule di Kalender Menggunakan Jquery dan PHP – Part 1

Membuat Schedule di Kalender Menggunakan Jquery dan PHP – Part 1

Pada kesempatan kali ini saya akan membahas tentang cara Membuat Schedule di Kalender Menggunakan Jquery dan PHP. Dimana Schedule atau jadwal akan kita buat di tampilan kalender yang akan kita tampilkan di halaman website.

Untuk Membuat Schedule di Kalender Menggunakan Jquery dan PHP yang harus teman-teman perhatikan adalah beberapa link CDN yang akan kita pakai dan letakkan di dalan tag head html. Seperti bootstrap, fullcalender, jquery, jquery ui dan moment.

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

Jika sudah maka kita akan membuat struktur html seperti berikut ini.

<body>

  <h2 align="center"><a href="#">Membuat Schedule di Kalender Menggunakan Jquery dan PHP</a></h2>

  <div class="container">

   <div id="calendar"></div>

  </div>

 </body>

Dan langkah selanjutnya kita akan memulai membuat beberapa fungsi untuk dapat membuat penjdawalan atau schedule di dalam tampilan kalender.

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

    // Insert

    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("Event Berhasil Ditambahkan!");

       }

      })

     }

    },

    // Event Update

    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 Berhasil Di 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 Berhasil Di Update");

      }

     });

    },

    // Event Click Hapus

    eventClick:function(event){

     if(confirm("Apakah yaki ingin dihapus?")){

      var id = event.id;

      $.ajax({

       url:"delete.php",

       type:"POST",

       data:{id:id},

       success:function(){

        calendar.fullCalendar('refetchEvents');

        alert("Event Berhasil di Hapus");

       }

      })

     }

    }

   });

  });

  </script>

Jika sudah semua maka simpan file dengan nama index.php. Langkah selanjutnya kita akan bahas di artikel tentang cara Membuat Schedule di Kalender Menggunakan Jquery dan PHP - Part 2.

Sampai disini dulu untuk pembahasan kali ini tentang cara Membuat Schedule di Kalender Menggunakan Jquery dan PHP – Part 1. Semoga dapat bermanfaat dan selamat mencoba.