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>
<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...
Nice Post..
ReplyDeleteGan kalau mau menandai hari libur dengan tanggal merah, gimana caranya ya?
ada referensi?
Makasih
bisa kok gan,, kan tinggal tambahin tanggal liburnya pada event nya gan,,,
Deletemau nanya nih, cara menempatkan tanggal di samping kiri caranya gimana?
ReplyDeletesoalnya saya juga masih belajar,hhehe
eh salah maksudnya samping kanan seperti di web blog gitu :D
Deletetinggal tambahin aja sih gan... yang penting kan tempatin aja posisi kalendernya di kanan gan pake css atau html biasa..
Deletecara menghilangkan 12 gimana iya
ReplyDeletesore,,, maksudnya 12a gimana ya?
Delete12a
ReplyDelete