Представление FullCalendar по месяцам показывает неправильное время

Когда я переключаюсь между представлениями Month, BasicWeek и AgendaDay в моем элементе управления FullCalendar, время события отображается неправильно в представлении Month. (например, правильное время события = 16:00, но в месячном календаре отображается 12:21)

Конфигурация и данные те же (поскольку это на той же странице), изменился только тип представления календаря.

Вот демонстрационный код: 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>

person wloescher    schedule 12.08.2015    source источник
comment
Пробл, вы это уже замечаете, но проблема появляется только тогда, когда вы изменяете содержимое своего события через CalendarAddItemIcons. Возможно, вы можете изменить событие на EventRender, как в stackoverflow.com/questions/8702058/   -  person Mario Levrero    schedule 13.08.2015
comment
Событие eventAfterAllRender необходимо использовать, поскольку CalendarAddItemIcons зависит от содержимого события.   -  person wloescher    schedule 13.08.2015


Ответы (1)


Оказывается, проблема была в функции CalendarAddItemIcons. Существующий код добавил значок к существующему HTML, что также можно было сделать с помощью функции jQuery .prepend.

Код изменен на следующий, и проблема решена.

Я не знаю, почему это устранило проблему и почему это повлияло только на представление «Месяц».

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 />");
}
person wloescher    schedule 13.08.2015