When I toggle between Month, BasicWeek, and AgendaDay views on my FullCalendar control, the event time is displayed incorrectly on the Month view. (e.g. correct event time = 4:00pm, but the Month calendar displays 12:21p)
The configuration and data are the same (since this is on the same page), only the type of calendar view has changed.
Here is the demonstration code: http://jsfiddle.net/wloescher/1opdu0yc/7/
External Resources: 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>
CalendarAddItemIcons. Maybe you can modify the event onEventRenderas in stackoverflow.com/questions/8702058/… – Mario Levrero