Javascript FullCalendar未正确显示事件_Javascript_Fullcalendar

Javascript FullCalendar未正确显示事件

javascript fullcalendar

Javascript FullCalendar未正确显示事件,javascript,fullcalendar,Javascript,Fullcalendar,我在FullCalendar js库中遇到问题，无法正确显示事件。我不确定问题出在哪里，因为我已经按照他们介绍页面上的说明进行了操作，但事件总是显示在日历的最底部，并且从不与时间“关联” <html> <head> <meta charset='utf-8' /> <link rel="stylesheet" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.

我在FullCalendar js库中遇到问题，无法正确显示事件。我不确定问题出在哪里，因为我已经按照他们介绍页面上的说明进行了操作，但事件总是显示在日历的最底部，并且从不与时间“关联”

<html>
    <head>
       <meta charset='utf-8' />
       <link rel="stylesheet" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.min.css" type="text/css" />
       <!--<link rel="stylesheet" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.print.css" type="text/css">-->
       <script src="assets/plugins/jquery-1.10.2.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
       <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.js"></script>
       <script>
            moment().format();

            function httpGet(url) {
                var xmlHttp = new XMLHttpRequest();
                xmlHttp.open("GET", url, false);
                xmlHttp.send(null);
                return xmlHttp.responseText;
            }

            $(document).ready(function () {

                // page is now ready, initialize the calendar...

                //var eventsArray = JSON.parse(httpGet("Schedule.php"));

                $('#calendar').fullCalendar({
                    // put your options and callbacks here
                    //timezone: 'America/Denver',
                    header: {
                        left:   '',
                        center: 'title',
                        right:  ''
                    },
                    theme:true,
                    events: [
                        {
                            "title":"Washer & Dryer",
                            "editable":false,
                            "start":"2017-04-09T00:30:00-0600",
                            "end":"2017-04-09T06:30:00-0600",
                            "img_loc":"washer.png"
                        },
                        {
                            "title":"Dishwasher",
                            "editable":false,
                            "start":"2017-04-09T02:56:00-0600",
                            "end":"2017-04-09T04:56:00-0600",
                            "img_loc":"dishwasher.jpg"
                        }
                    ],
                    defaultView: "agendaDay"
                })

            });

        </script>
        <style type='text/css'>
            #calendar {
            width: 900px;
            margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div id='calendar'></div>
    </body>
</html>


矩（）.format（）；
函数httpGet（url）{
var xmlHttp=new XMLHttpRequest（）；
open（“GET”，url，false）；
xmlHttp.send（空）；
返回xmlHttp.responseText；
}
$（文档）.ready（函数（）{
//页面现在已准备就绪，请初始化日历。。。
//var eventsArray=JSON.parse（httpGet（“Schedule.php”）；
$（“#日历”）.fullCalendar({
//把你的选择和回电放在这里
//时区：“美国/丹佛”，
标题：{
左：''，
中心：'标题'，
对：“”
},
主题：真的，
活动：[
{
“标题”：“洗衣机和烘干机”，
“可编辑”：false，
“开始”：“2017-04-09T00:30:00-0600”，
“结束”：“2017-04-09T06:30:00-0600”，
“img_loc”：“wash.png”
},
{
“标题”：“洗碗机”，
“可编辑”：false，
“开始”：“2017-04-09T02:56:00-0600”，
“结束”：“2017-04-09T04:56:00-0600”，
“img_loc”：“dishchiner.jpg”
}
],
defaultView:“代理日期”
})
});
#历法{
宽度：900px；
保证金：0自动；
}

您需要在引用完整日历样式表的

标记中使用

href

属性，而不是

src

。您的第四行应该如下所示：

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.min.css" type="text/css" />

演示：

（在我的示例中，我还将jquery改为使用CDN。）

谢谢！我更多的是一个后端开发人员，有时会错过像这样的小事情。我今晚回到笔记本电脑后会试试这个，然后再更新。