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--small für Ereignisse unter 42px
  • .dhx_cal_event--xsmall fü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.

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;

Hinweis

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>"+format(date)+"</div>";
        date = scheduler.date.add(date,step,"minute");
    }
    return html;
}

Zugehörige Beispiele:

Custom Y-Axis