FullCalendar Kullanım Rehberi

Kullanmak için öncelikle FullCalendar’ın CSS ve JavaScript dosyalarını projenize dahil etmeniz gerekir.

1. Adım: FullCalendar’ı indirin ve projenize dahil edin. (En temel gerekli CDN’ler)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.4.2/core/main.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.4.2/daygrid/main.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.4.2/timegrid/main.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.4.2/core/main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.4.2/daygrid/main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.4.2/timegrid/main.js"></script>

2. Adım: FullCalendar’ı kullanmak için gereken HTML yapısını oluşturun.

<div id="calendar"></div>

3. Adım: FullCalendar’ı initalize edin.

$(document).ready(function() {
    $('#calendar').fullCalendar({
        events: [
            {
                title: 'Event 1',
                start: '2022-01-01'
            },
            {
                title: 'Event 2',
                start: '2022-01-05',
                end: '2022-01-07'
            }
        ]
    });
});

Takvim Günlerine Click Eventi Ekleme

FullCalendar, takvim günlerine click event eklemek için “dayClick” eventini kullanmanızı sağlar. Bu event, takvimdeki herhangi bir güne tıklandığında tetiklenir. Örnek olarak, takvim günlerine tıklandığında bir alert mesajı gösterelim:

$('#calendar').fullCalendar({
    dayClick: function(date, jsEvent, view) {
        alert('Tarih: ' + date.format());
    }
});

Bu örnekte, dayClick eventi içerisinde date, jsEvent ve view değişkenlerini kullanabiliriz.

date, tıklanan günün tarihini içerir.

jsEvent, DOM etkileşimi için kullanılan JavaScript event nesnesidir.

view, tıklanan günün hangi görünümde olduğunu içerir (ay, hafta, gün). Bu değişkenleri kullanarak tıklanan günün bilgilerini alabilir ve uygun bir işlem yapabiliriz.

Ayrıca, takvime event eklemek için “select” eventi kullanabiliriz. Bu event, kullanıcı takvimdeki bir alan seçtiğinde tetiklenir. Bu eventi kullanarak, kullanıcının seçtiği tarih aralığı için bir etkinlik oluşturmasını sağlayabiliriz.

$('#calendar').fullCalendar({
    selectable: true,
    select: function(start, end) {
        var title = prompt('Etkinlik Adı:');
        var eventData;
        if (title) {
            eventData = {
                title: title,
                start: start,
                end: end
            };
            $('#calendar').fullCalendar('renderEvent', eventData, true);
        }
        $('#calendar').fullCalendar('unselect');
    },
});

Bu örnekte, kullanıcı tarafından seçilen tarih aralığı için bir etkinlik adı istenir ve oluşturulan etkinlik takvime eklenir.

Bu iki event kullanarak takvime click eventi ekleyebiliriz ve kullanıcının interaktif olarak takvim üzerinde işlem yapmasını sağlayabiliriz.

AJAX ile JSON Verilerini Takvime Ekleme

Ajax kullanarak takvime JSON verilerini eklemek için, sunucudan JSON verilerini almak için bir Ajax isteği yapabiliriz ve bu verileri “events” seçeneğine atayabiliriz.

$.ajax({
    url: '/your-url',
    type: 'GET',
    dataType: 'json',
    success: function(response) {
        $('#calendar').fullCalendar({
            events: response
        });
    }
});

Bu örnekte, '/your-url' adresinden JSON verilerini alıyoruz ve success callback fonksiyonu içerisinde bu verileri events seçeneğine atıyoruz. Sunucudan geri dönen JSON verilerinin formatı FullCalendar'ın beklediği formatda olmalıdır. Özellikle, title, start ve end gibi özelliklerin bulunması gerekir.

Ayrıca, events seçeneğini dinamik olarak değiştirmek için removeEvents() ve addEventSource() metodlarını kullanabiliriz. Örneğin, kullanıcının takvim aralığını değiştirmesi durumunda sunucudan yeni verileri almak için:

$('#calendar').fullCalendar({
    events: '/your-url',
    eventSources: [eventSource],
    viewRender: function(view) {
        var start = view.start.format();
        var end = view.end.format();
        eventSource = {
            url: '/your-url',
            data: {
                start: start,
                end: end
            },
            type: 'POST',
            dataType: 'json',
            success: function(response) {
                $('#calendar').fullCalendar('removeEvents');
                $('#calendar').fullCalendar('addEventSource', response);
            }
        }
    }
});

Bu örnekte, kullanıcı takvim aralığını değiştirdiğinde, viewRender eventi tetiklenir ve sunucuya aralık bilgileri ile birlikte bir post isteği yapılır. Sunucudan geri dönen veriler removeEvents() metodu ile var olan veriler silinir ve addEventSource() metodu ile yeni veriler eklenir.

Sürükle — Bırak İşlemlerinin Yapılması

Takvimdeki etkinliklerin sürüklenip bırakılmasını etkinleştirmek için fullCalendar’ı tanımladıktan sonra şu kodlar eklenmeli:

$('#calendar').fullCalendar({
    events: '/your-url',
    editable: true,
});

Bu örnekte, “editable: true” seçeneği ile takvimdeki etkinliklerin sürüklenip bırakılmasına izin verilir. Kullanıcı etkinliği sürükler ve bıraktığında, FullCalendar otomatik olarak etkinliğin başlangıç ve bitiş tarihlerini güncelleyecektir.

