Vollständige Kalenderschaltfläche funktioniert nicht

Question

Mein vollständiger Kalender zeigt Daten korrekt mit AJAX an. Also möchte ich die Daten beim vorherigen Klick ändern. Aber die Schaltfläche Klickfunktion nicht funktioniert, und wie kann ich die Daten als Parameter auf vorherige und nächste Taste passieren klicken

<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"); 
}) 
}); 

Meine Konsole fehlerfrei ist.

Answer 1

$(".fc-prev-button span").click(function() { wird ausgeführt, bevor der Kalender erstellt wird (weil Sie mit dem Erstellen des Kalenders warten, bis AJAX ausgeführt wurde und AJAX asynchron ist). Daher gibt es keine Schaltfläche für den Code, an den das Ereignis gebunden werden soll.

Bewegen Sie einfach

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

bis zum Ende Ihrer Ajax "Erfolg" Funktion.

---

N.B. Ich würde auch vorschlagen, dass Sie überdenken, wie Sie Ihre Veranstaltungen bekommen. Derzeit rufen Sie alle Ereignisse in den Kalender ab, und der Kalender kann nicht angezeigt werden, bis die Ereignisse abgerufen werden. Wenn Ihre Anwendung für eine lange Zeit live ist und viele historische Ereignisse aufbaut, überlegen Sie, was nach ein paar Jahren mit einer langen Liste von Ereignissen geschehen wird - es wird lange dauern, sie alle ohne Kalender zu laden auf dem Bildschirm, und wenn Ihre Situation nicht ungewöhnlich ist, dann wird vermutlich niemand mehr etwas von vor langer Zeit betrachten, so dass es Zeitverschwendung ist, sie zu laden.

FullCalendar wurde so entwickelt, dass nur die Ereignisse abgerufen werden, die für den aktuell angezeigten Ansichts- und Datumsbereich erforderlich sind. So holen Sie die minimal erforderlichen Ereignisse. Wenn der Benutzer die Ansicht oder das Datum in eine andere Position ändert, fordert fullCalendar weitere Ereignisse vom Server an und sendet ihm den erforderlichen Datumsbereich. Dies ist normalerweise viel effizienter.

In Ihrem Fall könnten Sie etwas wie dieses Schnipsel unten schreiben. Denken Sie daran, dass Sie auch die Servermethode GetEvents ändern müssen, damit die Liste der Ereignisse nach den angegebenen Daten gefiltert wird. Ich kann diesen Code nicht sehen, daher kann ich nicht genau sagen, was Sie tun müssten, aber hoffentlich wird es ziemlich einfach sein, ein paar zusätzliche Parameter hinzuzufügen und eine Klausel zu Ihrer Datenbankabfrage hinzuzufügen, um die Daten zu vergleichen.

$(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"); 
    }); 
}); 

Weitere Details zur Event-Feed-Funktion finden Sie unter https://fullcalendar.io/docs/event_data/events_function/.