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

Question

我有一个 div（模态）来显示 select 函数何时在 JavaScript 中被调用。我尝试了很多方法，但无法让它发挥作用。我正在粘贴我的 JavaScript 的片段（下面的 select 函数帮助我调用我的 div （表单）。现在，我只是提示用户输入 JavaScript。谁能帮我解决这个问题。谢谢你的帮助。

这是我的代码：

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

我认为您在选择日历上的日期时试图打开 Bootstrap 模式。您几乎就在那里 - 您唯一需要做的就是使用 Javascript 以编程方式打开您的模态。 Bootstrap 文档 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();

所以您只需要在 select 函数中执行此操作。我在下面添加了一个工作片段来演示这一点。

一些注意事项：

当然，问题的下一部分是如何利用您在模态中添加的任何数据。这确实是一个单独的问题，但为了让您走上正确的轨道：
- Add a button to your modal，提交输入的数据；
- Add an event handler 处理对该按钮的点击；
- 在事件处理程序中，take the inputted values，并将它们用于 calendar.addEvent()（根据您现有的代码，我假设这就是您想要做的）；
Boostrap 的 CSS 似乎与 Fullcalendar 的冲突，因此 <a> 链接样式为蓝色并带有下划线，而它们不应该出现在 Fullcalendar 上。我添加了一些 hacky CSS 来解决这个问题；
您的 HTML 中有一些拼写错误，time 和 timeSpent 输入中的占位符文本的右括号 ) 位于引用 "，我已经在下面修复了这些；
我确定这只是 copy-paste 问题，但是你的模态 HTML 缺少一些关闭的 </div>s，我已经添加了它们这里；

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>

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

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

html

javascript

fullcalendar

fullcalendar-5