how to properly show a form modal when select function is called in javascript?

Question

I have a div (modal) to show when a select function is called in JavaScript. I tried many ways but cant get it to work. I am pasting a snippet of my JavaScript (the select function below to help me call my div (form). Right now, I am just prompting the user to enter in JavaScript. Can anyone help me solve this issue. thanks for the help.

here is my code:

select: function(info, start, end, jsEvent) {
  let title = prompt("Event Content:");
  if (title) {
    calendar.addEvent({
      title: title,
      start: info.startStr,
      end: info.endStr
    })
  }
  calendar.unselect();
},

<div class="modal fade" id="schedule-edit">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Add Task</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <!-- Modal body -->
      <div class="modal-body">
        <form id="event-form">
          <div class="form-group">
            <label>Title:</label>
            <input type="text" name="title" id="title" class="form-control">
          </div>
          <div class="form-group">
            <label>Project:</label>
            <input type="text" id="project" class="form-control">
          </div>
          <div class="form-group">
            <label>Est. Time (hours)</label>
            <input type="text" id="time" class="form-control" placeholder="(Examples: 3,12.5,5.75" )>
          </div>
          <div class="form-group">
            <label>Time Spent (hours)</label>
            <input type="text" id="timeSpent" class="form-control" placeholder="(Examples: 3,12.5,5.75" )>
          </div>
          <div class="form-group">
            <label>Description</label>
            <!--Add rich text editor here -->
            <div class="sample-toolbar" id="description">
              <a href="javascript:void(0)" onclick="format('bold')"><span class="fa fa-bold fa-fw"></span></a>
              <a href="javascript:void(0)" onclick="format('italic')"><span class="fa fa-italic fa-fw"></span></a>
              <a href="javascript:void(0)" onclick="format('insertunorderedlist')"><span class="fa fa-list fa-fw"></span></a>
              <a href="javascript:void(0)" onclick="setUrl()"><span class="fa fa-link fa-fw"></span></a>
            </div>
            <div class="editor" id="sampleeditor"></div>
            <div class="form-group">
              <label>Priority</label>
              <!--                                 onClick="getFoodItem()"-->
              <select class="form-control" id='firstList' name='firstList' onclick="getFoodItem()">
              </select>
            </div>
            <div class="form-group">
              <label>Start Date</label>
              <br>
              <input type="date" id="myDate" placeholder="yyyy-MM-dd" />
            </div>
            <div class="form-group">
              <label>Due Date</label>
              <br>
              <input type="date" id="myDue" placeholder="yyyy-MM-dd" />
            </div>
          </div>
        </form>
      </div>

Answer 1

I think you are trying to open a Bootstrap modal when a date on your calendar is selected. You were almost there - the only thing you need to do is programatically open your modal with Javascript. The Bootstrap docs describe how to do that:

// Set up your modal, here with an empty set of options {}
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {});

// Now open it
myModal.show();

So you just need to do that, inside your select function. I've added a working snippet demonstrating this below.

Some notes:

• Of course the next part of the problem is how to make use of whatever data you add in the modal. That's really a separate question, but to get you on the right track:

  • Add a button to your modal, to submit the entered data;
  • Add an event handler to handle clicks on that button;
  • In the event handler, take the inputted values, and use them to calendar.addEvent() (based on your existing code I'm assuming that's what you want to do);

• It seems that Boostrap's CSS clashes with Fullcalendar's, so <a> links are styled blue and underlined, whereas they should not be on a Fullcalendar. I added some hacky CSS to work around that;

• you have some typos in your HTML, the placeholder text in both time and timeSpent inputs has the closing bracket ) outside the quotes ", I've fixed these below;

• I'm sure it is just copy-paste issue here in SO but your modal HTML is missing some closing </div>s, I've added them here;

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var myModal = new bootstrap.Modal(document.getElementById('schedule-edit'), {});
    var calendar = new FullCalendar.Calendar(calendarEl, {
        selectable: true,
        initialView: 'dayGridMonth',
        select: function(info, start, end, jsEvent) {
            myModal.show();
            calendar.unselect();
        },
    });
    calendar.render();
});

/* Bootstrap sytling overrides FullCalendar and conflicts */
/* Manually work around that */
a {
  text-decoration: inherit !important;
  color: inherit !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.2/main.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.2/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<div id='calendar'></div>

<div class="modal fade" id="schedule-edit">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Add Task</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <form id="event-form">
                    <div class="form-group">
                        <label>Title:</label>
                        <input type="text" name="title" id="title" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>Project:</label>
                        <input type="text" id="project" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>Est. Time (hours)</label>
                        <input type="text" id="time" class="form-control" placeholder="(Examples: 3,12.5,5.75)">
                    </div>
                    <div class="form-group">
                        <label>Time Spent (hours)</label>
                        <input type="text" id="timeSpent" class="form-control" placeholder="(Examples: 3,12.5,5.75)">
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <!--Add rich text editor here -->
                        <div class="sample-toolbar" id="description">
                            <a href="javascript:void(0)" onclick="format('bold')"><span class="fa fa-bold fa-fw"></span></a>
                            <a href="javascript:void(0)" onclick="format('italic')"><span
                                    class="fa fa-italic fa-fw"></span></a>
                            <a href="javascript:void(0)" onclick="format('insertunorderedlist')"><span
                                    class="fa fa-list fa-fw"></span></a>
                            <a href="javascript:void(0)" onclick="setUrl()"><span class="fa fa-link fa-fw"></span></a>
                        </div>
                        <div class="editor" id="sampleeditor"></div>
                        <div class="form-group">
                            <label>Priority</label>
                            <!--                                 onClick="getFoodItem()"-->
                            <select class="form-control" id='firstList' name='firstList' onclick="getFoodItem()">
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Start Date</label>
                            <br>
                            <input type="date" id="myDate" placeholder="yyyy-MM-dd"/>
                        </div>
                        <div class="form-group">
                            <label>Due Date</label>
                            <br>
                            <input type="date" id="myDue" placeholder="yyyy-MM-dd"/>
                        </div>
                    </div>
                </form>
            </div>
          
        </div>
    </div>
</div>