码迷,mamicode.com
首页 > 其他好文 > 详细

fullCalendar使用经验总结

时间:2018-09-28 23:00:41      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:variant   glob   count   ons   auto   hat   ret   compare   info   

fullCalendar日历控件官方网址: https://fullcalendar.io/

1.需要引入的文件

    <link href="~/assets/fullcalendar-3.9.0/fullcalendar.min.css" rel="stylesheet" />
    <link href="~/assets/fullcalendar-3.9.0/fullcalendar.print.min.css" rel="stylesheet" media="print" />
    <script src="~/assets/fullcalendar-3.9.0/lib/moment.min.js"></script>
    @*<script src="~/assets/fullcalendar-3.9.0/lib/jquery.min.js"></script>*@
    <script src="~/assets/fullcalendar-3.9.0/fullcalendar.min.js"></script>
    <script src="~/assets/fullcalendar-3.9.0/locale/zh-cn.js"></script>

 

2.HTML页面 

<style>
html, body {
margin: 0;
padding: 0;
}

#script-warning {
display: none;
background: #eee;
border-bottom: 1px solid #ddd;
padding: 0 10px;
line-height: 40px;
text-align: center;
font-weight: bold;
font-size: 12px;
color: red;
}

#loading {
display: none;
position: absolute;
top: 50%;
right: 50%;
}

#calendar {
max-width: 800px;
margin: 0px auto;
}
</style>



校区:
<select id="XiaoQu" name="XiaoQu">
<option value="18">锦江校区</option>
<option value="19">高新校区</option>
</select>
<div id="script-warning">出错了</div>
<div id="loading">加载中......</div>
<div id=‘calendar‘></div>

 

$(function () {
            $(‘#calendar‘).fullCalendar({
                header: {
                    left: ‘prev,next today‘,
                    center: ‘title‘,
                    right: ‘month,basicWeek,basicDay,listWeek‘
                },
                defaultView: ‘month‘,
                defaultDate: ‘@showDate.ToString("yyyy-MM-dd")‘,  //默认显示的日期
                locale: ‘zh-cn‘,
                events: {
                    url: ‘@Url.Action("JsonData")‘,    //获取json数据的url
                    data: function () { // a function that returns an object
                        return {
                            place: $("#XiaoQu").val()    //额外的动态参数
                        };
                    },
                    error: function () {
                        $(‘#script-warning‘).show();
                    }
                },
                loading: function (bool) {
                    $(‘#loading‘).toggle(bool);
                }
            });


            $("#XiaoQu").change(function () { 
                $(‘#calendar‘).fullCalendar(‘refetchEvents‘);//重新加载数据
            });
        });

 

3.生成Json数据的后台

public async Task<String> JsonData(DateTime start, DateTime end,int place)
        {
            var list = await _context.RoomConfigure.Where(g =>g.PlaceID==place &g.StartTime.Date.CompareTo(start) > 0 & g.StartTime.Date.CompareTo(end) < 0).ToListAsync();

            StringBuilder resultStr = new StringBuilder();
            resultStr.Append("[");

            foreach (var item in list)
            {
                resultStr.Append("{");
                resultStr.Append("\"title\": \"可预约" + item.Number + "\",");
                resultStr.Append("\"start\": \"" + item.StartTime.ToString("yyyy-MM-ddTHH:mm:sszzzz", System.Globalization.DateTimeFormatInfo.InvariantInfo) + "\",");
                resultStr.Append("\"allDay\": false");
                resultStr.Append("},");
            }

            if (list.Count > 0)
            {
                resultStr.Remove(resultStr.Length - 1, 1);
            }

            resultStr.Append("]");

            string jsonStr = "[{\"title\":\"All Day Event\",\"start\":\"2018-03-01\"},{\"title\":\"Long Event\",\"start\":\"2018-03-07\",\"end\":\"2018-03-10\"},{\"id\":\"999\",\"title\":\"Repeating Event\",\"start\":\"2018-03-09T16:00:00-05:00\"},{\"id\":\"999\",\"title\":\"Repeating Event\",\"start\":\"2018-03-16T16:00:00-05:00\"},{\"title\":\"Conference\",\"start\":\"2018-03-11\",\"end\":\"2018-03-13\"},{\"title\":\"Meeting\",\"start\":\"2018-03-12T10:30:00-05:00\",\"end\":\"2018-03-12T12:30:00-05:00\"},{\"title\":\"Lunch\",\"start\":\"2018-03-12T12:00:00-05:00\"},{\"title\":\"Meeting\",\"start\":\"2018-03-12T14:30:00-05:00\"},{\"title\":\"Happy Hour\",\"start\":\"2018-03-12T17:30:00-05:00\"},{\"title\":\"Dinner\",\"start\":\"2018-03-12T20:00:00\"},{\"title\":\"Birthday Party\",\"start\":\"2018-03-13T07:00:00-05:00\"},{\"title\":\"Click for Google\",\"url\":\"http://google.com/\",\"start\":\"2018-03-28\"}]";
            //return jsonStr;
            return resultStr.ToString();
        }

  

   

 

fullCalendar使用经验总结

标签:variant   glob   count   ons   auto   hat   ret   compare   info   

原文地址:https://www.cnblogs.com/fireicesion/p/9721359.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!