加载页面时的完整日历滚动顶部

时间:2016-06-24 05:18:15

标签: javascript jquery html css fullcalendar

我有这个样本:

link

代码HTML:

   

     $(document).on('pageshow','#index',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/'
                    }
                ]
            });
        });
 <!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='http://arshaw.com/js/fullcalendar-1.5.4/fullcalendar/fullcalendar.min.js'></script>
        <link rel='stylesheet' type='text/css' href='http://arshaw.com/js/fullcalendar-1.5.4/fullcalendar/fullcalendar.css' />
    </head> 
    <body> 
        <div data-role="page" id="index">
        
            <div data-role="header">
                <h1>My Team</h1>
            </div><!-- /header -->
            
            <div data-role="content">       
                <div id='calendar' style="width:100%;"></div>
            </div><!-- /content -->
        
        </div><!-- /page -->
    </body>
    </html>

我遇到的问题是:

加载日历时,滚动为一半。请看下面的图片来理解。

enter image description here

我想启动滚动条

是什么导致了这个问题? 我尝试使用以下属性scrollTime: '12:00:00'但不起作用。

你可以帮我解决问题吗?

提前致谢!

2 个答案:

答案 0 :(得分:2)

我看到你在小提琴中使用第一版,完整日历的第一版不支持scrollTime。

要使用此功能,您必须使用第二版。

Upgrading to version 2

jsbin使用第二版。

更新: 我刚刚在第一版中意识到你可以设置firstHour。

firstHour: 0

我已更新您的fiddle并且有效。

答案 1 :(得分:1)

12:00表示正午时间,请改用:

scrollTime: '00:00'