Extension MasinoCalendarScheduler16 Kini Menggunakan FullCalendar Versi Terbaru

Selamat bagi Anda yang sudah menjadi Member di situs ILovePHPMaker.com. Sekarang Anda sudah bisa menggunakan Extension MasinoCalendarScheduler16 versi terbaru. Ini adalah salah satu dari beberapa Masino Extensions yang saya buat untuk PHPMaker 2020 (dan akan tetap dipertahankan nantinya di PHPMaker 2021).

Akhirnya, berhasil juga saya memperbaruinya ke FullCalendar versi 5.3.0 (versi stabil terakhir saat artikel ini saya tulis). Membutuhkan fokus kurang lebih dua hari untuk meng-upgrade-nya dari FullCalendar versi 3 ke versi 5. Ini juga salah satu alasan kuat mengapa Anda harus menggunakan Masino Extensions untuk PHPMaker, karena selalu diperbarui ke versi terakhir.

Dengan menggunakan Extension MasinoCalendarScheduler16 ini, maka Anda tidak perlu lagi repot-repot membuat modul pengolahan data (CRUD) di sebuah Kalender dari awal. Anda cukup hanya mengaktifkan Extension ini dari dalam project PHPMaker 2020 Anda, lalu mengatur beberapa setting dari sisi Extension sesuai kebutuhan, dan men-generate ulang semua file script menggunakan PHPMaker 2020 seperti biasa.

Melalui Kalender yang sudah dihasilkan di Aplikasi Web, maka Anda dapat menambah data Event atau Kegiatan dengan sangat mudah. Cukup klik di salah satu tanggal, atau bahkan Anda dapat memilih beberapa tanggal sekaligus dengan cara mengklik terlebih dulu di tanggal awal, lalu seret kursor mouse sampai ke posisi tanggal akhir. Selanjutnya sistem akan menampilkan form Modal untuk menambah data Event, dengan tanggal awal dan tanggal akhir yang otomatis terisi. Waktu untuk menginput data Event pun bisa lebih dihemat dengan cara tersebut.

Demikian juga jika ingin melihat informasi lebih lanjut dari sebuah Event, cukup mudah dilakukan. Cukup klik sekali saja Event tersebut melalui antarmuka Kalender. Sistem akan menampilkan informasi lengkap Event tersebut pada form Modal, dan semua control di form View tadi dalam keadaan read-only. Jika ingin mengubah data Event tadi, maka cukup tekan tombol Ubah, selanjutnya form akan berubah ke mode Ubah/Edit, di mana control yang tadinya read-only menjadi siap untuk digunakan.

Atau bahkan jika Anda ingin menghapus data Event tersebut, tinggal beri tanda centang pada Checkbox yang bertuliskan Hapus pada saat form dalam mode Ubah/Edit. Lalu tekan tombol Hapus, maka sistem akan menampilkan pesan konfirmasi yang berisi pertanyaan apakah Anda yakin akan menghapus Event tadi. Anda juga bisa menghapus hanya satu Event saja, atau bahkan bisa menghapus beberapa Event sekaligus, jika tipe Event tadi adalah berulang (Repeated Events).

O iya, barusan saya menyebut istilah Repeated Events. Event ini akan ditampilkan secara berulang di dalam Kalender. Misalnya, Anda dapat menambah sebuah Event, yang akan diulang; apakah setiap hari, setiap minggu, setiap bulan, atau bahkan setiap tahun; dilengkapi juga dengan parameter yang dapat Anda tentukan berapa kali perulangan akan dilakukan. Setelah itu, bagian back-end Kalender akan menangani penyimpanan datanya ke Database.

Tidak itu saja fitur-fiturnya. Anda bahkan dapat mengubah atau menyesuaikan ulang tanggal dari suatu Event, dengan berinteraksi secara langsung dengan komponen Kalender di sisi antarmuka Aplikasi Web. Cukup seret dan jatuhkan (drag and drop) suatu Event ke tanggal yang Anda inginkan, maka di sisi back-end Kalender akan otomatis menyesuaikan ke tanggal baru tadi. Tidak hanya untuk satu Event tunggal, tapi untuk Event yang terjadi di beberapa hari sekaligus.

Masih ada lagi kemudahan yang disediakan oleh FullCalendar. Anda dapat memperluas atau mengubah hanya tanggal akhirnya saja. Syaratnya, data jam pada tanggal terakhir harus diset ke 00:00:00. Cukup geser kursor mouse Anda ke ujung paling kanan dari antarmuka Event tersebut. Selanjutnya icon kursor mouse akan berubah menjadi panah kanan, lalu seret bagian ujung paling kanan tersebut ke posisi tanggal akhir yang Anda inginkan di Kalender.

Eit, masih ada fitur-fitur hebat lainnya yang tersedia di FullCalendar. Kita bisa berpindah mode, dari tampilan Month (seperti kalender per bulan pada umumnya), atau Mingguan, atau Harian (seperti catatan di Agenda), atau bahkan Tahunan. Tersedia juga tombol browse untuk maju atau mundur, sesuai dengan mode atau tampilan yang sedang aktif. Bahkan, ada tombol browse untuk berpindah tahun. Yang lebih mengagumkan lagi adalah, kita dapat menambah, menampilkan, mengubah, dan menghapus Event dari setiap mode tadi. Wow, keren kan?

Yang menariknya lagi adalah, tampilan mode Kalender yang terakhir diakses akan disimpan oleh sistem. Jadi, ketika halaman Kalender ini dimuat kembali di waktu mendatang, maka tampilan mode terakhir tadilah yang akan disajikan, berdasarkan data Event pada tanggal yang terakhir kali diakses oleh Pengguna.

