ENES TAŞ

Senior Software Developer

Asp.Net MVC ile FullCalendar Kullanımı -1 24.3.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.  

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

Yorum Yap