تقویم با قابلیت ثبت رویداد و زمانبندی در MVC

در این مقاله با نحوه ساخت AJAX Event Calendar در MVC به کمک کتابخانه منبع باز AJAX Event Calendar. این کتابخانه دارای لیسانس شرکت Apache می باشد. (Apache Software License 2.0)

تقویم با قابلیت ثبت رویداد و زمانبندی در MVC

این پروژه نمونه به شما نحوه ساخت تقویم با قابلیت ثبت رویداد و زمانبندی در MVC به کمک کتابخانه منبع باز AJAX Event Calendar را نمایش می دهد.

دموی آنلاین :

نمایش روز

نمایش هفته

تغییر سایز رویداد Drag&Drop

حرکت رویداد Drag&Drop

تنها 80 خط کد برای ساخت کامل قابلیت Drag&Drop(ساخت رویداد، تغییر سایز و حرکت رویداد) نیاز می باشد.

3 قدم لازم :

کتابخانه : شامل DayPilot.Web.Mvc.dll و اسکریپت هایی در پروژه و اضافه کردن Reference به آن.

ویو : یک MVC Razor view ساخته و اضافه کردن DayPilot Calendar widget توسط Html.DayPilotCalendar extension

کنترلر : ساخت یک کنترلر MVC که داده ها را تولید خواهد کرد.

CSS THEMES (جدید در نسخه 1.4)

از نسخه 1.4، DayPilot Lite هسته جاوااسکریپت را با javascript.daypilot.org به اشتراک گداشته است. همچنین می توانید Html5 Event Calender منبع باز را مشاهده نمایید. mvc.daypilot.org پشتیبانی کامل از استایل های CSS دارد و شامل تم های CSS می باشد. همچنین شما می توانید تم دلخواه خود را در CSS theme designer برای خود بسازید.

تم CSS شبیه گوگل

تم CSS ترانسپرنت

تم CSS سبز رنگ

تم CSS سفید رنگ

تم CSS سنتی

 

1. DayPilot.Web.Mvc Library

پکیج منبع باز DayPilot Lite برای MVC را از اینجا دانلود نمایید.

فایل جاوااسکریپت Daypilot را از پوشه Scripts موجود در پکیج به پروژه خود کپی نمایید

(Scripts/DayPilot) :

daypilot-all.min.js

فایل DayPilot.Web.Mvc.dll را از پوشه DayPilotLiteMvc-1.5.414\Binary\Mvc موجود در پکیج به پروژه خود کپی نمایید.

رفرنس DayPilot.Web.Mvc.dll را اضافه کنید :


ویو ام وی سی (8 خط کد)

یک ویو ASP.NET MVC در مسیر (Views/Home/Index.cshtml) بسازید.

اسکریپت DayPilot را به آن اضافه نمایید.

<script src="@Url.Content("~/Scripts/DayPilot/daypilot-all.min.js")" type="text/javascript"></script> 

کد event calendar initialization زیر را به آن اضافه کنید.

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
{
  BackendUrl = Url.Content("~/Home/Backend"),
}) 

این کد به کنترلر ("Home/Backend/~") که تقویم ثبت رویداد توسط Ajax را فراهم می کند نیز اشاره دارد.

سپس در قسمت <configuration> در Web.Config موجود در مسیر Views/Web.config/ فضای نام DayPilot.Web.Mvc را اضافه نمایید.

<configuration>
  <system.web.webPages.razor>
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
      <namespaces>
        ...
        <add namespace="DayPilot.Web.Mvc"/>
      </namespaces>
    </pages>
  </system.web.webPages.razor>
</configuration>

در نهایت کدهای موجود در ویو چنین خواهد شد :
 

<h2 align="center">MVC ثبت رویداد در تقویم در</h2>
<a href="www.barnamenevisan.org"><h6 align="center">مرجع تخصصی برنامه نویسان</h6></a>

<script src="@Url.Content("~/Scripts/DayPilot/daypilot-all.min.js")" type="text/javascript"></script>

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
{
    BackendUrl = Url.Action("Backend"),
    ViewType = DayPilot.Web.Mvc.Enums.Calendar.ViewType.Week,
    EventMoveHandling = DayPilot.Web.Mvc.Events.Calendar.EventMoveHandlingType.CallBack,
    EventResizeHandling = DayPilot.Web.Mvc.Events.Calendar.EventResizeHandlingType.CallBack,
    TimeRangeSelectedHandling = DayPilot.Web.Mvc.Events.Calendar.TimeRangeSelectedHandlingType.JavaScript,
    TimeRangeSelectedJavaScript = "dpc.timeRangeSelectedCallBack(start, end, null, { name: prompt('New Event Name:', 'New Event') });"
})

