Calendar

Calendar functionality

If you want to use calendar or date and time functionality within you applications you can use different calendar widgets depending on the desired functionality. WEM offers a calendar, agenda and timeline widget.

Calendar

Timeline

Agenda

The Calendar widget can be used when you need a date selection picker as a start of your functionality. The Calendar widget displays a graphical view of a calendar and stores the selected date to use in your application. The Calendar widget also indicates if there are records stored on a date.

Minimal required properties:

• Selected Date, should be a valid date-field from Data model (not from a list) AND must be initialized as it determines the first month to display and day to highlight;

• List of events with at least one date field, to determine whether a day should be highlighted and active;

• The date-field in the Events list to match the day on calendar with.

How to

We are going to explain the use of the Calendar widget by using an example. In this example we are going to create a simple to do list for a day. When a user clicks on a date in the calendar widget, a to do list appears.

Before you start you will have to prepare 2 items:

• The widget needs a database list that contains at least 1 date field (data type = Date)

• A temporary date field (date type = Date) to store the selected date.

Note: the temporary date field must be outside the database list of the widget! Be sure that the temporary date field is initially filled with a value (for example the current date).

Create a database list and temporary field

Create a database list To do with two fields:

• Date (Date type = Date)

• To do (Date type = Text)

The database list should look something like this:

Next create a temporary field. Put a single data field with the name “Selected date” and data type Date outside of the To Do list so it is a temporary/transient field.

Create the flowchart and Use the Calendar widget in a user interaction screen

Open the flowchart editor and drag and drop a blue interaction node on the canvas, name it “Calendar”, to set an initial date for the temporary field we are going to use a green assigment node in our flowchart. Drag and drop a green assigment node (or the selected date field) on the canvas between the start and interaction node. Next select the temporary “Selected date” field and change the node property action into Advanced and use the Date function Today() as the operand.

Double click on the user interaction node to open the template editor. Before placing the Calendar widget in the template, first place a adaptive column on the canvas. This is for layout reasons, because we also want to place a datagrid next to the calendar later on.

Now place the Calendar widget in the left column.

Select the Calendar widget by clicking it once. Now you can configure the all the Calendar properties:

1. First connect the database list to the widget. Click on the Event list property in the Properties pane on the right side of the screen. Select the database list “To do” (or drag the list to the property).

2. Next select the date field in the database list by clicking on Event date. Select the “Date” field from the “To do” database list.

3. Next select the Selected date (by user) property. This is the property that stores the selected date from the widget. Select the temporary field “Selected date”.

4. Change the On click action property into “Refresh screen”

5. Click on preview to check your calendar.

Display the To Do list, create To Do activities

Now we are going to display and manage the To Do activities on a selected date.

First we are going to show only the To Do activities for the selected date by filtering the database list:

1. Double click on the “Calendar” user interaction node to open the template editor

2. Select the “To Do” database list and place the datagrid in the right column.

3. Create a new filter on the datagrid by right clicking the filters folder and selecting new filter and enter the filtername: “Selected date”

4. Enter the following filter condition: [ToDo.Date] = [Selected date]

5. Add the filter to the datagrid.

Next we are going to create new To Do activities for the selected date:

1. Drag and drop the To do list node on the canvas and select add row.

2. Open the Calendar interaction node and add a button in the top right column. Name the exit “Add To Do”

3. Connect the green list node to the “Calendar” user interaction node and select the “Add To Do” exit

4. Drag and drop the Date field to after the add row list node, select the assignment option, set the property action to “Advanced” and select the temporary field “Selected date” as the operand

5. Drag and drop a user interaction node and create an entry form for the database list “To Do”. You can show it as an overlay and set the overlay title as an expression: “To Do for”+” “+[Temp.Selected date]

6. You can finish the entry form with two exit buttons (Cancel and Save) and show them in the button bar. Connect the button exits to a Save and Discard all changes node

The result should look something like this:

Flowchart

Overlay interaction node

Properties

General

Property	Datatype	Description
Events list	List, Required	The source list containing dates of events. Can be empty (no data) but should exist with at least one date-field.
Event date	Date, Datafield	The field in the event list containing the date to match with the Calendar display.
Event background color	Text, Expression	Color code for day that has Events in the List. Either use a bootstrap context such as "success", "danger", "info" or "warning". Or a CSS color value, for example: "red", "#ff0000" or "rgba(255,0,0,0.80)". Default: "info".
Event text color	Text, Expression	Changes the color of the event-text. Either use a bootstrap context such as "success", "danger", "info" or "warning". Or a CSS color value, for example: "red", "#ff0000" or "rgba(255,0,0,0.80)". Default: "info".
Event is disabled	Boolean, Expression	When day has events, day is disabled. Default false
Selected date	Date, Datafield	The date that is selected by User, when clicked on date in calendar. MUST be initialised PRIOR to showing widget, as it determines the month to be displayed.

Behavior

Property	Datatype	Description
On click	Dropdown	When the user clicks a date, the following actions can be performed: do nothing, execute flowchart, follow button exit, refresh screen, follow navigation item.
Action button exit	Button Exit	Provide a button exit when the property 'On click' is set to 'follow exit'.
Action flowchart	Flowchart	Provide a flowchart when the property 'On click' is set to 'execute flowchart'.
Action navigation item	Navigation item	Provide a navigation item when the property 'On click' is set to 'follow navigation item'.
Disable all	Boolean, Expression	Disable click action for all days without events.
Disable past days	Boolean, Expression	Disable click action for days in past. Default false.
Disable future days	Boolean, Expression	Disable click action for days in future. Default false.
Disable weekends	Boolean, Expression	Disable click action for weekend days. Default false.

Appearance

Property	Datatype	Description
Selected date background color	Text, Expression	Background color of selected date. Either use a bootstrap context such as "success", "danger", "info" or "warning". Or a CSS color value, for example: "red", "#ff0000" or "rgba(255,0,0,0.80)". Default: "primary"
Selected date text color	Text, Expression	Color of the selected date text. Either use a bootstrap context such as "success", "danger", "info" or "warning". Or a CSS color value, for example: "red", "#ff0000" or "rgba(255,0,0,0.80)". Default: "primary"
Today highlight color	Text, Expression	Highlighting color for today's date. Either use a bootstrap context such as "success", "danger", "info" or "warning". Or a CSS color value, for example: "red", "#ff0000" or "rgba(255,0,0,0.80)". Default: "primary"
Max width (in pixels)	Number, Expression	Max width of the calendar in pixels. Default: 480.