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.

Related sample: Agenda view

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:

1) Aktivieren Sie die Agenda-Erweiterung auf der Seite:

scheduler.plugins({
    agenda_view: true
});

2) 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" style="right:280px;"></div>
    </div>
    ... 
</div>

3) 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";

Related sample: Agenda view

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.

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>

Columns Width