Comment on page

Calendar

How to use the Calendar widget

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.
Depending on the desired use and functionality you can choose one of the three widgets in the template editor menu.
Note: if the widgets menu is not visible in the template editor menu, you will have to activate the widgets library first. To do this go to the Home tab of the modeler and right click on the My project home icon. Now you can select the Widget library. You can also select other available libraries. When selected, they will appear in your template editor.
​
​
Calendar
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.
​
Main features of the widget:
Stores a selected date into a temporary data field
Indicates if there are any records stored on a date
How to use the Calendar widget
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. First create a new folder named “Temp” and put a single data field with the name “Selected date” and data type Date in the Temp folder.
Use the Calendar widget in a user interaction screen
You can create a new flowchart in the root of your project, but you can also arrange your flowcharts by gather them by (for example) functionality or topic, in this case Widgets. Create a new Regular flowchart “Calendar” in a new folder named Widgets.
Open the flowchart editor and drag and drop a blue interaction node on the canvas, name it “Calendar” and connect the start node with the user interaction node.
​
Doubleclick on the user interaction node to open the template editor. Before placing the Calendar widget in the template, first place 2 columns on the canvas. This is for layout reasons, because we also want to place a datagrid next to the calendar later on.
Place your cursor beneath the title “Calendar” and click on the menu item Columns. Place your cursor in the left column.
Note: make sure to remove the empty space in the column by clicking on the Backspace button.
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”. 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” from the Temp folder. 4. Change the On click action property into “Refresh screen”
Note: don’t forget to save the template!
Return to the flowchart editor and preview your flowchart by clicking on Preview.
Note: at this stage the screen will display a “undefined null” message. This is because there is no initial date set for the temporary field “Selected date”.
​
​
To set an initial date for the temporary field we are going to use a green assigment node 
 in our flowchart. 1. Drag and drop a green assigment node on the canvas. 2. Next select the temporary “Selected date” field 3. Change the node property action into Advanced 4. Use the Date function Today() as the operand
1.Connect the Start node to the assignment node and the user interaction node.
​
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 slected 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 left column 3. Create a new filter on the datagrid by clicking on the Filter property and enter the filtername: “Selected date” 4. Enter the following filter condition: [ToDo.Date] = [Temp.Selected date]
​
Next we are going to create new To Do activities for the selected date: 1. Drag and drop a green list node on the canvas. The property action is automatically set to Add row 2. Open the template editor and add a button in the top right column. Name the exit “Add To Do”
1.Connect the green list node to the “Calendar” user interaction node and select the “Add To Do” exit
2.Drag and drop a green assigment node after the list node and select the “Date” field from the “To Do”database list
3.Set the property action to “Advanced” and select the temporary field “Selected date” as the operand
4.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]
5.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:
Note: when there are records stored on a specific date of the calendar the widget displays this with a colour. You can adjust the colour behaviour of the widget by using expressions in the Calendar properties.
Properties of the Calendar widget
This section describes the possible values per property.
Property
Description
Events list
Required property. Stores the database list (dates of events) behind the Calendar widget. The database list must contain at least 1 date field (data type = Date)
Events date
Stores the date field of the Calendar event. Date type must be of data type = Date. The Calendar widget uses this field to display (with a colour) when it contains data
Event background color
Here you can specify the color of the background of an event date on the Calendar. Either use a bootstrap context such as “default”, “success”, “primary”, “info”, “warning”, “danger”, “hyperlink” or a CSS color value, for example “red”. You can also use a hex code, for example “#EE4266” (pink) or “rgba(255,0,0,0,80)”. You can also use expressions including functions to determine the color. Note: don’t forget to put the code between quotation marks (“). If this property is empty, the “default” value of the template will be used.
Event text color
Here you can specify the color of the text of an event date on the Calendar. Either use a bootstrap context such as “default”, “success”, “primary”, “info”, “warning”, “danger”, “hyperlink” or a CSS color value, for example “red”. You can also use a hex code, for example “#EE4266” (pink) or “rgba(255,0,0,0,80)”. You can also use expressions including functions to determine the color. Note: don’t forget to put the code between quotation marks (“). If this property is empty, the “default” value of the template will be used.
Event is disabled
To disable an event date (or event dates) on the Calendar. That date will be non-clickable. Values are Boolean (True or False). Default value is False. You can also use expressions including functions to calculate the disables dates.
Selected date (by user)
Stores the selected date (by a user) of the Calendar widget. Use a temporary field. This field must be of data type = Date. The field must be initialised before displaying the Calendar widget, as it determines the month to be displayed. If not initialised then there will be a “undefined null” message on the user interaction screen.
On click action
Click action on the event date. Do nothing, Refresh screen, Execute flowchart, Follow button exit, Follow navigation item. Depending on the selected item there will be additional properties
Action flowchart
Additional property when Execute flowchart is selected.
Action button exit
Additional property when Follow button exit is selected.
Action navigation item
Additional property when Follow navigation item is selected.
Disable all days without events
Disable click action for all days without events (stored in the event list). Values are Boolean (True of False). You can also use expressions including functions. Default value is False.
Disable past days
Disable click action for days in the past. Values are Boolean (True of False). You can also use expressions including functions. Default value is False.
Disable future days
Disable click action for days in the future. Values are Boolean (True of False). You can also use expressions including functions. Default value is False.
Disable weekends
Disable click action for days in the weekends. Values are Boolean (True of False). You can also use expressions including functions. Default value is False.
Selected date background color
Here you can specify the background color of the selected date. Either use a bootstrap context such as “default”, “success”, “primary”, “info”, “warning”, “danger”, “hyperlink” or a CSS color value, for example “red”. You can also use a hex code, for example “#EE4266” (pink) or “rgba(255,0,0,0,80)”. You can also use expressions including functions to determine the color. Note: don’t forget to put the code between quotation marks (“). If this property is empty, the “default” value of the template will be used.
Selected date text color
Here you can specify the color of the text of the selected date. Either use a bootstrap context such as “default”, “success”, “primary”, “info”, “warning”, “danger”, “hyperlink” or a CSS color value, for example “red”. You can also use a hex code, for example “#EE4266” (pink) or “rgba(255,0,0,0,80)”. You can also use expressions including functions to determine the color. Note: don’t forget to put the code between quotation marks (“). If this property is empty, the “default” value of the template will be used.
Today highlight color
Here you can specify the highlight color of the today’s date. Either use a bootstrap context such as “default”, “success”, “primary”, “info”, “warning”, “danger”, “hyperlink” or a CSS color value, for example “red”. You can also use a hex code, for example “#EE4266” (pink) or “rgba(255,0,0,0,80)”. You can also use expressions including functions to determine the color. Note: don’t forget to put the code between quotation marks (“). If this property is empty, the “default” value of the template will be used.
Max width (in pixels)
Here you can specify the maximum width of the calendar widet in pixels. You can also use expressions including functions to determine the maximum widht. Default value is 480 pixels.

