Kalender onload
Op dit moment worden de waardes van de kalender geladen, wanneer ik op een button klik.
Dit is de functie voor het laden van de gegevens.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<script>
$(document).ready(function() {
function checkDate(selectedDate) {
<?php
$q="select distinct date_format( date, '%d-%m-%Y' ) as date from sportevenementen";
$str="[ ";
foreach ($dbo->query($q) as $row) {
$str.="\"$row[date]\",";
}
$str=substr($str,0,(strlen($str)-1));
$str.="]";
echo "var not_available_dates=$str";
?>
var m = selectedDate.getMonth()+1;
var d = selectedDate.getDate();
var y = selectedDate.getFullYear();
m=m.toString();
d=d.toString();
if(m.length <2){m='0'+m;}
if(d.length <2){d='0'+d;}
var date_to_check = d+ '-' + m + '-' + y ;
for (var i = 0; i < not_available_dates.length; i++) {
if ($.inArray(date_to_check, not_available_dates) != -1 ) {
return [true,'voor_dates','Bekijk dag'];
}else{
return [false,'na_dates','Geen agenda punten'];
}
}
}
$(function() {
$( "#date_picker" ).datepicker({
dateFormat: 'dd-mm-yy',
beforeShowDay:checkDate,
onSelect:function() {
selectedDate = $('#date_picker').val();
var url="display-data.php?selectedDate="+selectedDate;
$('#d1').load(url);
}
});
});
})
</script>
Op internet heb ik wel gevonden, hoe een page onload wordt gebruikt.
<script type="text/javascript">
$(document).ready(function () {
yourFunction();
});
function yourFunction(){
//some code
}
</script>
window.onload = yourFunction;
$(document).ready(function() {
function checkDate(selectedDate) {
<?php
$q="select distinct date_format( date, '%d-%m-%Y' ) as date from sportevenementen";
$str="[ ";
foreach ($dbo->query($q) as $row) {
$str.="\"$row[date]\",";
}
$str=substr($str,0,(strlen($str)-1));
$str.="]";
echo "var not_available_dates=$str";
?>
var m = selectedDate.getMonth()+1;
var d = selectedDate.getDate();
var y = selectedDate.getFullYear();
m=m.toString();
d=d.toString();
if(m.length <2){m='0'+m;}
if(d.length <2){d='0'+d;}
var date_to_check = d+ '-' + m + '-' + y ;
for (var i = 0; i < not_available_dates.length; i++) {
if ($.inArray(date_to_check, not_available_dates) != -1 ) {
return [true,'voor_dates','Bekijk dag'];
}else{
return [false,'na_dates','Geen agenda punten'];
}
}
}
$(function() {
$( "#date_picker" ).datepicker({
dateFormat: 'dd-mm-yy',
beforeShowDay:checkDate,
onSelect:function() {
selectedDate = $('#date_picker').val();
var url="display-data.php?selectedDate="+selectedDate;
$('#d1').load(url);
}
});
});
})
</script>
Op internet heb ik wel gevonden, hoe een page onload wordt gebruikt.
<script type="text/javascript">
$(document).ready(function () {
yourFunction();
});
function yourFunction(){
//some code
}
</script>
window.onload = yourFunction;
Verschillende manieren geprobeerd om dit toe te passen, maar het is nog niet gelukt.
Zou iemand kunnen vertellen, hoe ik de onload kan toepassen?
Bedankt alvast,
Met vriendelijke groet,
Levy van der Meijden
Edit:
Code tags toegevoegd, zie ook de opmaakcodes in de Veelgestelde Vragen
Gewijzigd op 21/09/2019 07:33:20 door - Ariën -
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
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.
Gewijzigd op 21/09/2019 17:46:24 door Thomas van den Heuvel
<input type="text" size="13" value="Openen" class="btn2" id="date_picker">
Moet ik voor het laden van de kalender, de functie Checkdate gebruiken?
Ik neem aan dat je die ook inlaadt?
Het script bovenaan gebruik ik als volgt:
$(document).ready(function() {
function checkDate(selectedDate) {
Bedoel je het inladen van de date_picker?
Wanneer je in zijn algemeenheid zoiets hebt:
Code (php)
1
2
3
4
2
3
4
$(
something
);
lala;
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
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!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>
<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
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?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);
?>
// 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);
?>
Gewijzigd op 22/09/2019 15:47:15 door Thomas van den Heuvel