Monday, July 9, 2018

Jquery Fullcalendar Dengan Bootstrap PHP dan MariaDB


Jquery Fullcalender sering kita gunakan terutama yang berhubungan dengan timeline, hal ini membuat tampilan aplikasi semakin menarik. Deangan adanya fullcalender anda bisa mengatur waktu dan terlihat sangat rapi.
Ini adalah tampilan month dari fullcalender yang sudah bisa process CRUD

Tampilan Month Jquery full calender menampilkan semua tanggal dalam satu bulan dalam satu halaman. Jika kita lihat jadual yang sudah dibuat pada tidap tanggal akan disusun sesuai dengan apa yang sudah kita buat pada tanggal tersebut.
Untuk menambahkan jadual baru kita bisa klik bagian tanggal, selanjutnya akan muncul popup input yang bisa kita isi untuk jadual baru.
Untuk edit jadual kita bisa melakukan klik 2 kali pada bagian list jadual yang tersusun pada tiap tanggalnya. Nanti akan muncul popup untuk melakukan edit. Pada saat yang sama kita juga bisa melakukan delete dengan ceklis fungsi delete pada popup yang muncul.
Jika kita ceklis pungsi delete dan kita lakukan submit maka jadual itu akan terhapus pada jquery full calender.
Baca Juga :


Ini adalah tampilan full calender day
Tampilan Day pada Jquery full calender lebih memperjelas jadual kita pada hari itu. Kotak-kotak warna yang muncul akan mencerminkan waktu jadual yang sudah kita setting. Untuk menampilkan ini kita tinggal klik tombol day pada bagian atas Jquery Full Calender.
Pada bagian ini kita juga bisa menambahkan mengedit dan menghapus jadual. Caranya hampir mitip dengan Tab bagian Month, Hanya saja pada bagian ini kita tidak bisa memilih tangal yang berbeda, kita hanya bisa meilih tangal yang sudah kita pilih saja.

Ini adalah tampilan full calender list

Bagian List Jquery Full Calender cukup menarik buat saya, karena kita bisa melihat list jadual yang kita buat yang di kelompokan setiap harinya dan disusun selama 1 minggu.
Pada bagian ini kita tidak bisa melakukan edit, pada bagian ini kita hanya bisa melihat list jadual yang sudah kita buat saja, Hal ini tidak menjadi maslah karena edit bisa kita lakukan di tab yang lain.



Untuk lebih jelasnya silahkan download dari tombol dibawah ini.

Klik Tombol Dibawah Untuk Memunculkan Link Download :

Tutorial Cara Download File :


EmoticonEmoticon