VisualBean
VisualBean

Reputation: 5008

fullcalendar does not renderEvent in IE (All versions)

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:

firefox

In IE:

enter image description here

Upvotes: 1

Views: 1305

Answers (1)

DanielST
DanielST

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 Dates in moment()).

Upvotes: 3

Related Questions