# !! Calendar Dashboard

The Calendar Dashboard represents events in monthly calendar and allows to manage them by simple dragging. Here is how this dashboard can look like:

<img src="/files/05u5P4qlcuslSENeGBBw" alt="" class="gitbook-drawing">

This Kanban is a [Composite Dashboard](/composite-kanban/introduction.md) with 5 [containers](/standard-kanban/configure-column/how-to-configure-column-container-and-filters.md); each of them contains the same [Standard Dashboard](/standard-kanban/getting-started.md), initialized with different [Input Variables](/composite-kanban/working-with-composite-kanban-layout/configuring-child-kanban.md).\
Columns in this dashboard represent days, and cards in these columns are corresponding to events. Dragging events from one column to another changes their  start dates. If click on event, its detailed data will be shown in the form, where it can be edited.

To make a such dashboard administrator should do actions listed below:

### &#x20;Make an Event Form

* [Set Card Layout](/standard-kanban/configure-card/how-to-configure-card-layout.md) to "Form".
* Click "+" button to add new Form. Create [new form](/components/forms/basics/form-building-overview.md) with these properties:

| Property              | Value                                                        |
| --------------------- | ------------------------------------------------------------ |
| Name                  | **Event form**                                               |
| Data Source Object    | **Event**                                                    |
| Multi Page Form?      | false                                                        |
| Show navigation panel | true                                                         |
| Buttons configuration | Check "Save" button for "Edit" mode only. Uncheck other.     |
| Header configuration  | <p><strong>{$Event.Subject}</strong> (for all modes)<br></p> |

* Add these elements to the form:

| #                                                                                                                                                                           | Type                     | Name                     | Title                      | Properties                                                                                                                                                                                                                                                                                                                                                     |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | ------------------------ | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 1                                                                                                                                                                           | Section                  | section                  | <p><br></p>                | <ul><li>Columns: 2</li><li>Show on Edit page: true</li><li>Show on View Page: true</li><li>Scrollable: false</li></ul>                                                                                                                                                                                                                                         |
| 2                                                                                                                                                                           | Button                   | button                   | Close                      | <ul><li>Show on Edit page: true</li><li>Show on View Page: true</li></ul>                                                                                                                                                                                                                                                                                      |
| <p><strong>The following elements all should be added into section configured above.</strong> <br><strong>All these elements should be Data Source Fields:</strong><br></p> |                          |                          |                            |                                                                                                                                                                                                                                                                                                                                                                |
| **#**                                                                                                                                                                       | **Data Source Field**    | **Name**                 | **Title**                  | **Properties**                                                                                                                                                                                                                                                                                                                                                 |
| 3                                                                                                                                                                           | Subject                  | <p>Subject<br></p>       | <p>Subject<br></p>         | <ul><li>Required: false</li><li>Read Only: false</li><li>Show on Edit page: true</li><li>Show on View Page: true</li><li>Instructions: not set</li><li>Conditional Styles: not set</li><li>Events: not set</li><li>View Type (for picklisis): Single list</li><li>Hide 'None' (for picklists): false</li><li>Options Groups (for picklists): not set</li></ul> |
| 4                                                                                                                                                                           | Type                     | Type                     | Type                       |                                                                                                                                                                                                                                                                                                                                                                |
| 5                                                                                                                                                                           | EventSubtype             | <p>EventSubtype<br></p>  | <p>Subtype<br></p>         |                                                                                                                                                                                                                                                                                                                                                                |
| 6                                                                                                                                                                           | <p>StartDateTime<br></p> | <p>StartDateTime<br></p> | <p>Start Date Time<br></p> |                                                                                                                                                                                                                                                                                                                                                                |
| 7                                                                                                                                                                           | <p>EndDateTime<br></p>   | <p>EndDateTime<br></p>   | <p>End Date Time<br></p>   |                                                                                                                                                                                                                                                                                                                                                                |
| 8                                                                                                                                                                           | Description              | <p>Description<br></p>   | <p>Description<br></p>     |                                                                                                                                                                                                                                                                                                                                                                |

* Add these Form Actions:

