.net利用fullcalendar制作网页日历日程

最新推荐文章于 2018-02-08 12:02:20 发布

weixin_34122810

最新推荐文章于 2018-02-08 12:02:20 发布

阅读量264

点赞数

原文链接：http://www.cnblogs.com/wangzhenghua/articles/4487038.html

版权

效果图：

首先下载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;
        }

转载于:https://www.cnblogs.com/wangzhenghua/articles/4487038.html

weixin_34122810

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
.net利用fullcalendar制作网页日历日程

效果图：首先下载fullcalendar包文件，并引入：<link href='fullcalendar.css' rel='stylesheet' /><link href='fullcalendar.print.css' rel='stylesheet' media='print' /><script src='lib/moment.min...
复制链接

扫一扫