X4 Produktdokumentation
X4 Produktdokumentation
Breadcrumbs

Calendar Component

Eine Calendar Component zeigt einen Kalender und Ereignisse. Eine Calendar Component kann alleine oder in einer Master/Detail Component verwendet werden. 

CalenderComponent.png

Calendar Component definieren

Eine Calendar Component wird innerhalb einer eigenen Definitionsdatei <CalendarName>.calendar deklariert. Diese wird im Projektordner Components angelegt. 


So legen Sie eine neue Definitionsdatei an:

  1. Klicken Sie auf das Menü New > Add <entsprechende Komponente>.
    Alternativ lässt sich die Datei auch über das Kontextmenü New > Add <entsprechende Komponente> anlegen.

  2. Wählen Sie die gewünschte Definitionsdatei.

    image2021-7-23_13-23-52.png

  3. In File name den Namen der Definitionsdatei eingeben.

  4. Auf Finish klicken.
    Eine neue Definitionsdatei mit einer vordefinierten Struktur wird angelegt.

Die Calendar Component wird über <CalendarComponent> erzeugt und kann die Standardattribute für Komponenten besitzen.

Calendar Settings: Ansichten

Über die Calendar Settings kann festgelegt werden, welche Ansichten des Kalenders durch den Nutzer angezeigt werden können und welche Ansicht die Standardansicht ist. Die Calendar Settings werden über Attribute des Elements <CalendarSettings> vorgenommen.

XML
<CalendarComponent ...>
	...
	<CalendarSettings defaultView="Day" ...>
</CalendarComponent>

Mögliche Attribute:

Attribut

Beschreibung

dayView

Aktiviert und deaktiviert die Tagesansicht.

Mögliche Werte: true (Standard) / false

dayViewSlot

Definiert die Zeitskala in der Tagesansicht.

Mögliche Werte:

  • 00:15: 15 Minuten als kleinste Einheit

  • 00:30: 30 Minuten als kleinste Einheit

  • 01:00: 1 Stunde als kleinste Einheit

defaultView

Definiert die Standardansicht des Kalenders.

Mögliche Werte:

  • Month: Monatsansicht (Standard)

  • Week: Wochenansicht

  • Day: Tagesansicht

Es kann nur eine aktive Ansicht als Standardansicht definiert werden.

monthView

Aktiviert und deaktiviert die Monatsansicht.

Mögliche Werte: true (Standard) / false

weekView

Aktiviert und deaktiviert die Wochenansicht.

Mögliche Werte: true (Standard) / false

weekViewSlot

Definiert die Zeitskala in der Wochenansicht.

Mögliche Werte:

  • 00:15: 15 Minuten als kleinste Einheit

  • 00:30: 30 Minuten als kleinste Einheit

  • 01:00: 1 Stunde als kleinste Einheit

Die Kalenderansichten (monthView, weekView, dayView) sind mit Buttons verknüpft, über die der Benutzer die jeweilige Ansicht auswählen kann. Wenn eine Kalenderansicht deaktiviert ist, dann wird auch der entsprechende Button ausgeblendet.

CalendarActions.png

Calendar Settings: Lokalisierung

Eine Calendar Component kann lokalisiert werden. Standardmäßig wird eine deutsche Benutzeroberfläche angeboten. Mithilfe des Elements <Localization> innerhalb von <CalendarSettings> können beliebige Übersetzungen oder benutzerdefinierte Schlüssel für Übersetzungsdateien definiert werden.

XML
<CalendarComponent ...>
	...
	<CalendarSettings ...>
		<Localization march="March" ... />
	</CalendarSettings>
</CalendarComponent>

Wenn für die entsprechende Web App eine Übersetzungsdatei angelegt wird, sind alle Übersetzungsschlüssel verfügbar.

Vorhandene Übersetzungen:

Schlüssel

Wert

​next

Vor​

prev

Zurück

today

Heute

monthView

Monat

weekView

Woche

dayView

Tag

monday

Montag

tuesday

Dienstag

wednesday

Mittwoch

thursday

Donnerstag

friday

Freitag

saturday

Samstag

sunday

Sonntag

mondayShort

Mo

tuesdayShort

Di

wednesdayShort

Mi

thursdayShort

Do

fridayShort

Fr

saturdayShort

