Größe der Skalen- und Ereignisboxen anpassen
Wenn Sie mit dhtmlxScheduler 6.0 oder einer früheren Version arbeiten, finden Sie die Details hier.
Dieser Artikel erklärt, wie Sie die Größe der Ereignisboxen und der Zeitskala anpassen können.
Anzeige von kurzen Ereignissen
Schauen wir uns zunächst an, wie sich Ereignisboxen standardmäßig verhalten:
- Die Standardhöhe einer Skaleneinheit beträgt 44px (entspricht einer Stunde), wie in hour_size_px beschrieben.
- Die Mindesthöhe für eine Ereignisbox beträgt 20px, festgelegt durch die scheduler.xy.min_event_height Konfiguration.
- Da Ereignisse nicht kürzer als 20px sein können, haben sowohl 15-Minuten- als auch 5-Minuten-Ereignisse die gleiche Höhe.
- Ereignisse mit einer Höhe unter 42px verwenden einen speziellen Anzeigemodus und erhalten eine zusätzliche CSS-Klasse zur Handhabung kürzerer Ereignisse:
.dhx_cal_event--smallfür Ereignisse unter 42px.dhx_cal_event--xsmallfür Ereignisse unter 30px
Um diese kurzen Ereignisse besser sichtbar zu machen, können Sie die Höhe der Zeitskala erhöhen:
scheduler.config.hour_size_px = 90;
scheduler.render();// oder scheduler.init(...)
Anpassung der Ereignisbox
Sie haben die Möglichkeit, das Rendering der Ereignisboxen vollständig anzupassen, indem Sie die Renderfunktion überschreiben. Dies kann mit der renderEvent Methode erfolgen, mit der Sie Ihre eigene Ereignisvorlage definieren können:
scheduler.renderEvent = function(container, ev) {
//Ihr Anpassungscode
}
Weitere Informationen finden Sie im entsprechenden Kapitel - Benutzerdefiniertes Ereignisfeld.
Related sample: Custom event box
Überlappung von kurzen Ereignissen verhindern
Um kurze Ereignisse voneinander zu trennen und Überlappungen zu vermeiden, setzen Sie die Option separate_short_events auf true:
scheduler.config.separate_short_events = true;
Ab Version 7.0 ist diese Einstellung standardmäßig aktiviert. Sie müssen sie nur manuell aktivieren, wenn Sie eine ältere Scheduler-Version verwenden.
Wie man den Skalenabstand ändert
Um den Standardabstand der Skala anzupassen, können Sie die hour_scale Vorlage überschreiben. Zum Beispiel, um den Skalenabstand auf 30 Minuten zu setzen, schreiben Sie die Vorlage wie folgt um:
var format = scheduler.date.date_to_str("%H:%i");
var step = 30;
scheduler.templates.hour_scale = function(date){
var html="";
for (var i=0; i<60/step; i++){
html+="<div style='height:22px;line-height:22px;'>"+format(date)+"</div>";
date = scheduler.date.add(date,step,"minute");
}
return html;
}
Zugehörige Beispiele:
Nach oben