Kalender met periode
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
Kijk maar eens.
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.
vanaf daar loop ik een beetje vast met hoe ik het moet gaan doen.
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?
Gewijzigd op 20/06/2013 11:53:04 door - Ariën -
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 zou graag willen weten hoe ik de mensen kan tonen die op die dag wel beschikbaar zijn.. maar dat kan niemand mij uitleggen..
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