# Demo Example: Gantt Kanban

The Gantt Dashboard represents events as classic Gantt chart. It allows dashboard user to view a project or events schedule on the timeline, and manage them.  Here is how such dashboard can look like:

<figure><img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2F2XoOl9VaS7Cd6RpdKmid%2Fimage.png?alt=media&#x26;token=b746ccb2-06e4-4892-b55c-e45201b2991f" alt=""><figcaption></figcaption></figure>

To make this dashboard administrator should do actions listed below:

### &#x20;Create new dashboard

* Go to [dashboard creation wizard](https://docs.flexikanban.ai/standard-kanban/basics/how-to-create-a-standard-kanban) and create new standard dashboard.
* Give it a name and description.
* Select default "White" theme.
* Save dashboard and go to Kanban builder.

### &#x20;Configure dashboard

Go to [Variables Configuration](https://docs.flexikanban.ai/standard-kanban/configure-kanban/how-to-configure-variables) tab. Add these variables:

1. from = `FORMULA[STARTOFWEEK({$System.Date})]`
2. to = `FORMULA[ADDDAYS(STARTOFWEEK({$System.Date}),7,false)]`
3. range = `week`
4. columnName = `FORMULA[FORMAT(STARTOFWEEK({$System.Date}),'d MMM yyyy') + ' - ' + FORMAT(ADDDAYS(STARTOFWEEK({$System.Date}),6,false),'d MMM yyyy')]`
5. dayOfWeek = `FORMULA[{$System.Date} - STARTOFWEEK({$System.Date})]`

Go to Statistics Configuration.

* Add the cell which will overlay unnecessary views selector. Set these properties to it:
  * Type = **Text**
  * Value = **Gantt Dashboard**
* Set CSS Styles to this cell:

```css
font-weight: bold;
background-color: #F7F7F7;
font-size: 1.5em;
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: 1;
padding: 0 1.5em 0 1.5em;
display: flex;
align-items: center;
```

* Add another cell with these properties:
  * Type = **Text**
* Set Value to the following formula:

```css
FORMULA[
  IF(
    {$Variables.range} = 'week',
    '',
    IF(
      {$Variables.range} = 'month',
      FORMAT({$Variables.from},'MMMM yyyy'),
      IF(
        {$Variables.range} = 'quarter',
        FORMAT(ADDDAYS({$Variables.from},1,false), 'yyyy') + ', Quarter ' + CASE(FORMAT(ADDDAYS({$Variables.to}, -1, false), 'M'),'3','I','6','II','9','III','IV'),
        FORMAT({$Variables.from}, 'yyyy')
      )
    )
  )
]
```

{% hint style="info" %}
This formula sets the text at the middle of Kanban header to represent currently selected date range.
{% endhint %}

### &#x20;Configure column

* Add 1 column to the dashboard.
* Name it **{$Variables.columnName}**
* Leave column width default ("auto")
* Leave column "Is Active" checkbox default (checked)
* Set these properties to the column:
  * Data Source Type = **SObject**
  * Data Source = **Event**
  * Order = **Start Date Time, asc**
  * Page size = **20**
* Set the following conditions to the column (set type to "Formula" to all):

1. End Date Time >= `FORMULA[FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')]`
2. Start Date Time < `FORMULA[FORMAT({$Variables.to}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')]`
3. End Date Time < `FORMULA[FORMAT({$Variables.to}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')]`
4. Start Date Time >= `FORMULA[FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')]`
5. Start Date Time < `FORMULA[FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')]`
6. End Date Time >= `FORMULA[FORMAT({$Variables.to}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')]`

* Set this logic to column conditions:

```
({1} AND {3}) OR ({2} AND {4}) OR ({5} AND {6})
```

* Set this [CSS style](https://docs.flexikanban.ai/standard-kanban/tools/configuring-css-styles) to column header in [Header Configuration tab](https://docs.flexikanban.ai/standard-kanban/configure-column/how-to-configure-column-header):

```css
display: none;
```

* Set these CSS styles to column body in [Body configuration tab](https://docs.flexikanban.ai/standard-kanban/configure-column/how-to-configure-column-body):

```css
padding-top: 2.5rem;
background-color: #fff;
padding-right: 0;
padding-left: 0;
```

* Add a **background-image** property to column body CSS styles. Set its value to this code (don't think about formatting - the code below will lose it after being inserted into CSS Rule Value input field):

```css
repeating-linear-gradient(
  90deg,
  transparent calc(
    (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)])
    *
    (6 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})])
  ),
  rgba(150,150,255,0.1) calc(
    (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)])
    *
    (6 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})])
  ),
  rgba(150,150,255,0.1) calc(
    (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)])
    *
    (8 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})])
  ),
  transparent calc(
    (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)])
    *
    (8 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})])
  ),
  transparent calc(
    (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)])
    *
    (13 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})])
  )
),

repeating-linear-gradient(
  90deg,
  transparent calc(
    (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)])
    *
    (7 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})])
    -
    1px
  ),
  RGBA(187,187,187,0.56) calc(
    (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)])
    *
    (7 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})])
    -
    1px
  ),
  RGBA(187,187,187,0.56) calc(
    (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)])
    *
    (7 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})])
  ),
  transparent calc(
    (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)])
    *
    (7 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})])
  ),
  transparent calc(
    (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)])
    *
    (14 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})])
    -
    1px
  )
)

FORMULA[
  IF(
    {$Variables.range} = 'year',
    '',
    ', repeating-linear-gradient(
      90deg,
      #fff 0px,
      #fff calc(
        100%
        /
        ' + TEXT(DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)) + '
        -
        1px
      ),
      #eee calc(
        100%
        /
        ' + TEXT(DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)) + '
        -
        1px
      ),
      #eee calc(
        100%
        /
        ' + TEXT(DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)) + '
      )
    )'
  )
]
```

{% hint style="info" %}
This big formula is used to make column background depending on date range selected:

* First background gradient draws weekends

* Second gradient draws borders between weeks

* Third gradient draws days borders (except when date range = **year**, because only weeks are drawn due too small days widths)
  {% endhint %}

* Set these CSS styles to column footer on [Footer Configuration tab](https://docs.flexikanban.ai/standard-kanban/configure-column/how-to-configure-column-footer):

```css
padding: 0.4rem 0 0.25rem 0;
top: 0px;
background: transparent;
width: 100%;
position: absolute;
border-bottom: 2px solid #ddd;
```

{% hint style="info" %}
We're moving column footer to the top in order to have a header where we can use [Rows](https://docs.flexikanban.ai/standard-kanban/tools/configuring-rows-cells-menus-and-buttons)
{% endhint %}

* Set the following Rows with Cells on them (all cells should have Type = **Text**):

### &#x20;Row 1 (for Quarter date range)

<table><thead><tr><th width="60">#</th><th>Cell Value</th><th>Cell CSS styles</th></tr></thead><tbody><tr><td>1</td><td><pre><code>FORMULA[FORMAT({$Variables.from},'MMMM')]
</code></pre></td><td><pre class="language-css"><code class="lang-css">box-shadow: 0 -0.4rem 0 rgba(150,150,255,0.25), 0 0.25rem 0 rgba(150,150,255,0.25);
background-color: rgba(150,150,255,0.25);
display: FORMULA[IF({$Variables.range} = 'quarter',block,none)];
text-align: center;
width: calc(100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), false)] * FORMULA[IF(         FORMAT(ADDDAYS({$Variables.from},15,false),'M') = '4',         30,         31     ) ] );
</code></pre></td></tr><tr><td>2</td><td><pre><code>FORMULA[FORMAT(ADDDAYS({$Variables.from},45,false),'MMMM')]
</code></pre></td><td><pre><code>box-shadow: 0 -0.4rem 0 rgba(150,255,150,0.25), 0 0.25rem 0 rgba(150,255,150,0.25);
background-color: rgba(150, 255, 150, 0.25);
display: FORMULA[IF({$Variables.range} = 'quarter',block,none)];
text-align: center;
width: calc(100% /  FORMULA[     DAYSBETWEEN(         DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),         DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),         false     ) ]  *  FORMULA[     CASE(         FORMAT(ADDDAYS({$Variables.from},45,false),'M'),         '5',31,         '8',31,         '11',30,         IF(             DAYSBETWEEN(                 DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),                 DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),                 false             ) = 91,             29,             28         )     ) ] );
</code></pre></td></tr><tr><td>3</td><td><pre><code>FORMULA[FORMAT(ADDDAYS({$Variables.from},75,false),'MMMM')]
</code></pre></td><td><pre class="language-css"><code class="lang-css">box-shadow: 0 -0.4rem 0 rgba(255, 150, 150, 0.25), 0 0.25rem 0 rgba(255, 150, 150, 0.25);
background-color: rgba(255, 150, 150, 0.25);
display: FORMULA[IF({$Variables.range} = 'quarter',block,none)];
text-align: center;
width: calc(100% /  FORMULA[     DAYSBETWEEN(         DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),         DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),         false     ) ]  *  FORMULA[     CASE(         FORMAT(ADDDAYS({$Variables.from},75,false),'M'),         '3',31,         '12',31,         30     ) ] );
</code></pre></td></tr></tbody></table>

