Question

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

enter image description here

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

由于

Answer 1

试试这个，

    <script>
            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: 'agendaDay,agendaWeek,month'
            },
            defaultView: 'agendaDay',
            editable: false,
            droppable: false,
            slotDuration: '00:15:00',
            allDaySlot: false,
            views: {
                    day: {
                        groupByDateAndResource: true
                    }
            },
            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: ['resource1', 'resource2', 'resource3']
              },
              {
                  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);
            }
        });
    </script>

Answer 2

请用下面的代码替换select函数，您可以从资源参数器中获取资源ID：

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

Answer 3

这将有助于获取事件的资源ID：

info.event._def.resourceIds

Answer 4

如果要在eventClick上使用resourceId，则应尝试

eventClick: function(payload) {
                const r = payload.getResources()
                const resourceId = r[0].id
                console.log(payload);
            }

现在，在resourceId中，您具有资源的ID。对我来说很好！

Fullcalendar在事件点击

4 个答案: