Event color not changing, event disappearing on click

Hello all I’m working on a ASP.net MVC application.

I wanted to test updating an events color, but it doesn’t seem to be working in my case.

Furthur more, when I click a second time on a cell it disappears, but when I create a new event, it returns in the same spot. This only seems to be happening after I have created an event using my external Drag and Drop function.

So it’s not being deleted from the collection, but it goes invisible on the scheduler.
Picture for reference (it disappears on the second single cell click)

Scheduler Code

[code]var engineers = @Html.Raw(Json.Encode(ViewBag.engineers))

    scheduler.locale.labels.timeline_tab = "Timeline";
    scheduler.locale.labels.timeline2_tab = "Timeline2";
    scheduler.locale.labels.section_custom = "Section";
    scheduler.config.details_on_create = true;
    scheduler.config.details_on_dblclick = true;
    scheduler.config.xml_date = "%Y-%m-%d %H:%i";
    scheduler.config.limit_view = false;
    scheduler.config.mark_now = false;

    scheduler.createTimelineView({
        name: "timeline",
        x_unit: "minute",
        x_step: 30,
        x_start: 16,
        x_date: "%H:%i",
        x_size: 24,
        x_length: 48,
        y_unit: engineers,
        event_dy: 'full',
        y_property: "engineer_id",
        render: "bar"
    });

    //Days: monday - friday, Zones/Hours: 7pm - 12am
    scheduler.blockTime({
        days: [1, 2, 3, 4, 5],
        zones: [19 * 60, 24 * 60],
        //sections: {
        //    unit: [1, 4]
        //}
    });

    scheduler.attachEvent("onAfterLightbox", function () {
        var events = scheduler.getEvents();
        for (var i = 0; i < events.length; i++) {
            events[i].id = i;
        }

        scheduler.getEvent(1).color = "green";
        scheduler.updateEvent(1);
        setToolTip();
        //save();
    });

    scheduler.attachEvent("onYScaleClick", function (index, section, e) {
        setToolTip();
    });

    scheduler.attachEvent("onLimitViolation", function (id, obj) {
        alert("This is not a valid time period.");
    });

    scheduler.attachEvent("onCellClick", function (x_ind, y_ind, x_val, y_val, e) {
        alert("Click");
    });

    scheduler.init('scheduler_here', new Date(), "timeline");
    //scheduler.load("http://localhost/Tasks.xml", "xml");


    function save() {
        var xml = scheduler.toXML();
        var url = '@Url.Action("Save", "Home")';

        $.ajax({
            url: url,
            Type: "POST",
            dataType: 'json',
            async: false,
            data: { xmlString: xml },
            contentType: 'application/json; charset=utf-8',
            success: alert("File Saved in C:\\ Drive as Tasks.xml")
        });
    }

    //scheduler.parse(document.getElementById("data_here").value, "xml");


    scheduler.parse([
        { start_date: "2014-07-18 08:30", end_date: "2014-07-18 12:15", text: "Task A-12458", engineer_id: engineers[0].key },
        { start_date: "2014-07-18 12:00", end_date: "2014-07-18 14:00", text: "Task A-89411", engineer_id: engineers[0].key },
        { start_date: "2014-07-18 11:00", end_date: "2014-07-18 14:00", text: "Task A-89411", engineer_id: engineers[1].key, color: "red" }
    ], "json");

[/code]

Drag and drop code


<div id="scheduler_here" ondragover="allowDrop(event)" ondrop="drop(event)" class="dhx_cal_container" style='width:1130px; height:900px;'>

 function allowDrop(e) {
        e.preventDefault();
    }

    function drop(e) {
        var info = scheduler.getActionData(e);
        scheduler.addEventNow({ start_date: info.date, engineer_id: info.section });
    }


Hi,
the event ID will not be changed in this way:

events[i].id = i;

please use “changeEventId()” method instead :
docs.dhtmlx.com/scheduler/api__s … entid.html.
As for external Drag and Drop issue, please try to inspect the errors in the console to get more information.