Zum Hauptinhalt springen

addCalendar

Description​

Fügt einen Kalender in das Gantt-Diagramm ein

addCalendar: (calendar: CalendarConfig) => string

Parameters​

  • calendar - (required) CalendarConfig - ein Objekt, das die Konfiguration des Kalenders enthält

Returns​

  • calendarId - (string) - die Kennung des Kalenders

Example​

// Hinzufügen eines bestehenden Kalenders
var calendarId = gantt.addCalendar(calendar);

// Hinzufügen eines Kalenders mit einer neuen Konfiguration
var calendarId = gantt.addCalendar({
    id:"custom", // optional
    worktime: {
        hours: ["8:00-17:00"],
        days: [ 1, 1, 1, 1, 1, 1 ,1]
    }
});

var calendar = gantt.getCalendar(calendarId);

Details​

Das Kalender-Konfigurationsobjekt kann die folgenden Eigenschaften enthalten:

  • id? - (string | number) - optional, die Kennung des Kalenders
  • worktime? - (object) - definiert die Arbeitstage und Arbeitszeiten. Es kann enthalten:
    • hours? - (string[] | number[] | boolean) - optional, ein Array zur Angabe globaler Arbeitszeiten, die Start- und Endzeiten der Aufgaben definieren
    • days? - (WorkDaysTuple) - optional, ein Array mit 7 Elementen, die die Wochentage repräsentieren (0 - Sonntag bis 6 - Samstag), wobei 1/true einen Arbeitstag und 0/false einen freien Tag bedeutet
    • customWeeks? - (object) - optional, ein Objekt, das unterschiedliche Arbeitszeitregelungen für verschiedene Zeiträume definiert. Es besteht aus Schlüssel-Wert-Paaren, wobei der Schlüssel der Name des Zeitraums ist und der Wert ein Objekt mit dessen Eigenschaften.
      • [timespan: string] - (object) - der Zeitraum mit seinen Arbeitszeiteinstellungen. Der Schlüssel dient als Name des Zeitraums.
        • from - (Date) - das Anfangsdatum des Zeitraums
        • to - (Date) - das Enddatum des Zeitraums
        • hours? - (Array<string | number>) - optional, ein Array von Arbeitszeitintervallen als 'von'-'bis' Paare. Ein Wert 'false' markiert einen freien Tag, während 'true' (Standard) die Standardzeiten (["8:00-17:00"]) anwendet
        • days? - (WorkDaysTuple | boolean) - optional, ein Array mit 7 Elementen, die die Wochentage repräsentieren (0 - Sonntag bis 6 - Samstag), wobei 1/true einen Arbeitstag und 0/false einen freien Tag anzeigt.

Benutzerdefinierte Arbeitszeiten für einen bestimmten Tag festlegen​

Anstatt nur die Tagesnummer der Woche anzugeben, ist es möglich, für diesen Tag benutzerdefinierte Arbeitszeiten einzustellen.
Zum Beispiel:

const calendar = {
    id: "calendar1", // optional
    worktime: {
        hours: ["8:00-17:00"],
        days: [0, 1, 1, 1, ["12:00-17:00"], 1, 0]
    }
}

wobei ["12:00-17:00"] die Arbeitszeiten von 12:00 bis 17:00 Uhr für Donnerstag darstellen.

Setting worktime for different time intervals​

Es gibt die Möglichkeit, verschiedene Arbeitszeitregeln für unterschiedliche Zeiträume zu konfigurieren, indem man das Attribut customWeeks verwendet:

gantt.addCalendar({
    id: "global", // optional
    worktime: {
        hours: ["8:00-17:00"],
        days: [1, 1, 1, 1, 1, 1, 1],
        customWeeks: {
            winter: {
                from: new Date(2025, 11, 1), // December 1st, 2025
                to: new Date(2026, 2, 1), // March 1st, 00:00, 2026
                hours: ["9:00-13:00", "14:00-16:00"],
                days: [1, 1, 1, 1, 0, 0, 0]
            }
        }
    }
});

Setting worktime for certain dates​

Sie können auch Arbeitszeiten für bestimmte Daten festlegen, indem Sie sie in der Eigenschaft dates des Objekts days setzen (sowohl für das worktime-Attribut als auch für die customWeeks-Eigenschaft). Zum Beispiel:

const calendar = {
    id: "calendar1", // optional
    worktime: {
        hours: ["8:00-17:00"],
        days: { 
            dates: { 
                "2025-04-09":  ["9:00-15:00"] 
            } 
        },
        customWeeks: {
            winter: {
                from: new Date(2025, 11, 1), // December 1st, 2025
                to: new Date(2026, 2, 1), // March 1st, 00:00, 2026
                hours: ["9:00-13:00", "14:00-16:00"],
                days: { 
                    dates: { 
                        "2026-01-02":  ["9:00-15:00"] 
                    } 
                }
            }
        }
    }
}

Change log​

  • Die Funktion, das days-Attribut in Form eines Objekts zu setzen, das Wochentage und Daten enthält, wurde in v9.1 hinzugefügt
  • Die Eigenschaft customWeeks wurde in v7.1 hinzugefügt;
  • In Version 4.2 wurde es hinzugefügt
Need help?
Got a question about the documentation? Reach out to our technical support team for help and guidance. For custom component solutions, visit the Services page.
Need more help?Contact Support