Q:

Full Calendar button click not working

My full Calendar show data correctly using ajax . so i want to change the data on previous button click. But the button click function not working and how can i pass the data as parameter on previous and next button click 
<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");
})
});

My console is error free .

A:

$(".fc-prev-button span").click(function () { runs before your calendar is created (because you wait to create the calendar until ajax has run, and ajax is asynchronous). Therefore there is no button for your code to bind the event to.
Simply move
$(".fc-prev-button span").click(function () {
  alert("Hai");
});

to the end of your ajax "success" function.

N.B. I would also suggest that you re-consider how you're getting your events. Currently you fetch all events into the calendar, and the calendar cannot be displayed until the events are fetched. If your application is live for a long time, and builds up a lot of historical events, consider what will happen after a few years when there is a long list of events - it will take a long time to load them all, with no calendar on screen, and unless your situation is unusual, then probably no-one will look at anything from a long time ago, so it's a waste of time to load them.
FullCalendar is actually designed to work in a way that fetches only the events that are needed for the view and date range currently being displayed. So you fetch the minimum required events. If the user changes the view or date to something else, fullCalendar requests more events from the server, and sends it the date range required. This is usually much more efficient.
In your case you could re-write it something like this snippet below. Bear in mind you'd also have to change your GetEvents server method so that it filters the list of events by the dates supplied. I can't see that code so I can't advise exactly what you would need to do, but hopefully it will be fairly simple to add a couple of extra parameters and add a clause to your database query to compare the dates.
$(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");
  });
});

See https://fullcalendar.io/docs/event_data/events_function/ for more details of the event feed function.

