Cara Membuat Calendar dengan JQuery Plugin

Hallo sobat program, bertemu lagi dengan saya Rizal dan masih diberikan kesempatan untuk dapat memberikan tutorial tentang pemrograman website. Dan pada pembahasan kali ini saya akan membahas tentang Cara Membuat Calendar dengan JQuery Plugin.

Dipembahasan ini teman-teman tidak perlu repot dalam membuat calendar, kenapa ? karena JQuery sudah menyediakan plugin untuk fitur calendar dan kita hanya tinggal download serta menjalankan sesuai dengan documentasi penggunaan calendar yang disediakan oleh JQuery. Silahkan teman-teman download serta lihat-lihat plugin jquery untuk calendar disini > https://fullcalendar.io/

Oke disini saya akan memberikan tata Cara Membuat Calendar dengan JQuery Plugin tsb, teman-teman bisa langsung menjalankan/run text-editornya lalu ketikan kode HTMLnya seperti pada contoh dibawah ini :

<div id='calendar'></div>

Jika sudah dengan kode HTML nya langkah berikutnya teman-teman tambahkan style CSS nya seperti pada contoh dibawah ini :

body {
    margin: 40px 10px;
    padding: 0;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    font-size: 14px;
  }

  #calendar {
    max-width: 900px;
    margin: 0 auto;
  }

Jika sudah langkah berikutnya teman-teman tambahkan cdn dari JQuery Calendar nya seperti pada contoh dibawah ini :

<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src="http://momentjs.com/downloads/moment.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.js'></script>

Dan langkah terakhir tambahkan script JQuery untuk menjalankan calendarnya seperti pada contoh dibawah ini :

<script>
  $(document).ready(function() {

    $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
      },
      defaultDate: '2018-01-15',
    });

  });
</script>

Jika sudah semua, langkah terakhir silahkan teman-teman simpan dan jalankan pada browser yang teman-teman gunakan, jika benar maka hasilnya akan menjadi seperti pada contoh dibawah ini :

Oke jadi seperti itulah contoh sederhana pada pembahasan ini tentang Cara Membuat Calendar dengan JQuery Plugin. Semoga dapat sangat bermanfaat buat teman-teman dan sampai bertemu dipembahasan selanjutnya.

Terimakasih

Cara Membuat Calendar dengan JQuery Plugin

Kategori