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

Full Calendar- read keyboard arrow keys and derive same behavior as click on a date cell

本文关键字:单元格 日期 单击 派生 日历 读取 键盘      更新时间:2023-09-26

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

非工作代码被注释掉,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)
        });
        });

IncrementDate 需要第二个参数的 moment.duration() 对象,而不是构建时刻的字符串。您可以在此处了解如何构建持续时间对象

我认为如果你改变应该可以工作

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

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