### &#x20;Row 2 (for Year date range)

<table><thead><tr><th width="65">#</th><th width="108">Cell Value</th><th width="120">Cell Title</th><th>Cell CSS Styles</th></tr></thead><tbody><tr><td>1</td><td>Jan</td><td>January</td><td><pre class="language-css"><code class="lang-css">box-shadow: 0 -0.4rem 0 rgba(150,150,255,0.25), 0 0.25rem 0 rgba(150,150,255,0.25);
background-color: rgba(150,150,255,0.25);
width: calc(100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false)] * 31);
display: FORMULA[IF({$Variables.range} = 'year',block,none)];
text-align: center;
</code></pre></td></tr><tr><td>2</td><td>Feb</td><td>February</td><td><pre class="language-css"><code class="lang-css">box-shadow: 0 -0.4rem 0 rgba(150,255,150,0.25), 0 0.25rem 0 rgba(150,255,150,0.25);
background-color: rgba(150, 255, 150, 0.25);
width: calc(100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false)] * FORMULA[     IF(         DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false) = 366,         29,         28) ]);
display: FORMULA[IF({$Variables.range} = 'year',block,none)];
text-align: center;
</code></pre></td></tr><tr><td>3</td><td>Mar</td><td>March</td><td><pre class="language-css"><code class="lang-css">box-shadow: 0 -0.4rem 0 rgba(255, 150, 150, 0.25), 0 0.25rem 0 rgba(255, 150, 150, 0.25);
background-color: rgba(255, 150, 150, 0.25);
width: calc(100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false)] * 31);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];
</code></pre></td></tr><tr><td>4</td><td>Apr</td><td>April</td><td><pre class="language-css"><code class="lang-css">box-shadow: 0 -0.4rem 0 rgba(150,150,255,0.25), 0 0.25rem 0 rgba(150,150,255,0.25);
background-color: rgba(150,150,255,0.25);
width: calc(100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false)] * 30);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];
</code></pre></td></tr><tr><td>5</td><td>May</td><td>May</td><td><pre class="language-css"><code class="lang-css">box-shadow: 0 -0.4rem 0 rgba(150,255,150,0.25), 0 0.25rem 0 rgba(150,255,150,0.25);
background-color: rgba(150, 255, 150, 0.25);
width: calc(100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false)] * 31);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];
</code></pre></td></tr><tr><td>6</td><td>Jun</td><td>June</td><td><pre class="language-css"><code class="lang-css">box-shadow: 0 -0.4rem 0 rgba(255, 150, 150, 0.25), 0 0.25rem 0 rgba(255, 150, 150, 0.25);
background-color: rgba(255, 150, 150, 0.25);
width: calc(100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false)] * 30);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];
</code></pre></td></tr><tr><td>7</td><td>Jul</td><td>July</td><td><pre class="language-css"><code class="lang-css">box-shadow: 0 -0.4rem 0 rgba(150,150,255,0.25), 0 0.25rem 0 rgba(150,150,255,0.25);
background-color: rgba(150,150,255,0.25);
width: calc(100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false)] * 31);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];
</code></pre></td></tr><tr><td>8</td><td>Aug</td><td>August</td><td><pre class="language-css"><code class="lang-css">box-shadow: 0 -0.4rem 0 rgba(150,255,150,0.25), 0 0.25rem 0 rgba(150,255,150,0.25);
background-color: rgba(150, 255, 150, 0.25);
width: calc(100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false)] * 31);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];
</code></pre></td></tr><tr><td>9</td><td>Sep</td><td>September</td><td><pre class="language-css"><code class="lang-css">box-shadow: 0 -0.4rem 0 rgba(255, 150, 150, 0.25), 0 0.25rem 0 rgba(255, 150, 150, 0.25);
background-color: rgba(255, 150, 150, 0.25);
width: calc(100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false)] * 30);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];
</code></pre></td></tr><tr><td>10</td><td>Oct</td><td>October</td><td><pre class="language-css"><code class="lang-css">box-shadow: 0 -0.4rem 0 rgba(150,150,255,0.25), 0 0.25rem 0 rgba(150,150,255,0.25);
background-color: rgba(150,150,255,0.25);
width: calc(100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false)] * 31);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];
</code></pre></td></tr><tr><td>11</td><td>Nov</td><td>November</td><td><pre class="language-css"><code class="lang-css">box-shadow: 0 -0.4rem 0 rgba(150,255,150,0.25), 0 0.25rem 0 rgba(150,255,150,0.25);
background-color: rgba(150, 255, 150, 0.25);
width: calc(100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false)] * 30);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];
</code></pre></td></tr><tr><td>12</td><td>Dec</td><td>December</td><td><pre class="language-css"><code class="lang-css">box-shadow: 0 -0.4rem 0 rgba(255, 150, 150, 0.25), 0 0.25rem 0 rgba(255, 150, 150, 0.25);
background-color: rgba(255, 150, 150, 0.25);
width: calc(100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false)] * 31);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];
</code></pre></td></tr></tbody></table>