<table><thead><tr><th>#</th><th>Action Name and Title</th><th>Property</th><th>Value</th></tr></thead><tbody><tr><td>1</td><td>Close Panel</td><td>Type</td><td><strong>Form API</strong></td></tr><tr><td>Form Action Type</td><td><strong>Fire Event</strong></td><td></td><td></td></tr><tr><td>Name</td><td><strong>e.FLX_KB:ApplicationEvent</strong></td><td></td><td></td></tr><tr><td>Parameters</td><td><p>Name: <strong>data</strong><br>Value Type: <strong>Object</strong><br>Value:</p><pre><code><strong>{"componentType":"c:KanBanPanelComponent","method":"hideCard"}
</strong></code></pre></td><td></td><td></td></tr><tr><td>Has Conditions</td><td>false</td><td></td><td></td></tr><tr><td>2</td><td>Refresh Column</td><td>Type</td><td><strong>Form API</strong></td></tr><tr><td>Form Action Type</td><td><strong>Fire Event</strong></td><td></td><td></td></tr><tr><td>Name</td><td><strong>e.FLX_KB:ApplicationEvent</strong></td><td></td><td></td></tr><tr><td>Parameters</td><td><p>Name: <strong>data</strong><br>Value Type: <strong>Object</strong><br>Value:</p><pre><code>{"componentType":"c:KanBanColumnComponent","method":"refresh","params":{"kanbans":"{$FormParameters.kanban}"}}
</code></pre></td><td></td><td></td></tr><tr><td>Has Conditions<br></td><td>true</td><td></td><td></td></tr><tr><td>Conditions</td><td>1</td><td><strong>Form.StartDateTime not equal to {$Event.StartDateTime}</strong><br></td><td></td></tr><tr><td></td><td>2<br></td><td><strong>Form.EndDateTime not equal to {$Event.EndDateTime}</strong></td><td></td></tr><tr><td>Conditions logic</td><td><strong>{1} OR {2}</strong><br></td><td></td><td></td></tr></tbody></table>

* Add the following events to the form:

| # | Element what event is added to | Event properties                                           | Event Handler                                                       |
| - | ------------------------------ | ---------------------------------------------------------- | ------------------------------------------------------------------- |
| 1 | Form                           | <p>Type: <strong>onAfterSave</strong><br>Enabled: true</p> | "**Refresh Column**" action without parameters                      |
| 2 | "Close" button                 | <p>Type: <strong>onClick</strong><br>Enabled: true</p>     | <p>"<strong>Close Panel</strong>" action without parameters<br></p> |

### &#x20;Make new standard dashboard.

#### &#x20;Create dashboard

* Go to [dashboard creation wizard](/standard-kanban/basics/how-to-create-a-standard-kanban.md) and create new standard dashboard.
* Give it a "**Weekly Calendar Dashboard**" name and some description.
* Select "**White**" theme.
* Save dashboard and go to Kanban Bulder.

#### &#x20;Configure columns

* Add [7 columns](/standard-kanban/configure-kanban/working-with-kanban-layout.md) to the dashboard.
* Name columns from "Sunday" to "Saturday"
* Set column descriptions to digits from "0" to "6" (thus, descriptions will contain indexes of proper weekday)
* Leave columns widths default ("auto")
* Leave columns "Is Active" checkboxes default (checked)
* [Set these properties](/standard-kanban/configure-column/how-to-sonfigure-column-properties.md) to all columns:
  * Data Source Type = **SObject**
  * Data Source = **Event**
  * Order = **Start Date Time, asc**
  * Page Size = **5**
