ASP.NET MVC5+EF6+EasyUI 後臺管理系統（86）-日程管理-fullcalendar插件用法

時間 2019-11-05

標籤 asp.net asp mvc5+ef6+easyui mvc easyui 後臺管理系統日程 fullcalendar 插件用法欄目 ASP 简体版

原文原文鏈接

系列目錄

前言

本文分享fullcalendar用法,最後面提供代碼下載css

說到日程管理,基於JQuery的插件FullCalendar當之無愧,完整的API穩定和調用方式,很是易於擴展!
能夠用於系統的我的歷程管理,系統的任務日曆列表.
支持按：月、周、日來查看,很是實用html

FullCalendar插件下載前端

下載使用

下載好FullCalendar解壓，裏面包含了demo和必要的JS,CSS文件jquery

咱們打開Demo隨便打開一個樣例，獲得如下必要的文件便可，其餘均可以刪掉數據庫

/fullcalendar.min.css
/fullcalendar.print.min.css
/lib/moment.min.js
/lib/jquery.min.js
/fullcalendar.min.js
/zh-cn.js

因爲使用過程當中有彈窗,這部分輔助我使用的是EasyUI的組件（你能夠使用其餘彈窗組件來作彈窗）json

數據庫結構

因爲咱們使用了數據保存，因此表的創建要根據官方的事件數據來建對應的數據庫表用來存儲一個日曆事件信息的標準對象，其中只有title和start是必須的ide

可是咱們能夠全建來得到完整的數據支持測試

屬性	描述
id	可選，事件惟一標識，重複的事件具備相同的id
title	必須，事件在日曆上顯示的title
allDay	可選，true or false，是不是全天事件。
start	必須，事件的開始時間。
end	可選，結束時間。
url	可選，當指定後，事件被點擊將打開對應url。
className	指定事件的樣式。
editable	事件是否可編輯，可編輯是指能夠移動, 改變大小等。
source	指向次event的eventsource對象。
color	背景和邊框顏色。
backgroundColor	背景顏色。
borderColor	邊框顏色。
textColor	文本顏色。

CREATE TABLE [dbo].[SysCalendarPlan](
    [Id] [varchar](50) primary key,
    [Title] [varchar](500) NOT NULL,
    [PlanContent] [varchar](500) NULL,
    [BeginDate] [datetime] NOT NULL,
    [EndDate] [datetime] NOT NULL,
    [CreateTime] [datetime] NOT NULL,
    [Url] [varchar](250) NULL,
    [Color] [varchar](50) NULL,
    [TextColor] [varchar](50) NULL,[Editable] [varchar](50) NULL,
)

至此，數據庫的表結構就已經創建完成ui

前端代碼

新建一個MVC5項目（普通MVC沒有權限驗證）

刪掉Home視圖，新建一個空的Index.cshtml頁面，引入必要的JS，這就是咱們的主頁了this

Index.cshtml代碼

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script src="../../Scripts/jquery.easyui.min.js"></script>
    <link href="../../Content/metro/easyui.css" rel="stylesheet" />
    <link href="~/Scripts/fullcalendar/fullcalendar.css" rel="stylesheet" />
    <script src="~/Scripts/fullcalendar/moment.min.js"></script>
    <script src="~/Scripts/fullcalendar/fullcalendar.min.js"></script>
    <script src="~/Scripts/fullcalendar/zh-cn.js"></script>
    <script>
      var editEvent = null;
        $(function () {
   
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay,listWeek'
                },
                weekNumbers: true,
                weekNumbersWithinDays: true,
                weekNumberCalculation: 'ISO',
                editable: true,
                navLinks: true, // can click day/week names to navigate views
                defaultView:'month',
                contentHeight:540,
                selectable: true,
                selectHelper: true,//在agenda視圖下選擇時會帶上對應的時間
                dragOpacity: 0.5, //Event被拖動時的不透明度
            });
        });
    </script>
</head>
<body>
   <div id="calendar" style="margin-top:10px;margin-left:5px"></div>
</body>
</html>

