效果图:
首先下载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; }