在博客园逛了很长时间了，它帮助我获得了很多知识，很感谢大家的分享，而自己呢，由于各种纠结一直没提笔写博客，直到我看到了这篇文章http://www.cnblogs.com/zhaopei/p/why_write_blog.html，里面说出了我的心声，很有道理，所以我决定接下来会挤出时间来不定时的更新自己的博客，把自己工作中学习到的知识写出来。

由于项目需求，需要通过日历的方式展现某些数据，在网上搜索了很多日历的插件，觉得比较好用的还是fullCalendar，下面是我写的一个简单Demo，如有不足，请多多指正！！！

一、引入必要的文件：

    <link href="Scripts/Plugins/fullcalendar.css" rel="stylesheet" />

    <link href="Scripts/Plugins/jquery.ui.css" rel="stylesheet" />

    <link href="Scripts/Plugins/style.default.css" rel="stylesheet" />

    <script src="Scripts/Plugins/jquery-1.7.min.js"></script>

    <script src="Scripts/Plugins/jquery-ui-1.8.16.custom.min.js"></script>

    <script src="Scripts/Plugins/fullcalendar.min.js"></script>

    <script src="Scripts/Plugins/fullcalendar.js"></script>

二、在界面中添加div块：

<body>

<div id='calendar' style="margin-top:10px;margin-left:5px">

</div>

</body>

初始化calendar的js代码我把它放到了fullcalendar.js文件中接下来就让我们看一下这个文件里的脚本信息。

三、初始化fullcalender:

    /* 初始化calendar */
    通过ID来初始化放到哪个标签里

    jQuery('#calendar').fullCalendar({

        header: {

            left: 'month,agendaWeek,agendaDay',

            center: 'title',

            right: 'today, prev, next'

        },
        monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],

        monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],

        dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],

        dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],

        today: ["今天"],

        firstDay: 1,

        buttonText: {

            prev: '&laquo;',

            next: '&raquo;',

            prevYear: '&nbsp;&lt;&lt;&nbsp;',

            nextYear: '&nbsp;&gt;&gt;&nbsp;',

            today: '今天',

            month: '月',

            week: '周',

            day: '日'

        },

        viewDisplay: function (view) {

            //动态把数据查出，按照月份动态查询

            var viewStart = $.fullCalendar.formatDate(view.start, "yyyy-MM-dd HH:mm:ss");

            var viewEnd = $.fullCalendar.formatDate(view.end, "yyyy-MM-dd HH:mm:ss");

            $("#calendar").fullCalendar('removeEvents');
            通过post 请求一般处理程序来返回需要展现的信息(start与end为需要传递的参数，在本文中没有用到可以忽略)

            $.post("../DateHandle/ViewData.ashx", { start: viewStart, end: viewEnd }, function (data) {

                var resultCollection = jQuery.parseJSON(data);

                $.each(resultCollection, function (index, term) {

                    $("#calendar").fullCalendar('renderEvent', term, true);

                });

            }); //把从后台取出的数据进行封装以后在页面上以fullCalendar的方式进行显示

        },

        dayClick: function (date, allDay, jsEvent, view) {

        },

        loading: function (bool) {

            if (bool) $('#loading').show();

            else $('#loading').hide();

        },

        //#region 数据绑定上去后添加相应信息在页面上(一开始加载数据时运行)

        eventAfterRender: function (event, element, view) {

            var fstart = $.fullCalendar.formatDate(event.start, "HH:mm");

            var fend = $.fullCalendar.formatDate(event.end, "HH:mm");

            var confbg = '<span class="fc-event-bg"></span>';

            if (view.name == "month") {//按月份

                var evtcontent = '<div class="fc-event-vert"><a>';

                evtcontent = evtcontent + confbg;

                //evtcontent = evtcontent + '<span class="fc-event-titlebg">' + fstart + " - " + fend  + event.fullname + '</span>';

                evtcontent = evtcontent + '<span class="fc-event-titlebg">' + event.fullname + '</span>';

                element.html(evtcontent);

            } else if (view.name == "agendaWeek") {//按周

                var evtcontent = '<a>';

                evtcontent = evtcontent + confbg;

                evtcontent = evtcontent + '<span class="fc-event-time">' + fstart + "-" + fend + '</span>';

                evtcontent = evtcontent + '<span>' + event.fullname + '</span>';

                element.html(evtcontent);

            } else if (view.name == "agendaDay") {//按日

                var evtcontent = '<a>';

                evtcontent = evtcontent + confbg;

                evtcontent = evtcontent + '<span class="fc-event-time">' + fstart + " - " + fend + '</span>';

                element.html(evtcontent);

            }

        },

        //#endregion

        //#region 鼠标放上去显示信息

        eventMouseover: function (calEvent, jsEvent, view) {

            //var fstart = $.fullCalendar.formatDate(calEvent.start, "yyyy/MM/dd HH:mm");

            //var fend = $.fullCalendar.formatDate(calEvent.end, "yyyy/MM/dd HH:mm");

            //$(this).attr('title', fstart + " - " + fend + " " + calEvent.fullname);
            鼠标悬浮到title的时候可以设置展现哪些信息

            $(this).attr('title', calEvent.fullname);

            $(this).css('font-weight', 'normal');

            //            $(this).tooltip({

            //                effect: 'toggle',

            //                cancelDefault: true

            //            });

        },

        eventClick: function (event) {             

        },

        events: [],

        //#endregion

        editable: true,

        droppable: true, // this allows things to be dropped onto the calendar !!!

        drop: function (date, allDay) { // this function is called when something is dropped

            // retrieve the dropped element's stored Event Object

            var originalEventObject = jQuery(this).data('eventObject');

            // we need to copy it, so that multiple events don't have a reference to the same object

            var copiedEventObject = jQuery.extend({}, originalEventObject);

            // assign it the date that was reported

            copiedEventObject.start = date;

            copiedEventObject.allDay = allDay;

            // render the event on the calendar

            // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)

            jQuery('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

            // is the "remove after drop" checkbox checked?

            jQuery(this).remove();

        }

    });

