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:

  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:

Properties

General

Behavior

Appearance

Last updated