Ayrıca, sürükle-bırak işlemi sırasında etkinliğin bilgilerinin değiştirilmesi için “eventDrop” ve “eventResize” eventlerini kullanabilirsiniz. Kullanıcı etkinliği sürükleyip bıraktığında, etkinliğin başlangıç ve bitiş tarihleri sunucuya gönderilmek için:

$('#calendar').fullCalendar({
    events: '/your-url',
    editable: true,
    eventDrop: function(event) {
        $.ajax({
            url: '/update-event',
            data: {
                id: event.id,
                start: event.start.format(),
                end: event.end.format()
            },
            type: 'POST',
            success: function(response) {
                console.log(response);
            }
        });
    },
    eventResize: function(event) {
        $.ajax({
            url: '/update-event',
            data: {
                id: event.id,
                start: event.start.format(),
                end: event.end.format()
            },
            type: 'POST',
            success: function(response) {
                console.log(response);
            }
        });
    }
});

Bu örnekte, eventDrop ve eventResize eventleri tetiklendiğinde sunucuya etkinliğin bilgileri gönderilir ve etkinlik güncellenir. Sunucudan geri dönen cevabın doğruluğunu kontrol etmeli ve uygun bir işlem yapmalıyız.

Ayrıca, sürükle-bırak işlemleri yaparken, etkinliklerin sadece belirli aralıklarda veya belirli zamanlarda sürüklenip bırakılmasını isteyebiliriz. Bu durumda, “eventConstraint” ve “durationEvent” gibi seçenekleri kullanabiliriz. Bu seçeneklerle, etkinliklerin sadece belirli tarihler veya saatler arasında sürüklenip bırakılabileceği kısıtlamaları uygulayabiliriz.

Sürükle-bırak işlemleri yaparken, ayrıca, etkinliklerin hangi elementlerine sürüklenip bırakılabileceğini belirlemek için “eventStartEditable” ve “eventDurationEditable” gibi seçenekleri de kullanabiliriz. Bu seçeneklerle, etkinliklerin sadece başlangıç tarihleri veya süreleri düzenlenebilir hale getirilebilir.

Takvimden Etkinlik Silme

FullCalendar, etkinlik silme işlemlerini yapmak için “eventClick” eventini kullanmanızı sağlar. Örneğin, etkinliğe tıklandığında silme işlemi gerçekleştirmek için:

$('#calendar').fullCalendar({
    events: '/your-url',
    eventClick: function(event, jsEvent, view) {
        var confirm = window.confirm("Etkinliği silmek istediğinize emin misiniz?");
        if (confirm) {
            $.ajax({
                url: '/delete-event',
                data: { id: event.id },
                type: 'DELETE',
                success: function(response) {
                    $('#calendar').fullCalendar('removeEvents', event.id);
                }
            });
        }
    }
});

Bu örnekte, etkinliğe tıklandığında, kullanıcıya silme işlemi gerçekleştirmek isteyip istemediği sorulur. Eğer kullanıcı silme işlemi gerçekleştirmek isterse, sunucuya bir DELETE isteği yapılır. Sunucudan geri dönen cevabın doğruluğunu kontrol etmeli ve uygun bir işlem yapmalıyız.

Ayrıca, silme işlemi gerçekleştikten sonra, “removeEvents” metodu ile takvimdeki etkinliği kaldırmak için kullanabilirsiniz. Bu metod, etkinliğin id’si ile çağrılır ve etkinliği takvimden kaldırır.

Bir Etkinliği Haftanın Belirli Günlerinde Tekrarlamak

FullCalendar 4.4.2 ile bir etkinliği haftanın belli bir günü tekrar etmek için “rrule” seçeneğini kullanmanız gerekir. Bu seçenek, etkinliğin özelliklerini tanımlarken verilir. Örneğin, etkinliği her Pazartesi gerçekleştirmek için:

$('#calendar').fullCalendar({
    events: [
        {
            title: 'Event Title',
            start: '2022-01-01',
            rrule: 'FREQ=WEEKLY;BYDAY=MO',
        }
    ]
});

Bu örnekte, etkinliğin “rrule” seçeneği olarak “FREQ=WEEKLY;BYDAY=MO” verilmiştir. Bu, etkinliğin her hafta Pazartesi gerçekleştirileceğini gösterir.

RRule Kullanımı

• “FREQ” değeri, etkinliğin tekrar aralığını belirtir. Örnek olarak “FREQ=WEEKLY” etkinliğin her hafta tekrarlanacağını ifade eder.
• “BYDAY” değeri, etkinliğin hangi günlerde gerçekleşeceğini belirtir. Örnek olarak “BYDAY=MO” etkinliğin Pazartesi günlerinde gerçekleşeceğini ifade eder.

Bu örnekler sadece haftalık tekrarlamayı verir, endate ve untildate ile tekrarlamaları belirleyebilirsiniz. Örnek olarak “UNTIL=2022–12–31T23:59:59Z” yazarsanız etkinlik 2022 yılının son gününe kadar tekrar edecektir.

İşte bir örnek:

Release v4.4.2 · fullcalendar/fullcalendar

Full-sized drag & drop event calendar in JavaScript - Release v4.4.2 · fullcalendar/fullcalendar

github.com

Umarım yararlı bir yazı olmuştur :)