X4 Produktdokumentation
X4 Produktdokumentation
Breadcrumbs

Calendar Component

A Calendar Component shows a calendar and events. A Calendar Component can be used alone or in a Master/Detail Component.

CalenderComponent.png

Defining the Calendar Component

A Calendar Component is declared within its own <CalendarName>.calendar definition file. This file is created in the Components project folder..


How to create a new definition file:

  1. Click the New > Add <name of component> menu.
    Alternatively, you can create the file using the New > Add <name of component> context menu.

  2. Select the desired definition file.

    Unknown Attachment

  3. In File name, enter the name of the definition file.

  4. Select Finish.
    A new definition file with a predefined structure is created.

The Calendar Component is created via <CalendarComponent> and can have the default attributes for components.

Calendar Settings: Views

The Calendar Settings can be used to specify which views of the calendar can be viewed by the user and which view is the default view. The calendar settings are made via attributes of the <CalendarSettings> element.

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

Possible attributes:

Attribute

Description

dayView

Enables and disables the day view.

Possible values: true (default) / false

dayViewSlot

Defines the timescale in the day view.

Possible values:

  • 00:15: 15 minutes as the smallest unit

  • 00:30: 30 minutes as the smallest unit

  • 01:00: 1 hour as the smallest unit

defaultView

Defines the default view of the calendar.

Possible values:

  • Month: Month view (default)

  • Week: Week view

  • Day: Day view

Only one active view can be defined as the default view.

monthView

Enables and disables the month view.

Possible values: true (default) / false

weekView

Enables and disables the week view.

Possible values: true (default) / false

wekViewSlot

Defines the timescale in the week view.

Possible values:

  • 00:15: 15 minutes as the smallest unit

  • 00:30: 30 minutes as the smallest unit

  • 01:00: 1 hour as the smallest unit

The calendar views (monthView, weekView, dayView) are linked to buttons that allow the user to select the respective view. If a calendar view is deactivated, the corresponding button is also hidden.

CalendarActions.png

Calendar Settings: Localization

A Calendar Component can be localized. A German user interface is offered by default. The <Localization> element within <CalendarSettings> can be used to define any translations or custom keys for translation files.

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

When a translation file is created for the corresponding Web App, all translation keys are available.

Existing translations:

Key

Value

next

Next

prev

Back

today

Today

monthView

Month

weekView

Week

dayView

Day

monday

Monday

tuesday

Tuesday

wednesday

Wednesday

thursday

Thursday

friday

Friday

saturday

Saturday

sunday

Sunday

mondayShort

Mo

tuesdayShort

Tu

wednesdayShort

We

thursdayShort

Th

dridayShort

Fr

saturdayShort

Sa

sundayShort

Su

january

January

february

February

march

March

april

April

may

May

june

June

july

July

august

August

september

September

october

October

november

November

december

December

Start

Start

end

End

location

Location

description

Description

allDay

all day

Events

Events are defined with the <EventConfiguration/> element. The item is used to bind values from a list to events in the calendar. The list containing the events is delivered by a technical process to the calendar component.

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

Possible attributes:

Attribute

Description

allDay

Defines whether the event takes place all day.

Possible values: true/false or expression for data binding

background

Defines the color with which the event should be displayed.

Possible values: HTML color code, such as #FF0000 or expression for data binding (Color)

begin

Defines the start time of the event.

Possible values: Expression for data binding (DateTime)

description

Specifies the description of the event.

Possible values: Any string or expression for data binding (String)

detailNavigationLinkName

Name of the button that opens the detail view if the externalNavigationLink attribute is not set.

Possible values:

  • Any string

  • empty: The default text Detail view is displayed

If the calendar is within the Master Component of a Master/Detail Component, the detail view cannot be accessed on mobile devices because it is opened by an external navigation link. If the event does not have an external navigation link, a button can be used to navigate to the detail view. The detailNavigationLinkName attribute specifies the name of the button.

The button only appears in the mobile view if the Calendar Component is within a Master/Detail Component.

end

Defines the end time of the event.

Possible values: Expression for data binding (DateTime)

ExternalNavigationLink

Link to open when the event is clicked.

Possible values: Hyperlink (string) or expression for data binding (string)

ExternalNavigationLinkName

Text that appears instead of the URL for an external link.

Possible values: Character string

If the externalNavigationLinkName attribute is not defined for an external link, the URL defined for the externalNavigationLink attribute is displayed.

ExternalNavigationLinkTarget

Specifies whether the link (externalLink) opens on the same tab or a new tab.

Possible values:

  • same: The link opens on the same tab

  • new: The link opens on a new tab

fontFamily

Specifies the font family.

Possible values: Font code from the font palette, e.g. Font04

fontSize

Sets the font size.

Possible values:

  • Font size in pixels, e.g. 20px

  • Font size in points, e.g. 18pt

  • Font size compared to the font size of the parent element, e.g. .8em or 120%

  • Keywords, e.g. small or larger

fontStretch

Defines the width of each character.

Possible values:

  • Condensed

  • Expanded

  • ExtraCondensed

  • ExtraExpanded

  • Medium

  • Normal (default)

  • SemiCondensed

  • SemiExpanded

  • UltraCondensed

  • UltraExpanded

fontStyle

Defines the tilt of the font.

Possible values:

  • italic: Italic font

  • normal: Normal font (default)

  • oblique: Slanted font style (calculated)

fontWeight

Defines the font weight.

Possible values:

  • Black

  • Bold

  • DemiBold

  • ExtraBlack

  • ExtraBold

  • ExtraLight

  • Heavy

  • Light

  • Medium

  • Normal (default)

  • Regular

  • SemiBold

  • Thin

  • UltraBlack

  • UltraBold

  • UltraLight

foreground

Defines a color for the title foreground.

Possible values:

  • Color code from the color palette of the Web App (cf. Theming), e.g. A200

location

Specifies the location of the event.

Possible values: Any string or expression for data binding (String)

name

Defines the name of the event.

Possible values: Any string or expression for data binding (String)

External links can be inserted within an event. These are implemented within the <EventConfiguration/> element using a <SelectAction>.

The <SelectAction/> element can have the default attributes for Actions as well as the attributes specific to the Action "Select".

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

Data for the Calendar Component

The Calendar Component requires data in a list as input to display events. This data is supplied by a Technical Process and must conform to the following scheme.

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>

The data structure must be specified in the properties of the component!

Example

The definition of a Calendar Component can look like this.

Example of a Calendar Component
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>

The input is provided by the Technical Process calendar.wrf and looks like this:

Example 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>

The following result is returned:

Calendar.png