0

In a database I have the info of some events but I want to add them automatically when I enter the calendar page. The problem is that it gives me an error and I can't solve it. my intention is that events are added on the other hand and from the calendar they can all be viewed. The Error is as follows:

index.php?acc=calendario:73 [Violation]'DOMContentLoaded' handler took 289ms
[Violation]Forced reflow while executing JavaScript took 46ms
main.js:6476 GET http://localhost/xampp/App-produccion/App%20produccion%202.8/calendario/cargarevento.php?start=2021-09-26T00%3A00%3A00%2B02%3A00&end=2021-11-07T00%3A00%3A00%2B01%3A00 404 (Not Found)
requestJson @ main.js:6476
fetch @ main.js:6517
fetchSource @ main.js:6105
fetchSourcesByIds @ main.js:6093
fetchDirtySources @ main.js:6076
addSources @ main.js:6068
initEventSources @ main.js:6019
CalendarDataManager @ main.js:6941
Calendar @ main.js:9635
(anónimo) @ index.php?acc=calendario:77
main.js:6126 Request failed {message: 'Request failed', xhr: XMLHttpRequest}
(anónimo) @ main.js:6126
(anónimo) @ main.js:6520
xhr.onload @ main.js:6470
load (asincrónica)
requestJson @ main.js:6451
fetch @ main.js:6517
fetchSource @ main.js:6105
fetchSourcesByIds @ main.js:6093
fetchDirtySources @ main.js:6076
addSources @ main.js:6068
initEventSources @ main.js:6019
CalendarDataManager @ main.js:6941
Calendar @ main.js:9635
(anónimo) @ index.php?acc=calendario:77

And these are the codes:

<html>

<head>
    <title>Calendar</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link id="logonsgs" rel='icon' type="image/ico" href='web/img/produccion.ico' />
    <!-- CSS   -->
    <link type="text/css" rel="stylesheet" href="librerias/fullcalendar/main.css" media="screen,projection" /><!--  Scripts-->
    <script src="web/js/jquery.min.js"></script>
    <script src="web/js/material.min.js"></script>
    <script src="web/js/jquery-3.5.1.js"></script>
    <script src="web/js/jquery-confirm.js"></script>
    <script src="web/js/jquery.dataTables.min.js"></script>
    <script src="web/js/dataTables.material.min.js"></script>
    <script src="librerias/jsPDF/jspdf.min.js"></script>
    <script src="librerias/jsPDF/jspdf.debug.js"></script>
    <script src="librerias/fullcalendar/main.js"></script>
    <script src="librerias/fullcalendar/locales-all.js"></script>
    <!--<script src="librerias/fullcalendar/locales/es.js"></script>-->
</head>

<body>
    <div id='calendar'></div>
<style>
        html,
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
            font-size: 14px;
        }

        #calendar {
            max-width: 1100px;
            margin: 40px auto;
        }
    </style>



    <script>

        var today = 2021-10-07;
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            

            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                initialDate: today,
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                locales: 'es',
                events: "cargarevento.php"

            });

            calendar.render();
        });
    </script>


</body>

</html>

and the following is the one that supposedly calls the data:

It is also where I connect to the database and is called by the code above. Here what I do is generate an array and then pass it to the previous one, then I should do a loop to be able to send all the records

<?php

$host = '127.0.0.1';
$db   = 'produccion';
$user = 'root';
$pass = '';
$port = "3306";
$charset = 'utf8';

$options = [
    \PDO::ATTR_ERRMODE            => \PDO::ERRMODE_EXCEPTION,
    \PDO::ATTR_DEFAULT_FETCH_MODE => \PDO::FETCH_ASSOC,
    \PDO::ATTR_EMULATE_PREPARES   => false,
];
$dsn = "mysql:host=127.0.0.1:3306;dbname=$db;charset=$charset;";
try {
     $pdo = new \PDO($dsn, $user, $pass);
} catch (PDOException $e) {
     throw new PDOException($e->getMessage(), (int)$e->getCode());
}
$data = array();

$query = "SELECT PID, INICIO, FIN FROM calendario ORDER BY PID;";

$statement = $pdo->prepare($query);

$statement->execute();
$result = $statement->fetchAll();
json_encode($data);
foreach($result as $row)
{
 $data[] = array(
  'title'   => $row["PID"],
  'start'   => $row["INICIO"],
  'end'   => $row["FIN"]
 );
};
json_encode($data);
?>
Davdi
  • 1
  • 1
  • Assuming you're talking about client-side Javascript in a browser, then to get anything from a mysql database you would need to make an AJAX request to the server which will then run a server-side script (presumably PHP in your case) which will query the database and return the results. – ADyson Oct 08 '21 at 08:40
  • Since you're talking about fullCalendar specifically, it actually has a shortcut for loading events - see https://fullcalendar.io/docs/events-json-feed. Basically you can give fullCalendar the URL of a PHP script. That PHP script should run a query on your database to find events (using the date range provided by fullCalendar), get the results and encode them to a JSON array and echo them. Then fullCalendar will automatically put the events into the calendar (you must ensure to provide JSON objects with [compatible fields and values](https://fullcalendar.io/docs/event-parsing) – ADyson Oct 08 '21 at 08:42
  • Does that help? To be honest your description of the problem is a bit vague. – ADyson Oct 08 '21 at 08:42
  • @ADyson If it is helpful, I knew about Fullcalendar, the problem is that, I have spent 3 days and what they put does not work for me. And I have done what it says but it gives me an error. do you know how to do it? – Davdi Oct 08 '21 at 09:15
  • I've done lots of successful JSON event feeds with fullcalendar, yes. But your problem will be about some detail which I do not know about. So I could give you a generic example but I cannot tell you how to fix your specific problem, and I wouldn't know if the example was relevant to your issue or not. What would be really good is if you edit your question to include relevant parts of the code you're using (both fullcalendar and PHP) and explain what errors and problems you're experiencing. Then this community can help you fix it. See also [ask] and how to create a [mre] for guidance, thanks. – ADyson Oct 08 '21 at 09:30
  • @ADyson I have a question in Spanish within stack Overflow in Spanish, the link is this, could you look at it? https://es.stackoverflow.com/questions/489071/como-puedo-insertar-eventos-de-fullcalendar-guardados-en-sql Also, if you could show me your example code, maybe I will know what error I have – Davdi Oct 08 '21 at 09:37
  • @ADyson Also, if you could show me your example code, maybe I will know what error I have – Davdi Oct 08 '21 at 09:39
  • I don't speak Spanish sorry, please translate and edit it here. Thanks. – ADyson Oct 08 '21 at 09:40
  • Although from what I _can_ see at a brief glance, it looks like you simply have a `404 (Not Found)` error. That's nothing to do with fullCalendar or PHP directly. Most likely it just means you gave fullCalendar the wrong path or filename for your PHP file. The error shows you the full URL which it tried to call. You need to check whether that matches the location of the file in your webserver config...presumably it does not. Since you simply wrote `events: "cargarevento.php"` it will use a relative path, so it expects the PHP file will be in the same folder as the HTML file. – ADyson Oct 08 '21 at 09:43
  • @ADyson Yes, the two files are in the same folder, I have also asked you the question in English, if you can look at the questionnaire above, thanks – Davdi Oct 08 '21 at 09:47
  • After you fix that, the next problem is that your PHP script doesn't output anything. Put `echo json_encode($data);` at the end so it turns the data into JSON and outputs it in the response. – ADyson Oct 08 '21 at 09:47
  • `the two files are in the same folder`...in that case maybe you spelled the file name wrong?? – ADyson Oct 08 '21 at 09:47
  • You can do a simple test - open a new browser tab and paste in `http://localhost/xampp/App-produccion/App%20produccion%202.8/calendario/cargarevento.php`....does it return a 404 again? – ADyson Oct 08 '21 at 09:48
  • @ADyson Fatal error: Uncaught PDOException: SQLSTATE[HY000] [2019] Unknown character set in C:\xampp\htdocs\xampp\App-produccion\App produccion 2.8\web\calendario\cargarevento.php:20 Stack trace: #0 {main} thrown in C:\xampp\htdocs\xampp\App-produccion\App produccion 2.8\web\calendario\cargarevento.php on line 20 – Davdi Oct 08 '21 at 09:53
  • Ok so that means it triggered the PHP at least! But now you have a PDO error... – ADyson Oct 08 '21 at 09:54
  • According to https://stackoverflow.com/questions/4361459/php-pdo-charset-set-names your charset should be `utf8` not `utf-8`. – ADyson Oct 08 '21 at 09:55
  • Make that change, and the json_encode change I mentioned above, and then visit that URL again in your browser, and see what happens – ADyson Oct 08 '21 at 09:55
  • @ADyson index.php?acc=calendario:70 [Violation]'DOMContentLoaded' handler took 159ms main.js:6126 Failure parsing JSON {message: 'Failure parsing JSON', xhr: XMLHttpRequest} (anónimo) @ main.js:6126 (anónimo) @ main.js:6520 xhr.onload @ main.js:6466 load (asincrónica) requestJson @ main.js:6451 fetch @ main.js:6517 fetchSource @ main.js:6105 fetchSourcesByIds @ main.js:6093 fetchDirtySources @ main.js:6076 addSources @ main.js:6068 initEventSources @ main.js:6019 CalendarDataManager @ main.js:6941 Calendar @ main.js:9635 (anónimo) @ index.php?acc=calendario:74 – Davdi Oct 08 '21 at 10:05
  • @ADyson Now I don't get the error, but it doesn't show me events – Davdi Oct 08 '21 at 10:05
  • But you get the JS error you've just shown? – ADyson Oct 08 '21 at 10:07
  • @ADyson now I just put the code of the second file in the question – Davdi Oct 08 '21 at 10:08
  • @ADyson I have already achieved it, in the end it has worked for me, I really have been trying for 3 days and I have lost a lot of hair because it was to deliver it to the company, thank you very much, you can see the difference of years of experience (I have been programming with php, javascrpit, html, css 6 months) as we would say in Spain; "Aui tienes un hermano para las buenas, las malas y la cerveza". Thank you very much, seriously you have saved me right now, if you came to Spain, try to get in touch and I will give you a tour of Tarragona / Barcelona – Davdi Oct 08 '21 at 10:37
  • Thankyou! Much appreciated, I will remember that! I'm glad it's solved for you. If you want to help others in future who are trying to do something similar, please put an Answer below containing your solution. – ADyson Oct 08 '21 at 10:49

0 Answers0