How to show bootstrap-5 modals position dynamically on its trigger, for each trigger

How to show bootstrap-5 modals position dynamically? I am trying to create a Google calendar clone, suppose.. when we have more events on 28th and if we click on 4 more as shown in the below image then that modal should be open on the Wed 28th to its dedicated box, not in the center or any other place. DEMO

Answer

Modals are not positioned relative to the trigger element, but Popovers (and Tooltips) are. Here’s an example using Popovers…

Add the Popover in the markup for cells with events…

   <tr>
           <td>24</td>
           <td><div class="badge bg-info" 
                    data-bs-toggle="popover" 
                    data-bs-placement="bottom" 
                    data-bs-html="true"
                    >25</div>
           </td>
           <td>26</td>
           <td>27</td>
           <td>28</td>
           <td>29</td>
           <td>30</td>
   </tr>

Include the details in a hidden DOM element, or create the element dynamically in JS…

   <div class="d-none">
        <div id="dailyEventsContent">
            <div class="rounded p-1 my-1 bg-info small text-white">8:00 event 1</div>
            <div class="rounded p-1 my-1 bg-info small text-white">8:40 event 2</div>
            <div class="rounded p-1 my-1 bg-info small text-white">9:30 event 3</div>
            <div class="rounded p-1 my-1 bg-info small text-white">10:00 event 4</div>
            <div class="rounded p-1 my-1 bg-info small text-white">3:00 event 5</div>
        </div>
   </div>

Enable Popovers and set the content option

var popoverContent = document.getElementById('dailyEventsContent')
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl, {
      content: popoverContent
  })
})

https://codeply.com/p/AKvIsoHJOl