> For the complete documentation index, see [llms.txt](https://docs.wem.io/platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wem.io/platform/wemtipsandtricks/widgets/global-widgets/calendar.md). # 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

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.

--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.wem.io/platform/wemtipsandtricks/widgets/global-widgets/calendar.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.