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"}
];
Related sample: Basic initialization
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 |
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;
Related sample: 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).
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"]}
];
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
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:
scheduler.plugins({
minical: true
});
//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" }
];
Related sample: Mini calendar in the lightbox
Für weitere Anpassungen des Mini-Kalenders siehe Mini Calendar Templates.
Nach oben