Enes TAŞ

Developer

Asp.Net MVC ile FullCalendar Kullanımı -1 24.03.2018

Web tabanlı uygulamalarınız da, etkinlik yönetimi, randevu takibi gibi işlemleriniz için bir takvime ihtiyaç duyarsanız kullanımı gayet basit olan FullCalendar eklentisini kullanabilirsiniz. Bu makalemde FullCalendar kullanımına giriş yapacağım, şimdilik basit bir şekilde asp.net mvc de FullCalendar eklentisini kullanarak verilerimizi takvim üzerinde nasıl görebiliriz onu anlatacağım ve projeyi bu makalenin sonunda sizinle paylaşacağım. 

Sonraki makaleler de FullCalendar eklentisini daha detaylıca ele alacağız.  

FullCalendar hakkında daha fazla bilgiye ulaşmak için https://fullcalendar.io/ adresi ziyaret edin. 


Öncelikle Visual Studio da yeni bir mvc projesi oluşturalım. Daha sonra FullCalendar eklentisini projemize eklemek için, Solution Explorer > References kısmına sağ tıklayıp Manage Nuget Package butonuna tıklayalım. 


Daha sonra açılan pencere de Search kısmından FullCalendar yazarak eklentiyi arıyoruz ve seçip Install butonuna basıyoruz.Bu işlemden sonra FullCalendar için gerekli dosyalarımız Content ve Script klasörlerine eklenecek. Nuget dışında yukarıda vermiş olduğum linkten indirerekte ilgili dosyaları projenize ekleyebilirsiniz. 



Şimdi takvim üzerine çekeceğimiz veriler için Model klasörü altına bir class oluşturalım. 

CalendarEvent.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace FullCalendar.Models {
    public class CalendarEvent {
        public int id { get; set; }
        public string title { get; set; }
        public string start { get; set; }
        public string end { get; set; }
        public string color { get; set; }
        public bool allDay { get; set; }
    }
}

Daha sonra CalendarController adında bir controller sınıfı oluşturalım. Controller içeriğimiz aşağıdaki şekilde. 

CalendarController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using FullCalendar.Models;

namespace FullCalendar.Controllers
{
    public class CalendarController : Controller
    {
        //
        // GET: /Calendar/

        public ActionResult Index()
        {

            return View();
        }

        public JsonResult GetCalendarEvents() {
            List<CalendarEvent> eventItems = new List<CalendarEvent>();
            int i = 0, n = 9;
            for (i = 0; i < n; i++) {
                AddItem(eventItems);
            }

            return Json(eventItems, JsonRequestBehavior.AllowGet);
        }

        Random random = new Random();
        public void AddItem(List<CalendarEvent> eventItems) {
            CalendarEvent item = new CalendarEvent();

            DateTime startDate = new DateTime(DateTime.Now.Year, DateTime.Now.Month, random.Next(1, 30));

            item.id = random.Next(1, 100);
            item.start = startDate.ToString("s");
            item.end = startDate.AddDays(random.Next(1, 5)).ToString("s");
            item.allDay = true;
            item.color = "blue";
            item.title = "Calendar Item " + item.id;
            eventItems.Add(item);
        }

    }
}

Burada yaptığımız işlem, CalendarEvent nesnemiz için bir list oluşturmak ve bu liste 10 tane eleman eklemek. Ardından listemizi Json formatında response olarak dönüyoruz. 
Şimdi gelelim FullCalendar ile bu oluşturduğumuz listeyi takvime nasıl çekeceğimiz konusuna :)

Index view sayfamızı oluşturuyoruz. 

Index.cshtml
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>

   <link href="~/Content/fullcalendar.min.css" rel="stylesheet" />
</head>
<body>
    <div id="calendar">

    </div>

   <script src="~/Scripts/jquery-2.0.0.min.js"></script>
    <script src="~/Scripts/moment.min.js"></script>
    <script src="~/Scripts/moment-with-locales.min.js"></script>
    <script src="~/Scripts/fullcalendar/fullcalendar.min.js"></script>
    <script src="~/Scripts/fullcalendar/locale/tr.js"></script>
    <script src="~/Scripts/fullcalendar/locale-all.js"></script>

    <script>
        $(document).ready(function () {
            GetCalendarEvents();
        });

        function GetCalendarEvents() {
            debugger;
            $('#calendar').fullCalendar({
                lang: 'tr',
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                editable: true,
                events: '/Calendar/GetCalendarEvents/',
                eventClick: function (event) {
                    alert('Item ID: ' + event.id  + "\nItem Title: " + event.title);
                }
            });
        }
    </script>

</body>
</html>
Eklentimizin css ve js dosyalarını sayfamıza referans olarak ekledik. 
Sonrasında fullCalendar ın events özelliğin de GetCalendarEvents metodumuzu çağırarak verilerimizi oluşturuk ve takvim üzerinde görünmesini sağladık. projemizi çalıştırdığımız da sonuç aşağıdaki şekilde :)



Konu umarım anlaşılır olmuştur. Bir sonraki makale de bu eklentiyi daha derinlemesine inceleyerek, veritabanından takvime veri çekme işlemi, takvim üzerinden herhangi bir güne tıklayarak etkinlik oluşturma, sürükle bırak ile veritabanında etkinlik tarihlerini güncelleme gibi işlemler yapacağız.

Projeyi buradan indirebilirsiniz. Kolay gelsin.  


Etiketler
Vefa - 16.06.2018 08:00

