Skip to main content
 首页 » 编程设计

jquery之Fullcalendar 在事件点击时获取资源 ID

2026年09月08日2lautakyan007

我正在使用 Fullcalendar。一切工作正常,但在事件单击时无法获取 Resourceid。这是我的代码:

        var date = new Date(); 
        var d = date.getDate() + 1; 
        var m = date.getMonth(); 
        var y = date.getFullYear(); 
 
        $('#calendar').fullCalendar({ 
            theme: true, 
            header: { 
                left: 'prev,next today', 
                center: 'title', 
                right: 'month,agendaWeek,resourceDay' 
            }, 
            defaultView: 'resourceDay', 
            editable: false, 
            droppable: false, 
            slotDuration: '00:15:00', 
            allDaySlot: false, 
            resources: [ 
              { 
                  'id': 'resource1', 
                  'name': 'Resource 1' 
              }, 
              { 
                  'id': 'resource2', 
                  'name': 'Resource 2' 
              }, 
              { 
                  'id': 'resource3', 
                  'name': 'Resource 3' 
              } 
            ], 
            resourceFilter: function(resource) { 
                var active = $("input").map(function() { 
                    return this.checked ? this.name : null; 
                }).get(); 
 
                return $.inArray(resource.id, active) > -1; 
            }, 
            events: [ 
              { 
                  title: 'R1-R2: Lunch 12.15-14.45', 
                  start: new Date(y, m, d, 12, 15), 
                  end: new Date(y, m, d, 14, 45), 
                  allDay: false, 
                  resources: ['resource1', 'resource2', 'resource3'] 
              }, 
              { 
                  title: 'R1: All day', 
                  start: new Date(y, m, d, 10, 30), 
                  end: new Date(y, m, d, 11, 0), 
                  allDay: false, 
                  resources: ['resource1', 'resource2', 'resource3'] 
              }, 
              { 
                  title: 'R2: Meeting 11.00', 
                  start: new Date(y, m, d, 11, 0), 
                  allDay: false, 
                  resources: 'resource2' 
              }, 
              { 
                  title: 'R1/R2: Lunch 12-14', 
                  start: new Date(y, m, d, 12, 0), 
                  end: new Date(y, m, d, 14, 0), 
                  allDay: false, 
                  resources: ['resource1', 'resource2', 'resource3'] 
              }, 
              { 
                  id: 777, 
                  title: 'R1: Lunch', 
                  start: new Date(y, m, d, 12, 0), 
                  end: new Date(y, m, d, 14, 0), 
                  allDay: false, 
                  resources: ['resource1', 'resource2', 'resource3'] 
              }, 
              { 
                  title: 'R3: Breakfast', 
                  start: new Date(y, m, d, 8, 0), 
                  end: new Date(y, m, d, 8, 30), 
                  allDay: false, 
                  resources: ['resource1', 'resource2', 'resource3'] 
              }, 
              { 
                  id: 999, 
                  title: 'Repeating Event', 
                  start: new Date(y, m, d - 3, 16, 0), 
                  allDay: false, 
                  resources: ['resource1', 'resource2', 'resource3'] 
              }, 
              { 
                  id: 999, 
                  title: 'Repeating Event', 
                  start: new Date(y, m, d + 4, 16, 0), 
                  allDay: false, 
                  resources: ['resource1', 'resource2', 'resource3'] 
              } 
            ],                 
            // the ev.data is the resource column clicked upon 
            selectable: false, 
            selectHelper: true, 
            select: function(start, end, ev) { 
                console.log(start); 
                console.log(end); 
                console.log(ev.data); // resources 
            }, 
            eventClick: function(event) { 
                console.log(event); 
            }, 
            eventDrop: function(event, delta, revertFunc) { 
                console.log(event); 
            } 
        }); 

根据给定的图像,如果我单击第一列“资源 1”事件 [10:30 - 11:00 R1:全天],它应该在 EventClick 方法上获取该事件的 ResourceID“resource1”。

谢谢

请您参考如下方法:

请将您的select函数替换为以下代码,您可以从资源参数中获取资源ID:

select: function(start, end, jsEvent, view, resource) { 
      console.log( 
        'select', 
        start.format(), 
        end.format(), 
        resource ? resource.id : '(no resource)' 
      ); 
    },