* [Set the following conditions](/standard-kanban/configure-column/how-to-configure-column-data-source.md#sobject-data-source) to the columns and add 1 [cell](/standard-kanban/tools/configuring-rows-cells-menus-and-buttons.md) to their headers with the following values:

| <p><strong>#</strong><br></p> | <p><strong>Column Name</strong><br></p> | **Conditions**             | **Header Cell Value**                                                         |                    |                                                                   |                                                  |
| ----------------------------- | --------------------------------------- | -------------------------- | ----------------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------- | ------------------------------------------------ |
| **Field Name**                | **Operator**                            | **Type**                   | **Value**                                                                     |                    |                                                                   |                                                  |
| 1                             | Sunday                                  | Start Date Time            | greater than                                                                  | Formula            | FORMULA\[DATETIMEVALUEGMT({$Variables.startDate})]                | <p>{$Variables.startdate} (Sunday)<br></p>       |
| <p>Start Date Time<br></p>    | less than                               | <p>Formula<br></p>         | <p>FORMULA\[DATETIMEVALUEGMT({$Variables.startDate} + HOURS(24))]<br></p>     |                    |                                                                   |                                                  |
| 2                             | Monday                                  | <p>Start Date Time<br></p> | <p>greater than<br></p>                                                       | <p>Formula<br></p> | <p>FORMULA\[DATETIMEVALUEGMT({$Variables.startDate}) + 1]<br></p> | FORMULA\[{$Variables.startdate} + 1] (Monday)    |
| <p>Start Date Time<br></p>    | <p>less than<br></p>                    | <p>Formula<br></p>         | <p>FORMULA\[DATETIMEVALUEGMT({$Variables.startDate} + 1 + HOURS(24))]<br></p> |                    |                                                                   |                                                  |
| 3                             | Tuesday                                 | Start Date Time            | greater than                                                                  | <p>Formula<br></p> | FORMULA\[DATETIMEVALUEGMT({$Variables.startDate}) + 2]            | FORMULA\[{$Variables.startdate} + 2] (Tuesday)   |
| <p>Start Date Time<br></p>    | <p>less than<br></p>                    | <p>Formula<br></p>         | FORMULA\[DATETIMEVALUEGMT({$Variables.startDate} + 2 + HOURS(24))]            |                    |                                                                   |                                                  |
| 4                             | Wednesday                               | <p>Start Date Time<br></p> | <p>greater than<br></p>                                                       | <p>Formula<br></p> | FORMULA\[DATETIMEVALUEGMT({$Variables.startDate}) + 3]            | FORMULA\[{$Variables.startdate} + 3] (Wednesday) |
| <p>Start Date Time<br></p>    | <p>less than<br></p>                    | <p>Formula<br></p>         | FORMULA\[DATETIMEVALUEGMT({$Variables.startDate} + 3 + HOURS(24))]            |                    |                                                                   |                                                  |
| 5                             | Thursday                                | <p>Start Date Time<br></p> | <p>greater than<br></p>                                                       | <p>Formula<br></p> | FORMULA\[DATETIMEVALUEGMT({$Variables.startDate}) + 4]            | FORMULA\[{$Variables.startdate} + 4] (Thursday)  |
| <p>Start Date Time<br></p>    | <p>less than<br></p>                    | <p>Formula<br></p>         | <p>FORMULA\[DATETIMEVALUEGMT({$Variables.startDate} + 4 + HOURS(24))]<br></p> |                    |                                                                   |                                                  |
| 6                             | Friday                                  | <p>Start Date Time<br></p> | <p>greater than<br></p>                                                       | <p>Formula<br></p> | FORMULA\[DATETIMEVALUEGMT({$Variables.startDate}) + 5]            | FORMULA\[{$Variables.startdate} + 5] (Friday)    |
| <p>Start Date Time<br></p>    | <p>less than<br></p>                    | <p>Formula<br></p>         | <p>FORMULA\[DATETIMEVALUEGMT({$Variables.startDate} + 5 + HOURS(24))]<br></p> |                    |                                                                   |                                                  |
| 7                             | Saturday                                | <p>Start Date Time<br></p> | <p>greater than<br></p>                                                       | <p>Formula<br></p> | FORMULA\[DATETIMEVALUEGMT({$Variables.startDate}) + 6]            | FORMULA\[{$Variables.startdate} + 6] (Saturday)  |
| <p>Start Date Time<br></p>    | <p>less than<br></p>                    | <p>Formula<br></p>         | FORMULA\[DATETIMEVALUEGMT({$Variables.startDate} + 6 + HOURS(24))]            |                    |                                                                   |                                                  |

* Set **height:22px** [CSS style](/standard-kanban/tools/configuring-css-styles.md) to headers of all columns
* Set **font-size:14px** CSS style to cells in headers of each column

#### &#x20;Configure Card

* [Add 1 card](/standard-kanban/configure-card.md) to dashboard and name it "**Event**"
* Set Data Source Type to "**Event**"

Card Layout configuration:

* Set [card layout](/standard-kanban/configure-card/how-to-configure-card-layout.md) to **Form**. Select **Event Form** (which was created earlier and described above)in the lookup and set its parameters to these:
  * kanban = **{$Card.Kanban}**
  * mode = **edit**
  * id = **{Event.Id}**
* Set Position of Card Layout to **Modal**
* Check "**Hide Footer**" checkbox
* Set Text of layout header to **{event.Subject}** ("Title Settings section of Header Configuration tab)

[Card Compact Layout](/standard-kanban/configure-card/how-to-configure-card-compact-layout.md) configuration:

* Set Card to Collapsible ("General" section of Card Settings)
* Set CSS styles of Card to **padding:0px**
* Set Value of the default Card Component to **{Event.Subject}**
* Set its CSS Styles to **background-color:#c6c9ff; padding:0px 5px;**
* Add one more Text Card Component under default and:
  * Set its Value to **{Event.Type}**
  * Set its CSS Styles to **padding:0px 5px**
* Add third Text Card Component under previous and:
  * Set  its Value to **FORMULA\[FORMAT({Event.StartDateTime}, 'hh:mm a')]**
  * Set its CSS Styles to **padding:0px 5px**
* Add fourth Text Card Component at the right of third (it will become 50% wide) and:
  * Set  its Value to **FORMULA\[TOTEXTDURATION({Event.DurationInMinutes}, 24)]**
  * Set its CSS Styles to **padding:0px 5px; text-align:right;**

#### &#x20;Configure Column Junctions

Set these [column junctions](#configure-column-junctions) to Card in all columns:

* Drag-n-drop allowed to **all** columns
* Drop behavior left default to all columns (source column = **Remove Card**, target column = **Refresh**)

#### &#x20;Configure Card Actions

To add a sense to Cards dragging [some actions are necessary](#configure-card-actions). In this example action will be the same for all columns, so, no need to configure them separately.

Click on card and add a new action with these properties:

* Name = **Update Event Start Date**
* Type = **Field Update**
* Execute = **Always**
* Status = **Active**
* Context Object Type = **Event**

In the Field Update Settings section configure this:

* Object Name = **Event**
* Fields:

<table><thead><tr><th>Name</th><th>Value</th></tr></thead><tbody><tr><td>Start Date Time</td><td><pre><code>FORMULA[{Event.StartDateTime} + (({$Variables.startDate} + {$TargetColumn.Description}) - DATETIMEVALUE(DATEVALUE({Event.StartDateTime})))]
</code></pre></td></tr><tr><td>End Date Time</td><td><pre><code>FORMULA[{Event.EndDateTime} + (({$Variables.startDate} + {$TargetColumn.Description}) - DATETIMEVALUE(DATEVALUE({Event.EndDateTime})))]
</code></pre></td></tr></tbody></table>

* Conditions:
  * **Activity ID eqials {event.id}**

### &#x20;Make new composite dashboard&#x20;

#### Create dashboard

* Go to [dashboard creation wizard](/standard-kanban/basics/how-to-create-a-standard-kanban.md) and create new composite dashboard.
* Give it a "Calendar Dashboard" name and some description.
* Select "White" theme.
* Save dashboard and go to Kanban Bulder.

#### &#x20;Configure containers and child dashboards

* Make dashboard have [5 containers](/standard-kanban/configure-column/how-to-configure-column-container-and-filters.md) in vertical stack.
* Leave their properties default
* Set their titles from "**Weekly Calendar 1**" (topmost container) to "**Weekly Calendar 5**" (bottommost container)
* Select previously created "**Weekly Calendar Dashboard**" kanban as [child dashboard](/composite-kanban/working-with-composite-kanban-layout/configuring-child-kanban.md) in each container
* Set API names for containers and Input Variables for each child dashboard:

| Container                    | Container API name | Input Variable name  | <p>Input Variable value<br></p>    |
| ---------------------------- | ------------------ | -------------------- | ---------------------------------- |
| Weekly Calendar 1            | <p>week1<br></p>   | <p>startDate<br></p> | <p>{$Variables.week1Start}<br></p> |
| <p>Weekly Calendar 2<br></p> | <p>week2<br></p>   | <p>startDate<br></p> | <p>{$Variables.week2Start}<br></p> |
| <p>Weekly Calendar 3<br></p> | <p>week3<br></p>   | <p>startDate<br></p> | <p>{$Variables.week3Start}<br></p> |
| <p>Weekly Calendar 4<br></p> | <p>week4<br></p>   | <p>startDate<br></p> | <p>{$Variables.week4Start}<br></p> |
| <p>Weekly Calendar 5<br></p> | <p>week5<br></p>   | <p>startDate<br></p> | <p>{$Variables.week5Start}<br></p> |

#### &#x20;Configure connections between child dashboards

You do not  need to [configure connections](/composite-kanban/connections-between-kanbans.md) from dashboard of each container to every other because the dashboard is the same for all containers. It will be enough to set them one time from any container to any other.

Set connections to these:

* Source Kanban = **Weekly Calendar Dashboard**
* Target Kanban = **Weekly Calendar Dashboard**
* Card Name = **Event**
* Source Columns: all (set one connection per each)
* Target Column: for each source column select target column with the same name
* Action on drop: configure new with these properties:
  * Name = **Update Event Start Date**
  * Type = **Field Update**
  * Object name = **Event**
  * Conditions = **Activity ID equals {event.id}**
  * Fields:

<table><thead><tr><th>Name</th><th>Value</th></tr></thead><tbody><tr><td>Start Date Time</td><td><pre><code>FORMULA[{Event.StartDateTime} + (({$Variables.startDate} + {$TargetColumn.Description}) - DATETIMEVALUE(DATEVALUE({Event.StartDateTime})))]
</code></pre></td></tr><tr><td>End Date Time</td><td><pre><code>FORMULA[{Event.EndDateTime} + (({$Variables.startDate} + {$TargetColumn.Description}) - DATETIMEVALUE(DATEVALUE({Event.EndDateTime})))]
</code></pre></td></tr></tbody></table>

* Copy this action onto each connection set

Connections should look like this:

<img src="/files/9dCPQGXYt8cUWUkeRanZ" alt="" class="gitbook-drawing">

#### Configure actions and action groups

Create the following Actions of "**Define Variable**" type. Set Variable Type to **Text** in all actions:

<table><thead><tr><th>#</th><th>Action name</th><th>Variable name</th><th>Variable value</th></tr></thead><tbody><tr><td>1</td><td>Get Previous Month</td><td>currentDate</td><td><pre><code>FORMULA[FORMAT(ADDMONTHS(DATEVALUE({$Variables.currentDate}), -1), 'yyyy-MM-dd')]
</code></pre></td></tr><tr><td>2</td><td>Get Next Month</td><td>currentDate</td><td><pre><code>FORMULA[FORMAT(ADDMONTHS(DATEVALUE({$Variables.currentDate}), 1), 'yyyy-MM-dd')]
</code></pre></td></tr><tr><td>3</td><td>Update Week 1 Start Variable</td><td>week1Start</td><td><pre><code>FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01')))]
</code></pre></td></tr><tr><td>4</td><td>Update Week 2 Start Variable<br></td><td>week2Start<br></td><td><pre><code>FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 7]
</code></pre></td></tr><tr><td>5</td><td>Update Week 3 Start Variable</td><td>week3Start</td><td><pre><code>FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 14]
</code></pre></td></tr><tr><td>6</td><td>Update Week 4 Start Variable<br></td><td>week4Start<br></td><td><pre><code>FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 21]
</code></pre></td></tr><tr><td>7</td><td>Update Week 5 Start Variable<br></td><td>week5Start<br></td><td><pre><code>FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 28]
</code></pre></td></tr><tr><td>8</td><td>Update Week 1 Variable<br></td><td>week1<br></td><td><pre><code>FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))), 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 6, 'dd/MM/yyyy')]
</code></pre></td></tr><tr><td>9</td><td>Update Week 2 Variable<br></td><td>week2<br></td><td><pre><code>FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 7, 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 13, 'dd/MM/yyyy')]
</code></pre></td></tr><tr><td>10</td><td>Update Week 3 Variable<br></td><td>week3<br></td><td><pre><code>FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 14, 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 20, 'dd/MM/yyyy')]
</code></pre></td></tr><tr><td>11</td><td>Update Week 4 Variable<br></td><td>week4<br></td><td><pre><code>FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 21, 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 27, 'dd/MM/yyyy')]
</code></pre></td></tr><tr><td>12</td><td>Update Week 5 Variable<br></td><td>week5<br></td><td><pre><code>FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 28, 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 34, 'dd/MM/yyyy')]
</code></pre></td></tr></tbody></table>

