[solved] How to correctly change the end date

Scheduler Javascript
#1

Hi,
I have to programmatically set the end date of the events.

To do this, I try to hide the end section in lightbox using this code:

scheduler.attachEvent("onLightbox", function(id){
   var ev = scheduler.getEvent(id);
   var sections = scheduler.config.lightbox.sections;
   for(var i =0; i < sections.length; i++){
      if(sections[i].name == "Orario"){
      		var time = scheduler.formSection("Orario"); 
    		var selectors = time.control; 
    		for (var z = 4; z < selectors.length; z++) {
        		selectors[z].style.display = "none"; 
    		} 
      }
  }
});

With “Orario”, that is the “time”

scheduler.config.lightbox.sections = [
    {name: "Orario", height: 30, width: 30, type: "time", map_to: "auto"},
    //Other fields.....
   //.......
];

After, in db connector I create my function to calculate end_date and attach this to event “beforeInsert” and “beforeUpdate”.
As you can see, this function take another field (“tratts”) from the event, and use it to get “timeSum” from a query to another table.

function calcOre($data){
    global $calendar;
    $tratts = $data->get_value("tratts");
    $connSum = mysqli_connect("localhost", "root", "", "test");
    $connSum->set_charset("utf8");
    $qSum = "SELECT SUM( TIME_TO_SEC( `durata` ) ) AS timeSum FROM trattamenti WHERE id IN (".$tratts.")";
    $resSum = mysqli_query($connSum, $qSum);
    $durata = 0;
    if (!$resSum)
         echo mysqli_error($connSum);
     while ($row = mysqli_fetch_assoc($resSum)) {
         $durata = $row['timeSum'];
    }
    $inizio = $data->get_value("start_date");    
    $dtInizio = new DateTime($inizio);
    $fine = $dtInizio->add(new DateInterval('PT'.intval($durata).'S'));   
    $data->set_value("end_date",$fine->format('Y-m-d H:i'));
}
$calendar->event->attach("beforeInsert", "calcOre");
$calendar->event->attach("beforeUpdate", "calcOre");

Everything works, but unfortunately after saving,
the newly created appointment does not display correctly in the calendar and keeps the “end date” with the default value + 5min.
I have to manually reload the page to view the appointment correctly, with the end_date that saved into database.

How can I make this setting correctly?
Maybe there is a way to reload the scheduler without losing the “pagination” (for example if I’m on next month, I don’t want reloading to bring me back to today).

Thanks everyone in advance for your help

#2

I try a little “up” for my thread.
Thanks everyone who can help me

#3

Hello @Morkar88 ,

Yes, you can just redraw the scheduler with the updateView method:
https://docs.dhtmlx.com/scheduler/api__scheduler_updateview.html

Or with the render method:
https://docs.dhtmlx.com/scheduler/api__scheduler_render.html

Basically, your issue occurs, because the event on the client-side, saves with the default date in time controls, and if you are able to get the correct date before sending the event to the server, you can manually set it from the onBeforeLightbox event:


scheduler.attachEvent("onBeforeLightbox", function (id){
  var ev = scheduler.getEvent(id);
  ev.start_date = new Date(2017, 1, 1, 12, 22, 44); // date from the server
  ev.end_date = new Date(2018, 1, 1, 12, 22, 44); // date from the server
  return true;
});

And it won’t be necessary even to redraw the scheduler.

#4

Hello @Siarhei ,
thanks for your answer.

I try to call both updateView and render, in event “onFullSync” of DataProcessor

dp.attachEvent("onFullSync", function(){ 
	//scheduler.updateView();
	scheduler.render();
});

but unfortunally doesn’t work.

So, I try to update end date on client-side, using event “onEventSave”. I can’t use “onBeforeLightbox” becouse the end date is calculated according to an editable combobox in the lightbox ( in my code is “ev.tratts” ).

scheduler.attachEvent("onEventSave",function(id,ev){
	//My ajax call		
	$.ajax({
        url: 'agendaCalcOra.php',
        method: "GET",
        data: { tratts: ev.tratts, dini: ev.start_date},
        dataType: 'JSON',
        success: function(response){
            var len = response.length;
            for(var i=0; i<len; i++){
                var dfine = response[i].dfine;
				ev.end_date = new Date(dfine);
            }
        }
    });	                        
	return true;
});

I see the ev.end_date calculated correctly, but both on the screen and on database, the event remains with a duration of 5 minutes.

What’s wrong? Have to use another event?
Have to set ev.end_date in another way?

Thanks for your help

#5

Hello @Morkar88 ,

In the case of the onEventSave, the issue occurs, because this event fires before the ajax call are completed, it works so:

click "Save" button on the lightbox => ajax call sent => event fire ends with default start/end_date which are used to send to the backend/client => the ajax call ends(and has no effect)

Probably you can try to manually update event from the ajax call, and additionally rerender the scheduler, like follows:

scheduler.attachEvent("onEventSave",function(id,ev){
  //My ajax call		
  $.ajax({
    url: 'agendaCalcOra.php',
    method: "GET",
    data: { tratts: ev.tratts, dini: ev.start_date},
    dataType: 'JSON',
    success: function(response){
      var len = response.length;
      for(var i=0; i<len; i++){
        var dfine = response[i].dfine;
        ev.end_date = new Date(define);

      }
      scheduler.getEvent(id).start_date = new Date(define); 
      scheduler.updateEvent(id); 
      scheduler.updateView();
    }
  });	                        
  return true;
});

Here is a demo example(just open the lightbox of the event and click the “save” button):
http://snippet.dhtmlx.com/5/12399a27c

#6

Thanks! With updateEvent + updateView now works!