Ergebnis 1 bis 13 von 13

Thema: FeWo Belegungsplan mit Bordmitteln & datepicker m. Event Vorbelegung

  1. #1
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.506
    Partner-ID
    6122

    Standard FeWo Belegungsplan mit Bordmitteln & datepicker m. Event Vorbelegung

    Hallo,
    versuchsweise wollte ich einen FeWo Belegungsplan nur mit Bordmitteln erstellen. Soweit bin ich gekommen:

    UPDATE(s) HIER:
    1) Formularfelder für Anreise / Abreise mit pickadate.js. s.:
    https://community.contao.org/de/show...l=1#post402530

    2) Events in pickadate.js vorbelegen s.:
    https://community.contao.org/de/show...l=1#post402892

    3) pickadate.js mit Vorbelegung über Contao Erweiterung s.:
    https://community.contao.org/de/show...l=1#post402913

    4) Events vorbelegen in daterangepicker.js s.:
    https://community.contao.org/de/show...l=1#post403110
    1) Bezieht sich auf Contao 3.5.8

    a) Ein Event-Archiv mit den Reservierungen (Events) je FeWo Objekt erstellen

    b) Ein weiteres Event-Archiv - nennen wir es "show-kalender-link".
    In diesem Archiv existiert nur ein Event z.B. 01.01.2016 - mit aktivierter Wiederholung / Intervall 1 Jahr und unbefristeten Wiederholungen.
    Das führt dazu das z.B. beim Minikalender wieder vor/zurück geblättert werden kann.
    (Hinweis: Dieser Schritt ist bei Nutzung der Erweiterung [calendar_extended] nicht notwendig.)

    c) Das Template cal_mini.html5 ändern - s.u..
    Die Änderungen setzt die CSS Klasse .hide damit die Anzeige des Archivs "show-kalender-link" unterdrückt werden kann.
    Weiterhin werden je Event die CSS Klassen .startevent und .endevent gesetzt - Darüber könnte man diese gesondert darstellen.

    c1) Ein Modul vom Typ Kalender erstellen und hierbei sicherstellen das das untere Template herangezogen wird (falls umbenannt).
    In den Moduleinstellungen beide Archive auswählen und die 'Verkürzte Darstellung' deaktiviert (lassen)!!!

    d) Das von Spooky genannte Script einbauen - https://community.contao.org/de/show...l=1#post350838

    Status:
    Darüber erhält man eine MiniKalender Funktion (Darstellung kann ja auch über die ganze Breite gehen) mit monatlichen Vor/Zurück Blättern ohne das die Seite neu geladen werden muß.
    Zusätzlich kann man die jeweiligen Start/End Datumsangaben also Anfahrt/Abreise gesondert stylen.

    Das kann man so also gebrauchen ...
    (Funktioniert dann aber nur mit einem Kalender je Seite)

    Datei cal_mini.html5:
    PHP-Code:
    <table class="minicalendar">
    <thead>
      <tr>
        <th class="head previous"><?php if ($this->prevHref): ?><a href="<?= $this->prevHref ?>" rel="nofollow" title="<?= $this->prevTitle ?>"><?= $this->prevLabel ?></a><?php else: ?>&nbsp;<?php endif; ?></th>
        <th colspan="5" class="head current"><?= $this->current ?></th>
        <th class="head next"><?php if ($this->nextHref): ?><a href="<?= $this->nextHref ?>" rel="nofollow" title="<?= $this->nextTitle ?>"><?= $this->nextLabel ?></a><?php else: ?>&nbsp;<?php endif; ?></th>
      </tr>
      <tr>
        <?php foreach ($this->days as $i=>$day): ?>
          <th class="label<?= $day['class'?>"><?= utf8_substr($day['name'], 0$this->substr?><span class="invisible"><?= utf8_substr($day['name'], $this->substr?></span></th>
        <?php endforeach; ?>
      </tr>
    </thead>
    <tbody>
      <?php foreach ($this->weeks as $class=>$week): ?>
        <tr class="<?= $class ?>">
          <?php foreach ($week as $day): ?>
            <?php if ($day['href']): ?>

                <?php // get date of each weekday 
                    
    $strdateDayOfWeek explode("="$day['href']); 
                    
    $dateDayOfWeek strtotime($strdateDayOfWeek[1]); 
                    
                    foreach(
    $day['events'] as $event) {
                        
    // mark if weekdate equals event-start or event-end 
                        
    if($dateDayOfWeek == $event['startDate']) {
                             
    $day['class'] = $day['class'].' startevent'
                        }
                        elseif(
    $dateDayOfWeek == $event['endDate']) {
                             
    $day['class'] = $day['class'].' endevent'
                        }
                        
    // mark helper event-archiv
                        
    if ($event['calendar']->title == 'show-kalender-link') {
                            
    $day['class'] = $day['class'].' hide'
                        }
                    }
                
    ?>

              <td class="<?= $day['class'?>"><a href="<?= $day['href'?>" title="<?= $day['title'?>"><?= $day['label'?></a></td>
            <?php else: ?>
              <td class="<?= $day['class'?>"><?= $day['label'?></td>
            <?php endif; ?>
          <?php endforeach; ?>
        </tr>
      <?php endforeach; ?>
    </tbody>
    </table>
    Offen / Hilfe:
    - Darstellung mehrerer Minikalender - s. https://community.contao.org/de/show...l=1#post402314
    Eventuell fällt euch dazu noch etwas ein ...

    UPDATE:
    Hierzu gibt es einen neuen Beitrag der wohl zu funktioniert!


    - Keine doppelten Datumseinträge in einem Event-Archiv: Dies wird wohl ohne Erweiterung nicht fluppen - aber Kester ist dran: s. https://community.contao.org/de/show...l=1#post402483

    Frank
    Geändert von Franko (08.06.2016 um 12:48 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  2. #2
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.506
    Partner-ID
    6122

    Standard

    In Kürze folgen hier evtl. ein paar Beispiele für ein Buchungsformular mit jQuery datepicker für Anreise/Abreise ...

    UPDATE:
    siehe https://community.contao.org/de/show...l=1#post402530
    Geändert von Franko (11.03.2016 um 19:57 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  3. #3
    Alter Contao-Hase Avatar von kmielke
    Registriert seit
    21.06.2009.
    Beiträge
    1.173

    Standard

    Hallo Frank,

    a) Ein Event-Archiv mit den Reservierungen (Events) je FeWo Objekt erstellen
    In meiner Erweiterung gibt es eine Event-Anmeldung, die mit EFG funktioniert. Schaf dazu mal in die Doku der Erweiterung: http://de.contaowiki.org/Calendar_extended
    Evtl. hilft dir das.

    b) Ein weiteres Event-Archiv - nennen wir es "show-kalender-link".
    In diesem Archiv existiert nur ein Event z.B. 01.01.2016 - mit aktivierter Wiederholung / Intervall 1 Jahr und unbefristeten Wiederholungen.
    Das führt dazu das z.B. beim Minikalender wieder vor/zurück geblättert werden kann.
    Das ist in meiner Erweiterung für den Kalender (default und mini) aktiv.

    Gruß Kester
    Geändert von kmielke (11.03.2016 um 15:00 Uhr)
    Gruß Kester

    Kein Support via PN ohne vorherige Absprache.

  4. #4
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.506
    Partner-ID
    6122

    Standard

    Hallo,

    In meiner Erweiterung gibt es eine Event-Anmeldung, die mit EFG funktioniert. Schaf dazu mal in die Doku der Erweiterung: http://de.contaowiki.org/Calendar_extended
    Evtl. hilft dir das.
    Habe zu meiner Schande noch nicht mit Deiner Erweiterung gearbeitet - versuche ich jetzt aber bald...
    Im Zusammenhang mit der Frontend Anmeldung (hier dann Reservierung) - habe ich noch nicht benötigt.
    Und EFG? Läuft das noch unter der 3.5.8? Würde dann eher contao-leads favorisieren s. https://github.com/terminal42/contao-leads

    Frank
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  5. #5
    Alter Contao-Hase Avatar von kmielke
    Registriert seit
    21.06.2009.
    Beiträge
    1.173

    Standard

    Mit EFG habe ich unter 3.5.8 keine Probleme bisher, werde aber sehen, ob ich auch mit contao-leads machen kann.

    Gruß Kester
    Gruß Kester

    Kein Support via PN ohne vorherige Absprache.

  6. #6
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.506
    Partner-ID
    6122

    Standard

    So - wenn man den obigen Belegungsplan einsetzt möchte man (auf der gleichen Seite) auch ein Formular das Anreise u. Abreise Felder beinhaltet.
    Diese Formularfelder sollen dann mit einem datepicker ausgestattet werden. Für jQuery existieren hierzu eine Fülle an plugins - manche sind responsive andere bieten eine multi-range-date-selection usw..

    Für unser Beispiel (Contao 3.5.8) beziehe ich mich auf pickadate.js in der Version 3.5.6 s. http://amsul.ca/pickadate.js/.
    Ladet euch die Daten herunter und entpackt diese in euer files Verzeichnis. Man erstellt im template Verzeichnis eine neues template namentlich j_pickadate.html5 mit unteren Inhalt.
    Im Anschluß steht dieses template im jeweiligen theme in den Einstellungen zur Auswahl und muß aktiviert werden ( jQuery muß ebenfalls aktiviert sein).


    Bitte beachten
    Die Jungs von materializecss (s. http://materializecss.com/forms.html) benutzen in Ihren Forms Components ebenfalls ein script datepicker basierend auf pickadate.js - Ist aber älter und beinhaltet nicht alle Funktionen ...
    Daher bitte unterscheiden ...
    Man erstellt über den Formulargenerator min. zwei Felder für Anreise und Abreise und bindet diese im Artikel nach dem Mini-Kalender ein - Fertig.

    HINWEIS 1:
    Im Template j_pickadate.html5 muß die jeweils korrekte Css-Id der beiden Input Felder in den Zeilen

    PHP-Code:
    var from_$input = $('#IHRE-FORMULARFELD-ID-ANREISE').pickadate(),
    ...
    var 
    to_$input = $('#IHRE-FORMULARFELD-ID-ABREISE').pickadate(), 
    gesetzt werden - in meinem Beispiel sind dies #ctrl_18 und #ctrl_20.

    HINWEIS 2:
    Die oberen Angaben binden die pickadate.js css und js Daten ein - diese müssen entsprechend eures files Pfad angepaßt werden.

    Datei j_pickadate.html5:

    PHP-Code:
    <?php
      $GLOBALS
    ['TL_USER_CSS'][] = 'files\themes\jquery\pickadate\lib\themes\default.css|static';
      
    $GLOBALS['TL_USER_CSS'][] = 'files\themes\jquery\pickadate\lib\themes\default.date.css|static';
    ?>
    <script src="files\themes\jquery\pickadate\lib\picker.js"></script>
    <script src="files\themes\jquery\pickadate\lib\picker.date.js"></script>

    <script>
    $(document).ready(function(){
        
        $.extend($.fn.pickadate.defaults, {
            monthsFull: [ 'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember' ],
            monthsShort: [ 'Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez' ],
            weekdaysFull: [ 'Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag' ],
            weekdaysShort: [ 'So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa' ],
            showMonthsShort: true,
            showWeekdaysFull: false,        
            
            today: 'Heute',
            clear: 'Löschen',
            close: 'Schließen',
            labelMonthNext: 'nächster Monat',
              labelMonthPrev: 'vorheriger Monat',
              formatSubmit: 'yyyy/mm/dd',
              
            closeOnSelect: true,
              closeOnClear: false,

            firstDay: 1, //first week day is monday
            format: 'dddd, dd. mmmm yyyy',
            formatSubmit: 'yyyy/mm/dd',
            hiddenName: true,
            
            min: new Date(),
            disable: [
                
              ]
        })    

        var from_$input = $('#ctrl_18').pickadate(),
            from_picker = from_$input.pickadate('picker')
        
        var to_$input = $('#ctrl_20').pickadate(),
            to_picker = to_$input.pickadate('picker')
        
        
        // Check if there’s a “from” or “to” date to start with.
        if ( from_picker.get('value') ) {
          to_picker.set('min', from_picker.get('select'))
        }
        if ( to_picker.get('value') ) {
          from_picker.set('max', to_picker.get('select'))
        }
        
        // When something is selected, update the “from” and “to” limits.
        from_picker.on('set', function(event) {
          if ( event.select ) {
            to_picker.set('min', from_picker.get('select'))    
          }
          else if ( 'clear' in event ) {
            to_picker.set('min', false)
          }
        })
        to_picker.on('set', function(event) {
          if ( event.select ) {
            from_picker.set('max', to_picker.get('select'))
          }
          else if ( 'clear' in event ) {
            from_picker.set('max', false)
          }
        })    

    }) 
    </script>
    STATUS:
    Für beide Input Felder steht jetzt der datepicker zur Verfügung. Eine Auswahl jenseits des aktuellen Datums ist nicht möglich.
    Die Reihenfolge der Auswahl ist egal - wählt man erst Anreise stehen bei Abreise nur die Datumsangaben nach gewähltem Anreisedatum zur Verfügung -
    umgekehrt - wählt man erst Abreise ist bei Anreise nur ein Datum VOR dem Abreisedatum möglich.

    NEXT:
    Man kann hier ebenfalls bestimmte Datumsangaben von der Auswahl ausschließen - in unserem Beispiel sollten dies die bereits eingetragenen Reservierungsdaten aus einem Event-Archiv sein.

    (Schaffe ich dieses Wochenende nicht mehr - folgt evtl. anhand der Contao eigenen Events oder z.B bei Verwendung der kommerziellen Erweiterung [belegungsplan] von fruitMEDIA ...)

    Und nicht zu vergessen - Dank Kester in Zusammenhang mit der aktuellen Version von [calendar_extended] s. https://contao.org/de/erweiterungsli...060009.de.html

    Bis dahin
    Frank
    Geändert von Franko (11.03.2016 um 20:29 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  7. #7
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.506
    Partner-ID
    6122

    Standard

    Hallo,
    die grundlegende Nutzung und Einbindung von pickadate.js (v3.5.6) habe ich ja oben beschrieben.
    Jetzt sollen in dem datepicker die vorliegenden Reservierungsdaten eines Contao Event-Archivs deaktiviert werden,
    damit diese erst gar nicht ausgewählt werden können.

    Im oberen Beispiel haben wir zur Einbindung des datpickers das template "j_pickadate.html5" erstellt und dieses mußte im jeweiligen Theme/Seitenlayout eingebunden werden. Bitte das Template für diese Umsetzung zuvor wieder im Seitenlayout deaktivieren!

    Das jQuery Plugin bietet die Möglichkeit Datumsangaben zu deaktivieren und zwar in den Optionen - beispielsweise wie folgt:
    Code:
    ...
    disable: [
      [2016,2,12],
      { from: [2016,2,14], to: [2016,2,27] }
    ]
    ...
    Wir benötigen also alle Event Daten und müssen diese wie oben einbinden. Hierbei soll das jeweilige Startdatum und Endatum ausgeschlossen werden, damit diese buchbar bleiben. Da die Datumsangaben im Javascript Umfeld abgebildet werden muß die Monatsangabe um 1 verringert werden.

    Wir nutzen hierzu das Contao Modul "Auflistung" mit folgenden Angaben:
    Tabelle: tl_calendar_events
    Felder: startDate,endDate
    Bedingung: pid = 3
    Sortieren nach: startDate
    wobei die pid die id des jeweiligen Event-Archivs sein muß.

    Wir erstellen ein neues Template "list_default_j_dp.html5" (s.u.) und nutzen dieses in dem Modul "Auflistung".
    Im Anschluß wird das Modul im Artikel nach den Formularen mit unseren Feldern "Anreise" u. "Abreise" eingebunden (s.o.).

    Template list_default_j_dp.html5:
    PHP-Code:
    <?php
      $GLOBALS
    ['TL_USER_CSS'][] = 'files\themes\jquery\pickadate\lib\themes\default.css|static';
      
    $GLOBALS['TL_USER_CSS'][] = 'files\themes\jquery\pickadate\lib\themes\default.date.css|static';
    ?>
    <script src="files\themes\jquery\pickadate\lib\picker.js"></script>
    <script src="files\themes\jquery\pickadate\lib\picker.date.js"></script>

    <script>
    $(document).ready(function(){
        
        $.extend($.fn.pickadate.defaults, {
            monthsFull: [ 'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember' ],
            monthsShort: [ 'Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez' ],
            weekdaysFull: [ 'Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag' ],
            weekdaysShort: [ 'So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa' ],
            showMonthsShort: true,
            showWeekdaysFull: false,        
            
            today: 'Heute',
            clear: 'Löschen',
            close: 'Schließen',
            labelMonthNext: 'nächster Monat',
              labelMonthPrev: 'vorheriger Monat',
              formatSubmit: 'yyyy/mm/dd',
              
            closeOnSelect: true,
              closeOnClear: false,

            firstDay: 1, //first week day is monday
            format: 'dddd, dd. mmmm yyyy',
            formatSubmit: 'yyyy/mm/dd',
            hiddenName: true,
            
            min: new Date(),
            disable: [
                
    <?php 
    foreach ($this->tbody as $class=>$row) {
      foreach (
    $row as $col) {
        if( 
    strpos($col['class'], 'col_first') ) {
          
    $tempData $col['raw'];
        }
        else
        {
          if ( isset(
    $col['raw']) ) { //only if endDate is set 
            
    print "{from:[".$this->parseDate('Y,m,d',strtotime('-1 month +1 day',$tempData))."], to:[".$this->parseDate('Y,m,d',strtotime('-1 month -1 day',$col['raw']))."]},\n"
          }
          else
          {
            print 
    "[".$this->parseDate('Y,m,d'strtotime('-1 month',$tempData))."],\n"
          }
        }
      }
    }
    ?>            
                
              ]
        })    

        var from_$input = $('#ctrl_18').pickadate(),
            from_picker = from_$input.pickadate('picker')
        
        var to_$input = $('#ctrl_20').pickadate(),
            to_picker = to_$input.pickadate('picker')
        
        
        // Check if there’s a “from” or “to” date to start with.
        if ( from_picker.get('value') ) {
          to_picker.set('min', from_picker.get('select'))
        }
        if ( to_picker.get('value') ) {
          from_picker.set('max', to_picker.get('select'))
        }
        
        // When something is selected, update the “from” and “to” limits.
        from_picker.on('set', function(event) {
          if ( event.select ) {
            to_picker.set('min', from_picker.get('select'))    
          }
          else if ( 'clear' in event ) {
            to_picker.set('min', false)
          }
        })
        to_picker.on('set', function(event) {
          if ( event.select ) {
            from_picker.set('max', to_picker.get('select'))
          }
          else if ( 'clear' in event ) {
            from_picker.set('max', false)
          }
        })    

    }) 
    </script>
    Geändert von Franko (15.03.2016 um 10:52 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  8. #8
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.506
    Partner-ID
    6122

    Standard

    Hallo,
    war das Contao Modul "Auflistung" nicht irgendwann mal vom Core ausgelagert worden (hab mir in der Erweiterungsliste nen Wolf gesucht)?
    Oder war das was anderes ...
    Frank

    EDIT - Benebelt - Das ist die Erweiterung [memberlist] ...
    Geändert von Franko (16.03.2016 um 09:51 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  9. #9
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.506
    Partner-ID
    6122

    Standard

    Hallo,
    zunächst - bin kein Mitarbeiter von fruitMedia - sollte das hier irgendwie gegen Forenregeln verstoßen o. lizenzrechtlich problematisch werden - bitte Eintrag löschen.

    Auch wenn das Thema (mit Bordmitteln) heißt -
    wenn man Contao 3.5.8 aufsetzt könnte man sich die Mühe sparen und aufgrund des "Long Term Supports" die existierenden Erweiterungen ruhigen Gewissens nutzen.

    Für einen Belegungsplan gibt es mehrere Contao Erweiterungen - hier exemplarisch den kommerziellen [contao_belegungsplan] von fruitMedia s. https://contao.org/de/erweiterungsli...000009.de.html

    Die Erweiterung bietet z.B. mehrere Minikalender o. eindeutige Eventangaben (hint: dank Kester geht das ja jetzt auch mit [calendar_extended]) entgegen der obigen Umsetzung mit Bormitteln und ist eigentlich auch recht günstig.

    Wenn man diese Erweiterung gekauft hat kann man z.B. im Artikel (je Fewo Objekt) erst den Belegungsplan einbinden und darunter dann das Formular mit den Feldern "Anreise" und "Abreise".

    Will man wie oben diese mit dem datepicker ausstatten und hier ebenfalls die Reservierungsdaten im datepicker deaktivieren ist die Vorgehensweise eigentlich identisch.

    Ein Modul vom Typ "Auflistung" mit folgenden Angaben erstellen:
    Tabelle: tl_belegungsplan_data
    Felder: start,stop
    Bedingung: pid = 1
    Sortieren nach: start
    wobei die pid die id des jeweiligen Belegungsplan sein muß.

    Man erstellt sich wieder ein eigenes template (basierend auf list_default.html5) und wählt dieses im Modul "Auflistung" aus. Im Anschluß setzt man dieses Modul im jeweiligen Artikel nach den Formularen ein.

    Das Template an sich ist identisch mit den oberen Angaben s.: https://community.contao.org/de/show...l=1#post402892...
    Geändert von Franko (15.03.2016 um 12:18 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  10. #10
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.506
    Partner-ID
    6122

    Standard

    Hallo,
    ein Beispiel mit einem anderen datepicker -
    jquery.daterangepicker.js: s.: http://longbill.github.io/jquery-date-range-picker/

    Dieses plugin ist zwar recht groß u. benötigt zudem die moment.js bietet aber eine schöne, visuelle Bereichsauswahl. Vor allem ist aber die Umsetzung zum deaktivieren der Einträge hier etwas anders.

    Da dies so auch in anderen plugins realisiert wird - hilft es eventuell (z.B. der jQuery UI datepicker s. http://api.jqueryui.com/datepicker/#...-beforeShowDay).

    Der daterangepicker.js bietet hierzu die Funktion beforeShowDay() die vor Darstellung jedes Kalendertages aufgerufen wird:
    beforeShowDay (Function)
    A function that takes a date as a parameter and must return an array with:
    [0]: true/false indicating whether or not this date is selectable
    [1]: a CSS class name to add to the date's cell or "" for the default presentation
    [2]: an optional popup tooltip for this date
    The function is called for each day in the datepicker before it is displayed.
    Die Ausgangslage für den Abruf der Events über das Modul "Auflistung" ist identisch s.: https://community.contao.org/de/show...l=1#post402892

    Wie bisher wird dann für das Modul "Auflistung" ein eigenes template basierend auf list_default.html5 angelegt und im Modul genutzt.

    Über das Modul "Auflistung" erhalten wir nur das jeweilige Statdatum/Endatum. Für die Funktion beforeShowDay() des daterangepicker.js benötigen wir aber alle separaten Tage damit diese vergleichbar sind.
    Für den einfachen Vergleich o. Datums Formatierung via PHP und Javascript seitig arbeiten wir nur mit timestamps.

    Hier das template:
    PHP-Code:
    <?php $GLOBALS['TL_USER_CSS'][] = 'files\themes\jquery\date-range-picker\daterangepicker.css|static'?>
    <script src="files\themes\jquery\date-range-picker\moment.min.js"></script>
    <script src="files\themes\jquery\date-range-picker\jquery.daterangepicker.js"></script>

    <?php 
        
    // CSS ID of contao input field 
        
    $domInputField1 '#ctrl_18';    

        
    $arrReservation = array();

        foreach (
    $this->tbody as $class=>$row) {
          foreach (
    $row as $col) {
            if( 
    strpos($col['class'], 'col_first') ) {
              
    $tempData $col['raw'];
            }
            else
            {
              if ( isset(
    $col['raw']) ){ //only if endDate is set 
        
                // +1day cause startdate should be bookable
                
    $start date('Y-m-d'strtotime('+1 day',$tempData));
                
    $startDatetime = new DateTime($start);
                
                
    // DatePeriod object ignores last period - ok here cause enddate should be bookable
                
    $end date('Y-m-d'$col['raw']);
                
    $endDatetime = new DateTime($end);
                
                
    // get days between e.g. Interval 1day
                
    $daterange = new DatePeriod$startDatetime, new DateInterval('P1D'), $endDatetime );
                foreach(
    $daterange as $date){
                  
    // write as unix timestamp
                  
    $arrReservation[] = $date->getTimestamp();
                }
              }
              else
              {
                
    // if no enddate write startdate
                
    $arrReservation[] = (int)$tempData;
              }
            }
          }
        }
    ?>            
    <script>
    $(document).ready(function(){
        
        $('<?php echo $domInputField1 ?>').dateRangePicker({
            language:'de',
            startOfWeek: 'monday',
            format: 'DD.MM.YYYY',
            separator: ' bis ',
            startDate: 'new Date()',    
            showShortcuts: false,    
            selectForward: true,
            autoClose: true,
            singleDate: false,
            singleMonth: 'auto',
            alwaysOpen: false,     
            
            beforeShowDay: function(dobj) {
                <?php echo "var arrReservation = "json_encode($arrReservation).";\n";?>
                var nd = new Date(dobj.getFullYear(), dobj.getMonth(), dobj.getDate());       
                var nd_unixstamp = nd.getTime()/1000|0;
                var valid = true;    
                var _class = '';
                var _tooltip = '';
                if ( arrReservation.indexOf(nd_unixstamp) > -1 ) { valid = false; }
                return [valid,_class,_tooltip];
            },

        });

    }) 
    </script>
    Am Anfang des templates werden die CSS/JS Dateien des plugins gesetzt - hier wieder die korrekten Pfadangaben setzen!

    Standardmäßig nutzt das plugin ein einzelnes Input Feld - dessen CSS ID bitte dann in der Varaiablen $domInputField1 eintragen (im Beispiel '#ctrl_18').
    Geändert von Franko (17.03.2016 um 08:19 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  11. #11
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    837

    Standard

    Interessanter Thread, was mir gerade auffällt warum werden die CSS files per $GLOBALS eingebunden die JS files jedoch nicht?
    Hat das einen Grund oder ist das einfach nur "so", weil es eben alternativ funktioniert?

    LG
    Bennie

  12. #12
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.506
    Partner-ID
    6122

    Standard

    Möchte man obiges plugin mit zwei Input Feldern nutzen,
    sollte der Aufruf über den parent Container der beiden Input Felder erfolgen - in Contao wäre dies <div class="formbody">.

    Im abgeänderten template diese CSS Klasse zusammen mit den CSS ID's der beiden Input Felder (hier '#ctrl_18' und 'ctrl_20') entsprechend ändern.

    Das Template:
    PHP-Code:
    <?php $GLOBALS['TL_USER_CSS'][] = 'files\themes\jquery\date-range-picker\daterangepicker.css|static'?>
    <script src="files\themes\jquery\date-range-picker\moment.min.js"></script>
    <script src="files\themes\jquery\date-range-picker\jquery.daterangepicker.js"></script>

    <?php 
        
    // CSS ID of contao input field 
        
    $domInputField1 '#ctrl_18';    

        
    // CSS ID of contao input field if dateRangePicker is set for two inputs
        
    $domInputField2 '#ctrl_20';    
        
        
    // CSS ID/class of parent container if dateRangePicker is set for two inputs
        
    $domContainer '.formbody';
        
        
    $arrReservation = array();

        foreach (
    $this->tbody as $class=>$row) {
          foreach (
    $row as $col) {
            if( 
    strpos($col['class'], 'col_first') ) {
              
    $tempData $col['raw'];
            }
            else
            {
              if ( isset(
    $col['raw']) ){ //only if endDate is set 
        
                // +1day cause startdate should be bookable
                
    $start date('Y-m-d'strtotime('+1 day',$tempData));
                
    $startDatetime = new DateTime($start);
                
                
    // DatePeriod object ignores last period - ok here cause enddate should be bookable
                
    $end date('Y-m-d'$col['raw']);
                
    $endDatetime = new DateTime($end);
                
                
    // get days between e.g. Interval 1day
                
    $daterange = new DatePeriod$startDatetime, new DateInterval('P1D'), $endDatetime );
                foreach(
    $daterange as $date){
                  
    // write as unix timestamp
                  
    $arrReservation[] = $date->getTimestamp();
                }
              }
              else
              {
                
    // if no enddate write startdate
                
    $arrReservation[] = (int)$tempData;
              }
            }
          }
        }
    ?>            
    <script>
    $(document).ready(function(){
        
        $('<?php echo $domContainer ?>').dateRangePicker({
            language:'de',
            startOfWeek: 'monday',
            format: 'DD.MM.YYYY',
            separator: ' bis ',
            startDate: 'new Date()',    
            showShortcuts: false,    
            selectForward: true,
            autoClose: true,
            singleDate: false,
            singleMonth: 'auto',
            alwaysOpen: false,     
        
            beforeShowDay: function(dobj) {
                <?php echo "var arrReservation = "json_encode($arrReservation).";\n";?>
                var nd = new Date(dobj.getFullYear(), dobj.getMonth(), dobj.getDate());       
                var nd_unixstamp = nd.getTime()/1000|0;
                var valid = true;    
                var _class = '';
                var _tooltip = '';
                if ( arrReservation.indexOf(nd_unixstamp) > -1 ) { valid = false; }
                return [valid,_class,_tooltip];
            },

            getValue: function() {
              if ($('<?php echo $domInputField1 ?>').val() && $('<?php echo $domInputField2 ?>').val() )
                return $('<?php echo $domInputField1 ?>').val() + ' to ' + $('<?php echo $domInputField2 ?>').val();
              else
               return '';
            },
            setValue: function(s,s1,s2) {
              $('<?php echo $domInputField1 ?>').val(s1);
              $('<?php echo $domInputField2 ?>').val(s2);
            },        
        });

    }) 
    </script>
    Hinweis: Aufgrund der Art des Aufrufes von beforeShowDay() kann es bei vielen Einträgen möglicherweise zu Problemen kommen s.: https://github.com/longbill/jquery-d...ker/issues/160.

    Allerdings habe ich dieses Beispiel nur wegen der unterschiedlichen Herangehensweise in Contao selbst aufgeführt.
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  13. #13
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.506
    Partner-ID
    6122

    Standard

    Zitat Zitat von Bennie Beitrag anzeigen
    Interessanter Thread, was mir gerade auffällt warum werden die CSS files per $GLOBALS eingebunden die JS files jedoch nicht?
    Hat das einen Grund oder ist das einfach nur "so", weil es eben alternativ funktioniert?

    LG
    Bennie
    Hi Bennie,
    just for sample purpose - Das kann Du - wie in Contao üblich - umsetzen wie Du möchtest ...

    Gruß
    Franko
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •