Membuat Kalender Event di CodeIgniter dengan jQuery

Membuat kalender event CodeIgniter dengan pustaka FullCalendar memungkinkan Anda menampilkan jadwal atau acara secara visual dan interaktif. Data event diambil dari database dan ditampilkan dalam kalender yang bisa diklik. Panduan ini menunjukkan integrasinya.

Menyiapkan FullCalendar di View

FullCalendar mengambil data event dari sebuah URL yang mengembalikan format JSON:

<div id="kalender"></div>

<script>
$('#kalender').fullCalendar({
    events: '<?= base_url("event/data") ?>'
});
</script>

Menyediakan Data Event dari Controller

Controller mengambil event dari database lalu mengubahnya ke format yang dikenali FullCalendar (dengan field title dan start):

<?php
public function data() {
    $event = $this->db->get('event')->result();

    $hasil = array();
    foreach ($event as $e) {
        $hasil[] = array(
            'title' => $e->judul,
            'start' => $e->tanggal
        );
    }
    echo json_encode($hasil);
}
?>

Menambah Event Baru

FullCalendar bisa mendeteksi klik pada sebuah tanggal. Tangkap peristiwa ini, kirim data via Ajax ke controller untuk disimpan, lalu segarkan kalender agar event baru langsung tampil.

Struktur Tabel Event

CREATE TABLE event (
    id INT AUTO_INCREMENT PRIMARY KEY,
    judul VARCHAR(100),
    tanggal DATE
);

Kesimpulan

Kalender event CodeIgniter memadukan FullCalendar dan database untuk menampilkan serta mengelola jadwal secara dinamis dan menarik. Kuncinya adalah controller yang menyediakan data event dalam format JSON.

Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi CodeIgniter.

Baca Juga

Ali Akbar

Software Developer yang fokus mengembangkan aplikasi berbasis Web dan Desktop. Senang mempelajari teknologi baru terutama di bidang web design dan web development.

View all posts by Ali Akbar →

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *