Trouble with fullcalendar.io when I try to display more than 10 events (sometimes even less)

I’m having trouble with the fullcalendar.io, I’m trying to show a calendar on a website and it workes fine unless the amount of events gets higher. I tried to check if the dates in the database are on some way wrong, but it seems to be fine, i can’t find a possible way why 10 entries work and 100 will not be shown.

Here is the code:

<script>

    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
            },
            editable: false,
            navLinks: true, // can click day/week names to navigate views
            eventLimit: false, // allow "more" link when too many events
            locale: 'de',
            eventRender: function(info) {
                var tooltip = new Tooltip(info.el, {
                    title: info.event.extendedProps.description,
                    placement: 'top',
                    trigger: 'hover',
                    container: 'body'
                });
            },
            events: {
                url: 'events.php',
                failure: function() {
                    document.getElementById('script-warning').style.display = 'block'
                }
            },
            loading: function(bool) {
                document.getElementById('loading').style.display =
                    bool ? 'block' : 'none';
            }
        });

        calendar.render();
    });

</script>

So whenever the SQL in the “event.php” is limited to a low number, it shows a perfect calendar to me. But when the number of event goes up the failure function is activated and it’s showing me my error message, as the failure function is triggered.

Is there a way to do some research why this could happen? I manually checked the database entries, they look all nearly the same, no troubles here. In the fullcalendar documentation it says, that there is no maximum number of entries. Even if there would be a maximum, it’s very strange the sometimes more than 10 entries cause an error and sometimes 15 entries are cool. There must be something wrong with the entries, does anyone know a way how to check them or how to get an error message out of it? maybe that helps me to continue working.

Thanks a lot!

Edit: This is events.php

header('Content-Type: application/json');
include("config.php");

$sql = "SELECT `start`, `end`, `title`, `description` FROM ".$SETTINGS["data_table"]." WHERE UNIX_TIMESTAMP(`start`) >=".strtotime($mysqli->real_escape_string($_GET['start']))." 
        AND UNIX_TIMESTAMP(`start`)<=".strtotime($mysqli->real_escape_string($_GET['end']))." LIMIT 100";
$arr = array();
if ($result = $mysqli->query($sql)) {
    $counter = 0;
    while ($row = $result->fetch_assoc()) {
        $arr[$counter]=$row;
        $counter++;
    }

    echo json_encode($arr);
} else {
    printf("Error: %sn", $mysqli->sqlstate);
    exit;
}

Answer

In this case the mysqlli query had to be set to UTF-8, it wasn’t enough to use a php header to set it to utf-8.

$mysqli = new mysqli($SETTINGS["hostname"], $SETTINGS["mysql_user"], $SETTINGS["mysql_pass"],$SETTINGS["mysql_database"]);

$mysqli->set_charset("utf8");

Advertisement

Answer