日程管理-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的组件（你可以使用其他弹窗组件来做弹窗）

数据库结构

由于我们使用了数据保存，所以表的建立要根据官方的事件数据来建对应的数据库表用来存储一个日历事件信息的标准对象，其中只有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请求方法

 控制器的代码

四、来自前端的请求

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

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

作者：YmNets

fullcalendar插件日程管理的更多相关文章

  1. FullCalendar（日程管理控件）

    (以下是我学习FullCalendar控件时,网络上收集的一些资料) jQuery.fullCalendar官方网址: http://arshaw.com/fullcalendar/ http://a ...

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

    前言 本文分享fullcalendar用法,最后面提供代码下载 说到日程管理,基于JQuery的插件FullCalendar当之无愧,完整的API稳定和调用方式,非常易于扩展!可以用于系统的个人历程管 ...

  3. jquery.fullCalendar官方文档翻译(一款小巧好用的日程管理日历, 可集成Google Calendar)

    1. 使用方式, 引入相关js, css后, $(‘#div_name’).fullCalendar({//options});  接受的是一个option对象 2. 普通属性 2.1. year, ...

  4. 日程管理 FullCalendar

    日程管理,采用著名组件FullCalendar日历插件实现FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发1.实现按 ...

  5. Web日程管理FullCalendar

    fullcalendar是一款jQuery日程管理控件,提供了丰富的属性设置和方法调用,官网下载地址http://fullcalendar.io/download,眼下最新版本号是2.3.2. 仅仅要 ...

  6. fullCalendar日程管理

    //日程安排 function timeTable(id){ var inner = "<div id='calendar'></div>"; $(&quo ...

  7. 日程管理控件 glDatePicker

    之前接触过一款日程管理控件,叫 FullCalendar,功能很强大,会列出每天的事项,可选择编辑并且可以定制自己的日历,然而,有时候,我们的网页上只需要一个简单的日历,迷你但实用,有日程安排的日期高 ...

  8. RDIFramework.NET V3.3 Web版新增日程管理功能模块

    功能描述 在RDIFramework.NET V3.3 Web版本我们新增了日程管理.基于月.周.日的日历视图,把安排到每一天的具体时间点,让每一天的时间都充分利用:甚至您也可以把个人非工作事项也安排 ...

  9. RDIFramework.NET V3.3 WinForm版新增日程管理功能模块

    功能描述 日程管理基于月.周.日的日历视图,把安排到每一天的具体时间点,让每一天的时间都充分利用:甚至您也可以把个人非工作事项也安排进来,完全是属于自己的全时间管理.就是将每天的工作和事务安排在日期中 ...

随机推荐

  1. scheme 之门

    scheme 之门 开始之前 这是一篇 Scheme 的介绍文章. Scheme 是一个 LISP 的方言, 相对于 Common LISP 或其他方言, 它更强调理论的完整和优美, 而不那么强调实用 ...

  2. MT【185】$\max$的表示

    已知$f(x)=x^2+(a-4)x+1+|x^2-ax+1|$的最小值为$\dfrac{1}{2}$,则$a$=______ 提示:$f(x)=\max\{2(x-1)^2,2(a-2)x\}$,从 ...

  3. 洛谷P3385 【模板】负环（DFS求环）

    洛谷题目传送门 HNOI爆零前回刷模板题 非常不正经的题目,目前并没有合适的优秀算法,就算是大家公认的dfs(还是不要强行叫dfs-spfa吧,概念应该不一样,这就是暴力dfs松弛答案) 但是对于随机 ...

  4. 【转】为什么 MQTT 是最适合物联网的网络协议

    初识 MQTT 为什么 MQTT 是最适合物联网的网络协议 Michael Yuan2017 年 6 月 14 日发布 WeiboGoogle+用电子邮件发送本页面 0 物联网 (IoT) 设备必须连 ...

  5. （转） eclipse项目中.classpath文件详解

    背景:对于java项目中.classpath文件中的相关定义一直不是很了解,有必要进行深入的学习. 1 前言 在使用eclipse或者myeclipse进行Java项目开发的时候,每个project( ...

  6. python学习(28) 浅谈可变对象的单例模式设计

    python开发,有时候需要设计单例模式保证操作的唯一性和安全性.理论上python语言底层实现和C/C++不同,python采取的是引用模式,当一个对象是可变对象,对其修改不会更改引用的指向,当一个 ...

  7. Hadoop生态圈-使用Kafka命令在Zookeeper中对应关系

    Hadoop生态圈-使用Kafka命令在Zookeeper中对应关系 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.zookeeper保存kafka的目录     二.使用Ka ...

  8. 带你正确的使用List的retainAll方法求交集

    一. retainAll 方法 public boolean retainAll(Collection<?> c) { //调用自己的私有方法 return batchRemove(c, ...

  9. Codeforces Round #481 (Div. 3) G. Petya's Exams

    http://codeforces.com/contest/978/problem/G 感冒是真的受不了...敲代码都没力气... 题目大意: 期末复习周,一共持续n天,有m场考试 每场考试有如下信息 ...

  10. Linux 命令详解（一）export 命令

    一.Windows 环境变量 1.在Windows 系统下,很多软件安装都需要配置环境变量,比如 安装 jdk ,如果不配置环境变量,在非软件安装的目录下运行javac 命令,将会报告找不到文件,类似 ...