我是怎么用FullCalendar记录我的2013年(辞职N次，面试2N次)的，它还兼容IE6

地址：wanshanshan.com中的”日程“功能

喜欢就点击我吧

流程介绍 ここはじまる！



前端采用javascriptMVC框架；控制器C，模型M，视图V ，控制器控制着视图和模型之间的联系和数据的交互，这里的视图有多种不同的显示方式，

包括 日周月年还有后面即将上来的列表，这些视图都存在一个模版中，不同的控制器调用不同的模版（这样的效率比较搞，页面加载速度较快！），

　　　　模版中的像这样的代码：

　　　　　　　　

<div class="arrow-left" style="top:25px;">
<div class="arrow_dk"></div>
<div class="arrow_lt"></div>
</div>
<form class="form-horizontal" action="#" style="width:400px;">
<div class="modal-header" style="padding: 5px 10px 0px 10px;">
<a class="close" data-dismiss="modal">×</a>
<strong>查看事件</strong>
</div>
<fieldset>
<div class="control-group" style="overflow: hidden;">
<span class="text-input hot" id="content" style="display: block; max-height: 60px; width: 100%;"></span>
</div>
<div class="control-group">
<label class="control-label" >时间：</label>
<span class="text-input" id="time"></span>
</div>
<div class="control-group">
<label class="control-label" >创建时间：</label>
<span class="text-input" id="createtime"></span>
</div>
</fieldset>
<div class="form-actions">
<a href="javascript:void(0)" id="btnEditSche" class="btn pull-left">编辑</a>
<a href="javascript:void(0)" id="btnDel" class="btn btn-primary pull-right">删除</a>
</div>
</form>
<div class="arrow-right" style="top: 25px;display:none">
<div class="arrow_dk"></div>
<div class="arrow_lt"></div>
</div>

　　　这样代码中没有head和body标签，ead和body之类的标签在页面加载中有过，直接使用他们的JS和css即可！ 复用性比较高。

　　 页面使用Jquery和Ajax和后台进行交互！ 使用Jquery的Ajax方式，大家都应该知道吧 就不说它了、

　　　但是有一点后台把对象转化为json字符串时候建议使用Newtonsoft.Json.dll 效率比较高！

底层数据返回来了，使用视图中的自动绑定数据模版即可正常显示数据、像这样：

　　　

<tr id="tr<%= sguid %>">
<td id="dtbegin<%= sguid %>" width="20%">
<%if (isallday == "1") {%> 全天<%} else {%><%= noalldaytimeparts %><% }%>
</td>
<td id="td<%= sguid %>" width="80%">
<%= title %>
</td>
</tr>

这样的好处在于如是后面页面样式变更了那你就不用修改其他地方，就在这里修改了就好了额，很爽吧 用起来很方便的哦！

FullCalendarの四大视图（日，周，月，年）ここはじまる！

month - see example 月视图

basicWeek - see example 周视图（一周内事件和日期的集合）

basicDay - see example (一日内事件和日期的集合)

agendaWeek - see example (周日程表)

agendaDay - see example (日日程表)

日视图：



周视图：



月视图：



年视图：



上面就是四大视图的图片

重要的Function ここはじまる！

这是一个控制器例子：

定义一个控制器：cAddEvent，然后进行加载与之对应的模版 ejs结尾的模板 高效率加载！

$.Controller("cAddEvent", {
defaults: {
ejsPath: {
main: "templates/addEvent_main.ejs",
addEvent: "templates/menuBar_addEvent.ejs"
}
}
}

这是get json字符串的方法：

　　　　　　　　　　events: function (start, end, callback) {
var events = [];
var model = new mEventsQry();
model.attributes.param.TDATE_B = start;
model.attributes.param.TDATE_E = end;
Common.postRequest(model).then(function (data) {
$("#maskBox2").modal('hide');
if (data == null) return;

events = loadinMonth(data);

callback(events);

model = null;
});
}

我想说的最重要的一点就是：所有的程序在本地测试都很正常，部署在IIS里面运行起来也正常，但是发布到外网服务器上面就会有问题：

问题是这样的"ajax数据请求回来的数据是正确的，但是视图V就是不能显示出来，不管你是不是用的MVC框架都会有这个问题，到这里肯定会纳闷呢，

　就这样前功尽弃了????"

我的解决办法是这样的: replace('-', "/") 哈哈 厉害吧！！！！！！！！！！！！！！

我用火狐跟踪发现外网服务器返回来的数据格式是“2014-01-01” 然而本地的格式是“2014/01/01”

所以简单的办法极速hi替换得了。

---------------------------------------丑陋的分割线--------------------------------------------------------

　　　　属性

id	可选，事件唯一标识，重复的事件具有相同的
title	必须，事件在日历上显示的title
allDay	可选，是否是整日事件
start	必须，事件的开始时间
end	可选，结束时间
url	可选，当指定后，事件被点击将打开对应url
className	指定事件的样式
editable	是否可拖拽
source	指向次event的eventsource对象
color	背景和边框颜色
backgroundColor	背景颜色
borderColor	边框颜色
textColor	文本颜色

----------------------又一个丑陋的分割线------------------

[align=center]终点、只不过是梦想起飞的地方.献给所有在漂泊中淡忘梦想与初衷的同行者！[/align]

我 也想要这美丽的生活、所以我去寻找、不停的飞着，飞着、飞着 飞着就看不清了、这时候一定会有人强调梦想的重要意义、坚持，我坚持过。第一年，我靠梦想坚持着;第二年，我靠欲望坚持着;第三年，我靠体格坚持着，第四 年，我靠本能坚持着。可是，五年，六年过去了。。。。。！

看 似生活光鲜的背后，其中的酸甜苦辣又有多少人知道。曾经怀揣梦想，满怀希望只身一人来到北京，一心想干出大事业，可几年之后，梦想变成妄想，辛苦奋斗的北 漂们又得到了什么？看着远在家乡的朋友们有的已经安家立业，过上了美满的生活，身处异乡的北漂族又何时能有属于自己的家？

我 觉得梦想是一块饼干，在现实里扛不下去的时候就掰碎了吃一小块。吃完最后一块时，你就已经知道自己是谁，也知道下一块饼干在哪里了。我的那一块早就吃光 了、要不然我现在为什么总是怎么饿呢、回头想想我的那些梦想呢、可能丢在了出租屋里、丢在了地铁或公交车上、丢在了各种言不由衷 迷茫 无助里

让 我们坚持下去的到底是洗碗还是梦想？ 还只是麻木的惯性、生活的目的究竟是应该指着的追求那些你可能永远都得不到的还是坚守你已经拥有的幸福、每个人的答案可能都不一样。选择不同的答案就意味 着有不同的人生轨迹、我们所有的奔波都只是因为希望、无论它是在遥远的地方还是在出发的地方、哪里有希望哪里就是我们的方向、

行了 到这儿吧

献给所有在漂泊中淡忘梦想与初衷的同行者！

以上！

谢谢