如何在模式对话框中显示完整日历

Answer 1

有关如何在模式对话框中显示完整日历，您可以遵循以下工作演示：

<button type="button" class="btn btn-primary" onclick="showCalendarModal()">Depot Calendar</button>

<!-- Modal Structure -->
<div class="modal fade" id="calendarModal" tabindex="-1" role="dialog" aria-labelledby="calendarModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="calendarModalLabel">Depot Calendar</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="empcalendar"></div> <!-- Calendar container -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" />
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js"></script>
<script>
    // Array of events to be displayed in the calendar
    var empevents = [
        { empid: 159, title: 'XXXXX - UnPaid', start: '2024-01-02', end: '2024-01-02', allDay: true },
        { empid: 9, title: 'YYY - UnPaid', start: '2024-01-02', end: '2024-01-02', allDay: true }
    ];

    // Function to show the modal and initialize FullCalendar
    function showCalendarModal() {
        $('#calendarModal').modal('show'); // Show the modal
    }

    // When the modal is shown, initialize or refresh the FullCalendar
    $('#calendarModal').on('shown.bs.modal', function () {
        initializeCalendar(empevents);
    });

    // Function to initialize or refresh FullCalendar
    function initializeCalendar(events) {
        $('#empcalendar').fullCalendar('destroy'); // Destroy any existing calendar instance
        $('#empcalendar').fullCalendar({
            defaultView: 'month',
            handleWindowResize: true,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            },
            eventLimit: true,
            events: events // Pass the events data to the calendar
        });
    }

    // Function to dynamically update the calendar events if you need
    function getCalendarEvents(newEvents) {
        empevents = newEvents; 
        initializeCalendar(empevents); 
    }


</script>