Zeit und Datum

In diesem Abschnitt finden Sie ein Paar von Datumsselektoren, die zur Festlegung eines bestimmten Zeit- und Datumsbereichs dienen.

scheduler.locale.labels.section_time = 'Time period';

scheduler.config.lightbox.sections = [
    { name:"text", height:50, map_to:"text", type:"textarea", focus:true },
    { name:"time", height:72, type:"time", map_to:"auto"}
];

Basic initialization

Eigenschaften

Hier sind einige der wichtigsten Eigenschaften, die häufig mit dem 'time'-Steuerelement verwendet werden (eine vollständige Liste finden Sie hier):

name	(string) der Name des Abschnitts
height	(number) die Höhe des Abschnitts
map_to	(string) der Name der Daten-Eigenschaft, mit der der Abschnitt verknüpft ist
type	(textarea,time,select,template,multiselect,radio,checkbox,combo) der Typ des Steuerelements im Abschnitt, wobei "time" für ein Datums-/Zeit-Steuerelement steht
year_range	(array, number) definiert den Bereich für den Jahres-Selektor. Es kann auf zwei Arten festgelegt werden: year_range: [2005, 2025] - deckt die Jahre von 2005 bis 2025 ab year_range: 10 - deckt einen Bereich von 10 Jahren vor bis 10 Jahren nach dem aktuellen Jahr ab

Automatisches Enddatum im Time-Steuerelement

Um eine Standarddauer für ein Ereignis festzulegen und das Enddatum automatisch anzupassen, sodass diese Dauer beibehalten wird, verwenden Sie die Einstellungen event_duration und auto_end_date:

// legt die Ereignisdauer in Minuten für die automatische Anpassung der Endzeit fest
scheduler.config.event_duration = 60; 
scheduler.config.auto_end_date = true;

Automatic end date

Mit dieser Konfiguration wird jedes Mal, wenn die Startzeit oder das Startdatum eines Ereignisses in der Lightbox geändert wird, die Endzeit und das Enddatum automatisch aktualisiert, sodass die Ereignisdauer bei 60 Minuten bleibt (wie durch die Option event_duration festgelegt).

Reihenfolge der Datums-/Zeitselektoren

Die Reihenfolge der Datums-/Zeit-Steuerelemente innerhalb des Abschnitts 'Time period' kann angepasst oder bestimmte Selektoren entfernt werden. Dies geschieht über die Eigenschaft time_format:

scheduler.config.lightbox.sections="["
  {name:"description", height:130, map_to:"text", type:"textarea", focus:true},
  {name:"time", ..., time_format:["%H:%i","%m","%d","%Y"]}
];

Hinweis

Beachten Sie, dass dies nur die Reihenfolge der Elemente im Array ändert, nicht jedoch das Datenanzeigeformat. Um das Format des Zeitbereichs anzupassen, verwenden Sie das Template time_picker.

Beispiele für verschiedene Formate:

//Standard-Reihenfolge
time_format:["%H:%i", "%m", "%d", "%Y"] 
//Monat zuerst
time_format:["%m","%d", "%Y", "%H:%i"]
//Jahres-Selektor entfernt
time_format:["%H:%i", "%m", "%d"]
//falsches Beispiel
time_format:["%H:%i", "%M", "%d", "%Y"] // "%m" durch "%M" ersetzt

Mini-Kalender in der Lightbox

Ein Mini-Kalender (Date Picker) kann in die Lightbox integriert werden, um "Start"- und "Ende"-Datum auszuwählen.

Um den Mini-Kalender zur Lightbox hinzuzufügen, gehen Sie wie folgt vor:

1. Fügen Sie die Erweiterung auf der Seite hinzu:

scheduler.plugins({
    minical: true
});

2. Ändern Sie den type des time-Abschnitts von time zu calendar_time:

//Standard Lightbox-Konfiguration
scheduler.config.lightbox.sections="["
  {name:"description", height:200, map_to:"text", type:"textarea", focus:true},
  {name:"time", height:72, type:"time", map_to:"auto"}
];
//Typ von "time" zu "calendar_time" ändern
scheduler.config.lightbox.sections = [
  {name:"description", height:200, map_to:"text", type:"textarea", focus:true},
  {name:"time", height:72, type:"calendar_time", map_to:"auto" }
];

Mini calendar in the lightbox

Für weitere Anpassungen des Mini-Kalenders siehe Mini Calendar Templates.