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.
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:
First connect the database list to the widget. Click on the
Event list
property in theProperties
pane on the right side of the screen. Select the database list “To do” (or drag the list to the property).Next select the date field in the database list by clicking on
Event date
. Select the “Date” field from the “To do” database list.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”.Change the
On click action
property into “Refresh screen”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:
Double click on the “Calendar”
user interaction
node to open the template editorSelect the “To Do” database list and place the datagrid in the right column.
Create a new filter on the datagrid by right clicking the filters folder and selecting new filter and enter the filtername: “Selected date”
Enter the following filter condition: [ToDo.Date] = [Selected date]
Add the filter to the datagrid.
Next we are going to create new To Do activities for the selected date:
Drag and drop the
To do list
node on the canvas and select add row.Open the Calendar interaction node and add a button in the top right column. Name the exit “Add To Do”
Connect the green
list
node to the “Calendar”user interaction
node and select the “Add To Do” exitDrag 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 operandDrag 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]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
andDiscard all changes
node
The result should look something like this:
Properties
General
Behavior
Appearance
Last updated