# Demo Example: Events Kanban This Events kanban board shows events on a schedule and lets users manage them. Here is how this kanban can look like: To build this kanban, an admin should do the steps below: ### Create Actions and Actions Group Create the following [Actions](https://docs.flexikanban.ai/components/actions-action-groups/basics/working-with-actions) of "Define Variable" type. Set Variable Type to Text in all actions: 1. Action name = `Get Previous Month`\ Variable name = `currentDate`\ Variable value = `FORMULA[FORMAT(ADDMONTHS(DATEVALUE({$Variables.currentDate}), -1), 'yyyy-MM-dd')]` 2. Action name = `Get Next Month`\ Variable name = `currentDate`\ Variable value = `FORMULA[FORMAT(ADDMONTHS(DATEVALUE({$Variables.currentDate}), 1), 'yyyy-MM-dd')]` 3. Action name = `Update Week 1 Start Variable`\ Variable name = `week1Start`\ Variable value = `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01')))]` 4. Action name = `Update Week 2 Start Variable`\ Variable name = `week2Start`\ Variable value = `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 7]` 5. Action name = `Update Week 3 Start Variable`\ Variable name = `week3Start`\ Variable value = `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 14]` 6. Action name = `Update Week 4 Start Variable`\ Variable name = `week4Start`\ Variable value = `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 21]` 7. Action name = `Update Week 1 Variable`\ Variable name = `week1`\ Variable value = `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')]` 8. Action name = `Update Week 2 Variable`\ Variable name = `week2`\ Variable value = `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')]` 9. Action name = `Update Week 3 Variable`\ Variable name = `week3`\ Variable value = `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')]` 10. Action name = `Update Week 4 Variable`\ Variable name = `week4`\ Variable value = `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')]` Create 2 [Action Groups](https://docs.flexikanban.ai/components/actions-action-groups/basics/working-with-action-groups#switch_to_actions_subtab) 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 1 Variable 7. Update Week 2 Variable 8. Update Week 3 Variable 9. Update Week 4 Variable 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 1 Variable 7. Update Week 2 Variable 8. Update Week 3 Variable 9. Update Week 4 Variable ### Create a new kanban * Go to the [Kanban creation wizard](https://docs.flexikanban.ai/standard-kanban/basics/how-to-create-a-standard-kanban) and create a new standard kanban. * Give it a name and description. * Select default "White" theme. * Save the kanban and go to Kanban builder. ### Configure the kanban Go to [Basic Configuration](https://docs.flexikanban.ai/standard-kanban/configure-kanban/how-to-configure-kanban-basic-properties) and set icon: Go to [Statistics Configuration](https://docs.flexikanban.ai/standard-kanban/configure-kanban/how-to-add-kanban-statistics). * Add the cell and set these properties to it: * Type = **Text** * Value = `FORMULA[FORMAT({$Variables.currentDate}, 'MMMM, yyyy')]` * Set CSS Styles to this cell: ```css font-size: 24px ``` Go to [Buttons Configuration](https://docs.flexikanban.ai/standard-kanban/configure-kanban/how-to-add-kanban-buttons-and-menus) and add 3 buttons: Button "**Previous Month**": Configure [handler](https://docs.flexikanban.ai/tools/configuring-handlers#old-view-configurator) of this button: * Type = **Action Group** * Value = **Get Previous Month Action Group** (that was created before) * Parameters = not set * Success handler: * Type = **KanBan API** * Value = **Refresh Kanbans** * Parameters = not set Button "**Next Month**": Configure handler of this button: * Type = **Action Group** * Value = **Get Next Month Action Group** (that was created before) * Parameters = not set * Success handler: * Type = **KanBan API** * Value = **Refresh Kanbans** * Parameters = not set Button "**New Event**": Configure handler of this button: * Type = **SObject** * Value = **Event** * Parameters = not set Go to [Variables Configuration](https://docs.flexikanban.ai/standard-kanban/configure-kanban/how-to-configure-variables) and add these variables: 1. currentDate = `{$System.Date}` 2. week1 = `FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))), 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 6, 'dd/MM/yyyy')]` 3. week1Start = `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01')))]` 4. week1End = `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 6]` 5. week2 = `FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 7, 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 13, 'dd/MM/yyyy')]` 6. week2Start = `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 7]` 7. week2End = `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 13]` 8. week3 = `FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 14, 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 20, 'dd/MM/yyyy')]` 9. week3Start = `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 14]` 10. week3End = `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 14]` 11. week4 = `FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 21, 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 27, 'dd/MM/yyyy')]` 12. week4Start = `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 21]` 13. week4End = `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 27]` ### Configure Columns * Add [4 columns](https://docs.flexikanban.ai/standard-kanban/configure-kanban/working-with-kanban-layout) to the kanban. * Name them (see table below) * Leave column width default ("auto") * Leave column "Is Active" checkbox default (checked) * Set these properties to [Data Source Configuration](https://docs.flexikanban.ai/configure-column/how-to-configure-column-data-source#sobject-data-source): * Data Source Type = **SObject** * Data Source = **Event** * Set the following **conditions** to the proper columns (select Type = "Formula" in all): 1. Column name = `{$Variables.week1}`\ Condition 1:\ Start Date Time > `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01')))]T00:00:00Z`\ Condition 2:\ Start Date Time < `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 7]T00:00:00Z` 2. Column name = `{$Variables.week2}`\ Condition 1:\ Start Date Time > `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 7]T00:00:00Z`\ Condition 2:\ Start Date Time < `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 14]T00:00:00Z` 3. Column name = `{$Variables.week3}`\ Condition 1:\ Start Date Time > `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 14]T00:00:00Z`\ Condition 2:\ Start Date Time < `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 21]T00:00:00Z` 4. Column name = `{$Variables.week4}`\ Condition 1:\ Start Date Time > `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 21]T00:00:00Z`\ Condition 2:\ Start Date Time < `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 28]T00:00:00Z` * Open [Body Configuration](https://docs.flexikanban.ai/standard-kanban/configure-column/how-to-configure-column-body) tab: * Select Cards in Row = **1** * Configure CSS Styles: {% code fullWidth="false" %} ```css background-color: FORMULA[IF(STARTOFWEEK({$Variables.week1start}) = STARTOFWEEK({$System.Date}), '#feffea', '#ffffff')] ``` {% endcode %} ### Configure Card * [Add 1 card](https://docs.flexikanban.ai/standard-kanban/configure-kanban/working-with-kanban-layout) to the kanban * Set Data Source Type to **"Event"** * Set [card layout](https://docs.flexikanban.ai/standard-kanban/configure-card/how-to-configure-card-layout): Basic configuration: * Layout body type = **Standard** * Position = **right** * All checkboxes = **false** Header configuration: * Title settings: * Text = **{Event.Subject}** Footer configuration: * Add button "**Open Event**": Configure handler of this button: * Type = **SObject** * Value = **{Event.Id}** * Parameters = not set Add tab to Tabs configuration: * Label = **Details** * Title = **Details** * Icon = **standard:lead\_list** * Layout = **Standard** with 5 rows:
#LabelValue
1TypeType
2Assigned ToAccount ID:Account Name
3Start Date TimeStart Date Time
4DurationDuration
5LocationLocation
Open [Card Compact Layout](https://docs.flexikanban.ai/standard-kanban/configure-card/how-to-configure-card-compact-layout) editor : * add CSS Styles to the card settings (1): ```css background-color: #ffffff border-left: 3px solid #15db00 ``` * Change the Value of default existing Card Component to **{Event.Subject}** (2). * Set its width to **100** (leave default) * Expend "Styles" section and set the following: ```css text-decoration: underline color: #006dcc display: contents flex: initial ``` * Add text component (3) below the previous * Set its Value and Title to **{Event.Who.Name}** * Leave its width default (**100**) * Add text component (4) below * Set its value to **FORMULA\[FORMAT({Event.StartDateTime})]** * Set its Title to **{Event.StartDateTime}** * Leave its width default (**100**)