< Zurück

04.01.2013 15:47:00 • Categories: Javascript • Tags: Jquery, Jquery Ui, Datepicker

Javascript: Ferientermine für den jQuery UI Datepicker

Der jQuery UI Datepicker ist eine feine Sache. Nur manchmal möchte man weitere Informationen zu den jeweiligen Tagen anzeigen.

Wenn der Datepicker initialisiert wird kann dies über die Option "beforeShowDay" erledigt werden.

var Datepicker = {
    options: {
        dateFormat: 'yy-mm-dd',
        defaultDate: +7,
        duration: 'fast',
        numberOfMonths: 2,
        showButtonPanel: true,
        monthNames: Translation[L].monthNames,
        monthNamesShort: Translation[L].monthNamesShort,
        dayNames: Translation[L].dayNames,
        dayNamesMin: Translation[L].dayNamesMin,
        dayNamesShort: Translation[L].dayNamesShort,
        nextText: Translation[L].nextText,
        prevText: Translation[L].prevText,
        closeText: Translation[L].closeText,
        currentText: Translation[L].currentText,
        beforeShowDay: function(date){
          label = ''
          regions = HD.getAllRegionNamesForDate(date)
          if (regions.length > 0) {
            label = 'Schulferien in: ' + regions.join(', ')
          }
          if(date.getDay()==1){
            return [true,"", label];
          } else {
            return [false,"", label];
          }
        },
      beforeShow: function () {
      }
    }
}
Innerhalb dieses Events kann jeder einzelne Tag beeinflusst werden. Als Eingangsargument wird das aktuelle Date Object übergeben.

Im zurück gegebenen Array wird die Darstellung des Tages gesteuert:

[
  true/false, // Tag auswählbar ja/naei
  'classname',  // zusätzliche CSS Klasse zum stylen
  'titletext'  // zusätzlicher title Text
]
Folgend noch das kleine Snippet für die Ferientermine in Deutschland. Natürlich kann man die HD (Holiday) Klasse um eigene Methoden erweitern. Alle Angaben ohne Gewähr ;-) 
/**
 * @author Christian Sonntag <xxx@xxx.de>
 * @description mini class for holidays ;o)
 * @param {string} from date as string 'yyyy-mm-dd'
 * @param {string} to date as string 'yyyy-mm-dd'
 * @param {string} text of holidy season
 */

function Holiday(from, to, text) {
//    this.from = this.parseISO8601(from)
//    this.to = this.parseISO8601(to)
this.from = $.datepicker.parseDate('yy-mm-dd', from)
this.to = $.datepicker.parseDate('yy-mm-dd', to)
this.text = text


}
/**



/**

< Zurück | ^ nach oben