Cara menggunakan agenda php mysql bootstrap

14/05/2019 Shelli Ripati 5406 Website

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.

No data.

kode php

Cara menggunakan agenda php mysql bootstrap

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Token Data

Periklanan

Tentang Kami

Legal

Dukungan

Social