我该如何给出'日历事件'一个ID，以便我可以在jquery中操作它

How do I give a 'calendar event' an ID so that I can manipulate it in jquery?

本文关键字：我可以 操作 jquery 事件 一个 日历 ID      更新时间：2023-09-26

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

你非常接近！您不需要自己将任何元素与$(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');
}
...

我希望这能有所帮助！

相关文章：