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请求方法

  控制器的代码

 

四、来自前端的请求

请求之前我们需要了解一下这个插件的事件,方便我们调

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

虽然很多种事件,但是下面总结几个常用时间即可


本文转自ymnets博客园博客,原文链接:http://www.cnblogs.com/ymnets/p/7234187.html,如需转载请自行联系原作者

相关文章
|
8天前
|
开发框架 前端开发 JavaScript
JavaScript云LIS系统源码ASP.NET CORE 3.1 MVC + SQLserver + Redis医院实验室信息系统源码 医院云LIS系统源码
实验室信息系统(Laboratory Information System,缩写LIS)是一类用来处理实验室过程信息的软件,云LIS系统围绕临床,云LIS系统将与云HIS系统建立起高度的业务整合,以体现“以病人为中心”的设计理念,优化就诊流程,方便患者就医。
25 0
|
8天前
|
开发框架 前端开发 .NET
进入ASP .net mvc的世界
进入ASP .net mvc的世界
34 0
|
8天前
mvc.net分页查询案例——mvc-paper.css
mvc.net分页查询案例——mvc-paper.css
6 0
|
8天前
|
开发框架 前端开发 .NET
C# .NET面试系列六:ASP.NET MVC
<h2>ASP.NET MVC #### 1. MVC 中的 TempData\ViewBag\ViewData 区别? 在ASP.NET MVC中,TempData、ViewBag 和 ViewData 都是用于在控制器和视图之间传递数据的机制,但它们有一些区别。 <b>TempData:</b> 1、生命周期 ```c# TempData 的生命周期是短暂的,数据只在当前请求和下一次请求之间有效。一旦数据被读取,它就会被标记为已读,下一次请求时就会被清除。 ``` 2、用途 ```c# 主要用于在两个动作之间传递数据,例如在一个动作中设置 TempData,然后在重定向到另
124 5
|
8天前
|
SQL 开发框架 .NET
ASP.NET WEB+EntityFramework数据持久化——考核练习库——1、用户管理系统(考点:查询列表、增加、删除)
ASP.NET WEB+EntityFramework数据持久化——考核练习库——1、用户管理系统(考点:查询列表、增加、删除)
74 0
|
8天前
|
XML 前端开发 定位技术
C#(NET Core3.1 MVC)生成站点地图(sitemap.xml)
C#(NET Core3.1 MVC)生成站点地图(sitemap.xml)
35 0
|
8天前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
50 0
|
9月前
|
存储 开发框架 前端开发
[回馈]ASP.NET Core MVC开发实战之商城系统(五)
经过一段时间的准备,新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始,在之前的文章中,讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情链接,降价促销,新品爆款】,商品列表页面,商品详情等功能的开发,今天继续讲解购物车功能开发,仅供学习分享使用,如有不足之处,还请指正。
126 0
|
10月前
|
开发框架 前端开发 .NET
[回馈]ASP.NET Core MVC开发实战之商城系统(三)
[回馈]ASP.NET Core MVC开发实战之商城系统(三)
67 0
|
10月前
|
开发框架 前端开发 .NET
[回馈]ASP.NET Core MVC开发实战之商城系统(一)
[回馈]ASP.NET Core MVC开发实战之商城系统(一)
121 0