添加從例子中引用的JS的代碼，F5運行一下，效果已經出來了！

展現邏輯代碼

1、將表添加到EF（助於咱們快速開發數據）

新建EF並加入表SysCanlendarPlan

2、插入幾條模擬數據

USE [TestDB]
GO
/****** Object:  Table [dbo].[SysCalendarPlan]    Script Date: 07/25/2017 16:11:00 ******/
INSERT [dbo].[SysCalendarPlan] ([Id], [Title], [PlanContent], [BeginDate], [EndDate], [CreateTime], [Url], [Color], [TextColor], [Editable]) VALUES (N'201706291423265580000cb3f24cb11', N'測試1', N'測試內容1', CAST(0x0000A7B100000000 AS DateTime), CAST(0x0000A7B200000000 AS DateTime), CAST(0x0000A7BB00000000 AS DateTime), NULL, N'#3a87ad', N'#ffffff', N'true')
INSERT [dbo].[SysCalendarPlan] ([Id], [Title], [PlanContent], [BeginDate], [EndDate], [CreateTime], [Url], [Color], [TextColor], [Editable]) VALUES (N'201706291423265580000cb3f24cb24', N'測試', N'測試內容', CAST(0x0000A7A700000000 AS DateTime), CAST(0x0000A7A800000000 AS DateTime), CAST(0x0000A7BB00000000 AS DateTime), NULL, N'#3a87ad', N'#ffffff', N'true')

3、編寫Ajax請求方法

Json格式根據官方demo提供的json數據格式必須一致

新建json格式的模型，放到Models下便可

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace 日程管理.Models
{
    public class CalendarPlanJsonModel
    {
        public string id { get; set; }
        public string title { get; set; }//he text on an event's element
        public string content { get; set; }//content
        public string color { get; set; }//Sets an event's background and border color 
        public string textColor { get; set; }//Sets an event's text color
        public DateTime start { get; set; }//The date/time an event begins
        public DateTime end { get; set; }//The exclusive date/time an event ends
        public string url { get; set; }//A URL that will be visited when this event is clicked by the user
    }
}

查詢,新增,修改的Ajax請求方法

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using 日程管理.Models;

namespace 日程管理.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        //讀取事件列表
        [HttpGet]
        public JsonResult GetList(DateTime start, DateTime end)
        {
            using (DBContainer db = new DBContainer())
            {
                List<SysCalendarPlan> list = db.SysCalendarPlan.ToList();
                var json = (from r in list
                            select new CalendarPlanJsonModel()
                            {
                                id = r.Id,
                                title = r.Title,
                                content = r.PlanContent,
                                start = r.BeginDate,
                                end = r.EndDate,
                                url = r.Url,
                                color = r.Color,
                                textColor = r.TextColor
                            }).ToArray();
                return Json(json, JsonRequestBehavior.AllowGet);
            }
        }

        //建立新事件
        public ActionResult Create(string start, string end)
        {
            DateTime beginDate = new DateTime();
            DateTime endDate = new DateTime();
            if (start == null)
            {
                beginDate = Convert.ToDateTime(DateTime.Now.ToShortDateString());
                endDate = Convert.ToDateTime(DateTime.Now.AddDays(1).ToShortDateString());
            }
            else
            {
                beginDate = Convert.ToDateTime(start);
                endDate = Convert.ToDateTime(end);
            }


            SysCalendarPlan model = new SysCalendarPlan()
            {
                BeginDate = beginDate,
                EndDate = endDate
            };
            return View(model);
        }

        [HttpPost]
        public JsonResult Create(SysCalendarPlan model)
        {
            using (DBContainer db = new DBContainer())
            {
                model.Id = DateTime.Now.ToString("yyyyMMddHHmmssfffffff");
                model.CreateTime = DateTime.Now;
                model.Editable = model.Editable == null ? "false" : model.Editable;
                SysCalendarPlan entity = new SysCalendarPlan();
                entity = new SysCalendarPlan();
                entity.Id = model.Id;
                entity.Title = model.Title;
                entity.PlanContent = model.PlanContent;
                entity.BeginDate = model.BeginDate;
                entity.EndDate = model.EndDate;
                entity.CreateTime = model.CreateTime;
                entity.Url = model.Url;
                entity.Color = model.Color;
                entity.TextColor = model.TextColor;
                entity.Editable = model.Editable;
                db.Set<SysCalendarPlan>().Add(entity);
                if (db.SaveChanges() > 0)
                {
                    return Json("1");
                }
                else
                {
                    return Json("0");
                }
            }
        }


        //修改事件

        public ActionResult Edit(string id)
        {
            using (DBContainer db = new DBContainer())
            {
                SysCalendarPlan entity = db.SysCalendarPlan.SingleOrDefault(a=>a.Id==id);
                return View(entity);
            }
        }

        [HttpPost]
        //[SupportFilter]
        public JsonResult Edit(SysCalendarPlan model)
        {

            using (DBContainer db = new DBContainer())
            {
                SysCalendarPlan entity = db.SysCalendarPlan.SingleOrDefault(a => a.Id == model.Id);
                entity.Title = model.Title;
                entity.PlanContent = model.PlanContent;
                entity.BeginDate = model.BeginDate;
                entity.EndDate = model.EndDate;
                entity.CreateTime = model.CreateTime;
                entity.Url = model.Url;
                entity.Color = model.Color;
                entity.TextColor = model.TextColor;
                entity.Editable = model.Editable;
                db.Set<SysCalendarPlan>().Attach(entity);
                db.Entry(entity).State = EntityState.Modified;
                if (db.SaveChanges() > 0)
                {
                    return Json("1");
                }
                else
                {
                    return Json("0");
                }
            }
        }
    }
}

