如何在 javascript 中调用 select function 时正确显示表单模式？

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>