Create 2 action groups and add actions from configured above to them (in the order specified below):

1. name = **Get Previous Month Action Group**
   * actions:
     1. Get Previous Month
     2. Update Week 1 Start Variable
     3. Update Week 2 Start Variable
     4. Update Week 3 Start Variable
     5. Update Week 4 Start Variable
     6. Update Week 5 Start Variable
     7. Update Week 1 Variable
     8. Update Week 2 Variable
     9. Update Week 3 Variable
     10. Update Week 4 Variable
     11. Update Week 5 Variable<br>
2. name = **Get Next Month Action Group**
   * actions:
     1. Get Next Month
     2. Update Week 1 Start Variable
     3. Update Week 2 Start Variable
     4. Update Week 3 Start Variable
     5. Update Week 4 Start Variable
     6. Update Week 5 Start Variable
     7. Update Week 1 Variable
     8. Update Week 2 Variable
     9. Update Week 3 Variable
     10. Update Week 4 Variable
     11. Update Week 5 Variable

#### &#x20;Configure Dashboard

Basic Configuration tab

* Set Icon to **action:new\_event**

Statistic Configuration tab

* Add one [Cell](/standard-kanban/tools/configuring-rows-cells-menus-and-buttons.md#cells) of Text type
* Set its CSS Style to **font-size: 24px;**
* Set its Value to **FORMULA\[FORMAT({$Variables.currentDate}, 'MMMM, yyyy')]**

Variables Configuration tab

* Add these variables:

<table><thead><tr><th>#</th><th>Variable Name</th><th>Variable Value</th></tr></thead><tbody><tr><td>1</td><td>currentDate</td><td><pre><code>{$System.Date}
</code></pre></td></tr><tr><td>2</td><td>week1Start</td><td><pre><code>FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01')))]
</code></pre></td></tr><tr><td>3</td><td>week2Start</td><td><pre><code>FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 7]
</code></pre></td></tr><tr><td>4</td><td>week3Start</td><td><pre><code>FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 14]
</code></pre></td></tr><tr><td>5</td><td>week4Start</td><td><pre><code>FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 21]
</code></pre></td></tr><tr><td>6</td><td>week5Start</td><td><pre><code>FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 28]
</code></pre></td></tr></tbody></table>

#### Buttons Configuration tab

* Add the following buttons:<br>
  1. Previous Month
     * type = **Icon**
     * title = **Previous Month**
     * icon = **utility:left**
     * handler:
       * type =**Action Group**
       * value = **Get Previous Month Action Group**
       * parameters not set
       * success handler:
         * type = **Kanban API**
         * value = **Refresh Kanbans**
         * parameters not set<br>
  2. Next Month
     * type = **Icon**
     * title = **Next Month**
     * icon = **utility:right**
     * handler:
       * type =**Action Group**
       * value = **Get Next Month Action Group**
       * parameters not set
       * success handler:
         * type = **Kanban API**
         * value = **Refresh Kanbans**
         * parameters not set


---

# Agent Instructions: 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:

```
GET https://docs.flexikanban.ai/composite-kanban/examples/calendar-dashboard.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.