{"id":10740,"date":"2021-01-13T09:53:57","date_gmt":"2021-01-13T15:53:57","guid":{"rendered":"http:\/\/www.mrc-productivity.com\/techblog\/?p=10740"},"modified":"2023-06-20T14:18:35","modified_gmt":"2023-06-20T20:18:35","slug":"adding-lookup-windows-to-bootstrap-calendars","status":"publish","type":"ht_kb","link":"https:\/\/www.mrc-productivity.com\/techblog\/?ht_kb=adding-lookup-windows-to-bootstrap-calendars","title":{"rendered":"Adding Lookup Windows to Bootstrap Calendars"},"content":{"rendered":"\n<p>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&#8230;). This blog post explains just how to do this.<\/p>\n\n\n\n<p>1. Create Lookup retrieval. Be sure to add a &#8220;Return Data&#8221; link to an element on the row.<br>2. Create calendar maintainer. Add standard &#8220;Lookup&#8221; feature to maintainer page, as usual. (More information on how do this can be found <a href=\"\/docs\/m-painter-app-prop\/create-lookup-window-in-m-painter\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>.)<br>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.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\r&lt;div class=\"modal lookupModal\" role=\"dialog\" tabindex=\"-1\">\r\n  &lt;div class=\"modal-dialog\" role=\"document\">\r\n  &lt;div class=\"modal-content\">\r\n  &lt;div class=\"modal-header\">\r\n  &lt;h5 class=\"modal-title\">Modal title&lt;\/h5>\r\n  &lt;button aria-label=\"Close\" class=\"close modal-close\" type=\"button\">\r\n  &lt;span aria-hidden=\"true\">&amp;times;&lt;\/span>\r\n  &lt;\/button>\r\n  &lt;\/div>\r\n  &lt;div class=\"modal-body\">\r\n  &lt;p class=\"loading\">&lt;i class=\"fa fa-spinner fa-pulse\">&lt;\/i> Loading...&lt;\/p>\r\n  &lt;div class=\"app-content hidden\">ERROR&lt;\/div>\r\n  &lt;\/div>\r\n  &lt;div class=\"modal-footer\">&lt;button class=\"btn btn-secondary modal-close\" type=\"button\">Close&lt;\/button>&lt;\/div>\r\n  &lt;\/div>\r\n  &lt;\/div>\r\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>4. Edit the Calendar maintainer. Find the &#8220;Lookup&#8221; link that was created in Step 2. Edit the anchor tag to add the following property:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>modal=\"lookupModal\"<\/code><\/pre>\n\n\n\n<p>5. Edit the Lookup retrieval from Step 1. Add the following attribute to the &#8220;Return Data&#8221; link<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>modal=\"lookupModal\"<\/code><\/pre>\n\n\n\n<p>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 &#8220;modal in a modal&#8221; approach requires the code above to handle accordingly.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"open","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[154],"ht-kb-tag":[],"class_list":["post-10740","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-bootstrap"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/10740","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10740"}],"version-history":[{"count":8,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/10740\/revisions"}],"predecessor-version":[{"id":11896,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/10740\/revisions\/11896"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10740"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-category&post=10740"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-tag&post=10740"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}