📅 TLD - tld_fullcalendar - Composant de Calendrier

📖 Introduction

tld_fullcalendar est un Web Component basé sur FullCalendar.js permettant d'afficher un calendrier interactif.
Il permet :

• L'affichage dynamique d'événements.
• La personnalisation des options via une fonction externe.
• L'ajout dynamique d'événements.

---

⚡️ Installation / Prérequis

📦 Dépendances

Ce composant repose sur FullCalendar.js, assurez-vous de l'installer :

npm install @fullcalendar/core @fullcalendar/daygrid

Ajoutez les fichiers CSS et JavaScript nécessaires :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.11.3/main.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.11.3/main.min.js"></script>

---

🚀 Utilisation

🔹 Ajout du Composant dans une Page HTML

<tld-fullcalendar get_function_option="getCalendarOptions"></tld-fullcalendar>

Définissez une fonction pour fournir des options au calendrier :

function getCalendarOptions() {
    return {
        initialView: "dayGridMonth",
        locale: "fr",
        events: [
            { title: "Réunion", start: "2024-03-15", color: "blue" }
        ]
    };
}

🔹 Ajouter un Événement Dynamique

const calendar = document.querySelector("tld-fullcalendar");

calendar.insertEvent(
    "Nouvel Événement",
    true,
    "15/03/2024",
    "15/03/2024",
    "Description de l'événement",
    "red",
    { extraData: "Important" }
);

---

📌 Détails du Code

🏗️ Définition de la Classe

class tld_fullcalendar extends tld_custom_elements {
    private _option: CalendarOption | null;
    private _get_function_option: string;
    fullCalendar: Calendar;

    constructor(Attributes: { [name: string]: any } = null) {
        super(Attributes);
        this._option = null;
    }

    render() {
        this.innerHTML = `<div></div>`;

        try {
            let option = window[this._get_function_option]();
            if (!option) {
                this._option = this.defaultOptions(null);
            } else if (typeof option !== "object") {
                throw new Error("tld-fullCalendar | function must return an object");
            } else {
                this._option = this.defaultOptions(option);
            }
        } catch (error) {
            console.error("tld-fullCalendar | function not found");
        }

        this.fullCalendar = new FullCalendar.Calendar(this.querySelector("div"), this._option);

        setTimeout(() => {
            this.fullCalendar.refetchEvents();
            this.fullCalendar.render();

            this.dispatchEvent(new CustomEvent("calendarRendered", {
                bubbles: true,
                composed: true
            }));
        }, 100);
    }
}

🎨 Méthodes Clés

🔄 defaultOptions()

defaultOptions(option: CalendarOption): CalendarOption {
    let base = {
        headerToolbar: { left: "prev", center: "title", right: "next" },
        initialView: "dayGridMonth",
        locale: "fr",
        events: []
    };

    return option ? { ...base, ...option } : base;
}

📌 insertEvent()

insertEvent(titre: string, isAllDay: boolean, debut: string, fin: string, desc: string, couleur: string, extProps: any) {
    function convertDateTimeToISO(dateTimeStr: string): string {
        let [datePart, timePart] = dateTimeStr.split(" ");
        const [day, month, year] = datePart.split("/");
        if (!timePart) timePart = "00:00";
        return new Date(`${year}-${month}-${day}T${timePart}:00`).toISOString();
    }

    const event = {
        title: titre,
        allDay: isAllDay,
        start: convertDateTimeToISO(debut),
        end: convertDateTimeToISO(fin),
        extendedProps: extProps,
        description: desc,
        color: couleur
    };

    this.fullCalendar.addEvent(event);
}

---

📚 Exemples et Cas Pratiques

📌 Ajout Dynamique d'un Calendrier

const calendarElement = document.createElement("tld-fullcalendar");
calendarElement.setAttribute("get_function_option", "getCalendarOptions");
document.body.appendChild(calendarElement);

📌 Ajout d'un Événement Dynamique

calendarElement.insertEvent("Meeting", true, "20/04/2024", "20/04/2024", "Événement important", "green", {});

📌 Écouter un Événement

calendarElement.addEventListener("calendarRendered", () => {
    console.log("Calendrier chargé !");
});

---

🎯 Conclusion

tld_fullcalendar est un Web Component pratique pour intégrer un calendrier interactif.
Il est hautement configurable et permet l'ajout dynamique d'événements.