效果圖：
首先下載fullcalendar包文件，並引入：
<link href='fullcalendar.css' rel='stylesheet' /> <link href='fullcalendar.print.css' rel='stylesheet' media='print' /> <script src='lib/moment.min.js' type="text/javascript"></script> <script src='lib/jquery.min.js' type="text/javascript"></script> <script src='fullcalendar.min.js' type="text/javascript"></script>
具體代碼：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="fullcalendar.aspx.cs" Inherits="Chart.fullcalendar" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href='fullcalendar.css' rel='stylesheet' /> <link href='fullcalendar.print.css' rel='stylesheet' media='print' /> <script src='lib/moment.min.js' type="text/javascript"></script> <script src='lib/jquery.min.js' type="text/javascript"></script> <script src='fullcalendar.min.js' type="text/javascript"></script> <%-- <script type="text/javascript" src="js/jquery.1.9.1.min.js"></script>--%> <script type="text/javascript"> $(document).ready(function () { $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, defaultDate: '2015-02-12', selectable: true, selectHelper: true, select: function (start, end) { var title = prompt('請輸入日程安排:'); var eventData; if (title) { eventData = { title: title, start: start, end: end }; $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true //將json轉化為字符串 var str = JSON.stringify(eventData); //ajax將日程信息存儲起來 $.ajax({ contentType: "application/json", type: "post", datatype: "json", url: "fullcalendar.aspx/Save", data: "{'str':'" + str + "'}", success: function (msg) { alert(msg.d); }, error: function (x) { alert("失敗"); } }); } $('#calendar').fullCalendar('unselect'); }, editable: true, eventLimit: true, // allow "more" link when too many events events: [<%=str %>] }); }); </script> <style type="text/css"> body { margin: 40px 10px; padding: 0; font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; font-size: 14px; } #calendar { max-width: 900px; margin: 0 auto; } </style> </head> <body> <form id="form1" runat="server"> <div id='calendar'></div> </form> </body> </html>
調用的后台代碼：
protected string str = "{ title: 'All Day Event', start: '2015-02-01'},{ title: 'Long Event',start: '2015-02-07', end: '2015-02-10'}"; protected void Page_Load(object sender, EventArgs e) { } [WebMethod] public static string Save(string str) { FileStream aFile = new FileStream(System.Web.HttpContext.Current.Server.MapPath("1.txt"), FileMode.Open); //寫文件時注意編碼問題，不然中文會出現亂碼Encoding.UTF8 StreamWriter sw = new StreamWriter(aFile,Encoding.UTF8); sw.Write(str); sw.Flush(); sw.Close(); aFile.Close(); return str; }