Javascript 完整日历-读取键盘箭头键并派生与单击日期单元格相同的行为
我试图读取键盘上的箭头键,并得出与单击日期单元格相同的行为 非工作代码被注释掉,gotodate工作,但简单地实现或减少一到七个日期不会导致日期突出显示 我想把目标日期单元格放在焦点上,突出显示它,并从我留下的单元格中删除突出显示。我相信我不理解或无法解释dayClick函数Javascript 完整日历-读取键盘箭头键并派生与单击日期单元格相同的行为,javascript,jquery,fullcalendar,keypress,Javascript,Jquery,Fullcalendar,Keypress,我试图读取键盘上的箭头键,并得出与单击日期单元格相同的行为 非工作代码被注释掉,gotodate工作,但简单地实现或减少一到七个日期不会导致日期突出显示 我想把目标日期单元格放在焦点上,突出显示它,并从我留下的单元格中删除突出显示。我相信我不理解或无法解释dayClick函数 $(document).ready(function() { var calendar = $('#calendar').fullCalendar({ header: {
$(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)
});
});
第二个参数应为矩.duration对象,而不是生成矩的字符串。您可以看到如何构建duration对象
我想如果你改变的话,应该可以
//$('#calendar').fullCalendar('incrementDate', 'days:7');
到
雷沃先生,您说得对,代码现在在浏览器中运行。我仍然需要突出显示我移动到的单元格。颜色bce8f1。我试过$this.addClass fc highlight;但没有效果。如果我用鼠标选择一个月的第20天,然后按向上箭头键3次,口译员似乎理解了日期,第三次按时它会转到上个月,但我仍然无法像鼠标单击那样突出显示日期。谢谢你的努力。我会挺身而出。欢迎遗嘱。关于亮点。。。看看好的,在马里奥的帮助下,我在过去几天里取得了相当大的进步。当我使用var today=$'calendar'.fullCalendar''d'应用格式时,有一个矩日期对象的属性(其值为我想要的日期{Wed Feb 18 2015 19:00:00 GMT-0500 Eastern Standard Time});momenttoday.格式为'yyyy-MM-dd';我得到的是默认日期的_I值,例如2015-02-12,而不是2月18日。如果有价值的话,我可以提供更多的代码。谢谢-所有的评论,我想你的新问题超出了这个范围。也许你应该用你的MomentJS问题提出一个新问题。我想更多的人可以帮助你。谢谢你的帮助。如果其他人觉得它有用,这里有一段代码介绍它是如何工作的。您必须访问矩对象的_d属性。还有更多,但我已经越过了那座桥。$'calendar'.fullCalendar'incrementDate',moment.duration7',days';var j=$'calendar'.fullCalendar'getDate';var ja=j._dvar k=momentja.formatYYYY-MM-DD;$'calendar'.fullCalendar'select',k;$'this'.css'background-color','bce8f1';$'this'.addClass fc高亮显示;打破
$('#calendar').fullCalendar('incrementDate', moment.duration(7, 'days'));