Bu projedeki günler aylar ve calenderdaki itemler nerden geliyor?

Enes - 24.06.2018 02:01

Vefa hocam, cs tarafında GetCalendarEvents metodundaki for döngüsünde 10 tane random olarak oluşturuyor ve listeye ekliyor. veritabanı ile yapılmış olan örneği paylaşacağım yakında.

Baris - 29.08.2018 16:47

Enes Bey,veri tabanı ile yapılmış olan örneği de paylaşır mısınız?

Enes - 29.09.2018 20:40

2. Örnekte veritabanı işlemleri mevcut Barış bey

selami - 06.10.2020 15:26

Merhaba Enes bey Veritabanı ile oluşturulmuş projeyi atabilir misiniz? ayrıca Layout ile açılmıyor. css çakışmasımı var bilemiyorum.

Enes - 15.10.2020 09:59

Merhaba Selami bey, Veritabanı işlemlerini anlattığım makalede proje dosyasını paylaşmıştım, indirebilirsiniz. Layout ile ilgili muhtemelen js çakışması vardır, farklı jquery versiyonları varsa eğer birini kaldırıp deneyebilirsiniz. Çözemediğiniz noktada yine yardımcı olabilirim. http://enestas.net/Detay/asp-net-mvc-ile-fullcalendar-kullanimi-2-veritabani-islemleri

davut - 21.03.2020 22:48

Hocam Layout ile nasıl kullanırız. Layout olunca fullcalendar çıkmıyor.

Enes - 21.03.2020 22:56

Selamlar, layout ile ilgili herhangi bir problem olmamalı. Atladığınız başka bir şey olabilir. Tekrar atladığınız bir şey var mı kontrol etmenizi öneririm veya ikinci bir gözün bakması faydalı olabilir :) Genelde çok basit şeyler gözden kaçabiliyor ve ikinci bir gözün bakması faydalı olabiliyor :)

Aleyna - 28.11.2020 18:40

Hocam bir ajanda programı yapıyorum c# da bunu ona nasıl uyarlayabilirim yardımcı olur musunuz?

Enes - 28.11.2020 18:49

Selamlar Aleyna, c# derken masaüstü bir uygulamadan mı bahsediyorsun?

Aleyna - 28.11.2020 18:56

Evet masaüstü form uygulaması hazırlıyorum ajandanın aylık sayfası böyle görünsün istiyorum lütfen yardımcı olun?

Enes - 28.11.2020 22:13

Aleyna, FullCalendar bir JavaScript eklentisi, bu nedenle sadece web tabanlı kullanılabiliyor. Winform için farklı componentler kullanabilirsin. Örnek bir proje linki paylaşıyorum, inceleyebilirsin. https://www.codeproject.com/Articles/378900/Calendar-NET

Anıl - 26.02.2021 05:56

Mssql veritabanlı ajanda yapmam gerekiyor proje için bu yeterli olur mu?

Enes - 04.03.2021 20:37

2. makaleyi de okumanızı öneririm. Orada veritabanı örneği de mevcut.

Anıl - 07.04.2021 17:56

2.makaleyide okudum sizin attığınız proje linkini indirmeme rağmen proje açılmıyor boş sayfa açılıyor. Sorun nerde acaba hocam?

Enes - 07.04.2021 20:52

Merhaba, muhtemelen jquery hatasından dolayı sayfa boş geliyor. Index.cshtml dosyasındaki jquery-2.0.0.min.js kısmını jquery-3.0.0.min.js olarak değiştirip tekrar deneyebilirsiniz.

Anıl - 08.04.2021 13:36

teşekkürler hocam çalıştı. Alttaki hatayı neden veriyor olabilir

Anıl Ayar - 06.04.2021 20:32

'/' Uygulamasında Sunucu Hatası. Kaynak bulunamadı. Açıklama: HTTP 404. Aradığınız kaynak (veya bağımlı olduklarından biri) kaldırılmış, adı değiştirilmiş veya geçici olarak kullanılamaz durumda olabilir. Lütfen aşağıdaki URL'yi gözden geçirin ve doğru yazıldığından emin olun. İstenen URL: /Calendar/Index Sürüm Bilgisi: Microsoft .NET Framework Sürümü:4.0.30319; ASP.NET Sürümü:4.8.4330.0 hocam hata alıyorum sorun nedir acaba?

Anıl Ayar - 18.04.2021 00:06

System.Data.SqlClient.SqlException HResult=0x80131904 İleti=Sunucuyla bağlantı kurulurken ağ ile ilgili veya örneğe özel bir hata oluştu. Sunucu bulunamadı veya sunucuya erişilemiyor. Örnek adının doğru olduğunu ve SQL Server'ın uzak bağlantılara izin verdiğini doğrulayın. (provider: Named Pipes Provider, error: 40 - SQL Server için bağlantı açılamadı) Kaynak=.Net SqlClient Data Provider StackTrace: <Özel durum yığın izlemesi değerlendirilemiyor> İçteki Özel Durum 1: Win32Exception: Ağ yolu bulunamadı hocam böyle hata alıyorum. veritabanını tam olarak nasıl bağlamalıyım? User id ve şifre istiyor.

Bayram Ceylan - 01.09.2021 18:12

Hocam, Çok teşekkür ederim. Güzel bir çalışma olmuş. Elinize sağlık.

Enes - 06.09.2021 16:49

Teşekkürler :)

Yorum Yap