Just Share Information and Experience

Saturday, 9 September 2017

Mudahnya Membuat Kalender Dengan Fullcalendar di html

Selamat malam guys,,, oh ya karena hari ini malam minggu dan mumpung ga ada kerjaan, so ga ada salahnya nih saya mencoba membuat satu artikel menarik yang mungkin bermanfaat bagi temen-temen yang membaca artikel ini. Pada artikel ini topik yang saya buat masih seputaran programming dengan memanfaatkan sebuah library yang mungkin sudah tidak asing bagi sebagian orang, namun saya yakin masih banyak yang belum tahu tentang library yang saya gunakan ini, sehingga ga ada salahnya jika saya akan share pada artikel ini. Nama librarynya adalah Fullcalendar.

Fullcalender mendengar dari namanya saja pasti kita langsung tau kalau fungsi dari library ini adalah untuk membuat kalender ditambah lagi dengan kata "full" yang artinya membuat kalender secara utuh dengan fitur-fitur yang ditambahkan. Sesuai dengan judul artikel ini, yaitu Mudahnya Membuat Kalender dengan fullcalendar di html, maka kita akan mencoba membuat sebuah tampilan kalender secara full pada html dengan menggunakan library fullcalendar. Untuk librarynya sendiri temen-temen bisa download pada situs resminya disini.

Setelah selesai mendownload maka mari kita coba membuat sebuah kalender dengan script dibawah ini, silahkan dicopy atau diketik ulang pada editor kesayangan anda. atau nanti temen-temen bisa download source code pada link di bawah postingan ini.

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../fullcalendar.min.css' rel='stylesheet' />
<link href='../fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script>

$(document).ready(function() {

$('#calendar').fullCalendar({
defaultDate: '2017-09-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2017-09-01'
},
{
title: 'Long Event',
start: '2017-09-07',
end: '2017-09-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-09-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-09-16T16:00:00'
},
{
title: 'Conference',
start: '2017-09-11',
end: '2017-09-13'
},
{
title: 'Meeting',
start: '2017-09-12T10:30:00',
end: '2017-09-12T12:30:00'
},
{
title: 'Lunch',
start: '2017-09-12T12:00:00'
},
{
title: 'Meeting',
start: '2017-09-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2017-09-12T17:30:00'
},
{
title: 'Dinner',
start: '2017-09-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2017-09-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-09-28'
}
]
});

});

</script>
<style>

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

</style>
</head>
<body>

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

</body>
</html>

Silahkan disimpan kemudian dijalankan pada browser kesayangan temen-temen. Jadi selain bisa menampilkan kalender, kalian juga bisa menambahkan event atau yang lainnya. Untuk fitur-fitur apa aja yang dapat digunakan pada library fullcalendar ini, temen-temen bisa buka pada situs resminya. kalau dibahas disini pasti panjang banget jadinya..heheheh.. Berikut contoh hasil kalender dari coding di atas, silahkan disesuaikan dengan kebutuhan ya guys...














8 comments:

  1. Nice Post..
    Gan kalau mau menandai hari libur dengan tanggal merah, gimana caranya ya?
    ada referensi?
    Makasih

    ReplyDelete
    Replies
    1. bisa kok gan,, kan tinggal tambahin tanggal liburnya pada event nya gan,,,

      Delete
  2. mau nanya nih, cara menempatkan tanggal di samping kiri caranya gimana?
    soalnya saya juga masih belajar,hhehe

    ReplyDelete
    Replies
    1. eh salah maksudnya samping kanan seperti di web blog gitu :D

      Delete
    2. tinggal tambahin aja sih gan... yang penting kan tempatin aja posisi kalendernya di kanan gan pake css atau html biasa..

      Delete
  3. cara menghilangkan 12 gimana iya

    ReplyDelete