Reputation: 5008
I'm using fullcalendar to render some events.
Fiddle here - press a day and enter a number in the textbox
The fullcalendar "setup" is as follows:
$(document).ready(function () {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
header: false,
defaultView: 'basicWeek',
height: 300,
firstDay: 1,
columnFormat: 'ddd D/MM',
dayClick: function (date, jsEvent, view) {
if (date > new Date()) {
$('#lateralert').show();
setInterval(function () { $('#lateralert').hide(); }, 4000);
} else {
$('#AddEventModal').modal('show');
var modal = $('#AddEventModal');
document.getElementById('hiddendate').value = date.toString();
modal.find('.modal-title').text((moment(date).format('ddd D/MM')));
}
},
events: [
{
title: '3',
start: '2015-04-13',
backgroundColor: '#e74c3c',
borderColor: '#e74c3c'
},
{
title: '4,5',
start: '2015-04-13',
backgroundColor: '#3498db',
borderColor: '#3498db'
},
{
title: '2',
start: '2015-04-13',
backgroundColor: '#95a5a6',
borderColor: '#95a5a6'
}
]
// put your options and callbacks here
});
});
I'm submitting these events through a form where I catch the submit and add the event.
$(document).ready(function () {
$('#event_frm').on('submit', function (e) {
e.preventDefault();
var form = document.getElementById('event_frm');
var date = form.elements["hiddendate"].value;
var hours = form.elements["hours"].value;
$('#calendar').fullCalendar('renderEvent',
{
title: hours,
start: date,
allDay: true,
description: 'my desc'
});
window.hasMadeChanges = true;
$('#discardchanges').prop('disabled', false);
});
});
The above works correctly in Firefox, I've tried debugging it in IE, but there are no errors, and the code executes (according to the debugger), but no events are added to the calendar when using IE 9 -> Edge.
Am I missing something obvious here or?
In Firefox:
In IE:
Upvotes: 1
Views: 1305
Reputation: 14133
Ok, found two problems and got it to work in IE9.
Fullcalendar uses momentjs for everything date related. If you hardcode in the insert date as a moment, you'll notice that it works in IE.
$('#calendar').fullCalendar('renderEvent',{
title: hours,
start: moment(),
allDay: true,
description: 'test'
});
So we know something is up with the start date you are supplying. Wrapping it in a moment almost works:
var date = form.elements["hiddendate"].value;
$('#calendar').fullCalendar('renderEvent',{
title: hours,
start: moment(date),
allDay: true,
description: 'test'
});
But now the event is added to the previous day.
If you look at where you got that date value:
document.getElementById('hiddendate').value = date.toString();
toString
shouldn't be used for storing the date. I'm actually not sure what it's for (docs use it once but never talk about it).
And in your console, you'll notice a deprecation warning when you do moment(date)
. The warning says it falls back on the Date
constructor since it can't parse the string. This is where the IE difference is, since the Date
object is browser dependant. Date
on FF can read the string, but Date
on IE can't.
Instead, use moment.format()
which produces a string that moment can read. So:
document.getElementById('hiddendate').value = date.format();
//...
$('#calendar').fullCalendar('renderEvent',{
title: "a",
start: moment(date),
allDay: true,
description: 'test'
});
This JSFiddle should work now.
Also, the line:
if (date > new Date()) {
Should be
if (date.isAfter(moment())) {
I'm surprised the former even worked, but it's not supported will likely not work perfectly. Don't mix date types (unless you wrap the Date
s in moment()
).
Upvotes: 3