Zeitsteuerung

Diese Funktion umfasst ein Paar von Auswahlfeldern, die es Ihnen ermöglichen, die Dauer einer Aufgabe festzulegen, indem Sie deren Start- und Enddaten auswählen.

gantt.config.lightbox.sections=[
    {name:"description", height:70, map_to:"text", type:"textarea", focus:true},
    {name:"time",        height:72, map_to:"auto", type:"time"} ];

Related sample:  Time control

Initialisierung

Um die time-Steuerung in das Lightbox einzufügen, gehen Sie wie folgt vor:

1) Fügen Sie eine Sektion zur Lightbox-Konfiguration hinzu:

gantt.config.lightbox.sections=[
    {name:"description", height:70, map_to:"text", type:"textarea",focus:true},
    {name:"period",      height:72, map_to:"auto", type:"time"}, ];

2) Weisen Sie der Sektion ein Label zu:

gantt.locale.labels.section_period = "Zeitraum";

Eigenschaften

Hier sind die wichtigsten und häufig verwendeten Eigenschaften der 'time'-Steuerung (die vollständige Liste finden Sie hier):

• name - (string) der Name der Sektion
• height - (number) die Höhe der Sektion
• map_to - (string,object) "auto" oder ein Objekt, bestimmt die Daten-Eigenschaft(en), die mit der Sektion verknüpft sind
• type - (string) der Typ der Sektionsteuerung
• focus - (boolean) wenn true, erhält die Sektion den Fokus, wenn das Lightbox geöffnet wird
• readonly - (boolean) wenn true, wird die Sektion schreibgeschützt
• year_range - (array,number) legt den Bereich für den Jahresauswahler fest. Sie können ihn auf zwei Arten konfigurieren:
  • year_range: [2005, 2025] - definiert einen Bereich von 2005 bis 2025
  • year_range: 10 - definiert einen Bereich von [aktuelles Jahr - 10 Jahre; aktuelles Jahr + 10 Jahre]
• single_date - (boolean) wenn true, wird nur der Startdatum-Auswahler angezeigt. Aufgaben, die auf diese Weise bearbeitet werden, haben nur ein Startdatum und keine Dauer, was für Meilensteine nützlich ist
• time_format - (string) bestimmt die Reihenfolge der Datum-Uhrzeit-Auswahler
• autofix_end - (boolean) steuert, ob das Enddatum automatisch angepasst wird, wenn das ausgewählte Startdatum später als das Enddatum ist. Es ist standardmäßig aktiviert (true). Wenn es deaktiviert ist, ermöglicht es die Datumsvalidierung, aber wenn nicht validiert, können Aufgaben mit null Dauer resultieren, wenn das Startdatum nach dem Enddatum liegt.

Konfigurieren der Datum-Uhrzeit-Auswahler

Um die Auswahler für die "Dauer" oder "Zeit"-Sektion anzupassen, verwenden Sie die time_format Eigenschaft (siehe Datumsformat-Spezifikation):

Hinzufügen des Zeit-Auswahlers zur 'Zeitraum'-Sektion

gantt.config.lightbox.sections = [
    {name:"description", height:38, map_to:"text", type:"textarea", focus:true},
    {name:"time",type:"time", map_to:"auto", time_format:["%d","%m","%Y","%H:%i"]}];

Das time_format Array erlaubt die folgenden Mitglieder:

• "%d" - Tagesauswahler
• "%m" - Monatsauswahler
• "%Y" - Jahresauswahler
• "%H:%i" - Zeitauswahler (Format wird mit der time_picker Vorlage festgelegt)

Sie können diese Mitglieder im Array neu anordnen oder reduzieren, aber Sie können das Datenpräsentationsformat nicht ändern.
Beispielsweise:

// Zeit kommt zuerst
time_format:["%H:%i", "%m", "%d", "%Y"] 
// Monat kommt zuerst
time_format:["%m","%d", "%Y", "%H:%i"]
// Entfernen des Jahresauswahlers
time_format:["%H:%i", "%m", "%d"]
// Falsches Format
time_format:["%H:%i", "%M", "%d", "%Y"] // "%m" ersetzt durch "%M"

Zuordnung zu benutzerdefinierten Start-/Enddatum-Uhrzeit-Eigenschaften

Standardzuordnung

Normalerweise sind die Zeit- und Dauersteuerungen mit den erforderlichen 'start_date'- und 'end_date'-Eigenschaften verknüpft, indem map_to auf "auto" gesetzt wird (map_to:"auto").

Benutzerdefinierte Zuordnung

Für benutzerdefinierte Datumseigenschaften anstelle von 'start_date' und 'end_date', verwenden Sie die Objektnotation für map_to:

gantt.config.lightbox.sections = [
    {name: "description", height: 72, type: "textarea", map_to:"text", focus: true},
    {name: "time",        height: 72, type: "duration", map_to:"auto"},
    {name: "deadline",    height: 72, type: "time",      map_to:{start_date:"planned_start",end_date:"planned_end"}} ];

Related sample:  Displaying deadlines

Wenn als Objekt verwendet, enthält map_to 3 Eigenschaften:

1. start_date - die Dateneigenschaft für die Eingabe des Startdatums
2. end_date - optional, die Dateneigenschaft für die Eingabe des Enddatums
3. duration - optional, die Dateneigenschaft für die Eingabe der Dauer

Umschalten der Sichtbarkeit der Sektion

Sie können die Sichtbarkeit der Zeit-Sektion umschalten, indem Sie type:"time_optional" und button: true in der Lightbox-Konfiguration setzen:

gantt.config.lightbox.sections = [
  {name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
  {name: "time", map_to: "auto", button: true, type: "time_optional"} ];

Definieren Sie dann Labels für die beiden Zustände des Buttons:

gantt.locale.labels.time_enable_button = 'Planen';
gantt.locale.labels.time_disable_button = 'Nicht planen';

Ein Umschaltknopf erscheint neben der Sektion, der es Ihnen ermöglicht, sie anzuzeigen oder zu verbergen. Wenn die Sektion sichtbar ist, verhält sie sich wie type:"time".

Wenn Sie den Knopf ausschalten, verschwindet die Sektion, aber es ändert sich nichts sofort. Wenn der "Speichern"-Knopf geklickt wird, werden die Aufgaben-Eigenschaften, die über map_to mit der Zeitsteuerung verknüpft sind, auf null gesetzt.

gantt.getTask(1);
 
// Rückgabewert
{
    id: '1', text: 'Aufgabe #1', unscheduled: true, 
    duration: 0, parent: '10',
    end_date: null, start_date: null,
    ...
}

Diese Funktion ist praktisch für die Erstellung von nicht geplanten Aufgaben. Sehen Sie sich dieses Beispiel an:

Related sample:  Ungeplante Aufgaben

Zurück nach oben