> ## Documentation Index
> Fetch the complete documentation index at: https://forest-docs-prd-616-workflow-webhook-trigger.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Create a dynamic calendar view for an event-booking use case

This example shows you how you can implement a calendar view with a custom workflow involving dynamic API calls.

In our example, we want to manage the bookings for a sports court where:

* We have a list of court opening dates. Each date can be subject to a price increase if the period is busy. These dates [come from a collection](https://docs.forestadmin.com/woodshop/how-tos/create-a-custom-view#available-dates-model) called `availableDates`
* A list of available slots appears after selecting a date and duration. These available slots [come from a smart collection](https://docs.forestadmin.com/woodshop/how-tos/create-a-custom-view#available-slots-smart-collection) called `availableSlots`
* The user can book a specific slot [using a smart action](https://docs.forestadmin.com/woodshop/how-tos/create-a-custom-view#book-smart-action) called`book`.

## How it works

### Smart view definition

Learn more about [smart views](https://docs.forestadmin.com/documentation/reference-guide/views/create-and-manage-smart-views#creating-a-smart-view).\
\
**File template.hbs**

This file contains the HTML and CSS needed to build the view.

```markup theme={null}
<style>
  .calendar {
    padding: 20px;
    background: white;
    height:100%;
    width: 50%;
    overflow: scroll;
    color: #415574;
  }
  .wrapper-view {
    display: flex;
    height:800px;
    width:100%;
    background-color: white;
  }
  .right-hand-wrapper {
    width: 40%;
    padding: 3px 30px;
    background-color: white;
    margin-left:30px;
    height: 80%;
    overflow: scroll;
  }
  :root {
    --fc-border-color:#e0e4e8;
    --fc-button-text-color: #415574;
    --fc-button-bg-color: #ffffff;
    --fc-button-border-color: #c8ced7;
    --fc-button-hover-bg-color: rgb(195, 195, 195);
    --fc-button-hover-border-color: #c8ced7;
    --fc-button-active-bg-color: #ffffff;
    --fc-button-active-border-color: #c8ced7;
  }
  .slot-container {
    display: flex;
    margin: 10px 0;
    vertical-align: center;
    padding: 2px 0;
  }
  .slot-value {
    margin: auto 0;
    margin-right: 30px;
    width: 40px;
  }
  .calendar .fc-toolbar.fc-header-toolbar .fc-left {
    font-size: 14px;
    font-weight: bold;
  }
  .calendar .fc-day-header {
    padding: 10px 0;
    background-color: #f7f7f7;
  }
  .calendar .fc-event {
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    color: #555;
    font-size: 14px;
    margin-top: 5px;
  }
  .calendar .fc-daygrid-event {
    background-color: #a2c1f5;
    color: white;
    font-size: 14px;
    border: none;
    padding: 6px;
  }
  .c-beta-radio-button-duration {
    display: flex;
    margin-top: 4px;
    flex-wrap: wrap;
    margin-bottom: -4px;
}
</style>

<div class="wrapper-view">
  <div id='\{\{calendarId\}\}' class="calendar"></div>
  <div class="right-hand-wrapper">
    <div class="c-beta-label c-beta-label--top ember-view l-dmb">
      <div class= "c-beta-label__label">Selected date</div>
      <div class = "c-row-value">
        \{\{#if this.selectedDate\}\}
          \{\{this.selectedDate\}\}
        \{\{else\}\}
          None
        \{\{/if\}\}
      </div>
    </div>

    <div class="c-beta-label c-beta-label--top ember-view l-dmb">
      <div class= "c-beta-label__label">Duration</div>
      <BetaRadioButton
        @class='c-beta-radio-button-duration'
        @namePath='label'
        @options=\{\{this.durations\}\}
        @value=\{\{this.selectedDuration\}\}
        @valuePath='value'
      />
    </div>

    \{\{#if this.availableSlots\}\}
      <div class="c-beta-label c-beta-label--top ember-view l-dmb">
        <div class= "c-beta-label__label">Available slots</div>
        \{\{#each this.availableSlots as |slot|\}\}
          <div class="slot-container">
            <div class="c-row-value slot-value">\{\{slot.forest-time\}\}</div>
            <div class="c-beta-button c-beta-button--primary" onclick=\{\{ action 'triggerSmartAction' this.availableSlotsCollection 'book' slot\}\}>book</div>
          </div>
        \{\{/each\}\}
      </div>
    \{\{else\}\}
      \{\{#if (not this.selectedDate)\}\}
        Please select a date to see slots available.
      \{\{else\}\}
        No slots available, please try another duration or another date.
      \{\{/if\}\}
    \{\{/if\}\}
  </div>
</div>

```

**File template.js**

This file contains all the logic needed to handle events and actions.

**File routes/available-slots.js**

This file includes the logic implemented to retrieve the available slots from an API call and return them serialized to the UI.

### Book smart action

To create the action to book a slot, two files need to be updated:

* the file `available-slots.js` inside the folder `forest` to declare the action
* the file `available-slots.js` inside the `routes` folder to implement the logic for the action

**File forest/available-slots.js**

This file includes the smart action definition. The action form is pre-filled with the start and end date. The last step is to select the user associated with this booking.

**File routes/available-slots.js**

This file includes the logic of the smart action. It basically creates a record from the `bookings` collection with the information passed on by the user input form.