四：通过一般处理程序返回需要的json数据

首先新增任务类 Task：

/// <summary>

    /// 任务类

    /// </summary>

    public class Task

    {

        public int ID { get; set; }

        /// <summary>

        /// 任务名称

        /// </summary>

        public string Name { get; set; }

        /// <summary>

        /// 内容

        /// </summary>

        public string Content { get; set; }

        /// <summary>

        /// 开始时间

        /// </summary>

        public DateTime StartDate { get; set; }

        /// <summary>

        /// 结束时间

        /// </summary>

        public DateTime EndDate { get; set; }

    }

一般处理程序ViewData中返回Json数据：

    public void ProcessRequest(HttpContext context)

        {

            //测试数据

List<Task> tasks = new List<Task>() {
new Task(){ ID=1,Name="任务1",Content="修改某处Bug",StartDate=new DateTime(2015,12,16,08,32,33),EndDate=new DateTime(2015,12,16,11,27,33)},
new Task(){ ID=2,Name="任务2",Content="与刘总开会讨论需求分析",StartDate=new DateTime(2015,12,09,18,32,33),EndDate=new DateTime(2015,12,09,19,27,33)},
new Task(){ ID=3,Name="任务3",Content="代码上传与整理",StartDate=new DateTime(2015,12,17,13,32,33),EndDate=new DateTime(2015,12,17,17,27,33)},
new Task(){ ID=4,Name="任务4",Content="上线测试",StartDate=new DateTime(2015,12,30,15,32,33),EndDate=new DateTime(2015,12,15,17,27,33)},
new Task(){ ID=5,Name="任务5",Content="代码上传与整理",StartDate=new DateTime(2015,12,07,13,32,33),EndDate=new DateTime(2015,12,07,17,27,33)}
};

            JavaScriptSerializer jss = new JavaScriptSerializer();

            List<Dictionary<string, object>> gas = new List<Dictionary<string, object>>();

            foreach (var entity in tasks)

            {

                Dictionary<string, object> drow = new Dictionary<string, object>();

                drow.Add("id", entity.ID);

                drow.Add("title", string.Format("任务名称：{0}", entity.Name));

                drow.Add("start", ReturnDate(entity.StartDate));

                drow.Add("end", ReturnDate(entity.EndDate));
                //鼠标悬浮上展现的是这个属性信息，可以自己设置

                drow.Add("fullname", string.Format("任务名称：{0}", entity.Name));

                drow.Add("allDay", false);

                gas.Add(drow);

            }

            context.Response.Write(jss.Serialize(gas));

        }

        #region 时间输出格式

        /// <summary>

        /// 时间按照此格式传输

        /// </summary>

        /// <param name="date"></param>

        /// <returns></returns>

        private string ReturnDate(DateTime? date)

        {

            string str = string.Empty;

            string time = Convert.ToString(date);

            string[] split = time.Split(' ');

            string viewDate = split[].Split('/')[] + "-" + AddZero(split[].Split('/')[]) + "-" + AddZero(split[].Split('/')[]);

            string viewTime = AddZero(split[].Split(':')[]) + ":" + AddZero(split[].Split(':')[]) + ":" + AddZero(split[].Split(':')[]);

            str = viewDate + "T" + viewTime;

            return str;

        }

        /// <summary>

        /// 判断数字前面是否加0

        /// </summary>

        /// <param name="str"></param>

        /// <returns></returns>

        private string AddZero(string str)

        {

            if (str.Length == )

                return "" + str;

            else

                return str;

        }

        #endregion

