Adding Lookup Windows to Bootstrap Calendars

A couple of customers have expressed interest in adding a lookup window to their bootstrap calendar. Imagine a scenario where you have a hotline ticketing system. A user adds a record to the calendar and enters their notes. They also need to utilize a Lookup window to return several pieces of data at once (think customer number, name, etc…). This blog post explains just how to do this.

1. Create Lookup retrieval. Be sure to add a “Return Data” link to an element on the row.
2. Create calendar maintainer. Add standard “Lookup” feature to maintainer page, as usual. (More information on how do this can be found here.)
3. Add the following code to the main calendar page to the end of the page, directly before the end body tag at the bottom of the document.

<div class="modal lookupModal" role="dialog" tabindex="-1">
  <div class="modal-dialog" role="document">
  <div class="modal-content">
  <div class="modal-header">
  <h5 class="modal-title">Modal title</h5>
  <button aria-label="Close" class="close modal-close" type="button">
  <span aria-hidden="true">&times;</span>
  </button>
  </div>
  <div class="modal-body">
  <p class="loading"><i class="fa fa-spinner fa-pulse"></i> Loading...</p>
  <div class="app-content hidden">ERROR</div>
  </div>
  <div class="modal-footer"><button class="btn btn-secondary modal-close" type="button">Close</button></div>
  </div>
  </div>
</div>

4. Edit the Calendar maintainer. Find the “Lookup” link that was created in Step 2. Edit the anchor tag to add the following property:

modal="lookupModal"

5. Edit the Lookup retrieval from Step 1. Add the following attribute to the “Return Data” link

modal="lookupModal"

These additional steps are required specifically for Bootstrap Calendar because the Lookup window (a modal window) is being invoked from another modal window itself. This additional “modal in a modal” approach requires the code above to handle accordingly.