jquery - why globalization in web.config makes fullcalendar not to render events

Question

This problem I am seeing is in mozilla, but works fine in IE

I have this in my _calendar.cshtml partial view on document.ready

$.ajax({
        type: "POST",
        contentType: "application/json",
        data: "{}",
        url: "/Home/GetEvents",
        dataType: "json",
        success: function (data) {
            $('#calendar').fullCalendar({
                editable: false,
                eventColor: '#F09A18',
                textColor: 'white',
                lang: 'en-IN',
                eventLimit: 1,
                eventLimitText: 'More',
                weekMode: 'liquid',
                events: $.map(data, function (item, i) {
                    var event = new Object();
                    event.start = new Date(item.StartDate);
                    event.title = item.EventName;
                    event.brief = item.EventBrief;
                    return event;
                }),

            });

        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            $("#cal_error").text(errorThrown);
        }
    });

It renders events if I don't include below piece of code in web.config file

<globalization culture="en-IN" uiCulture="en-IN"/>

I have also tried keeping

<globalization culture="auto" uiCulture="auto"/>

But no change. When I include globalization in web.config events are not at all shown in Firefox but still they will be working fine in IE.

below are my defaults in fullcalendar.js

titleRangeSeparator: ' u2014 ', // emphasized dash
    monthYearFormat: 'MMMM YYYY', // required for en. other languages rely on datepicker computable option

    defaultTimedEventDuration: '02:00:00',
    defaultAllDayEventDuration: { days: 1 },
    forceEventDuration: false,
    nextDayThreshold: '09:00:00', // 9am

    // display
    defaultView: 'month',
    aspectRatio: 1.35,
    header: {
        left: 'title',
        center: '',
        right: 'today prev,next'
    },
    weekends: true,
    weekNumbers: false,

    weekNumberTitle: 'W',
    weekNumberCalculation: 'local',

    //editable: false,

    // event ajax
    lazyFetching: true,
    startParam: 'start',
    endParam: 'end',
    timezoneParam: 'timezone',

    timezone: 'local',

    //allDayDefault: undefined,

    // locale
    isRTL: false,
    defaultButtonText: {
        prev: "prev",
        next: "next",
        prevYear: "prev year",
        nextYear: "next year",
        today: 'today',
        month: 'month',
        week: 'week',
        day: 'day'
    },

    buttonIcons: {
        prev: 'left-single-arrow',
        next: 'right-single-arrow',
        prevYear: 'left-double-arrow',
        nextYear: 'right-double-arrow'
    },

    // jquery-ui theming
    theme: false,
    themeButtonIcons: {
        prev: 'circle-triangle-w',
        next: 'circle-triangle-e',
        prevYear: 'seek-prev',
        nextYear: 'seek-next'
    },

    dragOpacity: .75,
    dragRevertDuration: 500,
    dragScroll: true,

    //selectable: false,
    unselectAuto: true,

    dropAccept: '*',

    eventLimit: false,
    eventLimitText: 'more',
    eventLimitClick: 'popover',
    dayPopoverFormat: 'LL',

    handleWindowResize: true,
    windowResizeDelay: 200 // milliseconds before an updateSize happens

What happens to fullcalendar when I include globalization tag. I have also tried setting timeZone to 'local', 'UTC', false in defaults but even that did not work? can anyone help me how to solve this?

Answer 1

Ok. After googling so much I found out answer for this.

I just need to set date as below for the events:

 events: $.map(data, function (item, i) {
                    var event = new Object();
                    event.start = moment(item.StartDate).utc();
                    event.title = item.EventName;
                    event.brief = item.EventBrief;
                    return event;
                }),

This worked like a miracle. But I have to keep my web.config file as below

<globalization culture="auto" uiCulture="auto"/>

instead of <globalization culture="en-IN" uiCulture="en-IN"/>

When I keep it as culture="en-IN" even though I convert date object using moment it will not work. Still figuring out why but for time being the above solution works out.