Calendar
Last updated
Last updated
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.
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.
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 the Properties 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.
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 editor
Select 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” exit
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
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]
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:
| 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. |
| 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. |
| 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. |
