2

jQuery Mobile 的 FullCalendar 插件存在问题。基本上，如果我加载页面，日历不知道.. 但如果我重新加载页面，它就会知道。根据我的阅读，似乎在 jQuery 移动设备上只加载 data-role="page 内的数据。如果我将页面链接设置为 data-ajax="false"，它工作正常，但我想保留阿贾克斯。

<!DOCTYPE html> 
<html> 
<head> 
<title>My Page</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

<script type='text/javascript' src='js/fullcalendar.min.js'></script>
<link rel='stylesheet' type='text/css' href='css/fullcalendar.css' />
<script type='text/javascript'>

$(document).ready(function() {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $('#calendar').fullCalendar({
        editable: true,
        events: [
            {
                title: 'All Day Event',
                start: new Date(y, m, 1)
            },
            {
                title: 'Long Event',
                start: new Date(y, m, d-5),
                end: new Date(y, m, d-2)
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d-3, 16, 0),
                allDay: false
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d+4, 16, 0),
                allDay: false
            },
            {
                title: 'Meeting',
                start: new Date(y, m, d, 10, 30),
                allDay: false
            },
            {
                title: 'Lunch',
                start: new Date(y, m, d, 12, 0),
                end: new Date(y, m, d, 14, 0),
                allDay: false
            },
            {
                title: 'Birthday Party',
                start: new Date(y, m, d+1, 19, 0),
                end: new Date(y, m, d+1, 22, 30),
                allDay: false
            },
            {
                title: 'Click for Google',
                start: new Date(y, m, 28),
                end: new Date(y, m, 29),
                url: 'http://google.com/'
            }
        ]
    });

});

</script>
</head> 
<body> 
<div data-role="page">

<div data-role="header">
    <a href="#" data-rel="back">Back</a>
    <h1>My Team</h1>

    <div data-role="navbar">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="team.html">Team</a></li>
            <li><a href="schedule.html">Schedule</a></li>
            <li><a href="reset.html">Reset</a></li>
        </ul>
    </div><!-- /navbar -->

</div><!-- /header -->

<div data-role="content">       
    <div id='calendar' style="width:100%;"></div>
</div><!-- /content -->

</div><!-- /page -->
</body>
</html>
4

1 回答 1

2

这是一个适合您的工作示例：http: //jsfiddle.net/Gajotres/ZSd2C/

切勿将$(document).ready(function() {与 jQM 一起使用。jQM 有自己的一组页面处理事件。在这种情况下，当 pageshow 事件被触发时会显示代码：

$('#index').live('pageshow',function(e,data){    
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $('#calendar').fullCalendar({
        editable: true,
        events: [
            {
                title: 'All Day Event',
                start: new Date(y, m, 1)
            },
            {
                title: 'Long Event',
                start: new Date(y, m, d-5),
                end: new Date(y, m, d-2)
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d-3, 16, 0),
                allDay: false
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d+4, 16, 0),
                allDay: false
            },
            {
                title: 'Meeting',
                start: new Date(y, m, d, 10, 30),
                allDay: false
            },
            {
                title: 'Lunch',
                start: new Date(y, m, d, 12, 0),
                end: new Date(y, m, d, 14, 0),
                allDay: false
            },
            {
                title: 'Birthday Party',
                start: new Date(y, m, d+1, 19, 0),
                end: new Date(y, m, d+1, 22, 30),
                allDay: false
            },
            {
                title: 'Click for Google',
                start: new Date(y, m, 28),
                end: new Date(y, m, 29),
                url: 'http://google.com/'
            }
        ]
    });
});

Main problem here is document ready which triggers before jQuery Mobile page is fully loaded, like in my example it can be solved with pageshow event. If you want to learn more take a look at this article

于 2012-12-21T16:33:28.567 回答