!nativeeditor_status undefined after event collision

Scheduler Javascript
#1

Hello all,
I am using the Units view of the Scheduler application, version 4.2.0, and am having an issue with event collisions. I have the below code attached to the event collision event:

	scheduler.attachEvent("onEventCollision", function (ev, evs){
		alert("Note: There is already an appointment scheduled for that time");
		return true;
	});

This works fine. When there is an event collision, the alert is displayed, and the colliding event is deleted. However, when I try to add another new event after this collision is detected, I receive an error in the JS console stating “Uncaught TypeError: Cannot read property ‘!nativeeditor_status’ of undefined”, and the new event I am trying to add is not added. Note this happens even when the new event does not collide with any other events.

In looking at the database log, when the colliding event is deleted, the DELETE query is using the sid as the id. See below for example:

DELETE FROM Appointment WHERE id=‘1437066160230’

In my database, there is no record in the Appointment table with id=‘1437066160230’, since the id has yet to be converted into a tid (the actual id in the database table). This is not causing any errors on the database side, since deleting a row with an id which does not exist just results in a query with 0 rows affected. But my thought is that this might be messing up the value of !nativeeditor_status, but I could be wrong.

Is there a way to check for an event collision prior to calling addEvent() ? I.E only call addEvent() if the event to be added does not collide with an existing event. Also, maybe allow the tid to be created, and then run the DELETE query using this id instead?

This is one of my last bugs before going to Production, so any help or guidance on this would be much appreciated. Thank you!

#2

Hello,
it shuldn’t send a request to the server when deleting a colliding event, please check this snippet
docs.dhtmlx.com/scheduler/snippet/9471277c

Can you please provide a more complete demo so we could reproduce the problem?

#3

“1437066160230” is a temp ID which is generated by the client side code, before saving data in the DataBase. It must be replaced with a correct ID after data saving.

#4

I understand this is a temporary ID generated by the client-side, which is then converted into an ID to be used in the database before doing the INSERT into the table. The issue here might be that the ID of this colliding event (1437066160230) is never converted since it is not to be inserted into the table.

Below are the code snippets from my code which I thought were useful in this situation. I am currently doing my development work on localhost using XAMP server, so I think providing a full demo would be difficult (correct me if I am wrong, as I am a bit new to posting on these forums).

index.php

...
<div class="col-md-7" id="calender-column">
	<div id="scheduler_here" class="dhx_cal_container">
	    <div class="dhx_cal_navline">
	        <div class="dhx_cal_prev_button">&nbsp;</div>
	        <div class="dhx_cal_next_button">&nbsp;</div>
	        <div>
		        <button type="input" class="btn btn-default btn-lg" id="go-to-date-picker">
		        	<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
		        </button>
	        </div>
	        <div class="dhx_cal_today_button"></div>
	        <div class="dhx_cal_date"></div>
	    </div>
	    <div class="dhx_cal_header"></div>
	    <div class="dhx_cal_data"></div>       
	</div>
</div>
...

application.js

...
scheduler.createUnitsView({
    name:"unit",
    property:"Unit_ID", 
    skip_incorrect: true, 
    list:scheduler.serverList("Unit_ID")
});
...
scheduler.attachEvent("onEventCollision", function (ev, evs){
	alert("Note: There is already an appointment scheduled for that time");
	return true;
});
...
dp = new dataProcessor("lib\\load_events.php");
dp.init(scheduler);
...

load_events.php

require("dhtmlxScheduler_v4.2.0\codebase\connector\scheduler_connector.php");
require("dhtmlxScheduler_v4.2.0\codebase\connector\db_pdo.php");
...
$calendar = new SchedulerConnector($res, "PDO");
$calendar->sql->set_transaction_mode("global");

//I attached here a function to the afterInsert event to insert a record into an additional table, for normalization purposes
$calendar->event->attach("afterInsert", "insertIntoApptService");

$calendar->enable_log("log.txt",true);
$calendar->set_options("Unit_ID", $list);
$calendar->render_table("Appointment", "id", "start_date, end_date, text, EmployeeID, CustomerID, Notes, color, Unit_ID");

Please let me know if this code provides any insight, or if you need me to share more.

Aliaksandr,
In looking at your snippet, it is slightly different from my application in that I am adding events using the scheduler.addEvent() method, as opposed to scheduler.parse(). Also, I am adding new events to the scheduler which are colliding with existing events, as opposed to editing existing events which are then colliding with other existing events. Not sure if this has an impact, but just wanted to share.

Thank you again for your help.

#5

Hi,
i’ve reproduced the issue. Indeed, if you add an event using the API instead of GUI, the request will be sent to the server - docs.dhtmlx.com/scheduler/snippet/2eefa458

Basically, if new event is conflicting with the existing one and is rejected, there shouldn’t be any requests to the server (no inserting nor deleting), since it can be dropped right on the client.
There is a method for checking conflicts before adding
docs.dhtmlx.com/scheduler/api__s … ision.html

For a convenience you can make proxy the addEvent method, so it will always do such checking before adding new event

[code](function(){
var addEvent = scheduler.addEvent;

scheduler.addEvent = function(event){
if(event && event.start_date){// if an object argument is provided
if(scheduler.checkCollision(event)){
addEvent.call(this, event);
}
}else{
addEvent.apply(this, arguments);
}
}

})();
[/code]
docs.dhtmlx.com/scheduler/snippet/c19b75ff

#6

I added the proxy as you suggested, however I am still having the same issue. Below is my code.

function addEventToCalendar(apptDateIn, startTimeIn, endTimeIn, titleIn, customerNameIn, unitIDIn, employeeIDIn, customerIDIn, notesIn, colorIn, servicesIn){

	(function(){
		var addEvent = scheduler.addEvent;
		scheduler.addEvent = function(event){
			if(event && event.start_date){
				if(scheduler.checkCollision(event)){
					console.log("collision detected, event ID: " + event.id + ", " + event.text + ", Notes: " + event.Notes);
					addEvent.call(this, event);
				}
				else{
					console.log("checkCollision is false");
				}
			}
			else{
				console.log("no event");
				addEvent.apply(this, arguments);
			}
		}
	})();

	var event_id = scheduler.addEvent({
	    start_date:apptDateIn + " " + startTimeIn,
	    end_date:apptDateIn + " " + endTimeIn,
	    text:titleIn + " --- " + customerNameIn,
	    EmployeeID:employeeIDIn,
	    Unit_ID:unitIDIn,
	    CustomerID:customerIDIn,
	    Notes:notesIn,
	    color:colorIn
	});
}

The scheduler.checkCollision(event) call is always returning true, even for events which do not collide. Also, within that if block, I print out attributes of the event parameter, and event.id is printing undefined, while other attributes (Notes, text) are printing the proper values. Additionally, whenever I add an Nth event, it seems to call checkCollision(event) N times. For example, when I first load the app and add an event, the “collision detected” line is printed once, then when I a second event, it prints twice, a third event, it prints 3 times, and so on.

Also, when I first load the snippet you included in your last response (docs.dhtmlx.com/scheduler/snippet/c19b75ff), the onEventCollision event is triggered 3 times (the alert box displays 3 times). The documentation on the checkCollision(event) method states that it triggers the onEventCollision event. Is there a way to only trigger onEventCollision if checkCollision(event) returns true?

Any guidance on this is much appreciated. Thank you.