Kanban Board

reCAPTCHA

Last modified 1yr ago

Property	Description
Events list	Required property. Stores the database list (dates of events) behind the Calendar widget. The database list must contain at least 1 date field (data type = Date)
Events date	Stores the date field of the Calendar event. Date type must be of data type = Date. The Calendar widget uses this field to display (with a colour) when it contains data
Event background color	Here you can specify the color of the background of an event date on the Calendar. Either use a bootstrap context such as “default”, “success”, “primary”, “info”, “warning”, “danger”, “hyperlink” or a CSS color value, for example “red”. You can also use a hex code, for example “#EE4266” (pink) or “rgba(255,0,0,0,80)”. You can also use expressions including functions to determine the color. Note: don’t forget to put the code between quotation marks (“). If this property is empty, the “default” value of the template will be used.
Event text color	Here you can specify the color of the text of an event date on the Calendar. Either use a bootstrap context such as “default”, “success”, “primary”, “info”, “warning”, “danger”, “hyperlink” or a CSS color value, for example “red”. You can also use a hex code, for example “#EE4266” (pink) or “rgba(255,0,0,0,80)”. You can also use expressions including functions to determine the color. Note: don’t forget to put the code between quotation marks (“). If this property is empty, the “default” value of the template will be used.
Event is disabled	To disable an event date (or event dates) on the Calendar. That date will be non-clickable. Values are Boolean (True or False). Default value is False. You can also use expressions including functions to calculate the disables dates.
Selected date (by user)	Stores the selected date (by a user) of the Calendar widget. Use a temporary field. This field must be of data type = Date. The field must be initialised before displaying the Calendar widget, as it determines the month to be displayed. If not initialised then there will be a “undefined null” message on the user interaction screen.
On click action	Click action on the event date. Do nothing, Refresh screen, Execute flowchart, Follow button exit, Follow navigation item. Depending on the selected item there will be additional properties
Action flowchart	Additional property when Execute flowchart is selected.
Action button exit	Additional property when Follow button exit is selected.
Action navigation item	Additional property when Follow navigation item is selected.
Disable all days without events	Disable click action for all days without events (stored in the event list). Values are Boolean (True of False). You can also use expressions including functions. Default value is False.
Disable past days	Disable click action for days in the past. Values are Boolean (True of False). You can also use expressions including functions. Default value is False.
Disable future days	Disable click action for days in the future. Values are Boolean (True of False). You can also use expressions including functions. Default value is False.
Disable weekends	Disable click action for days in the weekends. Values are Boolean (True of False). You can also use expressions including functions. Default value is False.
Selected date background color	Here you can specify the background color of the selected date. Either use a bootstrap context such as “default”, “success”, “primary”, “info”, “warning”, “danger”, “hyperlink” or a CSS color value, for example “red”. You can also use a hex code, for example “#EE4266” (pink) or “rgba(255,0,0,0,80)”. You can also use expressions including functions to determine the color. Note: don’t forget to put the code between quotation marks (“). If this property is empty, the “default” value of the template will be used.
Selected date text color	Here you can specify the color of the text of the selected date. Either use a bootstrap context such as “default”, “success”, “primary”, “info”, “warning”, “danger”, “hyperlink” or a CSS color value, for example “red”. You can also use a hex code, for example “#EE4266” (pink) or “rgba(255,0,0,0,80)”. You can also use expressions including functions to determine the color. Note: don’t forget to put the code between quotation marks (“). If this property is empty, the “default” value of the template will be used.
Today highlight color	Here you can specify the highlight color of the today’s date. Either use a bootstrap context such as “default”, “success”, “primary”, “info”, “warning”, “danger”, “hyperlink” or a CSS color value, for example “red”. You can also use a hex code, for example “#EE4266” (pink) or “rgba(255,0,0,0,80)”. You can also use expressions including functions to determine the color. Note: don’t forget to put the code between quotation marks (“). If this property is empty, the “default” value of the template will be used.
Max width (in pixels)	Here you can specify the maximum width of the calendar widet in pixels. You can also use expressions including functions to determine the maximum widht. Default value is 480 pixels.