### &#x20;Row 3 (for Month date range)

* Add 31 [cells.](https://docs.flexikanban.ai/standard-kanban/tools/configuring-rows-cells-menus-and-buttons)
* Set  names from **1** to **31** to them
* Set these [CSS Styles](https://docs.flexikanban.ai/standard-kanban/tools/configuring-css-styles) to them:

<table><thead><tr><th width="82.66666666666666">#</th><th width="133">Cell Value</th><th>Cell CSS Styles</th></tr></thead><tbody><tr><td>1...28</td><td>From <strong>1</strong> to <strong>28</strong></td><td><pre class="language-css"><code class="lang-css">display: FORMULA[IF({$Variables.range} = 'month',block,none)];
text-align: center;
width: calc(100% / FORMULA[CASE(DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false),28,'28',29,'29',30,'30','31')]);
</code></pre></td></tr><tr><td>29</td><td><strong>29</strong></td><td><pre class="language-css"><code class="lang-css">width: calc(100% / FORMULA[CASE(DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false),28,'28',29,'29',30,'30','31')]);
text-align: center;
display: FORMULA[IF(AND({$Variables.range} = 'month',DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false) > 28),block,none)];
</code></pre></td></tr><tr><td>30</td><td><strong>30</strong></td><td><pre class="language-css"><code class="lang-css">width: calc(100% / FORMULA[CASE(DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false),28,'28',29,'29',30,'30','31')]);
text-align: center;
display: FORMULA[IF(AND({$Variables.range} = 'month',DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false) > 29),block,none)];
</code></pre></td></tr><tr><td>31</td><td><strong>31</strong></td><td><pre class="language-css"><code class="lang-css">width: calc(100% / FORMULA[CASE(DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false),28,'28',29,'29',30,'30','31')]);
text-align: center;
display: FORMULA[IF(AND({$Variables.range} = 'month',DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false) > 30),block,none)];
</code></pre></td></tr></tbody></table>

{% hint style="info" %}
Days  from 1 to 28 are shown for each month. Days from 29 to 31 are shown depending on specific month length.
{% endhint %}

### &#x20;Row 4 (for Week date range)

* Add 7 cells
* Set CSS Styles to all of them to the following:

```css
text-align: center;
width: calc(100% / 7);
display: FORMULA[IF({$Variables.range} = 'week',block,none)];
```

* Set their Values to these:

<table><thead><tr><th width="64.5">#</th><th>Cell Value</th></tr></thead><tbody><tr><td>1</td><td><pre><code>Sun, FORMULA[FORMAT({$Variables.from}, 'dd MMM yyyy')]
</code></pre></td></tr><tr><td>2</td><td><pre><code>Mon, FORMULA[FORMAT(ADDDAYS({$Variables.from}, 1, false), 'dd MMM yyyy')]
</code></pre></td></tr><tr><td>3</td><td><pre><code>Tue, FORMULA[FORMAT(ADDDAYS({$Variables.from}, 2, false), 'dd MMM yyyy')]
</code></pre></td></tr><tr><td>4</td><td><pre><code>Wed, FORMULA[FORMAT(ADDDAYS({$Variables.from}, 3, false), 'dd MMM yyyy')]
</code></pre></td></tr><tr><td>5</td><td><pre><code>Thu, FORMULA[FORMAT(ADDDAYS({$Variables.from}, 4, false), 'dd MMM yyyy')]
</code></pre></td></tr><tr><td>6</td><td><pre><code>Fri, FORMULA[FORMAT(ADDDAYS({$Variables.from}, 5, false), 'dd MMM yyyy')]
</code></pre></td></tr><tr><td>7</td><td><pre><code>Sat, FORMULA[FORMAT({$Variables.to}, 'dd MMM yyyy')]
</code></pre></td></tr></tbody></table>

### &#x20;Configure card

