Using Jquery,Can anyone help me with highlighting color of date(In a week view) in full calendar

Question

I got new requirement,Using Jquery,Can anyone help me with highlighting color of date(In a week view) in full calendar,when date got selected by a Datepicker.

$(document) .ready(function () {
        $(function() {
          $( "#datepicker" ).datepicker({
            dateFormat: 'dd/mm/yy',
            onSelect: function(dateText,inst){  

            var vals  = dateText.split("/"),eventDate =new Date(Number(vals[2]),Number(vals[1]), Number(vals[0]));
            //this.dayhighlight = eventDate;
         $('#calendar').fullCalendar( 'gotoDate', Number(vals[2]), Number(vals[1])-1, Number(vals[0]));  

            var eventDate1 =new Date(Number(vals[2]),Number(vals[1])-1,Number(vals[0]));

            var reqDate = new Date(eventDate1);  
            var dd = reqDate.getDate();
            var mm = reqDate.getMonth()+1;
            var yyyy = reqDate.getFullYear();                 

            dayRender: function(daysOfWeek, cell){                 

                 if(reqDate.getDate()==daysOfWeek.getDate())
                  {
                      $(cell).addClass('fc-state-highlight');
                  }
                  else
                  {
                      $(cell).removeClass('fc-state-highlight');
                  }
              }     
           }

        });  

       });
   });

My code functionality is working.It is going to that particular date in a WeekView in FullCalendar but I am unable to highlight that cell color of the date,I am using JQuery v1,here trying to use dayRender() but it is not working,Can anyone help with me this please.

Answer 1

You put the dayRender property within the onSelect function of the datepicker. This will probably crash(check your console) as you can't set a fullCalendar property within a callback function of datepicker.

You code should be like this:

$(document).ready(function() {
    // first set the selected date to null so there is no highlighted date
    var selected_date = null;

    // initialize the calendar (including the dayRender callback)
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },
        defaultView: 'basicWeek',
        dayRender: function(date, cell){ 
            if (selected_date == $.datepicker.formatDate('yy-mm-dd', date)){
                $(cell).addClass('fc-highlight');
            }
        }
    });

    // initialize the date picker
    $( "#from" ).datepicker({
        onSelect: function( dateText, inst ) {
            // when the date changes, we update the selected_date
            var date = new Date(dateText);
            selected_date = $.datepicker.formatDate('yy-mm-dd', date);
            // call the goToDate method on fullCalendar
            $('#calendar').fullCalendar( 'gotoDate', date.getFullYear(), date.getMonth(), date.getDate());
            // call render on calendar (so that the dayRender is called and the selected date is highlighted
            $('#calendar').fullCalendar('render'); 
        }
    });     
});

Here is an solution: JSFiddle