Scheduler with custom lightbox and custom eventbox

I have a full custom eventbox and fully custom lightbox.
I have no problem in rendering events from database to scheduler.
When i double click on the scheduler (for creating new event), my lightbox appears from the function i called in scheduler.showLightbox
Now I have this eventbox created at the back of scheduler everytime i open the fullycustom lightbox. when i click cancel button , the temporarily created eventbox is not disappearing, instead it stays on the scheduler.
Please help me to do the cancel function that is in the default lightbox.

  scheduler.showLightbox = function (id) {
        //open kendo window and fill it with values of scheduler.getEvent(id)
        debugger;
        var ev = scheduler.getEvent(id);
   
        var dialog = $("#AppointmentWindow").data("kendoWindow");

        dialog.center();
        dialog.open();
 }

// i use kendowindow so i couldnt apply startlightbox

//this is my cancel button function:

$("#btnApptCancel").bind("click", function () {
    debugger;
scheduler.endLightbox(false);
    var dialog = $("#AppointmentWindow");
    dialog.data("kendoWindow").close();
//scheduler.endLightbox(false);
    
});
@(Html.Kendo().Window()
    .Name("AppointmentWindow")
    .Title("Appointment")
    .LoadContentFrom("Index", "Appointment")
    .Draggable()
    .Resizable()
    .Width(790)
    .Visible(false)
    .Modal(true)
)

here is my custom eventbox:

 scheduler.attachEvent("onTemplatesReady", function () {
        scheduler.renderEvent = function (container, evt) {
            // var html = "<div class='dhx_event_move my_event_move' style='width: " + container_width + "'></div>";
            scheduler.templates.event_header = function (start, end, ev) {
                return scheduler.templates.event_date(ev.start_date) + "- " +
                scheduler.templates.event_date(ev.end_date)
            }
            scheduler.templates.event_text = function (start, end, ev) {
                if (ev.StdTaskDesc != null) {
                    return "<b>" + ev.DisplayName + "</b><br>" + ev.StdTaskDesc;
                }
                return "<b>" + ev.DisplayName + "</b><br><i>" + ev.Tasks + "</i>";
            }
            // container.innerHTML = html;
        };
    });

solved, thanks