0

私はimplemented a jquery fullcalendarRORアプリケーションを持っています。フルカレンダーの月表示で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'
    })
}
});
4

1 に答える 1

2

最初に、月要素の日付のハンドルを取得する関数が必要です

このようなもの：

     // 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 を参照してください。

次のループでは、各日付をファインダー関数に渡します。

それで

foundDay.addClass( 'selected-day' );
于 2012-12-12T16:10:55.567 に答える