Sangat menarik memang fitur-fitur yang sudah tersedia di Extension MasinoCalendarScheduler16. Sayang jika tidak dioptimalkan di aplikasi web kita, apalagi jika menggunakan PHPMaker untuk menghasilkan aplikasi web tersebut. Perlu diingat, bahwa FullCalendar hanya menyediakan sisi front-end-nya saja, mereka belum menyediakan code di sisi back-end. Nah, untuk bagian back-end sudah ditangani sekarang oleh Extension MasinoCalendarScheduler16.

Kembali ke FullCalendar 5. Ada beberapa perubahan major di FullCalendar versi terakhir ini. Di samping untuk meningkatkan peformansi, juga untuk mengatasi isu penggunaan jQuery yang sangat cepat berubah versinya. FullCalendar sudah tidak lagi menggunakan atau tergantung kepada jQuery. Tentu saja ada alasan khusus mengapa langkah ini ditempuh oleh si developer FullCalendar.

Dengan perubahan ini, sekaligus menyebabkan performansi FullCalendar pun menjadi jauh lebih baik, dan aksesnya menjadi lebih cepat dibandingkan dengan versi-versi sebelumnya. Selengkapnya mengenai perubahan tersebut, bisa Anda lihat di sini.

Saya jadi teringat dengan feedback dari salah seorang member di ILovePHPMaker.com yang mengalami error saat mencoba menambahkan data Event baru dengan menggunakan mode atau tampilan Week (bukan Month). Usut punya usut, sepertinya karena di FullCalendar versi 4 dan versi sebelumnya masih menggunakan jQuery lama, sementara di PHPMaker sudah menggunakan versi terbaru. Tentu saja ini salah satu isu yang cukup besar.

Itulah mungkin salah satu alasan developer FullCalendar tidak lagi menggunakan atau tergantung kepada file jQuery. Untuk mengatasi isu utama tersebut, maka jQuery tidak lagi digunakan di dalam library Javascript FullCalendar. Jadi, di FullCalendar versi 5 ini, mereka sudah kembali menggunakan sintaks Javascript versi klasik. Kadang-kadang, keputusan ini harus diambil demi mengutamakan performansi dan kehandalan suatu library Javascript.

FullCalendar 5 juga sudah tidak lagi tergantung dengan file Moment.js, meskipun kita masih bisa tetap menggunakannya, apalagi PHPMaker 2020 masih tetap menggunakan Moment.js. Termasuk di Extension MasinoCalendarScheduler16 ini, saya masih tetap menggunakan Moment.js, mengikuti framework yang masih digunakan oleh PHPMaker 2020.

Adapun perubahan selengkapnya yang saya lakukan di Extension MasinoCalendarScheduler16 adalah sebagai berikut:

1. Bye bye FullCalendar 3 (baru sadar saya masih menggunakan versi yang lama ini, duh!), and Welcome FullCalendar 5! Lebih tepatnya, FullCalendar versi 5.3.0 (versi stabil terakhir saat saya memperbarui Extension saya tersebut).
2. Menyesuaikan beberapa property dan method yang sudah tidak bisa digunakan lagi di FullCalendar versi 5; tentu saja supaya kompatibel dengan versi 5. Terima kasih kepada dokumentasi FullCalendar versi 5 yang cukup membantu proses ini.
3. Memperbaiki error saat menambahkan event baru pada Kalendar mode Week (mingguan). Sebenarnya tidak secara khusus diperbaiki, cukup dengan menggunakan FullCalendar 5, maka isu error tadi hilang dengan sendirinya. Untungnya error ini tidak terjadi pada Calendar mode Month (bulanan).
4. Mengubah mode control/element pada form/modal View saat menampilkan data Event yang diklik dari Kalender, dimana sebelumnya warna latar belakang control Textbox adalah putih (user sering terjebak dengan mengira data bisa langsung diubah), menjadi warna abu-abu; yang mewakili control yang sedang dalam keadaan non-aktif disabled.
5. Menyesuaikan id milik control element di 3 form (View, Add, dan Edit) sehingga tidak sama. Jika tidak, maka browser akan menampilkan pesan warning yang menyatakan bahwa ada beberapa control/element di Form yang memiliki id yang sama. Duh, seharusnya ini sejak awal saya lakukan, hehehe…
6. Menyesuaikan link ke file Javascript dan CSS ke versi terbaru, dengan menggunakan nama folder yang sesuai dengan versinya.
7. Memastikan semua fungsi di Kalendar berjalan sebagaimana mestinya, seperti CRUD, drag-and-drop Event, sampai dengan proses back-end, yaitu penyimpanan data ke Database.

Satu lagi improvement yang cukup signifikan telah dilakukan oleh pengembang FullCalendar ini, dengan menghilangkan ketergantungan terhadap file jQuery dan Moment.js. Keputusan tepat di waktu yang tepat.

Selain itu, penyesuaian Extension MasinoCalendarScheduler16 ini bisa saya lakukan menjelang PHPMaker versi 2021 dirilis. Untungnya, masih sempat saya update untuk Masino Extensions for PHPMaker 2020. Semoga juga bisa cepat disesuaikan nantinya jika PHPMaker 2021 sudah dirilis.

O iya seperti biasa… kurang pas rasanya jika tidak mencicipi demonya. Silahkan klik di sini untuk melihat FullCalendar versi 5 in action di Web Aplikasi yang dihasilkan oleh PHPMaker 2020.