Asp.Net MVC ile FullCalendar Kullanımı -1 - Enes Taş

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

asp.net mvc fullcalendar js jquery calendar takvim fullcalendar kullanımı asp.net mvc fullcalendar

ASP.NET MVC

Vefa - 16.06.2018 08:00

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

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

Etiketler

Yorum Yap