Adminlte Calendar Laravel

MUAZHAN

4 min read

·

Jun 28, 2024

25

Share

Integrasikan Kalender AdminLTE ke Aplikasi Laravel Anda

AdminLTE adalah framework front-end populer yang menawarkan berbagai komponen UI, termasuk kalender. Dalam artikel ini, kita akan membahas cara mengintegrasikan kalender AdminLTE ke dalam aplikasi Laravel.

Menginstal AdminLTE

Sebelum kita mulai, pastikan Anda telah menginstal AdminLTE. Anda dapat menginstalnya dengan menggunakan CDN atau mengunduh paketnya. Untuk menginstal dengan CDN, tambahkan tag berikut ke dalam file head dari template layout Anda:

Menambahkan Kalender ke Blade Template

Sekarang, Anda dapat menambahkan komponen kalender AdminLTE ke dalam blade template Anda. Berikut adalah contoh kode untuk menambahkan kalender ke dalam tampilan dashboard Anda:

@extends('layouts.app')

@section('content')

    

        

            

                
Kalender
            
        
    


    

        

            

                

                    

                        

                    
                
            
        
    

@endsection

Mengkonfigurasi Kalender dengan FullCalendar

Untuk mengkonfigurasi kalender AdminLTE, Anda perlu menggunakan library JavaScript seperti FullCalendar.

1. Instal FullCalendar: Anda dapat menginstal FullCalendar dengan menggunakan npm atau Yarn.
2. Import FullCalendar: Setelah FullCalendar diinstal, import library ke dalam file JavaScript Anda.
3. Inisialisasi FullCalendar: Gunakan kode berikut untuk menginisialisasi FullCalendar pada elemen #calendar:

$(document).ready(function () {
    $('#calendar').fullCalendar({
        // Konfigurasi kalender Anda
    });
});

Contoh Konfigurasi FullCalendar

Berikut adalah contoh konfigurasi dasar FullCalendar:

$(document).ready(function () {
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        events: [
            {
                title: 'All Day Event',
                start: '2023-12-01'
            },
            {
                title: 'Long Event',
                start: '2023-12-07',
                end: '2023-12-10'
            },
            {
                title: 'Meeting',
                start: '2023-12-12T10:30:00',
                end: '2023-12-12T12:30:00'
            }
        ]
    });
});

Mengintegrasikan Kalender dengan Data Laravel

Untuk mengintegrasikan kalender dengan data dari Laravel, Anda dapat menggunakan controller dan model.

1. Buat Controller: Buat controller baru untuk mengelola data kalender Anda.
2. Buat Model: Buat model yang mewakili data kalender Anda.
3. Tambahkan Route: Tambahkan route untuk mendapatkan data kalender dari controller.
4. Fetch Data dalam FullCalendar: Gunakan $.ajax() untuk mengambil data dari API Laravel Anda dan gunakan data tersebut untuk membuat event dalam FullCalendar.

Kesimpulan

Dengan menggunakan AdminLTE dan FullCalendar, Anda dapat mengintegrasikan kalender yang interaktif dan fleksibel ke dalam aplikasi Laravel Anda. Ingatlah untuk mengkonfigurasi kalender sesuai kebutuhan Anda dan mengintegrasikannya dengan data Laravel untuk pengalaman pengguna yang lebih baik.