如何举办日历活动'一个ID,以便我可以在jquery中操作它?

时间:2015-11-06 05:33:00

标签: javascript jquery fullcalendar

我正在使用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');
})

1 个答案:

答案 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');
}
...

我希望有所帮助!