bootstrap 模态在 fullCalendar 插件中不工作

Question

我正在尝试创建活动日历。我必须创建用于将事件添加到日历中的模式未显示 bootstrap modal.but 当我使用 js 提示框时我可以添加 event.but 我需要使用 [= 添加更多信息21=]模态。

<?php
    //index.php
    include('header.php');
?>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"> </script>

<div class="container" style="margin-top:30px">
    <div class="card">
        <div class="card-header">
            <div class="row">
                <div class="col-md-9">Holiday List</div>
                <div class="col-md-3" align="right">
                    <a href="index.php" class="btn btn-info" role="button">Back To Home</a>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div id="calendar">
            </div>
        </div>
    </div>
</div>

<div class="modal" id="formModal">
    <div class="modal-dialog model-center">
        <form id="add_event">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Make New holiday</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    <div class="form-group">
                        <select name="event_action" id="event_action" class="form-control">
                            <option value="1">Holiday</option>
                            <option value="2">Absant Day As Present</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <input type="text" name="event_name" id="event_name" class="form-control" placeholder="Event Name" />
                        <span id="error_event_name" class="text-danger"></span>
                    </div>
                </div>
                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" name="create_report" id="add_event" class="btn btn-success btn-sm">Create Report</button>
                    <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
$(document).ready(function() {
    var calendar = $('#calendar').fullCalendar({
        editable:true,
        header:{
            left:'prev,next today',
            center:'title',
            right:'month,agendaWeek,agendaDay'
        },
        events: 'timetable/load.php',
        selectable:true,
        selectHelper:true,
        select: function(start, end, allDay) {
            //$('#formModal').modal('show');//this not show the bootstrap model
            var title = prompt("Enter Holiday Event Title");
            var type = prompt("Enter Holiday type");
            if (title && type) {
                var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
                var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
                $.ajax({
                    url:"timetable/insert.php",
                    type:"POST",
                    data:{title:title,type:type, start:start, end:end},
                    success:function () {
                        calendar.fullCalendar('refetchEvents');
                        alert("Added Successfully");
                    }
                })
            }
        },
        editable:true,
        eventResize:function(event) {
            var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
            var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
            var title = event.title;
            var id = event.id;
            $.ajax({
                url:"timetable/update.php",
                type:"POST",
                data:{title:title, start:start, end:end, id:id},
                success:function() {
                    calendar.fullCalendar('refetchEvents');
                    alert('Event Update');
                }
            })
        },

        eventDrop:function(event) {
            var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
            var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
            var title = event.title;
            var id = event.id;
            $.ajax({
                url:"timetable/update.php",
                type:"POST",
                data:{title:title, start:start, end:end, id:id},
                success:function() {
                    calendar.fullCalendar('refetchEvents');
                    alert("Event Updated");
                }
            });
        },

        eventClick:function(event) {
            if ( confirm("Are you sure you want to remove it?") ) {
                var id = event.id;
                $.ajax({
                    url:"timetable/delete.php",
                    type:"POST",
                    data:{id:id},
                    success:function() {
                        calendar.fullCalendar('refetchEvents');
                    alert("Event Removed");
                    }
                })
            }
        },
    });
});
</script>

title = prompt("Enter Holiday Event Title"); 提示框和类型文本框工作 perfectly.but 不是添加 event.that 的好方法，为什么我考虑转到 bootstrap 模式。那么我该如何解决这个错误？

Answer 1

您必须在代码中包含 Bootstrap JS，因为模态与 JS 一起工作：

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

https://getbootstrap.com/docs/4.3/getting-started/introduction/

bootstrap 模态在 fullCalendar 插件中不工作

bootstrap modal is not working in fullCalendar plugin

html

css

php

fullcalendar

bootstrap-4