F Mohd Faizal bin Mohamad Benting Lintang, Terengganu CFML · Lucee
28 August 2026

Membina kalendar tempahan dengan CSS grid

Kalendar bulanan yang jelas membantu pemilik melihat tempahan pada satu pandangan. Ia tidak memerlukan perpustakaan besar — CSS grid sudah cukup.

Kalendar bulanan yang jelas membantu pemilik melihat tempahan pada satu pandangan. Ia tidak memerlukan perpustakaan besar — CSS grid sudah cukup.

Setiap bulan dilukis sebagai grid tujuh lajur. Sel kosong di awal bulan memberi kedudukan hari yang betul. Setiap hari memaparkan nama tetamu, dan warna bar berbeza mengikut status: menunggu, disahkan, selesai atau disekat.

Untuk tempahan yang melangkau bulan, bar dilukis mengikut peratusan lebar sel supaya ia bermula dan berakhir di tengah hari yang betul. Kaedah peratusan ini lebih tahan daripada mengira piksel, terutamanya apabila skrin berubah saiz.

Pada telefon, kalendar bertukar menjadi senarai mengikut tarikh. Ramai tetamu membuka tempahan daripada telefon, jadi paparan mudah alih bukan tambahan, ia keperluan asas.