Show an LWC Modal on top of the Lightbox

Scheduler
#1

I want to show an LWC modal on top of the Lightbox via clicking a custom button on the Lightbox. I am able to add the button and the event “onLightboxButton” is called when I click on the custom button. But the modal is not showing up.

In this code, I am just using a standard LWC Modal.

HTML:
<template>
    <div class=“thescheduler” lwc:dom=“manual” style=‘width: 100%;’></div>
    <template if:true={showModal}>
        <section role=“dialog” tabindex="-1" aria-modal=“true” aria-labelledby=“modal-heading-01” class=“slds-modal slds-fade-in-open”>
        <div class=“slds-modal__container”>
            <button class=“slds-button slds-button_icon slds-modal__close slds-button_icon-inverse” title=“Close”>
                <lightning-icon variant=“inverse” onclick={handleCloseModal} alternative-text=“close” icon-name=“utility:close” size=“small”></lightning-icon>
            </button>
            <div class=“slds-modal__header”>
            <h1 id=“modal-heading-01” class=“slds-modal__title slds-hyphenate”>Modal header</h1>
            </div>
            <div class=“slds-modal__content slds-p-around_medium” id=“modal-content-id-1”>
            <p>Modal Body</p>
            </div>
            <div class=“slds-modal__footer”>
            <button class=“slds-button slds-button_neutral” aria-label=“Cancel and close”>Cancel</button>
            <button class=“slds-button slds-button_brand”>Save</button>
            </div>
        </div>
        </section>
        <div class=“slds-backdrop slds-backdrop_open” role=“presentation”></div>
    </template>
</template>

Relevant JS Code:

export default class SchedulerComponent extends LightningElement {
@track showModal = false;

handleCloseModal(event) {
    this.showModal = false;
}

initializeUI() {

 scheduler.attachEvent('onDblClick', function(id, event) {
        scheduler.resetLightbox();
        let ev = scheduler.getEvent(id);
        if(ev.color == 'green'){
            scheduler.config.buttons_left = ["dhx_delete_btn","show_modal"];
        }
        else {
            scheduler.config.buttons_left = ["dhx_delete_btn"];
        }
        return true;
    });

    // custom button configuration
    scheduler.attachEvent("onLightboxButton", function(button_id, node, e){
        if(button_id == "show_modal"){
            this.showModal = true;
        }
    });
}
}

I am not entirely sure if this is an issue with the LWC or the DHTMLX Scheduler.
How do I resolve this?

#2

I figured out what the issue is. I need to store a reference to this (Class instance) in a separate variable ( self in the example) and use it inside the scheduler.attachEvent. Therefore it should be:

initializeUI() {
const self = this;

// custom button configuration
scheduler.attachEvent("onLightboxButton", function(button_id, node, e){
    if(button_id == "show_modal"){
        self.showModal = true;
    }
});
}
1 Like