Skip to main content
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 called availableDates
  • A list of available slots appears after selecting a date and duration. These available slots come from a smart collection called availableSlots
  • The user can book a specific slot using a smart action calledbook.

​
How it works

​
Smart view definition

Learn more about smart views.

File template.hbs This file contains the HTML and CSS needed to build the view. 
<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.