Asp.Net MVC Core ile FullCalendar Kullanımı

araştırıp yaparak öğrendiğim yolu not etmek istedim. tüm deneyimi aktarmaya çalışacağım.

Bir randevu sistemi yazmaya çalıştım. Daha önce takvim ile çalışmam olmamıştı. benim için güzel bir deneyim oldu. bunları yaparken de kendime not ve sizlerle de paylaşmak istedim.

Aklımdan geçen tüm CRUD işlemlerini takvim üzerinde yapmak ve bunlar nasıl yapılır sizlerle de paylaşacağım. Böylelikle sizlerde uygulayarak kolayca projenize entegre edebileceksiniz. Çünkü gerçek bir proje üzerinde gösteriyor olacağım.

Yukarıdaki FullCalendar ile yapılmış bir takvim.

Benim projem .net Core 5.0 ve katmanlı mimaride yazıyorum. o yüzden proje kurulumunu anlatmayacağım. önce Fullcalendar projemize nasıl dahil ederiz ona bakalım.

FullCalendar versiyonunu resmi web sitesinden indirelim.Ben 5.11.5 sürümünü edindim.

https://fullcalendar.io/docs/initialize-globals

Bu kısımdan zip olarak indirip klasörden lib dosyasının içeriğini kopyalayın.

Sonrasında projenizde bulunan wwwroot/Lib klasörün içerisine fullcalendar adında bir klasör açın ve yapıştırın.

bu şekilde olmalıdır.

Sonrasında Layout.cshtml kısmında uygun yere şunları ekleyin.

 <link href="~/lib/fullcalendar/main.css" rel="stylesheet" />
<!-- Fullcalendar eklentisi js -->
    <script src="~/lib/fullcalendar/main.js"></script>
    <script src="~/lib/fullcalendar/locales-all.js"></script>

bu script’in altına şunu ekledim.

Sonrasında ben Appointments adında bir controller açtım ve sayfama şu kodları yerleştirdim

 <div class="col-lg-8 col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div id="calendar"></div>
                    </div>
                </div>
            </div>

bu Appointments/Index’de şu scriptlerimi yazdım.

Türkçeleştirme işlemi içinde yukarıda main.js hemen altına Locales-all js kütüphanesini bırakmıstık. Türkçe dili devreye sokmak için

locale: 'tr',  --bu dosya tr.js dosyasını buluyor 
lang: 'tr',-- buda dil seçeniğini tr olarak belirtmiş olduk. 

Takvim görünümüne geçmeden önce Sql de bir tablo açtım. FullCalender okuması için ona uygun alanlar açtım. şöyle :

Sonrasında Entities katmanında classımı yazdım.

bu adımdan sonra tek tek katmanlarımı oluşturdum. Daha önce yazılarımdan adımları edinebilirsiniz.

Sonrasında Controller da servicelerimi çağırdım ve consturctur metodum ile tamamladım.

Böylelikle yazdığım metotları kolaylıkla kullanabileceğim.

Yukarıda yazmış olduğum scriptin içinde post metodu ile controllerdan bir istek yollamıstım. GetData metodumda veritabanımdaki kayıtları liste halinde alıyorum ve Json olarak ajax metoduna response olarak göndermiş olduk. hatırlatma için yukarıdaki resmi tekrar koyuyorum.

istek atılan post metodu.

ben bir kaçtane örnek veri girişi yapmıştım. Örnek olarak buraya ekran resmini koyuyorum.

İşte takvimimizin görüntüsü bu şekilde.

İsterseniz şimdi Veritabanına ekleme işlemi nasıl yapılır ona bakalım.

Appointments Controller da bir Add metodu yazıyorum ve bu metot ile bir partial view Döndüreceğim.

 [HttpGet]
        public IActionResult Add()
        {
           
            return PartialView("AddAppointmentModal");
        }

Partial View Açıldıktan sonra

Models klasörümde şu AppoinmentCalendarViewModel adında bir class oluşturuyorum.

  public class AppoinmentCalendarViewModel
    {
        public AppoinmentCalendar AppoinmentCalendar { get; set; }
        public List<AppoinmentCalendar> AppoinmentCalendars { get; set; }
        public IEnumerable<SelectListItem> Customers { get; set; }
    }

ve AddAppointmentModal Partial View şu şekilde :

Ekran tasarımımız bu şekilde olacaktır. Bu sayfayı tetikleyecek bir button hazırlayalım.

  <a onclick="showInPopup('@Url.Action("Add","Appointments")','Randevu Oluştur')" class="btn btn-primary text-light m-2"><i class="fa fa-plus-circle"></i>  Randevu Oluştur</a>

Güncelleme için şöyle bir yol izledim. Fullcalendar. js Clickevent özelliğine bir ajax yazdım.

burdan bilgileri alıp Modal açtırıp bilgileri düzenlemesini sağladım.

C# kodu şöyle

kısaca böyle arkadaşlar. umarım faydalı bir yazı olmuştur. kendinize çok iyi bakın. başka yazımda görüşmek üzere :)