Question

I have implemented a jquery fullcalendar in a ROR application. In the month view of fullcalendar, I need to change the background color of the dates from start date to end date. I got the start date and end date. But I am not able to change the background color of these dates. I have tried like below but it is changing for all the months(from start date to end date) of the calendar. Is there any other way to achieve this?? Please help. I am a novice in Javascript.

$(document).ready(function () {

var calInstance = $('#calendar')
$('.task_name').live('click', function () {
    alert(this.id);
    $.ajax({
        url: 'pending_task_details',
        dataType: 'json',
        cache: false,
        data: {
            task_id: this.id
        },
        success: function (data, response, event, date) {
            var start_date = new Date(data.start_date);
            var end_date = new Date(data.end_date);
            alert("The start date is....." + start_date);
            alert("The end date is..........." + end_date);
            for (i = start_date; i <= end_date; i = new Date(i.getTime() + 86400000)) {
                getCellFromDate(i, calInstance);
            }
        }
    });
});


function getCellFromDate(thisDate, calInstance) {
    var d = thisDate.getDate();
    var m = thisDate.getMonth();
    var y = thisDate.getFullYear();
    $('#calendar').fullCalendar('gotoDate', y, m, d);
    var coords = calInstance.fullCalendar('getView').dateCell(new Date(thisDate)),
        $row = calInstance.find('.fc-view-month tbody tr').eq(coords.row),
        $cell = $row.find('td').eq(coords.col);
    $($cell).find('.fc-day-number').parent().css('background-color', '#6E5849');
    $($cell).find('.fc-day-number').css({
        'background-color': '#6E5849',
        'border': '1px solid #6E5849'
    })
}
});

Answer 1

First you need a function get a handle on the day of the month element

Something like this:

     // based on the given event date return the full calendar day jquery object (<td ...>)
     // matching day and month
     //
     // assumptions:
     //  - the event date is if for the same year as the current viewable month
     //  - the fc-day* TD's are in chronological order
     //  - the fc-day* TD's not for the current month have a class of fc-other-month
     //
    findFullCalendarDayForClickedEvent : function( eventDate ) {

        var foundDay;

        var $theCalendar = $( '#myCalendar' );

        var currentDate = $theCalendar.fullCalendar( 'getDate' );
        var fullCalendarDayContainers = $theCalendar.find( 'td[class*="fc-day"]' );

        for( var i = 0; i < fullCalendarDayContainers.length; i++ ) {

            var $currentContainer = $( fullCalendarDayContainers[ i ] );

            var dayNumber = $currentContainer.find( '.fc-day-number' ).html();

            // first find the matching day
            if ( eventDate.getDate() == dayNumber ) {

                // now month check, if our current container has fc-other-month
                // then the event month and the current month needs to mismatch,
                // otherwise container is missing fc-other-month then the event
                // month and current month need to match
                if( $currentContainer.hasClass( 'fc-other-month' ) ) {

                    if( eventDate.getMonth() != currentDate.getMonth() ) {
                        foundDay = $currentContainer;
                        break;
                    }
                }
                else {
                    if ( eventDate.getMonth() == currentDate.getMonth() ) {
                        foundDay = $currentContainer;
                        break;
                    }
                }
            }
        }

        return foundDay;
    }

For more see: https://stackoverflow.com/posts/13647014/edit

Next loop over your time frame passing in each date to the finder function.

Then

foundDay.addClass( 'selected-day' );