Jquery using datepicker with fullcalendar to highlight selected datepicker date on fullcalendar

Question

Integrating a fullcalendar with a datepicker to change dates in asp.net mvc5 application. No issue adding datepicker to fullcalendar but cannot get dayrender to highlight the chosen day in any view but main view is month.

Issue i get is "Uncaught TypeError: t.getFullYear is not a function"

All js files are added in the following order

jquery jquery-ui moment fullcalendar

Am i missing one? Followed this tread but cant get it to work. Using Jquery,Can anyone help me with highlighting color of date(In a week view) in full calendar

jQuery

        $(document).ready(function () {
        var source = "../JobsCalendar/PostCalendarData";
        var dt = new Date($.now());
        var selected_date = null;
        $('#calendar').fullCalendar({
            header: {
                left: '',
                center: 'prev title next today',
                right: 'month,agendaWeek,agendaDay'
            },
            timezone: 'local',
            defaultView: 'month',
            eventClick: function (event, jsEvent, view) {
                //set the values and open the modal
                $("#eventInfo").html(event.description);
                $("#eventLink").attr('href', event.url);
                $("#eventToCal").attr('href', event.tocalendar);
                $("#eventContent").dialog({
                    modal: true,
                    title: event.title
                });
                new $.jmelosegui.GoogleMap('#mapContainer').ajax({
                    url: '@Url.Action("DisplayAccCenterPartialView", "JobsUpcoming")',
                    type: "Get",
                    data: { jobNumber: event.map },
                    success: function (data) {
                        //alert('succeded');
                    }
                });
                return false;
            },
            events: {
                url: source,
                type: 'POST',
                data: {
                    custom_param1: '',
                    custom_param2: ''
                },
                error: function () {
                }
            },
            dayClick: function (date, jsEvent, view) {
                $(".fc-state-highlight").removeClass("fc-state-highlight");
                $(jsEvent.target).addClass("fc-state-highlight");
            },
            eventRender: function (event, element) {
                if (event.start > dt || event.status == "C") {
                    element.css('background-color', 'rgba(98, 168, 213, 1)');
                    element.css('border', 'rgba(98, 168, 213, 1)');
                }
                if (event.start < dt) {
                    element.css('background-color', 'rgba(172, 172, 172, 1)');
                    element.css('border', 'rgba(172, 172, 172, 1)');
                }
                if (event.status == "X") {
                    element.css('background-color', 'rgba(255, 89, 89, 1)');
                    element.css('border', 'rgba(255, 89, 89, 1)');
                }
            },
            dayRender: function (date, cell) {
                if (selected_date == $.datepicker.formatDate('yy-mm-dd', date)) {
                    $(cell).addClass('fc-state-highlight');
                }
            }
        });
        $('#datepicker').datepicker({
            onSelect: function (dateText, inst) {
                var date = new Date(dateText);
                selected_date = $.datepicker.formatDate('yy-mm-dd', date);
                $('#calendar').fullCalendar('gotoDate', date);
                $('#calendar').fullCalendar('render');
            }
        });
    });

HTML

<div id="datepicker"></div>
        <div id="calendar"></div>

Thank you

where exactly does the error message occur? During the dayRender method? — ADyson
BTW in eventRender: if (event.start > dt ... I wouldn't compare dates simply using the > operator, especially since event.start and dt are not even the same type - one is a JS Date, one is a Moment. You might get a result from this operation, but I wouldn't like to say it will always be accurate. Convert dt to a moment, and use moment's various query method for the simplest and most reliable results - see momentjs.com/docs/#/query — ADyson
And in the datepicker onSelect callback, you shoudn't need to call $('#calendar').fullCalendar('render'); after you've called "goToDate". It should do the gotToDate operation without needing a full re-render. I think that's redundant. — ADyson
@ADyson Yes the error happens during dayRender. Thank you, noted, will remove the redundant code and make dt a moment object. To be more specific, my error occurs here if (selected_date == $.datepicker.formatDate('yy-mm-dd', date)) — Albert

Albert Albert · Accepted Answer · 2017-08-21T19:16:32

Solved the issue, had to remove the code form the dayRender function and change datepicker to:

$('#datepicker').datepicker({
    onSelect: function (dateText, inst) {
        var date = moment(dateText).toDate();
        selected_date = $.datepicker.formatDate('yy-mm-dd', date);

        $('#calendar').fullCalendar('gotoDate', date);
        $('#calendar').fullCalendar('select', date);
    }
});

This will update fullcalendar on selecting a date on datepicker

Jquery using datepicker with fullcalendar to highlight selected datepicker date on fullcalendar

1 Answers