Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > ASP/ASP.Net > Tạo Calendar Event chỉ với 80 dòng lệnh
Tạo Calendar Event chỉ với 80 dòng lệnh
Nguyễn Trung Hiếu
Share Code Web Company 2012

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.

mvc open source

Demo

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. Gói thư viện 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
add reference

2. MVC 3 View (8 dòng)

Tạo mới một MVC 3 View (Views/Home/Index.cshtml)

Add thư viện javascript của DayPilot

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

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

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

3. MVC 3 Controller (34 dòng)

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

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

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

Chúng ta sẽ load dữ liệu về event từ một table gọi là “events” sử dụng LINQ to SQL
linq to sql
Table “events” có cấu trúc như sau
linq data class

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

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

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

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

mvc drag and drop
Để 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

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

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

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

week view

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

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

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é.

Download code

Trong file mình share code bao gồm

  • Mã nguồn dành cho MVC2
  • Mã nguồn dành cho MVC4
  • Open Soucre DayPilot

(codeproject)

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}

Blog Stats

  • 5.778 hits
%d bloggers like this: