Editing occurence of recurring event

Hi,

can you ceck why everytime i edit single occurence of a recurring event it create new event instead of updating the single occurence.

Here’s the code how i save the event, can you check please:

scheduler.attachEvent("onEventSave", function(id,e,is_new){
	var ev = scheduler.getEvent(id);
    	
	var schedData = {},
		starttime = String(e["start_date"]),
		endtime = String(e["end_date"]);

	//recurring event
	if(typeof e["_end_date"] !== 'undefined'){
		endtime = String(e["_end_date"]);
	}

	schedData["eventId"] = id;
	schedData["scheduleTitle"] = e["text"];
	schedData["userId"] = e["section_id"];
	schedData["startDate"] = Date.parse(starttime.substring(starttime.lastIndexOf(" ("),0)).getTime()/1000;
	schedData["endDate"] = Date.parse(endtime.substring(endtime.lastIndexOf(" ("),0)).getTime()/1000;
	schedData["recurringPattern"] = e["rec_pattern"];
	schedData["recurringType"] = e["rec_type"];
	schedData["eventLength"] = 60*60*2;
	schedData["eventType"] = e["schedtype"];
	schedData["workOrderId"] = e["workorders"];
    	
	if (!e.text) {
      alert("Event title must not be empty.");
      return false;
	}else if(!e["schedtype"]){
		alert("Schedule type must not be empty.");
      return false;
	}else{
	
  	if(is_new == null){
  		
  		if(ev["event_pid"] != ''){

  			//editing single occurence
  			schedData["eventPid"] = parseInt(ev["event_id"]);
  			$scope.postUrl = 'schedule/add';
  		
  		}else{

  			//updating the normal event
  			schedData["id"] = parseInt(ev["event_id"]);
    		        schedData["version"] = parseInt(ev["version"]);
    		        $scope.postUrl = 'schedule/update';
  		}
  		
  	}
  	
  	$http.post($scope.postUrl, schedData).success(function(data) {
  		location.reload(true);
    }).error(function(data) {
     	       alert(data.message);
    });
  }
	return true;
});

Also I attached the screenshot of output from month view and my database table.

Thanks in advance.




Hi,
that’s right, when you edit or delete an occurrence a record must be created for the exception from the main series. For this exception the “event_pid” indicate its parent, and the “event_length” indicate its “normal” place in the series. By using “event_length” scheduler understand which occurrence was changed. For the exception is should contain the time stamp is measured in seconds from UNIX epoch:
docs.dhtmlx.com/scheduler/recurr … ntheseries
If not - it can be parsed as the usual event, so you see both events for this day.

Hi,

Thank you for the reply. So in my example above, what should be the value of event_length if I both edited the start date and end date? which is:

1399222800 - start date
1399226400 - end date

Thanks.

I don’t know what’s wrong with this. Still duplicating when try to edit single occurence on my recurring event. Please check my screenshot of database table.

Scenario:

I’ve created recurring event in weekly basis with end date of new Date(2900,1,1). I edit single occurence marked date of May 19, 2014 8:00pm to May 19, 2014 8:50pm. After refresh the scheduler it creates a copy of a usual event. I followed your instruction but still the same. Please help. I’m stocked here.


Hello,
event_length must point to the start date of the original occurence.
If after loading event is displayed twice (original and modified occurences) it usually means that event_length timestamp does not match the time of the original event.
This checking is done on the client, so it may be dependend to timezone settings that is set on the client-system.
Try to convert timestamp to date in a browser console, and see what date it matches - new Date(event.event_length * 1000)

Described problem may occur if your client and server are located in different timezones.
You may try enabling one these options, so client would expect utc timestamps:
docs.dhtmlx.com/scheduler/api__s … onfig.html
docs.dhtmlx.com/scheduler/api__s … onfig.html

Thanks for the reply, but still i have no luck to resolve my problem.

So far here’s how i fetch the event data from my database. I’m using angularjs and i’m not using any connectors of yours.

var recur_data=[], techs=[];
              		  
$http.post($scope.getUsers, param).success(function(data) {
  $.each (data, function (usr) {
    var user_data = {
    	key:data[usr].id,
    	label:data[usr].profile.firstname+" "+data[usr].profile.lastname
    };

    var userAddress = data[usr].address.addressLine1+" "+data[usr].address.city+" "+data[usr].address.state+", "+data[usr].address.country+" "+data[usr].address.zipcode;

    if(typeof data[usr].userSchedule !== 'undefined'){
    	$.each (data[usr].userSchedule, function (sched) {
    		
        var recur_type = "", recur_pattern = "";
    		
        if(data[usr].userSchedule[sched].recurringType != null){
    				recur_type = data[usr].userSchedule[sched].recurringType;
    		}
    		
    		if(data[usr].userSchedule[sched].recurringPattern != null){
    			recur_pattern = data[usr].userSchedule[sched].recurringPattern;
    		}
    		var sched_data = {
    				event_id: data[usr].userSchedule[sched].id,
			    	start_date: timeConverter(data[usr].userSchedule[sched].startDate),
  			    end_date: timeConverter(data[usr].userSchedule[sched].endDate),
  			    text:data[usr].userSchedule[sched].scheduleTitle,
  			    rec_type:recur_type,
  			    rec_pattern:recur_pattern,
  			    event_length:data[usr].userSchedule[sched].eventLength,
  			    version:data[usr].userSchedule[sched].version,
  			    schedtype:data[usr].userSchedule[sched].eventType,
  			    workorders:data[usr].userSchedule[sched].workOrderId,
  			    section_id:data[usr].userSchedule[sched].userId,
  			    event_location:userAddress,
  			    event_pid:data[usr].userSchedule[sched].eventPid
        };
    			
    		recur_data.push(sched_data);
    	});

    }
    techs.push(user_data);
  });

  for (var key in recur_data) {
    if (recur_data.hasOwnProperty(key)) {
        var val = recur_data[key], static_end_date;
        
        console.log("=== "+val.rec_type);
        if(typeof val.rec_type !== 'undefined'){
        	static_end_date = new Date(2900,1,1,0,0);
        }else{
        	static_end_date = val.end_date;
        }

        var lent = val.event_length;

        scheduler.addEvent({
           event_id:val.event_id,
           start_date: val.start_date,
           end_date: val.end_date,
           text: val.text,
           rec_type: val.rec_type,
           rec_pattern: val.rec_pattern,
           event_length: lent, //val.event_length,
           version:val.version,
           eventType:val.schedtype,
           workorders:val.workorders,
           section_id:val.section_id,
           event_location:val.event_location,
           event_pid:val.event_pid
        });
    }
  }
});
//1400130000 event_length from my database
new Date(1400130000*1000) = Date {Thu May 15, 2014 13:00:00:00 GMT +0800 (Taipei Standard Time)} //result is the original event time which is correct

Also attached my screenshots. Please help. Thanks.


Hi,
please be sure your have a correct event_pid (parent ID) for changed occurrence.
Could attach a working local sample where we can repeat the issue?

Yes, it has event_pid.

I have created a sample that has a similar issue, this is based on your demo files.

test_rec.php is a very simple php file that connects to database and gets the records from events_rec table (NOTE: i did not use any of your connectors).

Also take note that my original code are base on java, I just created this sample php to show how the issue comes up.
sched.rar (130 KB)

Hi,
thanks for the demo. Now it’s more clear.
The “id” property of the event is one of the mandatory properties
docs.dhtmlx.com/scheduler/loadin … properties.

You have only “event_id” that scheduler does not understand. So it creates a temporary ID (using scheduler.uid() method). And the parent event has no “2” ID, but something like “1400491718578”. The changed occurrence can’t “find” its parent. So you need to load “event_id” field as “id” property of the event.

$ress = array(
	'id' => $row['event_id'],
...

And there is also an issue with the timezone. In our locale the timestamp looks:

new Date(1400119200 *1000) Thu May 15 2014 05:00:00 GMT+0300 (FET)
Not 10 AM of the parent series.

Thank you, it works now on my sample.

on my original code
i get this error:

TypeError: ev is undefined if (ev.rec_type && this._lightbox_id)

and also not displaying the modified event still the original event.

this is how i fetch the data:

$http.post($scope.getUsers, param).success(function(data) {
     $.each (data, function (usr) {
         var user_data = {
                 key:data[usr].id,
          	label:data[usr].profile.firstname+" "+data[usr].profile.lastname
         };
        	    			
        var userAddress = data[usr].address.addressLine1+" "+data[usr].address.city+" "+data[usr].address.state+", "+data[usr].address.country+" "+data[usr].address.zipcode;

        if(typeof data[usr].userSchedule !== 'undefined'){
              $.each (data[usr].userSchedule, function (sched) {
                     var recur_type = "", recur_pattern = "";
        	    if(data[usr].userSchedule[sched].recurringType != null){
            	    	recur_type = data[usr].userSchedule[sched].recurringType;
            	    }
        	    					
        	    if(data[usr].userSchedule[sched].recurringPattern != null){
        	    	recur_pattern = data[usr].userSchedule[sched].recurringPattern;
        	    }
        	    var sched_data = {
        	        id:data[usr].userSchedule[sched].id,
                	event_id: data[usr].userSchedule[sched].id,
                      	start_date: timeConverter(data[usr].userSchedule[sched].startDate),
              	        end_date: timeConverter(data[usr].userSchedule[sched].endDate),
              	        text:data[usr].userSchedule[sched].scheduleTitle,
              	        rec_type:recur_type,
              	        rec_pattern:recur_pattern,
              	        event_length:data[usr].userSchedule[sched].eventLength, //60*60*2 = 2hours
              	        version:data[usr].userSchedule[sched].version,
              	        schedtype:data[usr].userSchedule[sched].eventType,
              	        workorders:data[usr].userSchedule[sched].workOrderId,
              	        section_id:data[usr].userSchedule[sched].userId,
              	        event_location:userAddress,
              	        event_pid:data[usr].userSchedule[sched].eventPid
                   };
            	    				
            	   recur_data.push(sched_data);
              });

         }
         techs.push(user_data);
    });
        	    		
    for (var key in recur_data) {
         if (recur_data.hasOwnProperty(key)) {
             var val = recur_data[key], static_end_date;
             if(typeof val.rec_type !== 'undefined'){
                  static_end_date = new Date(2900,1,1,0,0);
             }else{
                  static_end_date = val.end_date;
             }
                                
             var lent = val.event_length;
             scheduler.addEvent({
                 id: val.id,
                 event_id:val.event_id,
                 start_date: val.start_date,
                 end_date: val.end_date,
                 text: val.text,
                 rec_type: val.rec_type,
                 rec_pattern: val.rec_pattern,
                 event_length: lent, //val.event_length,
                 version:val.version,
                 eventType:val.schedtype,
                 workorders:val.workorders,
                 section_id:val.section_id,
                 event_location:val.event_location,
                 event_pid:val.event_pid
            });
         }
      }
});

and here’s the sample json data coming from my db:

{
    "id": 1,
    "createdById": 1,
    "updatedById": 1,
    "updatedDate": 1397565459650,
    "version": 24,
    "profile": {
        "title": "Mr",
        "firstname": "John",
        "middlename": "Doe",
        "lastname": "Test",
        "birthDate": 631209600000
    },
    "address": {
        "addressLine1": "Some Address",
        "city": "San Antonio",
        "state": "Texas",
        "country": "United States of America",
        "zipcode": "78962"
    },
    "roleId": 5,
    "role": {
        "title": "User"
    },
    "userSchedule": [{
        "id": 68,
        "createdById": 1,
        "createdDate": 1400496782893,
        "updatedById": 1,
        "updatedDate": 1400496782893,
        "version": 1,
        "scheduleTitle": "Repeat ",
        "userId": 1,
        "startDate": "1400461200",
        "endDate": "1403020800",
        "recurringPattern": "week_1___1",
        "recurringType": "week_1___1#",
        "eventLength": "7200",
        "eventType": 1
    }, {
        "id": 69,
        "createdById": 1,
        "createdDate": 1400496845907,
        "updatedById": 1,
        "updatedDate": 1400496845907,
        "version": 1,
        "scheduleTitle": "Repeat ",
        "userId": 1,
        "startDate": "1401067200",
        "endDate": "1401073200",
        "eventLength": "1401066000",
        "eventType": 1,
        "eventPid": 68
    }]
}

I’ve attached my javascript angular directive and sample controller.
angular-dhtmlxscheduler.rar (4.29 KB)

can anyone check my angular directive? I’m still getting the error. Thanks

The attached code has too many references to the outside elements, I can’t run it locally.

Can you provide a full sample or some kind of demo link ?

Thanks, I already resolve the problem.

The problem is if loop the data coming from the db and push it into array. like this:

    var recur_data=[], techs=[];
                         
    $http.post($scope.getUsers, param).success(function(data) {
      $.each (data, function (usr) {
        var user_data = {
           key:data[usr].id,
           label:data[usr].profile.firstname+" "+data[usr].profile.lastname
        };

        var userAddress = data[usr].address.addressLine1+" "+data[usr].address.city+" "+data[usr].address.state+", "+data[usr].address.country+" "+data[usr].address.zipcode;

        if(typeof data[usr].userSchedule !== 'undefined'){
           $.each (data[usr].userSchedule, function (sched) {
              
            var recur_type = "", recur_pattern = "";
              
            if(data[usr].userSchedule[sched].recurringType != null){
                    recur_type = data[usr].userSchedule[sched].recurringType;
              }
              
              if(data[usr].userSchedule[sched].recurringPattern != null){
                 recur_pattern = data[usr].userSchedule[sched].recurringPattern;
              }
              var sched_data = {
                    event_id: data[usr].userSchedule[sched].id,
                    start_date: timeConverter(data[usr].userSchedule[sched].startDate),
                   end_date: timeConverter(data[usr].userSchedule[sched].endDate),
                   text:data[usr].userSchedule[sched].scheduleTitle,
                   rec_type:recur_type,
                   rec_pattern:recur_pattern,
                   event_length:data[usr].userSchedule[sched].eventLength,
                   version:data[usr].userSchedule[sched].version,
                   schedtype:data[usr].userSchedule[sched].eventType,
                   workorders:data[usr].userSchedule[sched].workOrderId,
                   section_id:data[usr].userSchedule[sched].userId,
                   event_location:userAddress,
                   event_pid:data[usr].userSchedule[sched].eventPid
            };
                 
              recur_data.push(sched_data);
           });

        }
      });

      for (var key in recur_data) {
        if (recur_data.hasOwnProperty(key)) {
            var val = recur_data[key], static_end_date;
           
            console.log("=== "+val.rec_type);
            if(typeof val.rec_type !== 'undefined'){
               static_end_date = new Date(2900,1,1,0,0);
            }else{
               static_end_date = val.end_date;
            }

            var lent = val.event_length;

            scheduler.addEvent({
               event_id:val.event_id,
               start_date: val.start_date,
               end_date: val.end_date,
               text: val.text,
               rec_type: val.rec_type,
               rec_pattern: val.rec_pattern,
               event_length: lent, //val.event_length,
               version:val.version,
               eventType:val.schedtype,
               workorders:val.workorders,
               section_id:val.section_id,
               event_location:val.event_location,
               event_pid:val.event_pid
            });
        }
      }
    });

I don’t know why recur_data.push(sched_data); is not working on your scheduler.

This is my solution:

$http.post($scope.getUsers, param).success(function(data) {
      $.each (data, function (usr) {
        var user_data = {
           key:data[usr].id,
           label:data[usr].profile.firstname+" "+data[usr].profile.lastname
        };

        var userAddress = data[usr].address.addressLine1+" "+data[usr].address.city+" "+data[usr].address.state+", "+data[usr].address.country+" "+data[usr].address.zipcode;

        if(typeof data[usr].userSchedule !== 'undefined'){
           $.each (data[usr].userSchedule, function (sched) {
              
            var recur_type = "", recur_pattern = "";
              
            if(data[usr].userSchedule[sched].recurringType != null){
                    recur_type = data[usr].userSchedule[sched].recurringType;
              }
              
              if(data[usr].userSchedule[sched].recurringPattern != null){
                 recur_pattern = data[usr].userSchedule[sched].recurringPattern;
              }
              scheduler.addEvent({
                   id:data[usr].userSchedule[sched].id,
                   event_id: data[usr].userSchedule[sched].id,
                   start_date: new Date(data[usr].userSchedule[sched].startDate * 1000),
                   end_date: new Date(data[usr].userSchedule[sched].endDate * 1000),
                   text:data[usr].userSchedule[sched].scheduleTitle,
                   rec_type:recur_type,
                   rec_pattern:recur_pattern,
                   event_length:data[usr].userSchedule[sched].eventLength,
                   version:data[usr].userSchedule[sched].version,
                   section_id:data[usr].userSchedule[sched].userId,
                   event_location:userAddress,
                   event_pid:data[usr].userSchedule[sched].eventPid
            });
           });
        }
      });

I’ve just put scheduler.addEvent inside the loop instead of adding it into array and loop again on that array. Thanks for the help