fullcalendar是我见过最好的开源jQuery plugin，提供drag & drop calendar功能，而且是使用MIT license。
1. 下载fullcalendar，先将所有需要的东西放入Scripts和Content文件夹里
2. 设置BundleConfig.cs
在App_Start可以找到BundleConfig.cs
加入
bundles.Add(new ScriptBundle("~/bundles/calendar").Include("~/Scripts/fullcalendar.min.js"));
bundles.Add(new StyleBundle("~/Content/calendar").Include(
"~/Content/fullcalendar.css"));
其中("~/bundles/calendar")为初始化的虚拟目录，它的名称不能跟真正的目录相同 也就是 后面的Include里的目录。
3. 在譬如\Views\Shared\_testLayout.cshtml中加入fullcalendar的css和其需要的js库。
需要加入以下两行代码：
@Styles.Render("~/Content/calendar") //就是 calling "~/Content/fullcalendar.css"。
@Scripts.Render("~/bundles/fullcalendar") //就是 calling "~/Scripts/fullcalendar.min.js"。
注意，导入js库的顺序，否则将不能使用，最后导入fullcalendar。
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/fullcalendar")
@RenderSection("scripts", required: false)
有两个要点需要注意的：a. 要将它们放入<header> </header>中，而不是<body> </body>中延迟调用。
b. 注意如果要实现drag & drop calendar功能，需要使用<script src='~/Script/jquery-ui-1.10.2.custom.min.js'></script>，这可以加入到<header> </header>，当然也可以使用bundles。
4. 这时候可以添加View，选择Use a layout or master page，在下拉菜单中可以选择我们刚刚做的_testLayout.cshtml，最后在生成的view加入
<div id='calendar'></div>
就可以了，现在可以看到一个空的calendar。
5. 最后我们使用MVC，我们需要编写model和controller，生成json的events传递给calendar，以下代码来自于http://szahariev.blogspot.de/2009/08/jquery-fullcalendar-and-aspnet-mvc.html。
Model:
public class CalendarDTO
{
public int id { get; set; }
public string title { get; set; }
public long start { get; set; }
public long end { get; set; }
public string url { get; set; }
}
Controller:
public ActionResult CalendarData()
{
IList<CalendarDTO> tasksList = new List<CalendarDTO>();
tasksList.Add(new CalendarDTO
{
id = 1,
title = "test",
start = ToUnixTimespan(DateTime.Now),
end = ToUnixTimespan(DateTime.Now.AddHours(4)),
url = ""
});
return Json(tasksList, JsonRequestBehavior.AllowGet);
//return View();
}
private long ToUnixTimespan(DateTime date)
{
TimeSpan tspan = date.ToUniversalTime().Subtract(
new DateTime(1970, 1, 1, 0, 0, 0));
return (long)Math.Truncate(tspan.TotalSeconds);
}
6. 最后在view里面加一个js funcution，就完成了
View:
<script type="text/javascript">
$(document).ready(function() {
$('#calendar').fullCalendar({
events: "/YourControllerName/CalendarData"
});
});
</script>
<div id="calendar">
</div>
博文
没有评论:
发表评论