Sa

sundayShort

So

january

Januar

february

Februar

march

März

april

April

may

Mai

june

Juni

july

Juli

august

August

september

September

october

Oktober

november

November

december

Dezember

start

Start

end

Ende

location

Ort

description

Beschreibung

allDay

ganztägig

Events

Events werden mit dem Element <EventConfiguration/> definiert. Das Element wird verwendet, um Werte aus einer Liste an Events im Kalender zu binden. Die Liste, die die Events enthält, wird von einem Technical Process an die Kalender-Komponente geliefert.

XML
<CalendarComponent ...>
	...
	<CalendarSettings ...>
		<Localization ... />
	</CalendarSetting>
	<EventConfiguration />
</CalendarComponent>

Mögliche Attribute:

Attribut

Beschreibung

allDay

Definiert, ob das Event ganztägig stattfindet.

Mögliche Werte: true / false oder Ausdruck für Data Binding (Boolean)

background

Definiert die Farbe, mit der das Event angezeigt werden soll.

Mögliche Werte: HTML-Farbcode, z. B. #FF0000 oder Ausdruck für Data Binding (Color)

begin

Definiert den Startzeitpunkt des Events.

Mögliche Werte: Ausdruck für Data Binding (DateTime)

description

Gibt die Beschreibung des Events an.

Mögliche Werte: Beliebige Zeichenkette oder Ausdruck für Data Binding (String)

detailNavigationLinkName

Name der Schaltfläche, die die Detailansicht öffnet, falls das Attribut externalNavigationLink nicht gesetzt ist.

Mögliche Werte:

  • Beliebige Zeichenkette

  • leer: Der Standardtext Detail view wird angezeigt

Befindet sich der Kalender innerhalb der Master Component einer Master/Detail Component, kann auf mobilen Geräten nicht auf die Detailansicht zugegriffen werden, da diese durch einen externen Navigationslink geöffnet wird. Hat das Event keinen externen Navigationslink, lässt sich über eine Schaltfläche zur Detailansicht navigieren. Mit dem Attribut detailNavigationLinkName wird der Name der Schaltfläche angegeben.

Die Schaltfläche wird nur in der mobilen Ansicht angezeigt, wenn sich die Calendar Component innerhalb einer Master/Detail Component befindet.

end

Definiert den Endzeitpunkt des Events.

Mögliche Werte: Ausdruck für Data Binding (DateTime)

externalNavigationLink

Link, der geöffnet werden soll, wenn das Event angeklickt wird.

Mögliche Werte: Hyperlink (String) oder Ausdruck für Data Binding (String)

externalNavigationLinkName

Text, der bei einem externen Link statt der URL angezeigt wird.

Mögliche Werte: Zeichenkette

Wenn bei einem externen Link das Attribut externalNavigationLinkName nicht definiert ist, dann wird die URL angezeigt, die für das Attribut externalNavigationLink definiert wurde.

externalNavigationLinkTarget

Gibt an, ob der Link (externalNavigationLink) im selben oder in einem neuen Tab geöffnet wird.

Mögliche Werte:

  • same: Der Link wird im selben Tab geöffnet

  • new: Der Link wird in einem neuen Tab geöffnet

fontFamily

Legt die Schriftfamilie fest. 

Mögliche Werte: Fontcode aus der Font-Palette, z. B. Font04

fontSize

Legt die Schriftgröße fest.

Mögliche Werte:

  • Schriftgröße in Pixel, z. B. 20px

  • Schriftgröße in Punkt, z. B. 18pt

  • Schriftgröße im Vergleich zur Schriftgröße des Elternelements, z. B. .8em  oder  120%

  • Schlüsselwörter, z. B.  small  oder  larger

fontStretch

Legt die Breite der einzelnen Schriftzeichen fest.

Mögliche Werte:

  • Condensed

  • Expanded

  • ExtraCondensed

  • ExtraExpanded

  • Medium

  • Normal (Standard)

  • SemiCondensed

  • SemiExpanded

  • UltraCondensed

  • UltraExpanded

fontStyle

Legt die Neigung der Schrift fest.

Mögliche Werte:

  • italic: kursive Schrift

  • normal: normale Schrift (Standard)

  • oblique: schräg gestellter Schriftstil (berechnet)

fontWeight

