Membuat Calender dengan FullCalendar.js

Sistem kalender sangatlah penting dalam sebuah website, dengan adanya kalender, semua dapat terlihat tersusun. Saat ini banyak sekali website startup yang sangat kaya akan fitur, terutama fitur booking yang memang harus memiliki jadwal yang pas dalam systemnya. Jika kalian berniat untuk membuat sebuah website serupa seperti gamaran diatas berarti kalian membaca artikel tutorial yang tepat. Pada artikel kali ini kita akan membahas tentang bagaimana cara membuat kalender sederhana menggunakan plugin FullCalendar.
Pertama tama kita akan menghubungkan beberapa source untuk digunakan dalam membuat kalender ini.
Ini CSS yang kita perlukan.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.print.css">

 

Ini Javascript yang kita perlukan

<script src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" ="anonymous"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.min.js"></script>

 

Pada tutorial kali ini kita menggunakan salah satu plugin yang sangat powerful untuk digunakan sebagai system booking pada sebuah website ataupun aplikasi. Plugin dengan nama FullCalendar ini memiliki 2 bagian yang berbeda, ada fullcalendar-scheduler dan fullcalendar biasa. Fullcalendar scheduler adalah fitur powerfull yang memiliki event dan fungsi fungsi yang terintegrasi serta digunakan pada CoffeeScript. Sedangkan yang akan kita bahas kali ini adalah khusus untuk fullcalendar yang biasa digunakan untuk website.

Selanjutnya kita akan membuat sebuah struktur sederhana untuk layoutnya.

<div class="container">
    <div id='calendar'></div>
</div>

 

Jika sudah, maka pada saat ini calendar sudah bisa kalian lihat dengan hasil yang sederhana. Untuk memberikan tampilan yang lebih nyaman dimata, kita bisa menambahkan CSS seperti berikut

    .container{width: 500px; margin: auto;}
    #calendar td span{text-align: center; display: block; float: none; background-color: lightgreen; color; padding: 10px}
    #calendar td {padding: 0px}
    #calendar th span{background: green; color: #fff; padding: 10px}

Kita juga perlu mengetikkan baris kode javascript ini untuk mengaktifkan plugin fullcalendar

$('#calendar').fullCalendar({
    weekends: true, // will hide Saturdays and Sundays
});

 

Jika kalian sudah mengetikan baris kode diatas, coba buka hasilnya di browser, maka kalian akan melihat tampilan calendar sederhana yang bisa kalian custom dengan css seperti yang saya lakukan. Selain itu, masih sangat banyak fitur yang bisa kita gunakan pada plugin fullcalendar ini. Demikian artikel tentang membuat calendar dengan fullcalendar.js semoga bermanfaat

23 Oktober 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat