Kalender met periode
Beste mensen,
Ik ben opzoek naar een kalender die een periode kan selecteren. ik ben al een tijdje bezig geweest om op andere manieren op te lossen, maar ik loop steeds vast. De gebruiker moet een periode selecteren en er moet dan gecontrolleerd worden of er al iemand in de periode geboekt is.
Kan iemand me vooruit helpen of op weg helpen?
alvast bedankt.
jerry
Ik ben opzoek naar een kalender die een periode kan selecteren. ik ben al een tijdje bezig geweest om op andere manieren op te lossen, maar ik loop steeds vast. De gebruiker moet een periode selecteren en er moet dan gecontrolleerd worden of er al iemand in de periode geboekt is.
Kan iemand me vooruit helpen of op weg helpen?
alvast bedankt.
jerry
jQuery datepicker voor calendar input. En dan met PHP en SQL in de database kijken.
maar ik moet een periode kunnen selecteren, dus bijvoorbeeld van 1/1/2013 tot 1/2/2013 en dat dan in een kalender.
ja, daarom zeg ik ook jQuery UI datepicker, die support als het goed is perioden.
Ik kan gewoon in de voorbeelden een range selecteren. ..
Ja, maar dat is een datum, ik moet 2 datums kunnen selecteren
Dat zeg ik... 'een range'.
Kijk maar eens.
Kijk maar eens.
Oke, ja ik zie het.
maar dan insert ik dit in de database, met de gebruiker erbij welke dan gereserveerd heeft.
Als dat gebeurt is komt er een nieuwe klant en die selecteerd bijvoorbeeld een andere periode, maar wel met een aantal dagen erin die de andere gebruiker gereserveerd heeft. dus ik moet dan gaan weergeven dat in die periode een dag niet beschikbaar is doordat iemand anders het heeft gereserveerd.
maar dan insert ik dit in de database, met de gebruiker erbij welke dan gereserveerd heeft.
Als dat gebeurt is komt er een nieuwe klant en die selecteerd bijvoorbeeld een andere periode, maar wel met een aantal dagen erin die de andere gebruiker gereserveerd heeft. dus ik moet dan gaan weergeven dat in die periode een dag niet beschikbaar is doordat iemand anders het heeft gereserveerd.
'Restrict a daterange' gebruik je dan als er reserveringen zijn.
Ik ehb het gelezen maar ik begrijp het niet zo goed wat ik nou moet doen om mijn theorie in praktijk te laten brengen.
Welke code heb je al?
Nouja, ik heb al het stukje dat je gewoon kan reserveren naar de database, met 2 data's. in de db: datumVan & datumTot
vanaf daar loop ik een beetje vast met hoe ik het moet gaan doen.
vanaf daar loop ik een beetje vast met hoe ik het moet gaan doen.
"Restrict the range of selectable dates with theminDate and maxDateoptions. Set the beginning and end dates as actual dates (new Date(2009, 1 - 1, 26)), as a numeric offset from today (-20), or as a string of periods and units ('+1M +10D'). "
Ja dat heb ik gelezen, maar kom er niet echt verder mee.
Ik heb nu al wel een beetje gepuzzeld ermee. Nu is eigenlijk mijn vraag verandert, en is nu zo geworden, dat ik in de kalender wil laten zien welke data's niet beschikbaar zijn. Zoals nu ook gebeurt met die -20. Maar hoe kan ik dat het makkelijkste de data's van en tot eruit halen en in de kalender zetten?
Ik heb nu al wel een beetje gepuzzeld ermee. Nu is eigenlijk mijn vraag verandert, en is nu zo geworden, dat ik in de kalender wil laten zien welke data's niet beschikbaar zijn. Zoals nu ook gebeurt met die -20. Maar hoe kan ik dat het makkelijkste de data's van en tot eruit halen en in de kalender zetten?
In het voorbeeld is er al een datumrange bepaald. Kan je daar niet op verder borduren?
Gewijzigd op 20/06/2013 11:53:04 door - Ariën -
Je hebt de optie beforeShowDay
closed_days is dan een JS array die je met PHP vult
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function checkNotClosed(adate) {
ymd = $.datepicker.formatDate('yy-mm-dd', adate);
if ($.inArray(ymd, closed_days) == -1) {
return [true, "", ""];
}
else {
return [false, "disabled", "Gesloten"];
}
}
$(document).ready(function() {
$("#calendar").datepicker( {
minDate: <?php echo $_SESSION['aanbdr']['levertijd']; ?>,
beforeShowDay: checkNotClosed
});
});
ymd = $.datepicker.formatDate('yy-mm-dd', adate);
if ($.inArray(ymd, closed_days) == -1) {
return [true, "", ""];
}
else {
return [false, "disabled", "Gesloten"];
}
}
$(document).ready(function() {
$("#calendar").datepicker( {
minDate: <?php echo $_SESSION['aanbdr']['levertijd']; ?>,
beforeShowDay: checkNotClosed
});
});
closed_days is dan een JS array die je met PHP vult
Ik kan er inderdaad niet op verder borduren.. en die beforeshowday begrijp ik ook niet helemaal.
Ik zou graag willen weten hoe ik de mensen kan tonen die op die dag wel beschikbaar zijn.. maar dat kan niemand mij uitleggen..
Ik zou graag willen weten hoe ik de mensen kan tonen die op die dag wel beschikbaar zijn.. maar dat kan niemand mij uitleggen..
Minuutje; hier een (half) uitgewerkt voorbeeld
Dus, op lijn 10 worden de gereserveerde datums opgelijst.
Met php zal dat iets zijn als
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
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Met gezeserveerde datums</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
var your_dates = ['2013-06-20', '2013-06-22', '2013-06-24']; // deze gegevens genereer je met php
$(function() {
$( "#datepicker" ).datepicker({
altFormat: "yy-mm-dd",
dateFormat: "yy-mm-dd",
beforeShowDay: function(date) { // hier gaan we een extra css class toevoegen aan de dagen die al volzet zijn
// check if date is in your array of dates
var dateString = toDateFormat(date);
if($.inArray(dateString, your_dates) > -1) {
// if it is return the following.
return [false, 'volzet', 'Deze datum is niet meer beschikbaar']
}
return [true, '', ''];
}
});
});
/*
date formaat functies
*/
function toDateFormat(d) {
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1; //Months are zero based
var curr_year = d.getFullYear();
return(curr_year + "-" + to2digits(curr_month) + "-" + to2digits(curr_date));
}
function to2digits(num) {
if (num < 10) {
return ('0' + num).toString();
}
return num.toString();
}
</script>
<style>
/* zet dit onder de andere andere css.*/
.volzet {
background-color: #00ffff;
}
</style>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Met gezeserveerde datums</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
var your_dates = ['2013-06-20', '2013-06-22', '2013-06-24']; // deze gegevens genereer je met php
$(function() {
$( "#datepicker" ).datepicker({
altFormat: "yy-mm-dd",
dateFormat: "yy-mm-dd",
beforeShowDay: function(date) { // hier gaan we een extra css class toevoegen aan de dagen die al volzet zijn
// check if date is in your array of dates
var dateString = toDateFormat(date);
if($.inArray(dateString, your_dates) > -1) {
// if it is return the following.
return [false, 'volzet', 'Deze datum is niet meer beschikbaar']
}
return [true, '', ''];
}
});
});
/*
date formaat functies
*/
function toDateFormat(d) {
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1; //Months are zero based
var curr_year = d.getFullYear();
return(curr_year + "-" + to2digits(curr_month) + "-" + to2digits(curr_date));
}
function to2digits(num) {
if (num < 10) {
return ('0' + num).toString();
}
return num.toString();
}
</script>
<style>
/* zet dit onder de andere andere css.*/
.volzet {
background-color: #00ffff;
}
</style>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
Dus, op lijn 10 worden de gereserveerde datums opgelijst.
Met php zal dat iets zijn als




