تقویم با قابلیت ثبت رویداد و زمانبندی در MVC
دوشنبه 1 تیر 1394در این مقاله با نحوه ساخت AJAX Event Calendar در MVC به کمک کتابخانه منبع باز AJAX Event Calendar. این کتابخانه دارای لیسانس شرکت Apache می باشد. (Apache Software License 2.0)
این پروژه نمونه به شما نحوه ساخت تقویم با قابلیت ثبت رویداد و زمانبندی در MVC به کمک کتابخانه منبع باز AJAX Event Calendar را نمایش می دهد.
دموی آنلاین :
تنها 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 روز هفته در تقویم ما نمایش داده می شود.
- ASP.net MVC
- 4k بازدید
- 10 تشکر