ASP.NET MVC5+EF6+EasyUI 后台管理系统(86)-日程管理-fullcalendar插件用法

前言

本文分享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的组件(你可以使用其他弹窗组件来做弹窗)

数据库结构

由于我们使用了数据保存,所以表的建立要根据官方的事件数据来建对应的数据库表用来存储一个日历事件信息的标准对象,其中只有titlestart是必须的

但是我们可以全建来获得完整的数据支持

属性

描述

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(55)-工作流设计-表单布局

前言:这一节比较有趣。基本纯UI,但是不是很复杂 有了实现表单的打印和更加符合流程表单方式,我们必须自定义布局来适合业务场景打印!我们想要什么效果?看下图 (我...

23790
来自专栏张高兴的博客

张高兴的 UWP 开发笔记:汉堡菜单进阶

45560
来自专栏移动开发面面观

React Native的列表显示

16540
来自专栏跟着阿笨一起玩NET

关于DevExpress的XtraTreeList使用方法总结

18110
来自专栏企鹅号快讯

使用多个Python库开发网页爬虫(一)

21CTO社区导读:在本篇文章里,我们将讨论使用Python进行网页抓取以及如何引用多个库,如Beautifusoup,Selenium库,以及JavaScri...

41160
来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(57)-插件---ueditor使用

目录: 前言 开发环境 知识点 初始使用 自定义工具栏 设置和读取编辑器内容 文件上传 ueditor加水印 -------------------------...

38050
来自专栏跟着阿笨一起玩NET

C# 和vb.net事件

9010
来自专栏菩提树下的杨过

闲来无事,倒腾了一个简单的silverlight视频播放器

近二日闲来无事,把silverlight的官方文档瞅了瞅,倒腾了一个简单的视频播放器,顺便也测试了下能否播放传说中的h.264,最终效果如下: ? http:/...

68290
来自专栏Golang语言社区

Golang语言 上传文件

import ( "bufio" "flag" "fmt" "io" "log" "os" "os/ex...

37480
来自专栏Golang语言社区

Golang语言 上传文件

import ( "bufio" "flag" "fmt" "io" "log" "os" "os/ex...

33140

扫码关注云+社区

领取腾讯云代金券