Agenda-Ansicht (v6.0)
Dieser Artikel behandelt dhtmlxScheduler Version 6.0 und früher. Für dhtmlxScheduler 7.0 und neuer finden Sie Details hier.
Die Agenda-Ansicht zeigt eine Liste bevorstehender Ereignisse an.
Standardmäßig zeigt die linke Liste in der Ansicht Ereignisse ab dem aktuellen Datum an. Um dieses Verhalten anzupassen, verwenden Sie die Eigenschaften agenda_start und agenda_end.
Initialisierung
Um die Agenda-Ansicht zum Scheduler hinzuzufügen, gehen Sie wie folgt vor:
- Aktivieren Sie die Agenda-Erweiterung auf der Seite:
scheduler.plugins({
agenda_view: true
});
- Fügen Sie den Tab der Ansicht in das Scheduler-Markup ein:
<div id="scheduler_here" class="dhx_cal_container" ...>
<div class="dhx_cal_navline">
...
<div class="dhx_cal_tab" name="agenda_tab"></div>
</div>
...
</div>
- Legen Sie die Beschriftung für den Tab fest:
//'agenda_tab' ist der Name des div. Standardmäßig ist die Beschriftung 'Agenda'
scheduler.locale.labels.agenda_tab = "Meine Agenda";
GUI-Details
- Doppelklicken Sie auf eine leere Zelle in der Liste, um ein neues Ereignis zu erstellen.
- Um ein Ereignis zu bearbeiten oder zu löschen, doppelklicken Sie auf das 'Details'-Symbol links neben der Ereignisbeschreibung, um das Lightbox-Fenster zu öffnen und Änderungen vorzunehmen.
Tipps zur Lokalisierung
Die Agenda-Ansicht enthält 3 Beschriftungen in der Lokalisierung:
- scheduler.locale.labels.(agendaName)_tab - die Beschriftung für den Ansichtstab
- scheduler.locale.labels.date - die Überschrift für die Datumsspalte
- scheduler.locale.labels.description - die Überschrift für die Beschreibungsspalte
In der Regel wird die erste Beschriftung beim Hinzufügen des Ansichtstabs zum Scheduler gesetzt. Die anderen Beschriftungen sollten nur geändert werden, wenn die Anwendung in eine andere Sprache als Englisch lokalisiert wird.
Festlegen des anzeigbaren Datumsbereichs
Um den Datumsbereich, der in der Agenda-Ansicht angezeigt wird, zu definieren, verwenden Sie die Eigenschaften agenda_end und agenda_start:
//um Termine ab dem 1. Juni 2019 anzuzeigen
scheduler.config.agenda_start = new Date(2019, 5, 1);
//um Termine bis zum 1. Juni 2020 anzuzeigen
scheduler.config.agenda_end = new Date(2020, 5, 1);
Aktivieren der Schaltflächen Weiter/Zuvor/Heute
Die Schaltflächen Weiter, Zuvor und Heute können in der Agenda-Ansicht aktiviert werden, indem die Funktionen scheduler.date.agenda_start() und scheduler.date.add_agenda() neu definiert werden.
scheduler.date.agenda_start(date) gibt den Beginn des angezeigten Intervalls für ein bestimmtes Datum zurück. Standardmäßig gibt sie ein festes Datum zurück, sodass die Agenda-Ansicht nicht auf Navigationsschaltflächen reagiert.
Definieren Sie diese Funktionen beispielsweise so um, dass sie den aktuellen Monat zurückgeben:
scheduler.date.agenda_start = function(date){
return scheduler.date.month_start(new Date(date));
};
scheduler.date.add_agenda = function(date, inc){
return scheduler.date.add(date, inc, "month");
};
Danach funktionieren die Navigationsschaltflächen wie erwartet.
Related sample Next/Previous/Today buttons in Agenda view
Breite der Spalten
Die Spaltenbreiten in der Agenda-Ansicht können über CSS-Klassen angepasst werden:
<style>
.dhx_agenda_line div{
width: 300px;
}
.dhx_v_border{
left: 299px;
}
</style>
Related sample Adjusting width of columns