Kalender met periode

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jerry php

Jerry php

20/06/2013 08:43:09
Quote Anchor link
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
 
PHP hulp

PHP hulp

26/11/2020 21:54:33
 
Wouter J

Wouter J

20/06/2013 08:47:15
Quote Anchor link
jQuery datepicker voor calendar input. En dan met PHP en SQL in de database kijken.
 
Jerry php

Jerry php

20/06/2013 08:48:32
Quote Anchor link
maar ik moet een periode kunnen selecteren, dus bijvoorbeeld van 1/1/2013 tot 1/2/2013 en dat dan in een kalender.
 
Wouter J

Wouter J

20/06/2013 08:49:30
Quote Anchor link
ja, daarom zeg ik ook jQuery UI datepicker, die support als het goed is perioden.
 
Jerry php

Jerry php

20/06/2013 08:51:06
Quote Anchor link
http://jqueryui.com/datepicker/

Heb net even gekeken, maar dat support hij ook niet?
 
- Ariën -
Beheerder

- Ariën -

20/06/2013 08:53:32
Quote Anchor link
Ik kan gewoon in de voorbeelden een range selecteren. ..
 
Jerry php

Jerry php

20/06/2013 08:54:59
Quote Anchor link
Ja, maar dat is een datum, ik moet 2 datums kunnen selecteren
 
- Ariën -
Beheerder

- Ariën -

20/06/2013 08:57:35
Quote Anchor link
Dat zeg ik... 'een range'.
Kijk maar eens.
 
Jerry php

Jerry php

20/06/2013 09:00:04
Quote Anchor link
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.
 
- Ariën -
Beheerder

- Ariën -

20/06/2013 09:05:13
Quote Anchor link
'Restrict a daterange' gebruik je dan als er reserveringen zijn.
 
Jerry php

Jerry php

20/06/2013 09:11:28
Quote Anchor link
Ik ehb het gelezen maar ik begrijp het niet zo goed wat ik nou moet doen om mijn theorie in praktijk te laten brengen.
 
Koen Vlaswinkel

Koen Vlaswinkel

20/06/2013 09:13:13
Quote Anchor link
Welke code heb je al?
 
Jerry php

Jerry php

20/06/2013 09:14:57
Quote Anchor link
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.
 
- Ariën -
Beheerder

- Ariën -

20/06/2013 09:15:56
Quote Anchor link
"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'). "
 
Jerry php

Jerry php

20/06/2013 09:18:21
Quote Anchor link
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?
 
- Ariën -
Beheerder

- Ariën -

20/06/2013 11:52:53
Quote Anchor link
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 -
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

20/06/2013 11:55:46
Quote Anchor link
Je hebt de optie beforeShowDay
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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
    });
});

closed_days is dan een JS array die je met PHP vult
 
Jerry php

Jerry php

21/06/2013 14:20:32
Quote Anchor link
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..
 
Kris Peeters

Kris Peeters

21/06/2013 15:55:06
Quote Anchor link
Minuutje; hier een (half) uitgewerkt voorbeeld

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>


Dus, op lijn 10 worden de gereserveerde datums opgelijst.
Met php zal dat iets zijn als
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<?php
// zorg dat ze in een array staan
$dates = array('2013-06-20', '2013-06-22', '2013-06-24');
...

// lijn 10 javascript
echo "var your_dates = " . json_encode($dates). ";";
?>
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.