下面是效果图：

日历插件FullCalendar应用：(一)数据展现

鼠标放到title的效果：

日历插件FullCalendar应用：(一)数据展现

接下来的文章会介绍如何对任务进行添加，编辑，删除操作。

日历插件FullCalendar应用：(一)数据展现的更多相关文章

日历插件FullCalendar应用：(二)数据增删改
接上一篇日历插件FullCalendar应用:(一)数据展现. 这一篇主要讲使用fullcalendar插件如何做数据的增删改,用到了art.dialog web对话框组件,上一篇用到的webFor ...
jquery日历插件FullCalendar使用技巧
原文链接:http://blog.csdn.net/u013493957/article/details/44920341 FullCalendar是一款基于jquery的日历控件,它有着很强大的 ...
jQuery插件实战之fullcalendar（日历插件）Demo
jQuery的插件许多,应用的场景也很丰富,今天我这里给大家介绍一款很有用的日历页面开发插件 - fullcalendar,眼下最新版本号是1.5.1,使用这款插件可以高速帮助你高速编程实现基于web ...
fullcalendar日历插件的使用并动态增删改查
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...
php使用fullcalendar日历插件
最近做课程表的项目,找了好多个插件感觉都不好用,无意间看到了fullcalendar,还挺简单的,很方便,先贴一张项目页面 <!DOCTYPE html> <html> &lt ...
EasyNVR RTSP转HLS（m3u8+ts）流媒体服务器前端构建之：bootstrap-datepicker日历插件的实时动态展现
EasyNVR中有对录像进行检索回放的功能,且先抛开录像的回放,为了更好的用户体验过.让用户方便快捷的找到对应通道对应日期的录像视频,是必须的功能. 基于上述的需求,为前端添加一个日历插件,在日历上展 ...
EasyNVR摄像机网页无插件直播方案H5前端构建之：bootstrap-datepicker日历插件的实时动态展现
EasyNVR场景需求基础:不管是城市监控还是园区管理或者是幼儿园监控,这些安防监控需求已经成为我们生活中不可或缺的重要一环,这不仅仅是提升城市管理水平和人民群众安全感的现实需求,也是完善社会治安消 ...
11个实用jQuery日历插件
1. FullCalendar FullCalendar是很出名的jQuery日历插件,它支持拖拽等功能,整合了Google Calendar,而且可以通过JSON来绑定事件,设计师可以轻松地自定义日 ...
给开发者准备的 10 款最好的 jQuery 日历插件[转]
这篇文章介绍的是 10 款最棒而且又很有用的 jQuery 日历插件,允许开发者们把这些漂亮的日历插件结合到自己的网站中.这些日历插件易用性都很强,轻轻松松的就可以把漂亮的日历插件装饰到你的网站了.希 ...

随机推荐

const,static,extern 简介
const,static,extern 简介一.const与宏的区别: const简介:之前常用的字符串常量,一般是抽成宏,但是苹果不推荐我们抽成宏,推荐我们使用const常量. 执行时刻:宏是预编 ...
Newtonsoft&period;Json高级用法
http://blog.csdn.net/chengmodelong/article/details/46680143
ubuntu软件推荐
本文推荐的ubuntu工具均为笔者亲用.原则:在精不在多. 0.万能类笔者崇尚[极简主义],常用的工具如果有网页版的就尽量不用单独的client.如网页版微信. 1.系统类截图:Deepin-sc ...
Yii源码阅读笔记（二十三）
Module类中的辅助功能方法: /** * Returns an ID that uniquely identifies this module among all modules within t ...
java编程接口(1) ------ Swing基金会
本文提出了自己的学习笔记.欢迎转载,但请注明出处:http://blog.csdn.net/jesson20121020 近期想学下java的界面编程,在此记录下. 大多数的Swing应用都被构 ...
chrome 常用快捷操作
Chrome窗口和标签页快捷键: Ctrl+N 打开新窗口 Ctrl+T 打开新标签页 Ctrl+Shift+N 在隐身模式下打开新窗口 Ctrl+O,然后选择文件,在谷歌浏览器中打开计算机上的文件 ...
vue and jest测试
测试Vue的filters方法: 局部: import Page from '../src/Page' it('filter', () => { const case = Page.filter ...
简单的三级联动demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
C&num;enum使用Attribute求字段名
用到了一些反射:(自己看吧) public enum UserState { /// <summary> /// 正常 /// </summary> [Remark(&quot ...
Java实现窗体动态加载磁盘文件
在使用图形界面操作系统时,当打开一个文件夹系统会自动列出该文件夹下的所有文件及子文件夹.本实例实现了类似的功能:首先让用户选择一个文件夹,程序会动态列出该文件夹下的所有文件:如果该文件是隐藏文件,就在 ...