Question

我在ROR应用程序中有implemented a jquery fullcalendar。在fullcalendar的月视图中，I need to change the background color of the dates from start date to end date.我得到了开始日期和结束日期。但我无法change the background color of these dates。我尝试过如下，但它正在改变日历的所有月份（从开始日期到结束日期）。有没有其他方法来实现这一点？请帮忙。我是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

首先，您需要一个函数来获取月份元素的句柄

这样的事情：

     // 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;
    }

有关详情，请参阅：https://stackoverflow.com/posts/13647014/edit

接下来循环在你的时间范围内将每个日期传递给finder函数。

然后

foundDay.addClass( 'selected-day' );

更改fullcalendar中日期的背景颜色

1 个答案: