Question

我有以下js：

    !function ($) {

  $(function(){

    // fullcalendar
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    var addDragEvent = function($this){
      // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
      // it doesn't need to have a start or end
      var eventObject = {
        title: $.trim($this.text()), // use the element's text as the event title
        className: $this.attr('class').replace('label','')
      };

      // store the Event Object in the DOM element so we can get to it later
      $this.data('eventObject', eventObject);

      // make the event draggable using jQuery UI
      $this.draggable({
        zIndex: 999,
        revert: true,      // will cause the event to go back to its
        revertDuration: 0  //  original position after the drag
      });
    };
    $('.calendar').each(function() {
      $(this).fullCalendar({
        header: {
          left: 'prev,next',
          center: 'title',
          right: 'today,month,agendaWeek,agendaDay'
        },
        editable: true,
        droppable: true, // this allows things to be dropped onto the calendar !!!
        drop: function(date, allDay) { // this function is called when something is dropped

            // retrieve the dropped element's stored Event Object
            var originalEventObject = $(this).data('eventObject');

            // we need to copy it, so that multiple events don't have a reference to the same object
            var copiedEventObject = $.extend({}, originalEventObject);

            // assign it the date that was reported
            copiedEventObject.start = date;
            copiedEventObject.allDay = allDay;

            // render the event on the calendar
            // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
            $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

            // is the "remove after drop" checkbox checked?
            if ($('#drop-remove').is(':checked')) {
              // if so, remove the element from the "Draggable Events" list
              $(this).remove();
            }

          }
        ,
        events: [
        ],
          eventClick: function(event) {
              alert('win');
          }
      });
    });

      getEvents();

  });
}(window.jQuery);

function getEvents()
{

    $.ajax({
        type: 'POST',
        url: '/Calendar/findEvents',
        dataType: 'json',
        data: {
            request: 'ajax'
        },
        success: function (data)
        {

            if(data.length > 0)
            {
                for (index = 0; index < data.length; ++index)
                {
                    var d = new Date(data[index]['end']);
                    if(data[index]['is_online'] === 1)
                    {
                        var myevent = {title: 'Forløb: '+data[index]['academy_name'].toUpperCase()+' \n   Modul: '+data[index]['module_name']+ '\n Type: E-learning',start: new Date(d.getFullYear(), d.getMonth(), d.getDate())};
                    }
                    else
                    {
                        var myevent = {title: 'Forløb: '+data[index]['academy_name'].toUpperCase()+' \n   Modul: '+data[index]['module_name']+ '\n Type: Kursus'+ '\n Lokation: '+data[index]['location']+'\n Underviser: '+data[index]['mentor'],start: new Date(d.getFullYear(), d.getMonth(), d.getDate())};

                    }
                    $('.calendar').fullCalendar( 'renderEvent', myevent, true);
                }
            }
        }
    });
}

正如您所看到的，当您加载日历时，我开始将事件（通过ajax）加载到日历中。

现在我想做的只是在每个元素上添加一个eventListner。

在文档中，它包含以下内容：

    eventClick: function(event) {
    if (event.url) {
        window.open(event.url);
        return false;
    }
}

我只尝试了一个简单的警报（正如您在代码中看到的那样：

    eventClick: function(event) {
     alert('win');
}

但是当我点击我的项目时没有任何反应。

谁能告诉我我错过了什么？

Answer 1

我知道您正在通过AJAX加载事件，但是您是否尝试在日历实例化中将一组对象（事件）返回到events数组？现在您传递的是一个空数组，因此该插件不会将任何元素指定为“事件”，因此不会分配任何点击处理程序。

 events: [  getEvents()

 ],

 eventClick: function(event) {
    alert('win');
    }
});

然后在你的getEvents()函数调用中，而不是渲染事件，你应该只返回事件对象。

Answer 2

使用ajax调用加载事件的建议方法+对您收到的数据进行一些操作是将您的函数用作事件源（link to the doc）：

$(this).fullCalendar({ ...
    events: function(start, end, tz, callback) {
        $.ajax({
            type: 'POST',
            url: '/Calendar/findEvents',
            dataType: 'json',
            data: {
                request: 'ajax'
            },
            success: function (data) {
                // build an array of event objects with the data
                var events = ...

                // use the "callback" argument to load them in the grid :
                callback(events);
            }
        });
    },
    ...
 });

注意：函数的签名取决于您使用的fullcalendar的版本。版本2.0之前的版本没有tz参数（再次检查文档）。

Answer 3

FullCalendar正在处理没有事件的侦听器。在日历初始化后加载ajax。您可以保留当前代码并在eventRender上添加侦听器。

data.media

我可能建议按照其他答案中的建议加载事件，但这应该有效。

Fullcalendar js eventClick动态添加的事件

3 个答案: