0

dayClick 在单击某天时未显示模式弹出窗口,因此无法创建任务/约会,以下是我与 dayClick 相关的编码部分。以下是 dayClick 函数的模态弹出窗口的 HTML,显示了模态弹出窗口的 id,并且是 dayClick 函数中模态弹出窗口的正确 id。我已经包含了 jquery 和 bootstrap。

<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {

    plugins: [ 'interaction', 'dayGrid' ],
defaultDate: new Date(),
editable: true,
timezone: 'Europe/London',
eventLimit: true, // allow "more" link when too many events
displayEventTime: false,
locale: "en-gb",
firstDay: 1,

events: "fetch-tasks-appointments.php",

    dayClick: function(date, jsEvent, view) {
    $("#success-modal").modal("show");
    $('#title').text(date.format);            
    $("#startdate").val(date.format());
    $('#starttime').text(date.format);
    $("#enddate").val(date.format());
    $('#endtime').text(date.format);
    },

    });

    calendar.render();
    });
    </script>
  <div class="modal fade" id="success-modal" role="dialog">
 <div class="modal-dialog" role="document">
 <div class="modal-content">
 <div class="modal-header success-modal">
    <button type="button" class="close" data-dismiss="modal" aria- 
  label="Close">
  <span aria-hidden="true">&times;</span>
  </button>
    <h4 class="modal-title">Modal Header</h4>
 </div>
 <div class="modal-body">
<form action="tasks-appointments-calendar.php" method="post">
<div class="form-group">
  <label for="eventtitle">Event Title:</label>
  <input type="title" name="title" class="form-control" id="title">
  <input type="date" name="startdate" class="form-control" id="startdate">
  <input type="text" name="starttime" class="form-control" id="starttime">
  <input type="date" name="enddate" class="form-control" id="enddate">
  <input type="text" name="endtime" class="form-control" id="endtime">
</div>
<button type="submit" value="submit" name="submit" class="btn btn-success float-button-light">Save Task/Appointment</button>
</form>
</div>
</div>
</div>
</div>
4

0 回答 0