Tạo Calendar Event chỉ với 80 dòng lệnh

3 thg 9, 2013

Bài viết này sẽ hướng dẫn các bạn tạo ra một Calendar Event giống với open-soucre DayPilot Lite for Asp.net MVC library.

Tạo Calendar Event chỉ với 80 dòng lệnh

Bài viết này sẽ hướng dẫn các bạn tạo ra một Calendar Event giống với open-soucre DayPilot Lite for Asp.net MVC library.

Demo

Day View
Week View
Drag&Drop Event Resizing
Drag&Drop Event Moving

Chúng ta sẽ chỉ sử dụng 80 dòng lệnh để tạo ra một ứng đụng dầy đủ chức năng từ kéo thả, creating, moving, resizing…

1. DayPilot.Web.Mvc Library
Download gói DayPilot Lite for Asp.Net MVC open-source
Copy các file javascript trong folder Script của gói bạn vừa download bên trên vào project của bạn (Script/DayPilot):

calendar.js
common.js

Copy DayPilot.Web.Mvc.dll từ thư mục Binary vào thư mục Bin trong project sau đó add reference như hình dưới

2. MVC 3 View (8 dòng)
Tạo mới một MVC 3 View (Views/Home/Index.cshtml)

@{ ViewBag.Title = "MVC 3 Razor Event Calendar"; }
<h2>MVC 3 Razor Event Calendar</h2>

Add thư viện javascript của DayPilot

<script src="@Url.Content("~/Scripts/DayPilot/common.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/DayPilot/calendar.js")" type="text/javascript"></script>

Add thêm đoạn mã khởi tạo calendar

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

Sau đó chúng ta thêm namespace DayPilot.Web.Mvc vào trong file web.config để nó có thể nhậnHtml.DayPilotCalendar helper

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

Vậy là toàn bộ code phần này như sau

@{ ViewBag.Title = "MVC 3 Razor Event Calendar"; }
<h2>MVC 3 Razor Event Calendar</h2>
<script src="@Url.Content("~/Scripts/DayPilot/common.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/DayPilot/calendar.js")" type="text/javascript"></script>
@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
{
BackendUrl = Url.Content("~/Home/Backend"),
})

3. MVC 3 Controller (34 dòng)
Tạo một MVC 3 Controller (Controllers/HomeController.cs)

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

Add mới một hành động trong phần backend của calendar.

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

Hành động này sẽ được điều khiển bởi lớp Dpc kế thừa từ DayPilotCalendar

class Dpc : DayPilotCalendar
{
protected override void OnInit(InitArgs e)
{
var db = new DataClasses1DataContext();
Events = from ev in db.events select ev;
DataIdField = "id";
DataTextField = "text";
DataStartField = "eventstart";
DataEndField = "eventend";
Update();
}
}

Chúng ta sẽ load dữ liệu về event từ một table gọi là “events” sử dụng LINQ to SQL

Table “events” có cấu trúc như sau

Các trường trong table này sẽ được ánh xạ tới các trường được yêu cầu trong DayPilotCalendar

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

Gọi hàm Update() sẽ gửi dữ liệu event calendar tới client và hiển thị lên

Và chúng ta hoàn thành code của phần này như sau

using System;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using DayPilot.Web.Mvc;
using DayPilot.Web.Mvc.Events.Calendar;
namespace DayPilotCalendarMvc3.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Backend()
{
return new Dpc().CallBack(this);
}
class Dpc : DayPilotCalendar
{
protected override void OnInit(InitArgs e)
{
var db = new DataClasses1DataContext();
Events = from ev in db.events select ev;
DataIdField = "id";
DataTextField = "text";
DataStartField = "eventstart";
DataEndField = "eventend";
Update();
}
}
}
}

4. Tạo hàm Drag&Drop bằng Ajax(38 dòng)

Để có thể kéo thả các event được thì các bạn cần add thêm 4 dòng lệnh nữa vào phần view

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') });"

Cụ thể là thêm vào hàm Html.DayPilotCalendar như dưới đây

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
{
BackendUrl = Url.Content("~/Home/Backend"),
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') });"
})

Và viết thêm 34 dòng lệnh nữa để điều khiển việc kéo thả sau đó lại cập nhật chúng vào database. Code sẽ trông như thế này

using System;
using System.Linq;
using System.Web.Mvc;
using DayPilot.Web.Mvc;
using DayPilot.Web.Mvc.Enums;
using DayPilot.Web.Mvc.Events.Calendar;
namespace DayPilotCalendarMvc3.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.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.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 Event {eventstart = e.Start, eventend = e.End, text = (string) e.Data["name"]};
db.Events.InsertOnSubmit(toBeCreated);
db.SubmitChanges();
Update();
}
protected override void OnFinish()
{
if (UpdateType == CallBackUpdateType.None)
{
return;
}
Events = from ev in db.Events select ev;
DataIdField = "id";
DataTextField = "text";
DataStartField = "eventstart";
DataEndField = "eventend";
}
}
}
}

5. Bonus: Week View (thêm 1 dòng nữa)

Để có thể chuyển sang chế độ xem theo tuần, bạn thêm dòng code sau vào phần view

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

cụ thể là vào đây

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
{
BackendUrl = Url.Content("~/Home/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') });"
})

Vậy là xong rồi đó, bạn thử chạy thử xem thế nào nhé. Ngoài kiểu view theo tuần ra thì còn có kiểu WorkWeek và kiểu Days (tùy biến số ngày, cài đặt thuộc tính trong ngày…)
Bạn hãy làm cho mình một Event Calendar thật đẹp nhé.

Tags: thủ thuật ASP.net

Bài đăng phổ biến

Tạo Calendar Event chỉ với 80 dòng lệnh

Bài viết này sẽ hướng dẫn các bạn tạo ra một Calendar Event giống với open-soucre DayPilot Lite for Asp.net MVC library.

Tạo Calendar Event chỉ với 80 dòng lệnh

Comments[ 0 ]

Đăng nhận xét

Welcome to http://luongdiep1.blogspot.com