Legt die Schriftstärke fest.

Mögliche Werte:

  • Black

  • Bold

  • DemiBold

  • ExtraBlack

  • ExtraBold

  • ExtraLight

  • Heavy

  • Light

  • Medium

  • Normal (Standard)

  • Regular

  • SemiBold

  • Thin

  • UltraBlack

  • UltraBold

  • UltraLight

foreground

Definiert eine Farbe für den Event-Namen.

Mögliche Werte:

  • Farbcode aus der Farbpalette der Web App (vgl. Theming), z. B. A200

location

Gibt den ​Ort des Events an.

Mögliche Werte: Beliebige Zeichenkette oder Ausdruck für Data Binding (String)

​name

Definiert den ​Namen des Events.

Mögliche Werte: Beliebige Zeichenkette oder Ausdruck für Data Binding (String)

Innerhalb eines Events lassen sich externe Links einfügen. Diese werden innerhalb des Elementes <EventConfiguration/> mithilfe einer <SelectAction> umgesetzt.

Das Element <SelectAction/> kann dabei die Standardattribute für Actions sowie die für die Action "Select" spezifischen Attribute haben.

XML
<EventConfiguration>
	<SelectAction externalLink="#event.link" />
</EventConfiguration>

Daten für die Calendar Component

Die Calendar Component benötigt Daten in einer Liste als Input, um Events anzeigen zu können. Diese Daten werden von einem Technical Process geliefert und müssen folgendem Schema entsprechen.

XML
<CalendarComponent displayName="Calendar" path="calendar" process="events.wrf">
	<Properties>
		<Property name="List" type="Complex">
			<Property name="Name" type="String" />
			<Property name="AllDay" type="Boolean" />
			<Property name="Begin" type="DateTime" />
			<Property name="End" type="DateTime" />
			<Property name="Color" type="Color" />
			<Property name="Link" type="String" />
		</Property>
	</Properties>
	<EventConfiguration allDay="#List.AllDay" name="#List.Name" begin="#List.Begin" end="#List.End" color="#List.Color" externalNavigationLink="#List.Link" />
</CalendarComponent>

Die Datenstruktur muss in den Properties der Komponente angegeben werden!

Beispiel

Die Definition einer Calendar Component kann folgendermaßen aussehen.

Beispiel CalendarComponent
XML
<CalendarComponent
	xmlns="http://softproject.de/webapp/1.0" process="calendar.wrf">
	<Properties>
		<Property name="event" type="Complex">
			<Property name="id" type="String"/>
			<Property name="name" type="String"/>
			<Property name="allDay" type="Boolean"/>
			<Property name="begin" type="DateTime"/>
			<Property name="end" type="DateTime"/>
			<Property name="color" type="Color"/>
			<Property name="link" type="String"/>
		</Property>
	</Properties>
	<CalendarSettings defaultView="Week"/>
	<EventConfiguration allDay="#event.allDay" background="#event.color" begin="#event.begin" end="#event.end" name="#event.name">
		<SelectAction externalLink="#event.link"/>
	</EventConfiguration>
</CalendarComponent>

Der Input wird durch den Technical Process calendar.wrf geliefert und sieht folgendermaßen aus:

Beispiel Input Events.xml
XML
<?xml version="1.0" encoding="UTF-8"?>
<OkList>
	<event>
		<id>1</id>
		<name>Daily Scrum</name>
		<allDay>false</allDay>
		<begin>2020-03-13T09:30:00Z</begin>
		<end>2020-03-13T09:45:00Z</end>
		<color>0303FF</color>
		<link>https://www.scrum.org/resources/what-is-a-daily-scrum</link>
	</event>
	<event>
		<id>2</id>
		<name>Review</name>
		<allDay>false</allDay>
		<begin>2020-03-13T10:00:00Z</begin>
		<end>2020-03-13T11:00:00Z</end>
		<color>FF3300</color>
		<link></link>
	</event>
	<event>
		<id>3</id>
		<name>Lunch</name>
		<allDay>false</allDay>
		<begin>2020-03-13T12:00:00Z</begin>
		<end>2020-03-13T13:00:00Z</end>
		<color>FF9696</color>
		<link></link>
	</event>
</OkList>

Es wird das folgende Ergebnis ausgegeben:

Calendar.png