控制器的代碼

4、來自前端的請求

請求以前咱們須要瞭解一下這個插件的事件,方便咱們調

http://www.cnblogs.com/ymnets/p/7052818.html

雖然不少種事件，可是下面總結幾個經常使用時間便可

1.select 選擇日期觸發(彈出新增的框[新增])
2.eventDrop 拖拽觸發(拖動改變日期或者延長縮短[修改])
3.eventClick 點擊事件(進一步查看明細或者[修改])
4.eventDrop 移動事件時候觸發(直接改變日期[修改])

  <script>
      var editEvent = null;
        $(function () {
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay,listWeek'
                },
                weekNumbers: true,
                weekNumbersWithinDays: true,
                weekNumberCalculation: 'ISO',
                editable: true,
                navLinks: true, // can click day/week names to navigate views
                defaultView:'month',
                contentHeight:540,
                selectable: true,
                selectHelper: true,//在agenda視圖下選擇時會帶上對應的時間
                dragOpacity: 0.5, //Event被拖動時的不透明度
                droppable: true,
                events: {
                    //加載數據
                    url: '/Home/GetList',
                    error: function () {
                        alert("請求錯誤");
                    }
                },
                select: function (start, end) {
                    console.log('選擇日期觸發');
                },
                eventDrop: function (event, dayDelta, revertFunc) {
                    console.log('eventDrop --- start ---');
                    console.log('eventDrop被執行，Event的title屬性值爲：', event.title);
                    if (dayDelta._days != 0) {
                        console.log('eventDrop被執行，Event的start和end時間改變了：', dayDelta._days + '天！');
                    } else if (dayDelta._milliseconds != 0) {
                        console.log('eventDrop被執行，Event的start和end時間改變了：', dayDelta._milliseconds / 1000 + '秒！');
                    } else {
                        console.log('eventDrop被執行，Event的start和end時間沒有改變！');
                    }
                    //revertFunc();
                    console.log('eventDrop --- end ---');
                },
                eventClick: function (event, element) {
                    //點擊事件觸發
                    console.log("點擊事件觸發");
                    console.log(event);
                },
                eventDrop: function (event, dayDelta, revertFunc) {
                    //移動事件時候觸發
                    console.log("移動事件時候觸發");
                    console.log(event);
                }
            });
        });
    </script>