系列目錄

前言

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

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

FullCalendar插件下載

下載使用

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

我們打開Demo隨便打開一個樣例，得到以下必要的文件即可，其他都可以刪掉

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

由於使用過程中有彈窗,這部分輔助我使用的是EasyUI的組件（你可以使用其他彈窗組件來做彈窗）

數據庫結構

由於我們使用了數據保存，所以表的建立要根據官方的事件數據來建對應的數據庫表用來存儲一個日曆事件信息的標準對象，其中只有title和start是必須的

但是我們可以全建來獲得完整的數據支持

屬性	描述
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,
)

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

前端代碼

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

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

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運行一下，效果已經出來了！

展示邏輯代碼

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

新建EF並加入表SysCanlendarPlan

二、插入幾條模擬數據

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')

三、編寫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");
                }
            }
        }
    }
}

控制器的代碼

四、來自前端的請求

請求之前我們需要了解一下這個插件的事件,方便我們調

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>

實現

到這裏已經分解了所有，剩下來只剩下實現！具體實現我們就參考源碼代碼吧！

代碼下載

鏈接:http://pan.baidu.com/s/1pKD7AFh 密碼:skme

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

系列目錄

前言

下載使用

數據庫結構

前端代碼

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

展示邏輯代碼

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

二、插入幾條模擬數據

三、編寫Ajax請求方法

四、來自前端的請求

實現

HTML頁面關於高分屏的設置

北歐瑞典挪威芬蘭瑞士TikTok海外網紅與YouTube博主的合作模式

歐洲英國德國法國TikTok與YouTube海外網紅達人的完美合作策略

druid數據源 xml配置

微信公衆號對接配置

ASP.NET MVC5+EF6+EasyUI 後臺管理系統（89）-國際化，本地化，多語言應用本地化(多語言) 本地化(多語言)

前端表單幫助文檔

百度地圖API-創建多個座標，連線，信息提示

MVC WebApi Swagger幫助文檔接口用法

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結