Invalid date when importing a json.

[andre0ani]

Hello,

I export the events in a json file when a new event is added. It's working (great thanks to you).
But when I try to import this file, I have errors about date format (tryed convertToIso8601) :

endDate invalide pour l'événement: Object { from: null, to: "2024-11-15T08:20:00+00:00", title: "test 22", description: "", location: "", group: "", isAllDay: false, showAlerts: true, showAsBusy: true, color: null, … } ​ alertOffset: 0 ​ color: null ​ colorBorder: null ​ colorText: null ​ created: "2024-11-09T04:34:20.207Z" ​ customTags: null ​ description: "" ​ from: null ​ group: "" ​ id: "124e9d5a-8723-6f0b-9310-8a8c96d875ba" ​ isAllDay: false ​ lastUpdated: "2024-11-09T04:34:20.207Z" ​ location: "" ​ repeatEnds: null ​ repeatEvery: 0 ​ repeatEveryCustomType: 0 ​ repeatEveryCustomValue: 1 ​ repeatEveryExcludeDays: Array [] ​ showAlerts: true ​ showAsBusy: true ​ title: "test 22" ​ to: "2024-11-15T08:20:00+00:00" ​ type: 0 ​ url: ""

This is an event in my exported json file :

[ { "from": "2024-11-12T13:20:00.000Z", "to": "2024-11-12T13:50:00.000Z", "title": "test 1", "description": "", "location": "", "group": "", "isAllDay": false, "showAlerts": true, "showAsBusy": true, "color": null, "colorText": null, "colorBorder": null, "repeatEveryExcludeDays": [], "repeatEnds": null, "url": "", "repeatEveryCustomValue": 1, "type": 0, "customTags": null, "alertOffset": 0, "repeatEvery": 0, "repeatEveryCustomType": 0, "id": "19855f6d-4cb8-1dfd-e08c-f46515070c70", "created": "2024-11-09T04:34:04.810Z", "lastUpdated": "2024-11-09T04:34:04.810Z" } ]

And this error, I don't what it is about ?
Uncaught TypeError: h.name is undefined

Thanks, have a nice day,

Patrice

[william-troup]

Can you send the full stack trace of the error please?

[andre0ani]

I give you the code I use (made with help of chatgpt fot this part), I suppose the problem is not in calendar.js but in the code.

And a capture of the console log in Firefox.

In the controler in PHP :

` private function loadUserEventsFromFile($user)
{
$filePath = 'users/' . $user . '/events.json';

    if (!file_exists($filePath)) {
        Controller::logError("Fichier d'événements introuvable pour l'utilisateur $user : $filePath\n");
        echo json_encode(['status' => 'error', 'message' => 'Fichier d\'événements introuvable.']);
        return;
    }
    
    $eventsJson = file_get_contents($filePath);
    
    if (!$eventsJson) {
        Controller::logError("Erreur de lecture du fichier JSON pour l'utilisateur $user\n");
        echo json_encode(['status' => 'error', 'message' => 'Erreur de lecture du fichier JSON.']);
        return;
    }
    
    $events = json_decode($eventsJson, true);

    foreach ($events as &$event) {
        if (isset($event['from']) && !empty($event['from'])) {
            $startDate = $event['from'];
            if (!$this->isValidDate($startDate)) {
                $startDate = $this->convertToIso8601($startDate);
                Controller::logError("Conversion from pour l'événement : $startDate");
            }
            $event['from'] = $startDate;
        }

        if (isset($event['to']) && !empty($event['to'])) {
            $endDate = $event['to'];
            if (!$this->isValidDate($endDate)) {
                $endDate = $this->convertToIso8601($endDate);
                Controller::logError("Conversion to pour l'événement : $endDate");
            }
            $event['to'] = $endDate;
        }
    }
    
    $_SESSION['events'] = $events;
    Controller::logError("Événements chargés pour l'utilisateur $user : " . print_r($events, true) . "\n");
}

public function isValidDate($date)
{
    $dateTime = \DateTime::createFromFormat(\DateTime::ISO8601, $date);
    
    return $dateTime && $dateTime->format(\DateTime::ISO8601) === $date;
}

public function convertToIso8601($date)
{
    try {
        $dateTime = new \DateTime($date);
        
        return $dateTime->format('Y-m-d\TH:i:sP');
    } catch (Exception $e) {
        Controller::logError("Erreur lors de la conversion de la date : " . $e->getMessage());
        return false;
    }
}


public function importEvents($user)
{
    if (empty($user)) {
        echo json_encode(['status' => 'error', 'message' => 'Utilisateur non authentifié']);
        return;
    }

    // Vérifier si les événements sont dans la session
    if (isset($_SESSION['events']) && !empty($_SESSION['events'])) {
        echo json_encode(['status' => 'success', 'events' => $_SESSION['events']]);
    } else {
        echo json_encode(['status' => 'error', 'message' => 'Aucun événement trouvé dans la session.']);
    }
}




public function saveEvents()
{
    $eventsJson = file_get_contents('php://input');
    file_put_contents('php://stderr', "Données reçues : " . $eventsJson . "\n");
    $events = json_decode($eventsJson, true);

    if (!is_array($events) || empty($events)) {
        echo json_encode(['status' => 'error', 'message' => 'Aucun événement trouvé.']);
        return;
    }

    $user = $_SESSION['username'];
    $filePath = 'users/' . $user . '/events.json';

    if (file_exists($filePath)) {
        $existingEventsJson = file_get_contents($filePath);
        $existingEvents = json_decode($existingEventsJson, true);

        if (!is_array($existingEvents)) {
            $existingEvents = [];
        }
    } else {
        $existingEvents = [];
    }

    $existingEventsById = [];
    foreach ($existingEvents as $event) {
        if (isset($event['id'])) {
            $existingEventsById[$event['id']] = $event;
        }
    }

    foreach ($events as $newEvent) {
        if (isset($newEvent['id']) && !isset($existingEventsById[$newEvent['id']])) {
            $existingEvents[] = $newEvent;
        }
    }

    if (file_put_contents($filePath, json_encode($existingEvents, JSON_PRETTY_PRINT))) {
        echo json_encode(['status' => 'success', 'message' => 'Événements sauvegardés avec succès.']);
    } else {
        echo json_encode(['status' => 'error', 'message' => 'Impossible de sauvegarder les événements.']);
    }
}`

And the javascript in my agenda page :

` <script>
var calendarInstance1 = new calendarJs("calendar1", __TRANSLATION_OPTIONS);

    document.querySelector('input.add-update').addEventListener('click', function() {
        let exportedEvents = calendarInstance1.getEvents();

        console.log("Événements récupérés du calendrier : ", exportedEvents);

        if (exportedEvents && Array.isArray(exportedEvents) && exportedEvents.length > 0) {
            var eventsJson = JSON.stringify(exportedEvents);
            sendEventsToServer(eventsJson);
        } else {
            console.error("Aucun événement à envoyer ou export incorrect.");
        }

        let eventsToSend = exportedEvents.map(event => {
            return {
                title: event.title,
                description: event.description || "",
                start: event.from,
                end: event.endDate,
            };
        });

        sendEventsToServer(eventsToSend);
    });


    function sendEventsToServer(eventsJson) {
        if (!eventsJson || eventsJson.length === 0) {
            console.error("Aucun événement à envoyer.");
            return;
        }

        console.log("Événements à envoyer : ", eventsJson);

        var xhr = new XMLHttpRequest();
        xhr.open("POST", "index.php?action=saveEvents", true);
        xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

        xhr.onload = function() {
            if (xhr.status === 200) {
                console.log("Réponse du serveur : ", xhr.responseText);
                let response = JSON.parse(xhr.responseText);
                if (response.status === 'success') {
                    console.log("Événements sauvegardés avec succès !");
                } else {
                    console.error("Erreur côté serveur : ", response.message);
                }
            } else {
                console.error(xhr.responseText);
            }
        };

        xhr.onerror = function() {
            console.error("Erreur de connexion au serveur.");
        };

        xhr.send(eventsJson);
    }


    function formatEventDates(event) {
if (event.from && event.to) {
    console.log("Original from: ", event.from);
    console.log("Original to: ", event.to);

    event.from = new Date(event.from).toISOString();
    event.to = new Date(event.to).toISOString();
    
    console.log("Formatted from: ", event.from);
    console.log("Formatted to: ", event.to);
}
return event;

}

function importEventsFromFiles(files) {
var filesLength = files.length,
filesCompleted = [],
filesCompletedEvents = [];

var onLoadEnd = function(filename, events) {
    filesCompleted.push(filename);
    filesCompletedEvents = filesCompletedEvents.concat(events);

    if (filesCompleted.length === filesLength) {
        // Formater les dates avant de traiter les événements
        filesCompletedEvents = filesCompletedEvents.map(formatEventDates);
        importFromFilesCompleted(filesCompletedEvents);
    }
};

for (var fileIndex = 0; fileIndex < filesLength; fileIndex++) {
    var file = files[fileIndex],
        fileExtension = file.name.split(".").pop().toLowerCase();

    if (fileExtension === "json") {
        importEventsFromJson(file, onLoadEnd);
    } else if (fileExtension === "ics" || fileExtension === "ical") {
        importEventsFromICal(file, onLoadEnd);
    }
}

}

    function checkUserLoginAndLoadEvents() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "index.php?action=importEvents", true);

xhr.onload = function() {
    if (xhr.status === 200) {
        let response = JSON.parse(xhr.responseText);
        console.log("Réponse du serveur pour importEvents :", response);

        if (response.status === 'success') {
            if (Array.isArray(response.events) && response.events.length > 0) {
                console.log("Événements importés avec succès :", response.events);

                response.events.forEach(event => {
                    console.log("Événement:", event);
                    if (!isValidDate(event.from)) {
                        console.error("startDate invalide pour l'événement:", event);
                    }
                    if (!isValidDate(event.to)) {
                        console.error("endDate invalide pour l'événement:", event);
                    }
                });

                calendarInstance1.import(response.events);
            } else {
                console.error("Aucun événement à importer.");
            }
        } else {
            console.error("Erreur serveur:", response.message);
        }
    } else {
        console.error("Erreur de connexion au serveur:", xhr.status, xhr.responseText);
    }
};

xhr.onerror = function() {
    console.error("Erreur de connexion au serveur.");
};

xhr.send();

}

function isValidDate(date) {
var regex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(.\d{3})?Z$/;
return regex.test(date);
}

window.onload = function() {
checkUserLoginAndLoadEvents();
};

</script>`