RISOLTO Fullcalendar v5 - Icona eliminazione evento

[Giovanni255]

Buongiorno a tutti.

In Fullcalendar versione 5 vorrei aggiungere a ciascun evento un pulsantino (o una semplice 'X') per eliminare un evento specifico.
Nella versione 3, si riusciva inserendo il codice seguente all'interno del setup iniziale del calendario:

eventRender: function (event, element, view) {
    $(element).attr('id', event.id);
    $(element).find('.fc-content').prepend('<div class="box-tools pull-right"><button type="button" style="background-color: Transparent; border: none;" data-remove="remove" data-event_id="' + parseInt(event.id) + '"><i class="fa fa-times" data-event_id="' + event.id + '"></i></button></div>');
    $(element).find('[data-remove=remove]').on('click', deleteScheduling);

}

Nella versione 5 ho provato a seguire la documentazione https://fullcalendar.io/docs/event-render-hooks ma non sono riuscito. Come posso procedere?

Grazie in anticipo

 

[Mursey]

Nessuno potrebbe gentilmente aiutarmi?

Da quello che vedo dal tuo link dovresti usare la eventDidMount, quindi ipotizzo:

eventDidMount: function (arg) {
   arg.el.attr('id', event.id);
   arg.el.find('.fc-content').prepend('<div class="box-tools pull-right"><button type="button" style="background-color: Transparent; border: none;" data-remove="remove" data-event_id="' + parseInt(event.id) + '"><i class="fa fa-times" data-event_id="' + event.id + '"></i></button></div>');
   arg.el.find('[data-remove=remove]').on('click', deleteScheduling);
}

Sempre se si lavori alla stessa maniera sull'element......

 

[Giovanni255]

Da quello che vedo dal tuo link dovresti usare la eventDidMount, quindi ipotizzo:

eventDidMount: function (arg) {
   arg.el.attr('id', event.id);
   arg.el.find('.fc-content').prepend('<div class="box-tools pull-right"><button type="button" style="background-color: Transparent; border: none;" data-remove="remove" data-event_id="' + parseInt(event.id) + '"><i class="fa fa-times" data-event_id="' + event.id + '"></i></button></div>');
   arg.el.find('[data-remove=remove]').on('click', deleteScheduling);
}

Sempre se si lavori alla stessa maniera sull'element......

Buongiorno, grazie per la risposta.

Ho implementato come segue

        eventDidMount: function(arg) {
            $(arg.el + ' .fc-event-main').prepend(
                    '<div class="box-tools pull-right">\n\
                        <button id="delEventBtn" type="button" style="background-color: Transparent; border: none;" data-remove="remove">\n\
                            <i class="fa fa-times" data-id="' + arg.event.id + '"></i>\n\
                        </button>\n\
                    </div>');

            $(arg.el + ' #delEventBtn').on('click', function(event) {
                //Delete...
                alert(arg.event.id)
                console.log(arg)
            });
        },

L'unico problema è che su ciascun evento mi crea tanti pulsanti di eliminazione quanti sono gli eventi presenti nel database. Come posso risolvere?

Grazie

 

[Mursey]

Come posso risolvere?

Vedo che hai messo arg.el + ' .fc-event-main', non so cosa sia la parte finale ma bisognerebbe usare il singolo elemento (che deve rappresentare un solo evento); prova a vedere se arg.el ti torna la singola riga.
Se è un classico element dom dovresti guardare in target,

 

[Giovanni255]

arg.el ritorna

<a class="fc-timegrid-event fc-v-event fc-event fc-event-draggable fc-event-resizable fc-event-start fc-event-end fc-event-past">
    <div class="fc-event-main">
        <div class="box-tools pull-right">
            <button id="delEventBtn" type="button" style="background-color: Transparent; border: none;" data-remove="remove">
                <i class="fa fa-times" data-id="6"></i>
            </button>
        </div>
        <div class="box-tools pull-right">
            <button id="delEventBtn" type="button" style="background-color: Transparent; border: none;" data-remove="remove">
                <i class="fa fa-times" data-id="5"></i>
            </button>
        </div>
        <div class="fc-event-main-frame">
            <div class="fc-event-time">2:00 - 5:30</div>
            <div class="fc-event-title-container">
                <div class="fc-event-title fc-sticky">Test</div>
            </div>
        </div>
    </div>
    <div class="fc-event-resizer fc-event-resizer-end"></div>
</a>

 

[Mursey]

arg.el ritorna

Ritorna un html?
Ma il delEventBtn non lo aggiungi tu?

 

[Giovanni255]

Ritorna un html?
Ma il delEventBtn non lo aggiungi tu?

Si, ho fatto un console.log(arg.el) e ritorna quelle righe (navigabili dalla console del browser).

Il del button lo aggiungo io nel metodo eventDidMount. Il problema è che quel metodo aggiunge il pulsante in modo globale a tutti gli eventi presenti (passando quindi più id e non a ciascun evento il suo)

 

[Mursey]

Si, ho fatto un console.log(arg.el) e ritorna quelle righe (navigabili dalla console del browser).

Di solito non viene ritornato il puro html ma un'istanza di un elemento DOM, per sicurezza guarda bene con il debug ed il watch che cosa torna visto che usare il console log potrebbe forzare una chiamata ad una funzione che torna una stringa e via.

 

[Giovanni255]

Di solito non viene ritornato il puro html ma un'istanza di un elemento DOM, per sicurezza guarda bene con il debug ed il watch che cosa torna visto che usare il console log potrebbe forzare una chiamata ad una funzione che torna una stringa e via.

Scusa, mi sono espresso male. Ritorna proprio l'istanza dell'elemento del DOM che ho riportato sopra.

 

[Giovanni255]

Scusa, mi sono espresso male. Ritorna proprio l'istanza dell'elemento del DOM che ho riportato sopra.

Sono riuscito a risolvere. Come già mi consigliavi ho rimosso "fc event main" da $(arg.el + ' .fc-event-main') e tutto funziona regolarmente.

Grazie ancora per l'aiuto.
Buona serata