php - Full Calendar double events if i change to month -
i have full calendar script default view on agendaweek. reason when change month calls get-events again , don't know why, doubles events. here script. don't see in cod calling calendar again if change view. when submit form store events in database call events again see them on calendar without refreshing , if press on month after calls get-events again, causing double events. how can stop getting events again when change month view?
<script> $( "body" ).on('change','#trotineta',function() { var trotineta=$( "#trotineta" ).val(); var url='php/get-events.php?trotineta='+ trotineta; $('#calendar').fullcalendar( { defaultview: 'agendaweek', header: { left: 'prev,next today', center: 'title', right: 'month,agendaweek,agendaday' }, defaultdate: new date(), selectable: true, selecthelper: true, selectoverlap: false, select: function(start, end, view) { var vedere=$('#calendar').fullcalendar( 'getview' ); if(vedere.name=='agendaday' || vedere.name=='agendaweek') { $('#basicmodal').modal('show'); } $('#plecare').text(moment(start).format("dd-mm-yyyy hh:mm")); $('#retur').text(moment(end).format("dd-mm-yyyy hh:mm")); $('#start_date').val(moment(start).format("y-mm-dd hh:mm")); $('#end_date').val(moment(end).format("y-mm-dd hh:mm")); }, editable: false, eventstarteditable: false, eventlimit: true, // allow "more" link when many events dayclick: function(date, jsevent, view) { //alert('clicked on: ' + date.format()); //alert('coordinates: ' + jsevent.pagex + ',' + jsevent.pagey); //alert('current view: ' + view.name); if (view.name != 'month') return; if (view.name == 'month') { $('#calendar').fullcalendar('changeview', 'agendaday'); $('#calendar').fullcalendar('gotodate', date); } }, eventrender: function(event, element) { element.find('.fc-title').attr("data-id",event.id); }, timeformat: 'h:mm' , axisformat: 'h:mm', loading: function(bool) { $('#loading').toggle(bool); } }); $("#calendar").fullcalendar('removeevents'); $("#calendar").fullcalendar('addeventsource', url); }); </script> <script> $("body").on("submit","form#confirm", function(e){ e.preventdefault(); var trotineta=$( "#trotineta" ).val(); var url_event='php/get-events.php?trotineta='+ trotineta; $.ajax({ type: "post", url: "app/add_rezervare.php?id_trotineta=" + trotineta, data: $("form#confirm").serialize(), success: function(data){ $("#calendar").fullcalendar('removeevents'); $("#calendar").fullcalendar('addeventsource', url_event); $('#basicmodal').modal('hide'); } }); return false; }); </script>
you're going wrong way. there's no need keep adding/removing event sources, , there's no need keep re-initialising calendar on every "change" event. it's inefficient, , root of problem.
your main flaw these lines:
$("#calendar").fullcalendar('removeevents'); $("#calendar").fullcalendar('addeventsource', url); these methods not opposites.
removeevents removes events calendar, not remove source of events (i.e. url fullcalendar keeps record of, know fetch them again in future). addeventsource adds url list of urls fullcalendar stores. when fetches events, fetches events stored urls. every time run addeventsource, add source of events. however, discussed above, never removing them, keep building up.
as add 2 identical urls 2 different event sources, start see duplicate events, because there 2 eventsources listed in fullcalendar same url.
you said "for reason when change month calls get-events again , don't know why". default behaviour. fullcalendar tries efficient , fetch events server needs - i.e. events current view. sends 2 date parameters "start" , "end" server , expects server read these , use them filter list of events returns. if view or date range changes, run new request server different date parameters, fetch events date range (unless has cached them earlier request).
this more efficient, because there's chance user might never change view, , if have many years worth of events, take long time download in 1 go, , never looked @ user.
anyway, there's no need make code complicated have. can use "events-as-a-function" feature mean need add 1 event source, when calendar first created, , use pass changes in trotineta value server when re-fetching events. when value of trotineta changes, tell fullcalendar refetch events using new value. fullcalendar take care of rest. see https://fullcalendar.io/docs/event_data/events_function/.
here's example:
$(function() { $('#calendar').fullcalendar({ defaultview: 'agendaweek', header: { left: 'prev,next today', center: 'title', right: 'month,agendaweek,agendaday' }, defaultdate: new date(), selectable: true, selecthelper: true, selectoverlap: false, select: function(start, end, view) { var vedere = $('#calendar').fullcalendar('getview'); if (vedere.name == 'agendaday' || vedere.name == 'agendaweek') { $('#basicmodal').modal('show'); } $('#plecare').text(moment(start).format("dd-mm-yyyy hh:mm")); $('#retur').text(moment(end).format("dd-mm-yyyy hh:mm")); $('#start_date').val(moment(start).format("y-mm-dd hh:mm")); $('#end_date').val(moment(end).format("y-mm-dd hh:mm")); }, editable: false, eventstarteditable: false, eventlimit: true, // allow "more" link when many events dayclick: function(date, jsevent, view) { //alert('clicked on: ' + date.format()); //alert('coordinates: ' + jsevent.pagex + ',' + jsevent.pagey); //alert('current view: ' + view.name); if (view.name != 'month') return; if (view.name == 'month') { $('#calendar').fullcalendar('changeview', 'agendaday'); $('#calendar').fullcalendar('gotodate', date); } }, eventrender: function(event, element) { element.find('.fc-title').attr("data-id", event.id); }, timeformat: 'h:mm', axisformat: 'h:mm', loading: function(bool) { $('#loading').toggle(bool); }, events: function(start, end, timezone, callback) { //events-as-a-function $.ajax({ type: "get", url: 'php/get-events.php', datatype: "json", data: { "trotineta": $("#trotineta").val(), //dynamically gets current value of trotineta each time request made "start": start.format("yyyy-mm-dd"), //pass start , end dates server allow filtering date "end": end.format("yyyy-mm-dd") }, success: function(data) { callback(data); //return event data fullcalendar } }); } }); $("body").on('change', '#trotineta', function() { $("#calendar").fullcalendar("refetchevents"); //tell fullcalendar refresh events. grab new value of trotineta automatically (see events function) }); $("body").on("submit", "form#confirm", function(e) { e.preventdefault(); var trotineta = $("#trotineta").val(); $.ajax({ type: "post", url: "app/add_rezervare.php?id_trotineta=" + trotineta, data: $("form#confirm").serialize(), success: function(data) { $("#calendar").fullcalendar('refetchevents'); //again tell fullcalendar refresh. take care of rest. $('#basicmodal').modal('hide'); } }); }); });
Comments
Post a Comment