我正在使用FullCalendar插件。我在日历上有活动。我也在右侧列出了列出事件的列表。
如何为fullcalendar事件提供ID? (比如css #id)。
我想点击活动,并根据活动将右侧列表滚动到特定列表项。
链接到插件 - http://fullcalendar.io/
链接到我的代码 - http://codepen.io/anon/pen/RWYEvK
$('#calendar').fullCalendar({
// put your options and callbacks here
height: 345,
events: [
{
start : '2015-11-12', // Year, Month, Day
color : '#00adef', // Label color
textColor : '#FFF', // Text color
category : '1',
//url : '#',
id : 123
},
{
title : '3:00pm Another Event', // Event Title
start : '2015-11-17', // Year, Month, Day
color : '#fc6264', // Label color
textColor : '#FFF', // Text color
category : '2'
},
{
title : '3:00pm Another Event', // Event Title
start : '2015-11-25', // Year, Month, Day
color : '#00a652', // Label color
textColor : '#FFF', // Text color
category : '3'
}
],
eventRender: function eventRender( event, element, view ) {
return ['all', event.category].indexOf($('#category-select').val()) >= 0
},
// Scroll-To function
eventClick: function(){
$(this).click(function() {
$('#event-list').animate({scrollTop: $("#li-1").offset().top}, 1000);
$('#li-1').addClass('hov');
});
}
});
// Class filtering
$('#category-select').on('change',function(){
$('#calendar').fullCalendar('rerenderEvents');
})
答案 0 :(得分:0)
你非常接近!您不需要自己使用$(this).click...
绑定任何元素。您拥有的eventClick
回调需要3个参数eventClick: function(calEvent, jsEvent, view) {
。你想要使用的是calEvent参数。因此,如果您的右侧列表元素具有指定的id,如#li-number
,并且您的jsEvent具有id属性,则可以根据jsEvent的id属性确定要选择的列表元素:
...
// Scroll-To function
eventClick: function(calEvent, jsEvent, view){
var listElementId = "#li-" + calEvent.id;
$('#event-list').animate({scrollTop: $(listElementId).offset().top}, 1000);
$(listElementId).addClass('hov');
}
...
我希望有所帮助!