javascript - 完整日历 - 读取键盘箭头键并获得与单击日期单元格相同的行为

Question

我正在尝试读取键盘箭头键并得出与单击日期单元格相同的行为。

非工作代码被注释掉，gotodate 可以工作，但简单地实现日期或将日期减一或七不会导致日期突出显示。

我想要将目标日期单元格置于焦点中，突出显示它，并从我留下的单元格中删除突出显示。我相信我不理解或无法解释 dayClick 函数。

$(document).ready(function() {
    var calendar = $('#calendar').fullCalendar({
        header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
                editable: true,
       defaultDate: '2015-02-12',
            selectable: true,
            selectHelper: true,
            select: function(start, end){
            //var title = prompt('Event Title:');
                var eventData;
            if (title) {
                eventData = {
                    title: title,
                    start: start,
                    end: end
                };
                    $('#calendar').fullCalendar  ('renderEvent', eventData, true); // stick? = true
                }
                $('#calendar').fullCalendar('unselect');
            },

            eventLimit: true, // allow "more" link when too many events
            events: {
                url: 'php/get-events.php',
            },
            loading: function(bool) {
                $('#loading').toggle(bool);
                }

 });
$('#my-prev-button').click(function() {
    $('#calendar').fullCalendar('prev');
});
   $('#my-next-button').click(function() {
    $('#calendar').fullCalendar('next');
});
// Hover states on the static widgets
$( "#dialog-link, #icons li" ).hover(
    function() {
        $( this ).addClass( "ui-state-hover" );
    },
    function() {
        $( this ).removeClass( "ui-state-hover" );
    }
);

$('#calendar').fullCalendar({
    dayClick: function(date, jsEvent, view) {

            }
});

$(document).keydown(function(e) {
    switch(e.keyCode) {
                case 33: // page up
        $('#calendar').fullCalendar('prev');
                break;

                case 34: // page down
        $('#calendar').fullCalendar('next');
                break;

                case 37: // left
//     alert('left key pressed');
            $('#calendar').fullCalendar('gotoDate', '2015-01-19');
                $(this).css('background-color', 'red');
                break;

        case 38: alert('up key pressed');        
                //$('#calendar').fullCalendar('incrementDate', 'days:-7');
                break;

        case 39:
        //$('#calendar').fullCalendar('incrementDate', 'days:1');
                $('#calendar').fullCalendar('gotoDate','2015-03-19');
                $(this).css('background-color', 'red');

                                break;

        case 40: alert('down key pressed');
        //$('#calendar').fullCalendar('incrementDate', 'days:7');
                break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
        });

        });

Answer 1

IncrementDate期望第二个参数是 moment.duration() 对象，而不是构建时刻的字符串。您可以看到如何构建一个持续时间对象 here

我认为如果你改变应该可行

 //$('#calendar').fullCalendar('incrementDate', 'days:7');

至

 $('#calendar').fullCalendar('incrementDate', moment.duration(7, 'days'));