Question

我的完整日历使用ajax正确显示数据。所以我想更改上一次按钮点击的数据。但按钮单击功能不起作用，如何将数据作为参数传递给上一个和下一个按钮单击

<script src="../assets/global/plugins/fullcalendar/lib/moment.min.js"></script>
<script src="../assets/global/plugins/fullcalendar/lib/jquery.min.js"></script>
<script src="../assets/global/plugins/fullcalendar/fullcalendar.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "POST",
contentType: "application/json",
data: "{}",
url: "attendance-full.aspx/GetEvents",
dataType: "json",
success: function (data) {
    $('div[id*=calendar1]').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        events: $.map(data.d, function (item, i) {
            var event = new Object();
            event.id = item.EventID;
            event.start = new Date(item.StartDate);
            event.title = item.EventName;
            return event;
        }), eventRender: function (event, eventElement) {
            if (event.ImageType) {
                if (eventElement.find('span.fc-event-time').length) {
                    eventElement.find('span.fc-event-time').before($(GetImage(event.ImageType)));
                } else {
                    eventElement.find('span.fc-event-title').before($(GetImage(event.ImageType)));
                }
            }
        },
    });
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
    debugger;
}
});
$('div[id*=calendar1]').show();
//below code not working 
$(".fc-prev-button span").click(function () {
alert("Hai");
})
});

我的控制台没有错误。

Answer 1

$(".fc-prev-button span").click(function () {在您的日历创建之前运行（因为您等待创建日历直到ajax运行，并且ajax是异步的）。因此，您的代码没有按钮将事件绑定到。

简单地移动

$(".fc-prev-button span").click(function () {
  alert("Hai");
});

结束你的ajax＆＃34;成功＆＃34;功能

N.B。我还建议你重新考虑如何获得你的活动。目前，您将所有事件提取到日历中，并且在获取事件之前无法显示日历。如果你的应用程序已经存在了很长时间，并且构建了很多历史事件，那么考虑一下当事件列表很长的几年之后会发生什么 - 它们需要很长时间才能加载它们，没有日历在屏幕上，除非你的情况不寻常，否则很可能没有人会从很久以前看到任何东西，所以加载它们是浪费时间。

FullCalendar实际上设计为以仅获取当前显示的视图和日期范围所需的事件的方式工作。因此，您获取所需的最低事件。如果用户将视图或日期更改为其他内容，则fullCalendar会从服务器请求更多事件，并向其发送所需的日期范围。这通常更有效率。

在你的情况下你可以重写它下面的代码片段。请记住，您还必须更改GetEvents服务器方法，以便按提供的日期过滤事件列表。我无法看到该代码，因此我无法确切地建议您需要做什么，但希望添加一些额外的参数并在数据库查询中添加一个子句来比较日期。

$(document).ready(function() {
  $('div[id*=calendar1]').show();

  $('div[id*=calendar1]').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    editable: true,
    events: function(start, end, timezone, callback) {
      $.ajax({
        type: "POST",
        contentType: "application/json",
        data: '{ "start": "' + start.format("YYYY-MM-DD") + ', "end": ' + end.format("YYYY-MM-DD") + '}',
        url: "attendance-full.aspx/GetEvents",
        dataType: "json",
        success: function(data) {
          var events = $.map(data.d, function(item, i) {
            var event = new Object();
            event.id = item.EventID;
            event.start = new Date(item.StartDate);
            event.title = item.EventName;
            return event;
          });

          callback(events);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          debugger;
        }
      });
    },
    eventRender: function(event, eventElement) {
      if (event.ImageType) {
        if (eventElement.find('span.fc-event-time').length) {
          eventElement.find('span.fc-event-time').before($(GetImage(event.ImageType)));
        } else {
          eventElement.find('span.fc-event-title').before($(GetImage(event.ImageType)));
        }
      }
    },
  });

  $(".fc-prev-button span").click(function() {
    alert("Hai");
  });
});

有关事件Feed功能的详细信息，请参阅https://fullcalendar.io/docs/event_data/events_function/。

完整日历按钮单击不起作用

1 个答案: