Untuk calendar control, javascript control yang digunakan adalah fullcalendar

(http://fullcalendar.io/).

1. MENAMPILKAN CONTROL FULL CALENDAR

a. Tambahkan reference terhadap CSS dan Javascript di bagian header

_layout.cshtml

b. Tambahkan <div> yang akan menampung calendar control

c. Tambahkan script berikut untuk melakukan inisialisasi calendar.
Calendar yang di instance akan disimpan dalam variable javascript
calendar.

Penjelasan javascriptnya adalah sebagai berikut:

- fullCalendar di instance dan diletakkan dalam div dengan id
calendar
- instance-nya disimpan dalam variable javascript calendar
- header merupakan konfigurasi untuk tombol-tombol yang akan
muncul di header calendar, yaitu pada bagian kiri, tengah dan
kanan
- editable: true agar data pada calendar bisa di edit
- events: digunakan untuk me-load json dari URL
- selectable: true agar tanggal bisa dipilih
- selectHelper: true agar data bisa di drag antar tanggal. Set jadi
false jika tidak perlu
- select: function merupakan function handler ketika ada mouseclick
pada bagian tanggal yang kosong. Pada contoh diatas,
menampilkan popup untuk create activity baru
- eventClick: function merupakan function handler ketika ada
mouseclick pada item yang ada di calendar. Pada contoh diatas
akan menampilkan popup edit activity.
d. Format JSON yang dikirimkan oleh URL adalah sebagai berikut:
[{
id: id_record,
title: title yang tampil di calendar,
start: tanggal awal YYYY-MM-DD HH:mm:ss,
end: tanggal akhir YYYY-MM-DD HH:mm:ss,
allDay: false,

className: planned
}]
Contoh datanya adalah sebagai berikut:
[
{
"id":20120223000030,
"title":"test",
"start":"2015-06-25 03:30:00",
"end":"2015-06-25 06:00:00",
"allDay":false,
"className":"planned"
},
{"id":20120223000031,"title":"lagi","start":"2015-06-24
00:00:00","end":"2015-06-24
00:00:00","allDay":false,"className":"planned"},
{"id":20120223000032,"title":"holcim","start":"2015-06-26
00:00:01","end":"2015-06-26
23:59:59","allDay":true,"className":"planned"}
]

2. MENAMBAH DATA PADA CALENDAR

a. Tambahkan method javascript refreshCalendar yang akan dipanggil
ketika data selesai di add.

b. Tambahkan method pada javascript yang akan meng-handle ketika

terjadi create, yaitu pada saat bagian kosong dari calendar di klik

Pada method diatas, ketika popupCreate selesai di panggil dan user

klik tombol Submit maka popup akan memanggil callback function,
yaitu method refreshCalendar, yang akan me-load ulang data yang
ditampilkan pada calendar.
c. Pada saat tombol submit di klik pada popup, aplikasi akan melakukan
proses penyimpanan data. Jika data berhasil disimpan, halaman akan
di redirect ke method baru pada controller, yaitu popupClose().
d. Pada popupClose(), cshtml-nya akan berisi javascript yang akan
menutup poup dan memanggil callback.

3. MENGEDIT DATA CALENDAR

Tehnik mengedit data calendar mirip dengan crete, hanya saja popup yang
dipanggil adalah popup edit dan mengirimkan id dari data yang ditampilkan.
a. Tambahkan method javascript yang meng-handle ketika terjadi edit,
yaitu pada saat item di dalam calendar di klik.

Pada method diatas, ketika popupCreate selesai di panggil dan user

klik tombol Submit maka popup akan memanggil callback function,
yaitu method refreshCalendar, yang akan me-load ulang data yang
ditampilkan pada calendar.
b. Pada saat tombol submit di klik pada popup, aplikasi akan melakukan
proses penyimpanan data. Jika data berhasil disimpan, halaman akan
di redirect ke method baru pada controller, yaitu popupClose().
c. Pada popupClose(), cshtml-nya akan berisi javascript yang akan
menutup poup dan memanggil callback.