کنترلر MVC

یک کنترلر MVC با نام Home ایجاد نمایید.

public class HomeController : Controller
{
  public ActionResult Index()
  {
    return View();
  }
}

در کنترلر Home یک Action با نام backend بسازید.

public ActionResult Backend()
{
  return new Dpc().CallBack(this);
}

این اکشن کنترل را به نمونه جدید از کلاس dpc از DayPilotCalendar پاس می دهد.

در نهایت کدهای زیر را در کنترلر Home کپی نمایید.

using System;
using System.Linq;
using System.Web.Mvc;
using ajaxCalendar.Models;
using DayPilot.Web.Mvc;
using DayPilot.Web.Mvc.Enums;
using DayPilot.Web.Mvc.Events.Calendar;

namespace ajaxCalendar.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Backend()
        {
            return new Dpc().CallBack(this);
        }


        class Dpc : DayPilotCalendar
        {
            DataClasses1DataContext db = new DataClasses1DataContext();
             
            protected override void OnInit(InitArgs e)
            {
                Update(CallBackUpdateType.Full);
            }


            protected override void OnEventResize(EventResizeArgs e)
            {
                var toBeResized = (from ev in db.Tbl_Events where ev.id == Convert.ToInt32(e.Id) select ev).First();
                toBeResized.eventstart = e.NewStart;
                toBeResized.eventend = e.NewEnd;
                db.SubmitChanges();
                Update();
            }

            protected override void OnEventMove(EventMoveArgs e)
            {
                var toBeResized = (from ev in db.Tbl_Events where ev.id == Convert.ToInt32(e.Id) select ev).First();
                toBeResized.eventstart = e.NewStart;
                toBeResized.eventend = e.NewEnd;
                db.SubmitChanges();
                Update();
            }

            protected override void OnTimeRangeSelected(TimeRangeSelectedArgs e)
            {
                var toBeCreated = new Tbl_Event() { eventstart = e.Start, eventend = e.End, text = (string)e.Data["name"] };
                db.Tbl_Events.InsertOnSubmit(toBeCreated);
                db.SubmitChanges();
                Update();
            }

            protected override void OnFinish()
            {
                if (UpdateType == CallBackUpdateType.None)
                {
                    return;
                }

                Events = from ev in db.Tbl_Events select ev;

                DataIdField = "id";
                DataTextField = "text";
                DataStartField = "eventstart";
                DataEndField = "eventend";
            }

        }

    }
}

مدل MVC

یک بانک اطلاعاتی با نام AjaxEventCalendar ساخته و در آن جدولی با نام Tbl_Event با فیلدهای زیر بسازید.

کسانی که وقت کافی برای ساخت بانک و جداول ندارند می توانند فایل نصبی موجود در پوشه ضمیمه را نصب کنند سپس از این قسمت شروع به ساخت پروژه نمایند.

سپس به قسمت Server Explorer رفته، کلیک راست کرده و روی Add Connection کلیک می کنیم. مانند شکل تنظیمات سرور را تنظیم کرده،بانک اطلاعاتی را انتخاب کرده، تست گرفته و کانکشن را اضافه می نماییم.

در Solution Explorer روی نام پروژه کلیک راست کرده و از قسمت Data یک Linq to SQL Classes با نام DataClasses1.dbml می سازیم.

در Server Explorer جدول Tbl_Event را روی صفحه کشیده و رها می کنیم.

فیلدهای جدول (id, text, eventstart, eventend) در فیلدهای DayPilotCalendar پر می شوند :

DataIdField = "id";
DataTextField = "text";
DataStartField = "eventstart";
DataEndField = "eventend";

()Update رویداد تقویم را به کاربر فرستاده و صفحع نمایش را بروزرسانی می نماید.

همانطور که در شکل پیداست می توان با تغییر در کد زیر حالت های تقویم را تغییر دهیم :

مثلا اگر از

ViewType = DayPilot.Web.Mvc.Enums.Calendar.ViewType.WorkWeek,

استفاده نماییم تنها روز های کاری هفته نمایش داده می شود ولی با استفاده از

ViewType = DayPilot.Web.Mvc.Enums.Calendar.ViewType.Week,

7 روز هفته در تقویم ما نمایش داده می شود.

فایل های ضمیمه