{% hint style="success" %}
This card does not require configuring [Junction Settings](https://docs.flexikanban.ai/standard-kanban/configure-card/configuring-card-movement-and-column-junctions) in the one existing column.  Just leave "Visible in this column" checkbox checked.
{% endhint %}

* [Add one card](https://docs.flexikanban.ai/standard-kanban/configure-kanban/working-with-kanban-layout) to dashboard.
* Set Data Source Type to "**Event**".

### &#x20;Configure Card Layout

* [Set Card Layout](https://docs.flexikanban.ai/standard-kanban/configure-card/how-to-configure-card-layout) to "Form".
* Click "+" button to add new Form. Create [new form](https://docs.flexikanban.ai/components/forms/basics/form-building-overview) 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:

1. Type = `Section`\
   Name = `section`\
   Title = `''` (leave empty)\
   \&#xNAN;*Properties:*\
   Columns = `2`\
   Show on Edit page = `true`\
   Show on View page = `true`\
   Scrollable = `false`
2. Type = `Button`\
   Name = `button`\
   Title = `Close`\
   \&#xNAN;*Properties:*\
   Show on Edit page = `true`\
   Show on View page = `true`

**The following elements all should be added into section configured above.** \
**All these elements should be Data Source Fields:**

1. Data Source Field = `Subject`\
   Name = `Subject`\
   Title = `Subject`
2. Data Source Field = `Type`\
   Name = `Type`\
   Title = `Type`
3. Data Source Field = `EventSubtype`\
   Name = `EventSubtype`\
   Title = `Subtype`
4. Data Source Field = `StartDateTime`\
   Name = `StartDateTime`\
   Title = `Start Date Time`
5. Data Source Field = `EndDateTime`\
   Name = `EndDateTime`\
   Title = `End Date Time`
6. Data Source Field = `Description`\
   Name = `Description`\
   Title = `Description`

Set properties of all Data Source Fields above to:

* Required = `false`

* Read Only = `false`

* Show on Edit page = `true`

* Show on View page = `true`

* Instructions = (not set)

* Conditional Styles = (not set)

* Events = (not set)

* View Type (for picklists) = `Single list`

* Hide 'None' (for picklists) = `false`

* Option groups (for picklists) = (not set)

* Add these [Form Actions](https://docs.flexikanban.ai/components/forms/tools/form-action):

1. Action name and Title = `Close Panel`\
   Type = `Form API`\
   Form Action Type = `Fire Event`\
   Name = `e.c.:ApplicationEvent`\
   Parameters = Name: `data`; Value Type: `Object`; Value: `{"componentType":"c:KanBanPanelComponent","method":"hideCard"}`\
   Has Conditions = `false`
2. Action name and Title = `Refresh Column`\
   Type = `Form API`\
   Form Action Type = `Fire Event`\
   Name = `e.c.:ApplicationEvent`\
   Parameters = **Name**: `data`; **Value Type**: `Object`; **Value**: `{"componentType":"c:KanBanColumnComponent","method":"refresh","params":{"kanbans":"{$FormParameters.kanban}"}}`\
   Has Conditions = `true`\
   Conditions = **1**: `Form.StartDateTime not equal to {$Event.StartDateTime}`; **2**: `Form.EndDateTime not equal to {$Event.EndDateTime}`\
   Conditions logic = `{1} OR {2}`

* Add the following events to the form:

<table data-full-width="false"><thead><tr><th width="65">#</th><th width="275">Element what event is added to</th><th>Event properties</th><th>Event Handler</th></tr></thead><tbody><tr><td>1</td><td>Form</td><td>Type: <strong>onAfterSave</strong><br>Enabled: true</td><td>"<strong>Refresh Column</strong>" action without parameters</td></tr><tr><td>2</td><td>"Close" button</td><td>Type: <strong>onClick</strong><br>Enabled: true</td><td>"<strong>Close Panel</strong>" action without parameters<br></td></tr></tbody></table>

* Set these parameters for the Card Layout body:
  * id = **{Event.Id}**
  * mode = **edit**
* Set other Card Layout properties:
  * Position = **Modal**
  * Hide Header = **false**
  * Hide Footer = **true**
* Go to "Header Configuration" tab and set Text in Title Settings to "**{event.Subject}**".

{% hint style="info" %}
The Layout described above will show the form with basic Event properties that can be edited.
{% endhint %}

### &#x20;Configure Card Compact Layout

* Set the following CSS Styles to the whole Card:

```css
color: #ffffff;
border: 0px none;
padding: 0;
box-shadow: 1px 1px 4px rgba(0,0,0,0.3) inset;
```

* Add a **background-color** property to Card CSS Styles and set its value to the following formula:

```css
FORMULA[
  IF(
    CONTAINS(LOWER({Event.Subject}), 'meeting'),
    #75c769,
    IF(
      OR(
        CONTAINS(LOWER({Event.Subject}), 'send'),
        CONTAINS(LOWER({Event.Subject}), 'letter'),
        CONTAINS(LOWER({Event.Subject}), 'email')
      ),
      #DE5449,
      IF(
        CONTAINS(LOWER({Event.Subject}), 'call'),
        #71afd0,
        #d6b37a
      )
    )
  )
]
```

{% hint style="info" %}
This formula sets the Card background color depending on keywords the subject of Event can contain:

* Event with "meeting" word in subject is light green

* Event with "send", "letter" or "email" word is red

* Event with "call" word is blue

* Other events are yellow brown
  {% endhint %}

* Add a **border-radius** CSS property and set its value to the following formula:

```css
FORMULA[
    IF(
        {Event.StartDateTime} &lt; DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),
        '0 ',
        '5px '
    ) + 
    IF(
        {Event.EndDateTime} &gt; DATETIMEVALUE(FORMAT({$Variables.to}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),
        '0 0 ',
        '5px 5px '
    ) + 
    IF(
        {Event.StartDateTime} &lt; DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),
        '0',
        '5px'
    )
]
```

{% hint style="info" %}
This formula sets the border radius of Cards (that are Gantt Chart Lines) corners to represent if the current Gantt line is started or ended in the shown date range or not. If the start (or end) date is out of range, both left (or right) corners will not be rounded, otherwise they will be rounded.
{% endhint %}

* Add a **left** CSS property and set its value to the following formula:

```css
FORMULA[
    SCALE(
        IF(
            {Event.StartDateTime} &lt; DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),
            0,
            ({Event.StartDateTime} - DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}'))) * 100 / (
              DAYSBETWEEN(
                  DATETIMEVALUE(FORMAT({$Variables.to}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),
                  DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),
                  false
              )
            )
        ),
        8
    )
]%
```

{% hint style="info" %}
This formula calculates position of the Card left side that should represent the Start Date of Event. The SCALE(\*\*\*,8) function truncates the result to 8 digits in order to avoid long decimal fractions.
{% endhint %}

* Add a **width** CSS property and set its value to the following formula:

```css
FORMULA[
  SCALE(
    (
      (
        IF(
          {Event.EndDateTime} &gt; DATETIMEVALUE(FORMAT({$Variables.to}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}'))
          ,
          100
          ,
          (
            ({Event.EndDateTime} - DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}'))) * 100 / (
              DAYSBETWEEN(
                DATETIMEVALUE(FORMAT({$Variables.to}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),
                DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),
                false
              )
            )
          )
        )
      )
      -
      (
        IF(
          {Event.StartDateTime} &lt; DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}'))
          ,
          0
          ,
          (
            ({Event.StartDateTime} - DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}'))) * 100 / (
              DAYSBETWEEN(
                DATETIMEVALUE(FORMAT({$Variables.to}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),
                DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),
                false
              )
            )
          )
        )
      )
    ),
    8
  )
]%
```

{% hint style="info" %}
This formula calculates the width of the Card. Position of Card right side after applying **left** and **width** CSS properties will represent the End Date of Event. Width of the card, thus, represents its duration.
{% endhint %}

* Change the Value of default existing Card Component to **{Event.Subject}**.
* Set its Title to the same value.
* Set its CSS Styles to these:

```css
width: calc(100% - 24px);
padding: 0.25rem 0.5rem 0 0.5rem;
font-size: 1.1em;
```

* Add [one more Card Component](https://docs.flexikanban.ai/configure-card/how-to-configure-card-compact-layout#adding-components) of "Icon" type to the left of the previous.
* Set its Value to the following formula:

```css
utility:FORMULA[
  IF(
    CONTAINS(LOWER({Event.Subject}), 'meeting'),
    'groups',
    IF(
      OR(
        CONTAINS(LOWER({Event.Subject}), 'send'),
        CONTAINS(LOWER({Event.Subject}), 'letter'),
        CONTAINS(LOWER({Event.Subject}), 'email')
      ),
      'email',
      IF(
        CONTAINS(LOWER({Event.Subject}), 'call'),
        'call',
        'note'
      )
    )
  )
]
```

{% hint style="info" %}
This formula sets the icon depending on keywords the subject of Event can contain:

* Event with "meeting" word in subject has **utility:groups** icon

* Event with "send", "letter" or "email" word has **utility:email** icon

* Event with "call" word has **utility:call** icon

* Other events have **utility:note** icon
  {% endhint %}

* Set its Title to **{Event.Subject}**

* Set its CSS Styles to these:

```css
width: 16px;
padding: 0.25rem 0 0 0.5rem;
box-sizing: content-box;
```

* Add [one more Card Component](https://docs.flexikanban.ai/configure-card/how-to-configure-card-compact-layout#adding-components) of "Text" type below the two previous.
* Set its Value to this formula:

```
◄ FORMULA[FORMAT({Event.StartDateTime},'dd MMM yyyy, HH:mm')] ─  FORMULA[FORMAT({Event.EndDateTime},'dd MMM yyyy, HH:mm')] ►
```

* Set its Title to this formula:

```css
Start date: FORMULA[FORMAT({Event.StartDateTime},'dd MMM yyyy, HH:mm')]; end date: FORMULA[FORMAT({Event.EndDateTime},'dd MMM yyyy, HH:mm')]
```

* Set its Handler to this one:
  * Type = **SObject**
  * Value = **{$Object.Id}**
  * Parameters: **id** = **{Event.Id}**
* Set its CSS Styles to these:

```css
font-size: 0.9em;
padding: 0 0.5rem 0.25rem 0.5rem;
```

### &#x20;Configure dashboard actions and action groups

There are several action groups needed to be created. These groups are listed below with actions they contain. Order of actions in groups is determined by actions indexes: the action with lowest index will be executed first. Refer to proper articles to know how to work with [actions](https://docs.flexikanban.ai/components/actions-action-groups/basics/working-with-actions) and [action groups](https://docs.flexikanban.ai/components/actions-action-groups/basics/working-with-action-groups).

#### &#x20;"Get Previous Dates" action group

* Create Action Group named "Get Previous Dates" and add following actions to it:

<table><thead><tr><th width="99.66666666666666">Index</th><th width="210">Name</th><th>Properties</th></tr></thead><tbody><tr><td>1</td><td>Get Prev Quarter Dates</td><td><p>Type = <strong>Define Variable</strong><br>Execute = <strong>With Conditions</strong><br>Conditions type = <strong>Formula</strong><br>Formula Expression =</p><pre><code>AND({$Variables.button} = 'prev', {$Variables.range} = 'quarter')
</code></pre><p>Variable Type = <strong>JSON</strong><br>Variables JSON =</p><pre><code>{
  "from":"FORMULA[ADDMONTHS({$Variables.from}, -3)]",
  "to":"FORMULA[ADDMONTHS({$Variables.to}, -3)]"
}
</code></pre></td></tr><tr><td>2</td><td>Get Prev Year Dates</td><td><p>Type = <strong>Define Variable</strong><br>Execute = <strong>With Conditions</strong><br>Conditions type = <strong>Formula</strong><br>Formula Expression =</p><pre><code>AND({$Variables.button} = 'prev', {$Variables.range} = 'year')
</code></pre><p>Variable Type = <strong>JSON</strong><br>Variables JSON =</p><pre><code>{
  "from":"FORMULA[ADDYEARS({$Variables.from}, -1)]",
  "to":"FORMULA[ADDYEARS({$Variables.to}, -1)]"
}
</code></pre></td></tr><tr><td>3</td><td>Get Prev Month Dates</td><td><p>Type = <strong>Define Variable</strong><br>Execute = <strong>With Conditions</strong><br>Conditions type = <strong>Formula</strong><br>Formula Expression =</p><pre><code>AND({$Variables.range} = 'month', {$Variables.button} = 'prev')
</code></pre><p>Variable Type = <strong>JSON</strong><br>Variables JSON =</p><pre><code>{
  "from":"FORMULA[ADDMONTHS({$Variables.from}, -1)]",
  "to":"FORMULA[ADDMONTHS({$Variables.to}, -1)]"
}
</code></pre></td></tr><tr><td>4</td><td>Get Prev Week Dates</td><td><p>Type = <strong>Define Variable</strong><br>Execute = <strong>With Conditions</strong><br>Conditions type = <strong>Formula</strong><br>Formula Expression =</p><pre><code>AND({$Variables.range} = 'week', {$Variables.button} = 'prev')
</code></pre><p>Variable Type = <strong>JSON</strong><br>Variables JSON =</p><pre><code>{
  "from":"FORMULA[ADDDAYS({$Variables.from}, -7, false)]",
  "to":"FORMULA[ADDDAYS({$Variables.to}, -7, false)]"
}
</code></pre></td></tr><tr><td>5</td><td>Define Column Name</td><td><p>Type = <strong>Define Variable</strong><br>Execute = <strong>Always</strong><br>Variable Type = <strong>Text</strong><br>Variable Name = <strong>columnName</strong><br>Variable Value =</p><pre><code>FORMULA[FORMAT({$Variables.from}, 'd MMM yyyy') + ' - ' + FORMATGMT({$Variables.to}-1, 'd MMM yyyy')]
</code></pre></td></tr><tr><td>6</td><td><p></p><p>Define Day of Week<br></p></td><td><p>Type = <strong>Define Variable</strong><br>Execute = <strong>Always</strong><br>Variable Type = <strong>Text</strong><br>Variable Name = <strong>dayOfWeek</strong><br>Variable Value =</p><pre><code>FORMULA[INTNUMBER({$Variables.from} - STARTOFWEEK({$Variables.from}))]
</code></pre></td></tr></tbody></table>

#### &#x20;"Get Next Dates" action group

* Create Action Group named "Get Next Dates" and add following actions to it:

<table><thead><tr><th width="89.66666666666666">Index</th><th width="201">Name</th><th>Properties</th></tr></thead><tbody><tr><td>1</td><td><p></p><p>Get Next Week Dates<br></p></td><td><p>Type = <strong>Define Variable</strong><br>Execute = <strong>With Conditions</strong><br>Conditions type = <strong>Formula</strong><br>Formula Expression =</p><pre><code>AND({$Variables.range} = 'week', {$Variables.button} = 'next')
</code></pre><p>Variable Type = <strong>JSON</strong><br>Variables JSON =</p><pre><code>{
  "from":"FORMULA[ADDDAYS({$Variables.from}, 7, false)]",
  "to":"FORMULA[ADDDAYS({$Variables.to}, 7, false)]"
}
</code></pre></td></tr><tr><td>2</td><td><p></p><p></p><p>Get Next Quarter Dates<br></p></td><td><p>Type = <strong>Define Variable</strong><br>Execute = <strong>With Conditions</strong><br>Conditions type = <strong>Formula</strong><br>Formula Expression =</p><pre><code>AND({$Variables.range} = 'quarter', {$Variables.button} = 'next')
</code></pre><p>Variable Type = <strong>JSON</strong><br>Variables JSON =</p><pre><code>{
  "from":"FORMULA[ADDMONTHS({$Variables.from}, 3)]",
  "to":"FORMULA[ADDMONTHS({$Variables.to}, 3)]"
}
</code></pre></td></tr><tr><td>3</td><td><p></p><p>Get Next Year Dates<br></p></td><td><p>Type = <strong>Define Variable</strong><br>Execute = <strong>With Conditions</strong><br>Conditions type = <strong>Formula</strong><br>Formula Expression =</p><pre><code>AND({$Variables.range} = 'year', {$Variables.button} = 'next')
</code></pre><p>Variable Type = <strong>JSON</strong><br>Variables JSON =</p><pre><code>{
  "from":"FORMULA[ADDYEARS({$Variables.from},1)]",
  "to":"FORMULA[ADDYEARS({$Variables.to},1)]"
}
</code></pre></td></tr><tr><td>4</td><td><p></p><p>Get Next Month Dates<br></p></td><td><p>Type = <strong>Define Variable</strong><br>Execute = <strong>With Conditions</strong><br>Conditions type = <strong>Formula</strong><br>Formula Expression =</p><pre><code>AND({$Variables.range} = 'month', {$Variables.button} = 'next')
</code></pre><p>Variable Type = <strong>JSON</strong><br>Variables JSON =</p><pre><code>{
  "from":"FORMULA[ADDMONTHS({$Variables.from}, 1)]",
  "to":"FORMULA[ADDMONTHS({$Variables.to}, 1)]"
}
</code></pre></td></tr><tr><td>5</td><td>Define Column Name<br></td><td><em>(this is the same action that was already created for the "Get Previous Dates" action group)</em></td></tr><tr><td>6</td><td>Define Day of Week<br></td><td><em>(this is the same action that was already created for the "Get Previous Dates" action group)</em><br></td></tr></tbody></table>

#### &#x20;"Get Date Ranges" action group

* Create Action Group named "Get Date Ranges" and add following actions to it:

<table><thead><tr><th width="91.66666666666666">Index</th><th width="182">Name</th><th>Properties</th></tr></thead><tbody><tr><td>1</td><td><p></p><p>Get Week Dates<br></p></td><td><p>Type = <strong>Define Variable</strong><br>Execute = <strong>With Conditions</strong><br>Conditions type = <strong>Formula</strong><br>Formula Expression =</p><pre><code>{$Variables.range} = 'week'
</code></pre><p>Variable Type = <strong>JSON</strong><br>Variables JSON =</p><pre><code>{
  "from":"FORMULA[STARTOFWEEK({$System.Date})]",
  "to":"FORMULA[ADDDAYS(STARTOFWEEK({$System.Date}), 7, false)]"
}
</code></pre></td></tr><tr><td>2</td><td><p></p><p>Get Year Dates<br></p></td><td><p>Type = <strong>Define Variable</strong><br>Execute = <strong>With Conditions</strong><br>Conditions type = <strong>Formula</strong><br>Formula Expression =</p><pre><code>{$Variables.range} = 'year'
</code></pre><p>Variable Type = <strong>JSON</strong><br>Variables JSON =</p><pre><code>{
  "from":"FORMULA[DATE(YEAR({$System.Date}), 1, 1)]",
  "to":"FORMULA[ADDYEARS(DATE(YEAR({$System.Date}), 1, 1), 1)]"
}
</code></pre></td></tr><tr><td>3</td><td><p></p><p>Get Month Dates<br></p></td><td><p>Type = <strong>Define Variable</strong><br>Execute = <strong>With Conditions</strong><br>Conditions type = <strong>Formula</strong><br>Formula Expression =</p><pre><code>{$Variables.range} = 'month'
</code></pre><p>Variable Type = <strong>JSON</strong><br>Variables JSON =</p><pre><code>{
  "from":"FORMULA[DATE(YEAR({$System.Date}), MONTH({$System.Date}), 1)]",
  "to":"FORMULA[ADDMONTHS(DATE(YEAR({$System.Date}), MONTH({$System.Date}), 1), 1)]"
}
</code></pre></td></tr><tr><td>4</td><td>Get Quarter Dates</td><td><p>Type = <strong>Define Variable</strong><br>Execute = <strong>With Conditions</strong><br>Conditions type = <strong>Formula</strong><br>Formula Expression =</p><pre><code>{$Variables.range} = 'quarter'
</code></pre><p>Variable Type = <strong>JSON</strong><br>Variables JSON =</p><pre><code>{
  "from":"FORMULA[DATE(YEAR({$System.Date}), IF(MONTH({$System.Date}) >=10, 10, IF(MONTH({$System.Date}) &#x3C;=3, 1, IF(MONTH({$System.Date}) &#x3C;=6, 4, 7))), 1)]",
  "to":"FORMULA[ADDMONTHS(DATE(YEAR({$System.Date}), IF(MONTH({$System.Date}) >=10, 10, IF(MONTH({$System.Date}) &#x3C;=3, 1, IF(MONTH({$System.Date}) &#x3C;=6, 4, 7))), 1), 3)]"
}
</code></pre></td></tr><tr><td>5</td><td><p></p><p>Define Column Name</p></td><td><em>(this is the same action that was already created for the "Get Previous Dates" action group)</em></td></tr><tr><td>6</td><td><p></p><p>Define Day of Week<br></p></td><td><em>(this is the same action that was already created for the "Get Previous Dates" action group)</em></td></tr></tbody></table>

#### &#x20;Configure dashboard buttons and menus

* [Add buttons and menu](https://docs.flexikanban.ai/standard-kanban/configure-kanban/how-to-add-kanban-buttons-and-menus) to the dashboard:

1. Button\
   **Basic configuration:**\
   Type = `Icon`\
   Title = `Previous {$Variables.range}`\
   Icon = `utility:left`\
   **Handler configuration:**\
   Type = `Action Group`\
   Value = `Get Previous Dates`\
   Parameters = `variables = {"button":"prev"}`\
   Success Handler = `Kanban API -> Refresh Kanbans`
2. Menu\
   **Basic configuration:**\
   Type = `Button`\
   Label = `FORMULA[REPLACE({$Variables.range},SUBSTR(,0,1),UPPER(SUBSTR({$Variables.range},0,1)))]`\
   Title = `{$Variables.range}`\
   Position = `Right and Top`
3. Button\
   **Basic configuration:**\
   Type = `Icon`\
   Title = `Next {$Variables.range}`\
   Icon = `utility:right`\
   **Handler configuration:**\
   Type = `Action Group`\
   Value = `Get Next Dates`\
   Parameters = `variables = {"button":"next"}`\
   Success Handler = `Kanban API -> Refresh Kanbans`

* Add Menu Buttons to the Menu created above and set these properties for them:

1. **Basic Configuration:**\
   Type = `Standard`\
   Label = `Quarter`\
   Title = `Quarter`\
   Conditions = `FORMULA[{$Variables.range != 'quarter']`\
   **Handler configuration:**\
   Type = `Action Group`\
   Value = `Get Date Ranges`\
   Parameters = `variables = {"range":"quarter"}`\
   Success Handler = `Kanban API -> Refresh Kanbans`
2. **Basic Configuration:**\
   Type = `Standard`\
   Label = `Month`\
   Title = `Month`\
   Conditions = `FORMULA[{$Variables.range != 'month']`\
   **Handler configuration:**\
   Type = `Action Group`\
   Value = `Get Date Ranges`\
   Parameters = `variables = {"range":"month"}`\
   Success Handler = `Kanban API -> Refresh Kanbans`
3. **Basic Configuration:**\
   Type = `Standard`\
   Label = `Year`\
   Title = `Year`\
   Conditions = `FORMULA[{$Variables.range != 'year']`\
   **Handler configuration:**\
   Type = `Action Group`\
   Value = `Get Date Ranges`\
   Parameters = `variables = {"range":"year"}`\
   Success Handler = `Kanban API -> Refresh Kanbans`
4. **Basic Configuration:**\
   Type = `Standard`\
   Label = `Week`\
   Title = `Week`\
   Conditions = `FORMULA[{$Variables.range != 'week']`\
   **Handler configuration:**\
   Type = `Action Group`\
   Value = `Get Date Ranges`\
   Parameters = `variables = {"range":"week"}`\
   Success Handler = `Kanban API -> Refresh Kanbans`

####


---

# 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/standard-kanban/getting-started/demo-example-gantt-kanban.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.