javascript - FullCalendar 月 View 显示不正确的时间

Question

当我在 FullCalendar 控件上的“月”、“基本周”和“议程日” View 之间切换时，“月” View 上的事件时间显示不正确。 (例如，正确的事件时间 = 下午 4:00，但月历显示下午 12:21)

配置和数据相同(因为这是在同一页面上)，只是日历 View 的类型发生了变化。

演示代码如下: http://jsfiddle.net/wloescher/1opdu0yc/7/

外部资源: jQuery 2.1.0 Bootstrap 3.2.0 http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.2/fullcalendar.min.js http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.2/fullcalendar.min.css

<div id="calendar"></div>
<script>
$(document).ready(function () {
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,agendaDay'
        },
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        timeFormat: 'h:mmt',
        eventAfterAllRender: function (view) {
            CalendarAddItemIcons();
        },
        eventRender: function (event, element) {
            element.popover({
                title: event.title,
                placement: 'auto',
                html: true,
                trigger: 'hover',
                animation: 'true',
                content: event.desc,
                container: 'body'
            });
        },
        events: [{title: 'PlaceHolder',start: new Date(2013, 1, 1)},{id: 562, title: 'Sample Idea', start: '0001-01-01T00:00:00', url: '/ContentEdit/562', textColor:'#000000', color: ' #efefef ', className: 'ContentItemWeb ContentItemStatus2', desc: 'Type: Blog Post <br/> Status: In Creation <br/> Assigned: Tandy '},{id: 550, title: 'School Shopping - How to make sure you are getting the best bargains', start: '0001-01-01T00:00:00', url: '/ContentEdit/550', textColor:'#000000', color: ' #efefef ', className: 'ContentItemWeb ContentItemStatus1', desc: 'Type: Blog Post <br/> Status: In Planning <br/> Assigned: Tandy '},{id: 654, title: 'Monthly Newsletter Series [1 of 10]', start: '2001-09-05T16:00:00', url: '/ContentEdit/654', textColor:'#000000', color: ' #efefef ', className: 'ContentItemEmail ContentItemStatus1', desc: 'Type: Newsletter <br/> Status: In Planning <br/> Assigned: Tandy '},{id: 655, title: 'Monthly Newsletter Series [2 of 10]', start: '2001-10-03T16:00:00', url: '/ContentEdit/655', textColor:'#000000', color: ' #efefef ', className: 'ContentItemEmail ContentItemStatus1', desc: 'Type: Newsletter <br/> Status: In Planning <br/> Assigned: Tandy '},{id: 656, title: 'Monthly Newsletter Series [3 of 10]', start: '2001-11-07T16:00:00', url: '/ContentEdit/656', textColor:'#000000', color: ' #efefef ', className: 'ContentItemEmail ContentItemStatus1', desc: 'Type: Newsletter <br/> Status: In Planning <br/> Assigned: Tandy '},{id: 657, title: 'Monthly Newsletter Series [4 of 10]', start: '2001-12-05T16:00:00', url: '/ContentEdit/657', textColor:'#000000', color: ' #efefef ', className: 'ContentItemEmail ContentItemStatus1', desc: 'Type: Newsletter <br/> Status: In Planning <br/> Assigned: Tandy '},{id: 658, title: 'Monthly Newsletter Series [5 of 10]', start: '2002-01-02T16:00:00', url: '/ContentEdit/658', textColor:'#000000', color: ' #efefef ', className: 'ContentItemEmail ContentItemStatus1', desc: 'Type: Newsletter <br/> Status: In Planning <br/> Assigned: Tandy '},{id: 659, title: 'Monthly Newsletter Series [6 of 10]', start: '2002-02-06T16:00:00', url: '/ContentEdit/659', textColor:'#000000', color: ' #efefef ', className: 'ContentItemEmail ContentItemStatus1', desc: 'Type: Newsletter <br/> Status: In Planning <br/> Assigned: Tandy '},{id: 660, title: 'Monthly Newsletter Series [7 of 10]', start: '2002-03-06T16:00:00', url: '/ContentEdit/660', textColor:'#000000', color: ' #efefef ', className: 'ContentItemEmail ContentItemStatus1', desc: 'Type: Newsletter <br/> Status: In Planning <br/> Assigned: Tandy '},{id: 661, title: 'Monthly Newsletter Series [8 of 10]', start: '2002-04-03T16:00:00', url: '/ContentEdit/661', textColor:'#000000', color: ' #efefef ', className: 'ContentItemEmail ContentItemStatus1', desc: 'Type: Newsletter <br/> Status: In Planning <br/> Assigned: Tandy '},{id: 662, title: 'Monthly Newsletter Series [9 of 10]', start: '2002-05-01T16:00:00', url: '/ContentEdit/662', textColor:'#000000', color: ' #efefef ', className: 'ContentItemEmail ContentItemStatus1', desc: 'Type: Newsletter <br/> Status: In Planning <br/> Assigned: Tandy '},{id: 556, title: 'Sample Blog Post', start: '2015-07-28T12:06:57', url: '/ContentEdit/556', textColor:'#000000', color: ' #efefef ', className: 'ContentItemWeb ContentItemStatus4', desc: 'Type: Blog Post <br/> Status: Ready to Publish / Approved <br/> Assigned: Tandy '},{id: 557, title: 'Sample Newsletter', start: '2015-07-28T12:21:00', url: '/ContentEdit/557', textColor:'#000000', color: ' #efefef ', className: 'ContentItemEmail ContentItemStatus1', desc: 'Type: Newsletter <br/> Status: In Planning <br/> Assigned: Tandy '},{id: 675, title: 'Test Item for Word Count', start: '2015-08-07T10:00:00', url: '/ContentEdit/675', textColor:'#000000', color: ' #efefef ', className: 'ContentItemOther ContentItemStatus1', desc: 'Type: Infographic <br/> Status: In Planning <br/> Assigned: Tandy '},{id: 663, title: 'Monthly Newsletter Series [10 of 10]', start: '2015-08-11T16:00:00', url: '/ContentEdit/663', textColor:'#000000', color: ' #efefef ', className: 'ContentItemEmail ContentItemStatus5', desc: 'Type: Newsletter <br/> Status: Complete <br/> Assigned: Tandy '},{id: 602, title: 'Fall Vacation Destinations', start: '2015-08-13T14:00:00', url: '/ContentEdit/602', textColor:'#000000', color: ' #efefef ', className: 'ContentItemWeb ContentItemStatus3', desc: 'Type: Article <br/> Status: In Review <br/> Assigned: Tandy '},{id: 601, title: 'Summer Vacation Tips', start: '2015-08-13T17:00:00', url: '/ContentEdit/601', textColor:'#000000', color: ' #efefef ', className: 'ContentItemOther ContentItemStatus1', desc: 'Type: Infographic <br/> Status: In Planning <br/> Assigned: Tandy '},{id: 691, title: 'of Blog Posts Series [1 of 10]', start: '2015-08-19T10:00:00', url: '/ContentEdit/691', textColor:'#000000', color: ' #efefef ', className: 'ContentItemWeb ContentItemStatus1', desc: 'Type: Blog Post <br/> Status: In Planning <br/> Assigned: Tandy '},{id: 692, title: 'of Blog Posts Series [2 of 10]', start: '2015-08-21T10:00:00', url: '/ContentEdit/692', textColor:'#000000', color: ' #efefef ', className: 'ContentItemWeb ContentItemStatus1', desc: 'Type: Blog Post <br/> Status: In Planning <br/> Assigned: Tandy '},{id: 693, title: 'of Blog Posts Series [3 of 10]', start: '2015-08-24T10:00:00', url: '/ContentEdit/693', textColor:'#000000', color: ' #efefef ', className: 'ContentItemWeb ContentItemStatus1', desc: 'Type: Blog Post <br/> Status: In Planning <br/> Assigned: Tandy '},{id: 694, title: 'of Blog Posts Series [4 of 10]', start: '2015-08-26T10:00:00', url: '/ContentEdit/694', textColor:'#000000', color: ' #efefef ', className: 'ContentItemWeb ContentItemStatus1', desc: 'Type: Blog Post <br/> Status: In Planning <br/> Assigned: Tandy '},{id: 695, title: 'of Blog Posts Series [5 of 10]', start: '2015-08-28T10:00:00', url: '/ContentEdit/695', textColor:'#000000', color: ' #efefef ', className: 'ContentItemWeb ContentItemStatus1', desc: 'Type: Blog Post <br/> Status: In Planning <br/> Assigned: Tandy '},{id: 696, title: 'of Blog Posts Series [6 of 10]', start: '2015-08-31T10:00:00', url: '/ContentEdit/696', textColor:'#000000', color: ' #efefef ', className: 'ContentItemWeb ContentItemStatus1', desc: 'Type: Blog Post <br/> Status: In Planning <br/> Assigned: Tandy '},{id: 677, title: 'Something Blue', start: '2015-09-01T11:56:00', url: '/ContentEdit/677', textColor:'#000000', color: ' #efefef ', className: 'ContentItemOther ContentItemStatus3', desc: 'Type: Press Release <br/> Status: In Review <br/> Assigned: Tandy '},{id: 697, title: 'of Blog Posts Series [7 of 10]', start: '2015-09-02T10:00:00', url: '/ContentEdit/697', textColor:'#000000', color: ' #efefef ', className: 'ContentItemWeb ContentItemStatus1', desc: 'Type: Blog Post <br/> Status: In Planning <br/> Assigned: Tandy '},{id: 698, title: 'of Blog Posts Series [8 of 10]', start: '2015-09-04T10:00:00', url: '/ContentEdit/698', textColor:'#000000', color: ' #efefef ', className: 'ContentItemWeb ContentItemStatus1', desc: 'Type: Blog Post <br/> Status: In Planning <br/> Assigned: Tandy '},{id: 699, title: 'of Blog Posts Series [9 of 10]', start: '2015-09-07T10:00:00', url: '/ContentEdit/699', textColor:'#000000', color: ' #efefef ', className: 'ContentItemWeb ContentItemStatus1', desc: 'Type: Blog Post <br/> Status: In Planning <br/> Assigned: Tandy '},{id: 700, title: 'of Blog Posts Series [10 of 10]', start: '2015-09-09T10:00:00', url: '/ContentEdit/700', textColor:'#000000', color: ' #efefef ', className: 'ContentItemWeb ContentItemStatus1', desc: 'Type: Blog Post <br/> Status: In Planning <br/> Assigned: Tandy '},{id: 650, title: 'Christmas Decorating Tips', start: '2015-10-31T10:00:00', url: '/ContentEdit/650', textColor:'#000000', color: ' #efefef ', className: 'ContentItemWeb ContentItemStatus2', desc: 'Type: Article <br/> Status: In Creation <br/> Assigned: Tandy '}],
        eventDrop: function (event, delta) {
            //Start calendar update
            $.ajax({
                type: 'POST',
                url: 'WebServices/CalendarWebService.asmx/MoveCalendarEvent',
                data: JSON.stringify({
                    itemId: event.id,
                    dateTarget: event.start
                }),
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (msg) {
                    // Replace the div's content with the page method's return.
                    //alert(event.title + ' has been rescheduled.');    
                }
            });
            //end calendar update   
        }
    });

    function CalendarAddItemIcons() {
        //add calender content item icons
        $(".ContentItemFacebook .fc-content .fc-time").html("<i class='fa fa-facebook' style='font-size:16px;color:#3e56a0;'></i><br/>" +                   $(".ContentItemFacebook .fc-content .fc-time").html() + "<br/>");
        $(".ContentItemTwitter .fc-content .fc-time").html("<i class='fa fa-twitter' style='font-size:16px;color:#659fcd;'></i><br/>" +     $(".ContentItemTwitter  .fc-content .fc-time").html() + "<br/>");
        $(".ContentItemEmail .fc-content .fc-time").html("<i class='fa fa-envelope' style='font-size:16px;color:#3e56a0;'></i><br/>" + $(".ContentItemEmail  .fc-content .fc-time").html() + "<br/>");
        $(".ContentItemWeb .fc-content .fc-time").html("<i class='fa fa-file-text' style='font-size:16px;color:#3e56a0;'></i><br/>" + $(".ContentItemWeb .fc-content .fc-time").html() + "<br/>");
        $(".ContentItemGooglePlus  .fc-content .fc-time").html("<i class='fa fa-google-plus' style='font-size:16px;color:#dd4b39;'></i><br/>" +  $(".ContentItemGooglePlus .fc-content .fc-time").html() + "<br/>");
     }
});
</script>

Answer 1

事实证明问题出在“CalendarAddItemIcons”函数中。现有代码向现有 HTML 添加了一个图标，这也可以使用 jQuery .prepend 函数来完成。

代码更改为以下内容，问题已解决。

我不知道为什么这解决了问题，也不知道为什么这仅影响月 View 。

function CalendarAddItemIcons() {
    //add calender content item icons
    $(".ContentItemFacebook .fc-content .fc-time").prepend("<i class='fa fa-facebook' style='font-size:16px;color:#3e56a0;'></i><br />");
    $(".ContentItemTwitter .fc-content .fc-time").prepend("<i class='fa fa-twitter' style='font-size:16px;color:#659fcd;'></i><br />");
    $(".ContentItemEmail .fc-content .fc-time").prepend("<i class='fa fa-envelope' style='font-size:16px;color:#3e56a0;'></i><br />");
    $(".ContentItemWeb .fc-content .fc-time").prepend("<i class='fa fa-file-text' style='font-size:16px;color:#3e56a0;'></i><br />");
    $(".ContentItemGooglePlus  .fc-content .fc-time").prepend("<i class='fa fa-google-plus' style='font-size:16px;color:#dd4b39;'></i><br />");
}