Our pure JavaScript Scheduler component


Post by eccdakaj »

Scheduler component "Ext-js " has the function "visibleFn" to manage visibility of tool as f(event).
How to implement this in "Javascript pure" Scheduler?

Post by pmiklashevich »

Please add this code to our Basic demo to see how it works. Only the first event (Click me) should have Delete icon.
let scheduler = new Scheduler({
.....
    features : {
        eventTooltip : {
            onBeforeShow({ source : tooltip }) {
                const eventRecord = scheduler.resolveEventRecord(tooltip.activeTarget);

                tooltip.tools.removeItem.visible = eventRecord && eventRecord.name === 'Click me';
            },

            tools : {
                removeItem : {
                    cls     : 'b-fa b-fa-trash',
                    handler : function () {
                        scheduler.eventStore.remove(this.eventRecord);
                        this.hide();
                    }
                }
            }
        }
    }
});

Pavlo Miklashevych
Sr. Frontend Developer


Post by eccdakaj »

I adapted your example to my code and it works. Thank you!
After that, in my customization, i have to show tooltip buttons
- without record name at start of tooltip "toolbar"
- and without text under tooltip "toolbar".
I tried to hide text under toolbar returning empty string in "template" config of eventTooltip, but, in this scenario, the tooltip disappear.
I have no idea how to hide record name that appear at start of toolbar.

Post by mats »

You can use basic CSS to do it (until we have implemented a proper event tools feature).
.b-sch-event-tooltip .b-panel-content,
.b-sch-event-tooltip .b-header-title {
    display:none;
}

Post by eccdakaj »

Perfect. Thank you.

Post Reply