jQuery DataPicker Highlight
Ik ben bezig om een kleine kalender te maken, waar events op te komen staan.
Die events zal ik later uit mijn database halen, maar voorlopig doe ik het nog manueel.
Dit is de code die ik al heb:
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
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
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Kalender Test</title>
<link rel="stylesheet" href="style.css" media="screen"> <!-- Css -->
</head>
<body>
<div id="calendar"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <!-- jQuery Plugin (UI) -->
<script>
// Enkele datums.
var dates = ['22/06/2013', '23/06/2013'];
// Bij de datums gaan we ook wat uitleg bijhouden (Later zullen we die tonen in een div naast de kalender..)
var tips = ['Uitleg','Andere Uitleg'];
// De kalender.
$('#calendar').datepicker({
inline: true,
firstDay: 1,
beforeShowDay: highlightDays,
showOtherMonths: true,
dayNamesMin: ['Zo', 'Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za'],
monthNames: [ "Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December" ]
});
// Dit is om de datums een class mee te geven. Alleen werkt dit niet :[
// De css bevindt zich in de style.css
// css-class-to-highlight{
// background-color: #ff0;
// }
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
if (new Date(dates).toString() == date.toString()) {
return [true, 'css-class-to-highlight', tips];
}
}
return [true, ''];
}
</script>
</body>
</html>
<head>
<meta charset="utf-8">
<title>Kalender Test</title>
<link rel="stylesheet" href="style.css" media="screen"> <!-- Css -->
</head>
<body>
<div id="calendar"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <!-- jQuery Plugin (UI) -->
<script>
// Enkele datums.
var dates = ['22/06/2013', '23/06/2013'];
// Bij de datums gaan we ook wat uitleg bijhouden (Later zullen we die tonen in een div naast de kalender..)
var tips = ['Uitleg','Andere Uitleg'];
// De kalender.
$('#calendar').datepicker({
inline: true,
firstDay: 1,
beforeShowDay: highlightDays,
showOtherMonths: true,
dayNamesMin: ['Zo', 'Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za'],
monthNames: [ "Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December" ]
});
// Dit is om de datums een class mee te geven. Alleen werkt dit niet :[
// De css bevindt zich in de style.css
// css-class-to-highlight{
// background-color: #ff0;
// }
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
if (new Date(dates).toString() == date.toString()) {
return [true, 'css-class-to-highlight', tips];
}
}
return [true, ''];
}
</script>
</body>
</html>
Het probleem:
De gekozen datum wordt niet zichtbaar, ik weet echt niet wat ik er nog kan aan veranderen.
Iemand die hier ervaring mee heeft? En misschien de fout ziet?
Alvast bedankt
Diov
- Om te beginnen: het datum formaat. '22/06/2013' wordt niet gezien als een datum. Dat moet zijn '22-06-2013'
- Dit ziet er niet goed uit: new Date(dates).toString()
Het slaat eigenlijk nergens op. (Dates is een aray; neem geen toString van een opbject vooraleer ze deftig is aangemaakt.
Het moet zo-iets worden
Code (php)
1
2
3
4
2
3
4
for (var i = 0; i < dates.length; i++) {
var newDate = new Date(dates[i]);
if (newDate.toString() == date.toString()) {
....
var newDate = new Date(dates[i]);
if (newDate.toString() == date.toString()) {
....
Maar dan nog zal die vergelijking niet werken; bij de ene datum zal ook een uur worden gegenereerd; dus beide objecten zullen niet gelijk zijn; ook niet de toString.
Je moet zien dat je "jaar-maand-dag" van de ene vergelijkt met "jaar-maand-dag" van de andere
Heb hem helemaal aangepast, wat gegoogled, wat dingen overgenomen..
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
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
<script>
var evenementen = ["9-12-2013","14-6-2013","15-6-2013"];
function events(date) {
// We gaan de elke datum van de kalender anders schrijven.
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, evenementen) >= 0) {
return [true,"specialDay"];
} else {
return [true];
}
}
$('#calendar').datepicker({
inline: true,
firstDay: 1,
dateFormat: 'dd-mm-yy',
beforeShowDay: events,
showOtherMonths: true,
dayNamesMin: ['Zo', 'Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za'],
monthNames: [ "Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December" ],
onSelect: function(dateText, inst) {
}
});
</script>
var evenementen = ["9-12-2013","14-6-2013","15-6-2013"];
function events(date) {
// We gaan de elke datum van de kalender anders schrijven.
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, evenementen) >= 0) {
return [true,"specialDay"];
} else {
return [true];
}
}
$('#calendar').datepicker({
inline: true,
firstDay: 1,
dateFormat: 'dd-mm-yy',
beforeShowDay: events,
showOtherMonths: true,
dayNamesMin: ['Zo', 'Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za'],
monthNames: [ "Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December" ],
onSelect: function(dateText, inst) {
}
});
</script>
Nu nog een andere 'denk' vraag, hoe zouden jullie de beschrijving per datum ophalen?
Als je een datum selecteert, via ajax de gegevens uit de database halen?
Of ook al in een array plaatsen?
Het lijkt me onnodig om al die data al op voorhand te laden.
Ajax gaat vlug, vlot.
Eventueel een combinatie van beide, zoals je bij GMAIL ziet.
Een soort van buffer of cache maken van de data waarvan je verwacht dat ze bekeken zullen worden
Ik heb gisteren me wat verdiept in de 'inArray' functie van jQuery.
- Die geeft -1 terug als het niet in de array bevindt.
- Als het wel in de Array bevindt, dan zal het de key van de array teruggeven.
Dus dan dacht ik, ik maak 2 array's.
1 array voor de datums.
Een andere array voor de beschrijving bij die datums.
De code:
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
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
<script>
var evenementen = [<?php echo $dates; ?>];
var evenemt_descr = [<?php echo $description; ?>]
function events(date, inst) {
// We gaan de elke datum van de kalender anders schrijven.
dmy = $.datepicker.formatDate('dd-mm-yy', date);
// Kijken of de datum zich in de array 'evenementen' bevindt. Zoja zal de waarde gelijk of groter dan 0 zijn. Zo nee, de waarde zal -1 zijn.
if ($.inArray(dmy, evenementen) >= 0) {
return [true,"specialDay"];
} else {
return [true];
}
}
$('#calendar').datepicker({
inline: true,
firstDay: 1,
dateFormat: 'dd-mm-yy',
beforeShowDay: events,
showOtherMonths: false,
dayNamesMin: ['Zo', 'Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za'],
monthNames: [ "Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December" ],
onSelect: function(dateText, inst) {
var event_key = $.inArray(dateText, evenementen);
var event_descr = evenemt_descr[event_key];
$("#calendar_event").slideUp('slow', function() {
$("#calendar_event").html("Geen evenement gevonden");
$("#calendar_event").html(event_descr);
$("#calendar_event").slideDown('slow');
});
}
});
</script>
var evenementen = [<?php echo $dates; ?>];
var evenemt_descr = [<?php echo $description; ?>]
function events(date, inst) {
// We gaan de elke datum van de kalender anders schrijven.
dmy = $.datepicker.formatDate('dd-mm-yy', date);
// Kijken of de datum zich in de array 'evenementen' bevindt. Zoja zal de waarde gelijk of groter dan 0 zijn. Zo nee, de waarde zal -1 zijn.
if ($.inArray(dmy, evenementen) >= 0) {
return [true,"specialDay"];
} else {
return [true];
}
}
$('#calendar').datepicker({
inline: true,
firstDay: 1,
dateFormat: 'dd-mm-yy',
beforeShowDay: events,
showOtherMonths: false,
dayNamesMin: ['Zo', 'Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za'],
monthNames: [ "Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December" ],
onSelect: function(dateText, inst) {
var event_key = $.inArray(dateText, evenementen);
var event_descr = evenemt_descr[event_key];
$("#calendar_event").slideUp('slow', function() {
$("#calendar_event").html("Geen evenement gevonden");
$("#calendar_event").html(event_descr);
$("#calendar_event").slideDown('slow');
});
}
});
</script>
En nu haal ik de datums & beschrijvingen op in me database!
Bedankt voor je hulp :]
Diov
-1 is C++ voor null (of toch zo iets). Dat is daarvan overgeërfd.
De redenering is vooral dat 0 een geldige waarde is (zal je zelf ook wel achter gekomen zijn). Bijkomende reden: -1 in binair komt overeen met het hoogste getal.
11111111 // maar dan zoveel karakters als het systeem nodig heeft.
Een handige manier om het concept null of false toch in een getal (integer) te gieten, zonder 0 te mogen gebruiken.
Gewijzigd op 28/06/2013 12:39:00 door Kris Peeters
jQuery & PHP begint te tellen vanaf 0 bij Array's.
Had gisteren wat veel geprobeerd. Veel "Alerts" geplaatst.