Kalender onload

Ben je je bewust dat je PHP-script altijd uitgevoerd wordt? PHP wordt al op de server uitgevoerd, en javascript door de browser.

Die window.onload = yourFunction; staat nu buiten de <script> tags, dus dat gaat niet werken. Maar je ready event zou het ook moeten doen (dus kies 1 vd 2). Maar nu moet je dus ipv yourFunction() of //some code dezelfde functie aanroepen die je nu (blijkbaar ergens) aan de onclick van de butten hebt gekoppeld.

Ja, de PHP-script wordt elke keer uitgevoerd wanneer ik een PHP-pagina laadt. Maar van een JavaScript wist ik het niet.
Dat weet ik dat de window.onload = yourfunctie buiten het script staat. Verschillende manieren geprobeerd om dit tussen het script te plaatsen, maar dit is nog niet gelukt. Ook is het niet gelukt om een functie van een onload toe te passen.

document.getElementById("checkdate").onload = function() {yourfunctie()};

Met vriendelijke groet,

Levy van der Meijden

Maar, dit is toch gewoon onderdeel van de initialisatie van je DatePicker kalender? Lijkt mij dat je dit dus niet toepast op het document of wat dan ook (en daarna met een click naar je kalender stuurt), maar (rechtstreeks) op de datepicker (zelf)?

Je kunt volgens mij met de optie/callback beforeShowDay() bepalen op welke datums geklikt kan worden en met de optie/callback onSelect() kun je vervolgens programmeren wat er moet gebeuren als je op een van die datums klikt.

Maar dit kun je dus helemaal in de initalisatie van je datepicker regelen, eventueel afhankelijk van informatie uit je database.

Met het bovenstaande zou je het gewenste effect moeten kunnen bereiken (een soort event kalender waar je op kunt klikken). Hoe je de code precies vormgeeft valt met deze twee specifieke opties wel bij elkaar te googlen en anders kunnen we hier wel even verder kijken.

EDIT: de bovenstaande code zou dus, mits goed vormgegeven, moeten werken.
EDIT: ben je nagegaan of je JavaScript code ergens breekt? dat zou mogelijk kunnen verklaren waarom dingen (ogenschijnlijk) niet werken.

Bedankt voor je reactie. Ja, na het laden van de kalender gebruik ik de functie Datepicker. Nu heb ik nog geen onload functie voor het laden van de kalender. Graag zou ik bij het laden van de pagina, de kalender willen zien. Nu wordt de kalender pas getoond, wanneer ik op een button klik.
<input type="text" size="13" value="Openen" class="btn2" id="date_picker">

Moet ik voor het laden van de kalender, de functie Checkdate gebruiken?

De plain onLoad voor lijkt mij niet echt nodig. Dat doet de .ready() in jQuery functie al.
Ik neem aan dat je die ook inlaadt?

Oke, nee volgens mij niet.
Het script bovenaan gebruik ik als volgt:

$(document).ready(function() {
function checkDate(selectedDate) {

Bedoel je het inladen van de date_picker?

Hm. Er begint mij iets te dagen.

Wanneer je in zijn algemeenheid zoiets hebt:

$(
something
);
lala;

Dan gebeurt er het volgende:
- er wordt gestart met de uitvoering van "something"
- direct daarna wordt "lala" uitgevoerd

Het kan dus zijn dat "something" nog bezig is als "lala" al uitgevoerd is. Met dit soort functienesting en callbacks kan het dus heel goed zijn dat er verschillende dingen "tegelijkertijd" gebeuren maar de volgorde is dan niet gegarandeerd.

Maar ook: als je op twee verschillende manieren besluit wanneer iets "klaar voor gebruik" is dan kom je mogelijk in de knoop met timing. Een combinatie van window.onload en $(document).ready(...) is daarom misschien ook niet echt aan te bevelen.

Dat gezegd hebbende, nog twee dingen. Allereerst: ben je nagegaan wanneer onload en ready vuren? In mijn datepicker probeersel is onload consistent sneller dan alles wat in document ready gebeurt. Dat zou in jouw geval dus ook inhouden dat je datepicker nog bezig is met whatever als je deze probeert te vullen.

Ten tweede: misschien moet je ook gaan nadenken over het dynamisch ophalen van de event-data. Nu haal je *alle* events op, niet enkel van de huidige maand. Op den duur wordt zo'n query een beetje onhandelbaar en/of wil je hier meer condities aan ophangen in geval van gepersonaliseerde event-kalenders ofzo.

Jammergenoeg heeft de datapicker niet echt veel (geen?) events waar je op in kan haken. Wat je wel kunt doen is de initialisatie van het datepicker-object inbouwen in de callback voor het ophalen van de initiële events. Ook zou je dingen wat verder kunnen splitsen zodat je de verschillende dingen functioneel scheidt en de code wat schoner wordt.

Je krijgt dan bijvoorbeeld de volgende opzet:
index.php

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DatePicker Event Calendar</title>
<link rel="stylesheet" type="text/css" href="assets/jquery-ui.css">
<script src="assets/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="assets/jquery-ui.js" type="text/javascript"></script>
</head>

<body>
<div id="datepicker"></div>

<script type="text/javascript">
//<![CDATA[
$().ready(function() {
    var myEvents = {};

    // fetch initial events and initialize datepicker with these
    $.ajax({
        'url': 'ajax.php',
        'method': 'get',
        'data': {'y': 2019, 'm': 9}, // @todo pull initial year and month from somewhere, might also depend on what initial month you want to show
        'dataType': 'json',
        'success': function(data) {
            myEvents = data;

            $('#datepicker').datepicker({
                // format date that is returned when clicking a date
                'dateFormat': 'yy-mm-dd',

                // for loading in the events to check if there is an event on that day
                'beforeShowDay': function(d) {
                    return checkMyEvents(d);
                },

                // beforeShow, for when initially loading the calendar; does not seem to trigger on load if its always visible

                'onChangeMonthYear': function(y, m) {
                    fetchMyEvents(y, m);
                },

                'onSelect': function(dateText, instance) {
                    console.log('clicked '+dateText); // debug
                    if (dateText in myEvents) {
                        console.log('corresponds with event ['+myEvents[dateText]['name']+']'); // debug; @todo implement further handling
                    }
                }
            });
        }
    })

    function checkMyEvents(d) {
        var eventDate = d.getFullYear()+'-'+('0'+(d.getMonth()+1)).slice(-2)+'-'+('0'+(d.getDate())).slice(-2); // yyyy-mm-dd
        if (eventDate in myEvents) {
            return [true, '', myEvents[eventDate]['name']];
        } else {
            return [false];
        }
    } // checkMyEvents

    function fetchMyEvents(y, m) {
        console.log('fetching events for '+y+'-'+m); // debug
        $.ajax({
            'url': 'ajax.php',
            'method': 'get',
            'data': {'y': y, 'm': m},
            'dataType': 'json',
            'success': function(data) {
                myEvents = data;
                $('#datepicker').datepicker('refresh'); // update datepicker with new events
            }
        });
    } // fetchMyEvents
});
//]]>
</script>
</body>
</html>

ajax.php

<?php
// normally, this data would come from a database
// format it in the way you would use it in jquery
$events = array(
    2019 => array(
        8 => array(
            '2019-08-02' => array('name' => 'august event #1', 'link' => 'date.php?date=2019-08-02'),
            '2019-08-05' => array('name' => 'august event #2', 'link' => 'date.php?date=2019-08-05'),
            '2019-08-10' => array('name' => 'august event #3', 'link' => 'date.php?date=2019-08-10'),
        ),
        9 => array(
            '2019-09-20' => array('name' => 'september event #4', 'link' => 'date.php?date=2019-08-20'),
            '2019-09-22' => array('name' => 'september event #5', 'link' => 'date.php?date=2019-08-22'),
            '2019-09-24' => array('name' => 'september event #6', 'link' => 'date.php?date=2019-08-24'),
        ),
        10 => array(
            '2019-10-10' => array('name' => 'october event #7', 'link' => 'date.php?date=2019-10-10'),
            '2019-10-11' => array('name' => 'october event #8', 'link' => 'date.php?date=2019-10-11'),
            '2019-10-12' => array('name' => 'october event #9', 'link' => 'date.php?date=2019-10-12'),
        ),
    ),
);

$selectedEvents = array();

if (
    isset($_GET['y']) && isset($_GET['m']) &&
    isset($events[$_GET['y']][$_GET['m']])
) {
    $selectedEvents = $events[$_GET['y']][$_GET['m']];
}

header('Content-Type: application/json; charset=UTF-8');
echo json_encode($selectedEvents);
?>

Echt super bedankt! Ja, dit is veel beter!