CODEWITHSUNDEEP
jqueryhtmlfullcalendar
Umar Aftab
Umar Aftab

Reputation: 535

Full Calendar does not refresh unless prev/next button is clicked

I have been trying to get the calendar to show events based on the selection of the teacher, the events are stored in the database and they are displaying correctly.

ISSUE: It is regarding full calendar itself, the correct event loads for a selected teacher ONLY WHEN I CLICK the PREV/NEXT button. And these prev and next buttons are for changing the month or the week. IS there anyway to ESCAPE THIS ?

The select element in html which selects the teachers is as such:-

      <select id="teachermale" name="teachermale">
        <option selected disabled></option>
        <option value="Mohamed Adil">Mohamed Adil</option>
        <option value="Sherif Reda">Sherif Reda</option> 
        <option value="Mohamed Shahban">Mohamed Shahban</option> 
        <option value="Abdullah al Haiti">Abdullah al Haiti</option>
        <option value="Salah">Salah</option>
        <option value="Ahmed Nabil">Ahmed Nabil</option>  
        <option value="Abdul Tawab">Abdul Tawab</option>
        <option value="Mahmoud Mahmoud">Mahmoud Mahmoud</option>  
        <option value="Ahmed Ghanim">Ahmed Ghanim</option>
      </select>

And the full calendar is initiated as show below. I have left out the $(function part and pasted the part of code which loads the calendar events.

     $("#teachermale").on("change", function(){
        $("#calendar").fullCalendar("rerenderEvents");
      });

      var calendar = $('#calendar').fullCalendar({
       editable: true,
       header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
       },
      defaultView:'agendaWeek',
      timeFormat: 'h:mm',
      displayEventEnd :true,
      eventLimit: true,
      // events: 'events.php',
      events: function( start, end, timezone, callback ) {

         $.ajax({
                  url: 'events.php',
                  dataType: 'json',
                  data: {
                      start: start.unix(),
                      end: end.unix(),
                      teacher: $('#teachermale').val(),
                  },
                  success: function(doc) {
                    console.log(doc);
                      var events = [];
                      $(doc).find('event').each(function() {
                          events.push({
                              title: $(this).attr('title'),
                              start: $(this).attr('start')
                          });
                      });

                  callback(doc);

                  }
            });



      }

Upvotes: 0

Views: 4425

Answers (2)

smcd
smcd

Reputation: 3265

Change

$("#teachermale").on("change", function(){
    $("#calendar").fullCalendar("rerenderEvents");
});

to

$("#teachermale").on("change", function(){
    $("#calendar").fullCalendar("refetchEvents");
});

Upvotes: 3

Ryan89
Ryan89

Reputation: 1216

Try moving your rerenderEvents call to after your ajax success function.

$.ajax({
      url: 'events.php',
      dataType: 'json',
      data: {
          start: start.unix(),
          end: end.unix(),
          teacher: $('#teachermale').val(),
      },
      success: function(doc) {
          console.log(doc);
          var events = [];
          $(doc).find('event').each(function() {
              events.push({
              title: $(this).attr('title'),
              start: $(this).attr('start')
          });
          //add rerender to after success 
          $("#calendar").fullCalendar("rerenderEvents");
      });
      callback(doc);
      }
});

Upvotes: 1

Related Questions