Farbe für benutzerdefinierte Events

Es gibt drei Möglichkeiten, die Farbe eines Events anzupassen:

Farben in den Eigenschaften des Event-Objekts festlegen

Um einem Event eine individuelle Farbe zuzuweisen, fügen Sie einfach eine oder beide dieser Eigenschaften zum Event-Datenobjekt hinzu:

textColor – legt die Schriftfarbe des Events fest;
color – legt die Hintergrundfarbe des Events fest.

Setting the event's color in the data object

scheduler.parse([
   {id:1, start_date:"2019-05-21",end_date:"2019-05-25",text:"Task1", color:"red"},
   {id:2, start_date:"2019-06-02",end_date:"2019-06-05",text:"Task2", color:"blue"}
],"json");
...
scheduler.getEvent(1).color = "yellow";
scheduler.updateEvent(1);

Beachten Sie, dass es sich hierbei um spezielle Eigenschaften handelt. Der Scheduler prüft diese automatisch und wendet die angegebenen Farben auf das Container-Element und den Text des Events an. Sind sie nicht vorhanden, verwendet der Scheduler die Standardfarben.

Diese Eigenschaften akzeptieren jedes gültige CSS-Farbformat, zum Beispiel:

ev.color = "#FF0000";
ev.color = "red";
ev.color = "rgb(255,0,0)";

Zusätzliche CSS-Klassen zu einem Event hinzufügen

Eine weitere Möglichkeit, die Farbe eines Events festzulegen, ist das Hinzufügen benutzerdefinierter CSS-Klassen.

Vorgehensweise

Sie können eine CSS-Klasse mit der event_class Vorlage zu einem Event hinzufügen.
Standardmäßig sieht die Vorlage so aus:

scheduler.templates.event_class = function(start, end, ev){
     return "";
}

Diese Funktion gibt einen String zurück, der dem class-Attribut des Events hinzugefügt wird. So können Sie je nach Status des Events unterschiedliche Klassen zurückgeben.

Related sample: Coloring events

Beispiel

Angenommen, Sie möchten Events unterschiedlich einfärben, je nachdem, ob sie zu Managern oder Mitarbeitern gehören: grün für Manager und orange für Mitarbeiter. So gehen Sie vor:

Fügen Sie Ihrem Datenmodell eine zusätzliche Eigenschaft hinzu, z. B. 'type', die den Benutzertyp enthält: 'manager' oder 'employee'.

Erstellen Sie CSS-Klassen, die diesen Typen entsprechen, z. B. 'manager_event' und 'employee_event'. Das CSS könnte so aussehen:

Redefining the default CSS classes

<style>    .manager_event {
        --dhx-scheduler-event-background: #009966;
        --dhx-scheduler-event-color: black;
    }
 
    .employee_event {
        --dhx-scheduler-event-background: #FF9933;
        --dhx-scheduler-event-color: black;
    }
</style>

Für Scheduler-Versionen 6.0 und älter, die keine CSS-Variablen unterstützen, können Sie folgende Styles verwenden:

<style>    /*Event in der Tages- oder Wochenansicht*/
    .dhx_cal_event.manager_event div{
        background-color: #009966 !important;
        color: black !important;
    }
    .dhx_cal_event.employee_event div{
        background-color: #FF9933 !important;
        color: black !important;
    }
 
    /*Mehrtagesevent in der Monatsansicht*/
    .dhx_cal_event_line.manager_event{
        background-color: #009966 !important;
        color: black !important;
    }
    .dhx_cal_event_line.employee_event{
        background-color: #FF9933 !important;
        color: black !important;
    }
 
    /*Event mit fester Zeit in der Monatsansicht*/
    .dhx_cal_event_clear.manager_event{
        color: black !important;
    }
    .dhx_cal_event_clear.employee_event{
        color: black !important;
    }
</style>

Überschreiben Sie abschließend die event_class Vorlage, um die Klassen zuzuweisen:

Applying additional CSS classes to events:

scheduler.templates.event_class = function (start, end, event) {
    if (event.type == 'manager') return "manager_event";
    return "employee_event"; 
};

Related sample: Coloring events

Farben mit Daten laden

Wenn Farben aus Backend-Daten stammen – etwa wenn die Farben von Aufgaben von Phasen oder zugewiesenen Ressourcen abhängen und nicht fest im Code stehen – können Sie Styles dynamisch aus Ihren Daten generieren.

Angenommen, Sie haben eine Liste von Benutzern, die Aufgaben zugewiesen sind, wobei der Stil der Aufgabe von den Eigenschaften des Benutzers abhängt:

[
    {"key":1, "label":"John", "backgroundColor":"#03A9F4", "textColor":"#FFF"},
    {"key":2, "label":"Mike", "backgroundColor":"#f57730", "textColor":"#FFF"},
    {"key":3, "label":"Anna", "backgroundColor":"#e157de", "textColor":"#FFF"},
    {"key":4, "label":"Bill", "backgroundColor":"#78909C", "textColor":"#FFF"},
    {"key":7, "label":"Floe", "backgroundColor":"#8D6E63", "textColor":"#FFF"}
]

In diesem Fall werden Benutzer und ihre Farben getrennt vom Scheduler verwaltet, der die Benutzer-IDs oder Farben nicht im Voraus kennt.

So gehen Sie praktisch vor:

Definieren Sie eine benannte serverList für diese Sammlung:

scheduler.serverList("people");

Laden Sie diese Optionen auf die Seite, entweder mit einem der unterstützten Datenformate oder per individuellem XHR-Request.
Nach dem Laden generieren Sie CSS-Styles dynamisch aus den Daten:

scheduler.attachEvent("onLoadEnd", function(){
    // Verwenden Sie eine eindeutige ID für das Style-Element
    var styleId = "dynamicSchedulerStyles";
 
    // Wiederverwenden, falls das Style-Element bereits existiert
 
    var element = document.getElementById(styleId);
    if(!element){
        element = document.createElement("style");
        element.id = styleId;
        document.querySelector("head").appendChild(element);
    }
    var html = [];
    var resources = scheduler.serverList("people");
 
    // Für jeden Benutzer CSS-Regeln erstellen und ins Style-Element einfügen
 
    resources.forEach(function(r){
        html.push(`.event_resource_${r.key} {
            --dhx-scheduler-event-background:${r.backgroundColor};
            --dhx-scheduler-event-color:${r.textColor};
        }`);
    });
    element.innerHTML = html.join("");
});

Weisen Sie anschließend die generierten Klassen in der event_class Vorlage zu:

scheduler.templates.event_class = function (start, end, event) {
    var css = [];
 
    if(event.owner_id){
        css.push("event_resource_" + event.owner_id);
    }
 
    return css.join(" ");
};

Nach oben