Отображение модального диалогового окна в приложении FullCalendar

Я использую FullCalendar.io версии 5.3.2 в приложении Asp.net Core Razor Page.

Я добавил функцию JavaScript для создания модального диалогового окна в приложении. Мой файл Index.cshtml, который находится по пути к каталогу: MyDemo > Страницы > Календарь > Index.cshtml показан ниже: -

@page
@model MyDemo.Pages.Calendars.IndexModel
@{
    Layout = null;
}

<!DOCTYPE html>

<html lang='en'>

<head>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href='~/lib/fullcalendar/lib/main.css' rel='stylesheet' />
    <script src='~/lib/fullcalendar/lib/main.js'></script>

    <link href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.css" rel="stylesheet" />
    <link href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" rel="stylesheet" />


    <link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>

    <link href='~/lib/fullcalendar/lib/main.min.css' rel='stylesheet' />

    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css'>

    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css'>

    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js'></script>
    <script src='~/lib/fullcalendar/lib/main.js'></script>

    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js'></script>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js'></script>


    <script>

        $(document).ready(function() {
            $("#calendar").fullCalendar({ 
                   
                header: {
                    left: "prev,next today",
                    center: "title",
                    right: "month,agendaWeek,agendaDay"
                },

                initialView: "month",
                navLinks: true, // can click day/week names to navigate views
                selectable: true,
                selectHelper: true,
                editable: true,
                eventLimit: true, // allow "more" link when too many events

                select: function(start, end) {
                    // Display the modal.
                    // You could fill in the start and end fields based on the parameters
                    $(".modal").modal("show");
                    $(".modal")
                        .find("#title")
                        .val("");
                    $(".modal")
                        .find("#starts-at")
                        .val("");
                    $(".modal")
                        .find("#ends-at")
                        .val("");
                    $("#save-event").show();
                    $("input").prop("readonly", false);
                },

                eventRender: function(event, element) {
                    //dynamically prepend close button to event
                    element
                        .find(".fc-content")
                        .prepend("<span class='closeon material-icons'>&#xe5cd;</span>");
                    element.find(".closeon").on("click", function () {
                        $("#calendar").fullCalendar("removeEvents", event._id);
                    });
                },

                eventClick: function(calEvent) {
                    // Display the modal and set event values.
                    $(".modal").modal("show");
                    var title = $(".modal")
                        .find("#title")
                        .val(calEvent.title);

                    var start = $(".modal")
                        .find("#starts-at")
                        .val(calEvent.start);

                    var end = $(".modal")
                        .find("#ends-at")
                        .val(calEvent.end);
                    $("#save-event").show();
                    $("input").prop("readonly", false);
                }
            });

            // Bind the dates to datetimepicker.
            $("#starts-at, #ends-at").datetimepicker();

            //click to save event
            $("#save-event").on("click", function(event) {
                var title = $("#title").val();
                if (title) {
                    var eventData = {
                        title: title,
                        start: $("#starts-at").val(),
                        end: $("#ends-at").val()
                    };
                    $("#calendar").fullCalendar("renderEvent", eventData, true); // stick? = true
                }
                $("#calendar").fullCalendar("unselect");

                // Clear modal inputs
                $(".modal")
                    .find("input")
                    .val("");
                // hide modal
                $(".modal").modal("hide");
            });
        });

    </script>

    <style>
        body {
            margin: 40px 10px;
            padding: 0;
            font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
            font-size: 14px;
        }

        #calendar {
            width: 900px;
            margin: 0 auto;
        }

        #wrap {
            width: 1100px;
            margin: 0 auto;
        }

        .closeon {
            border-radius: 5px;
        }

        input {
            width: 50%;
        }

            input[type="text"][readonly] {
                border: 2px solid rgba(0, 0, 0, 0);
            }

        /*info btn*/
        .dropbtn {
            /*background-color: #4CAF50;*/
            background-color: #eee;
            margin: 10px;
            padding: 8px 16px 8px 16px;
            font-size: 16px;
            border: none;
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f1f1f1;
            min-width: 200px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
            margin-left: 100px;
            margin-top: -300px;
        }

            .dropdown-content p {
                color: black;
                padding: 4px 4px;
                text-decoration: none;
                display: block;
            }

            .dropdown-content a:hover {
                background-color: #ddd;
            }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .dropdown:hover .dropbtn {
            background-color: grey;
        }

            .dropdown:hover .dropbtn span {
                color: white;
            }
    </style>


</head>
<body>     
        <div id='calendar'></div>
        <div id='datepicker'></div>

        <div class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4><input class="modal-title" type="text" name="title" id="title" placeholder="Event Title/Description" /></h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-xs-12">
                                <label class="col-xs-4" for="starts-at">Starts at</label>
                                <input type="text" name="starts_at" id="starts-at" />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
                                <label class="col-xs-4" for="ends-at">Ends at</label>
                                <input type="text" name="ends_at" id="ends-at" />
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="save-event">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html> 

Выходное решение отображается в виде пустой веб-страницы, а в окне консоли отображается следующее сообщение об ошибке и предупреждение: -

Сообщение об ошибке: -

Uncaught TypeError: $(...).fullCalendar is not a function
    at HTMLDocument.<anonymous> (index:40)
    at e (jquery.min.js:2)
    at t (jquery.min.js:2)

Предупреждение: -

jquery.min.js:2 jQuery.Deferred exception: $(...).fullCalendar is not a function TypeError: $(...).fullCalendar is not a function
    at HTMLDocument.<anonymous> (https://localhost:44370/Calendars/index:40:28)
    at e (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:30005)
    at t (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:30307) undefined

FullCalendar Console Error and Warning

Обновить Я обновил код на странице Index.cshtml, и теперь отображается веб-страница FullCalendar. Я добавил кнопку «Добавить событие», и когда я нажимаю на нее, приглашение не появляется. Когда я проверяю окно консоли, ошибок нет: -

@page
@model MyDemo.Pages.Calendars.IndexModel
@{
    Layout = null;
}

<!DOCTYPE html>

<html lang='en'>

<head>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href='~/lib/fullcalendar/lib/main.css' rel='stylesheet' />
    <script src='~/lib/fullcalendar/lib/main.js'></script>

    <link href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.css" rel="stylesheet" />
    <link href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" rel="stylesheet" />


    <script>

        document.addEventListener('DOMContentLoaded', function () {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                themeSystem: 'bootstrap',
                headerToolbar: {
                    left: 'title',
                    center: 'addEventButton',
                    right: 'prev,next today,dayGridMonth,timeGridWeek,timeGridDay'
                },
                navLinks: true, // can click day/week names to navigate views
                selectable: true,
                selectMirror: true,
                customButtons: {
                    addEventButton: {
                        text: 'add event',
                        eventClick: function (event) {
                            var dateStr = prompt("Event ID: " + event.id + " Start Date: " + $.fullCalendar.formatDate(event.start, 'YYYY-MM-DD') + " End Date: " + event.end);
                            var date = new Date(dateStr + 'T00:00:00'); // will be in local time
                        

                            if (!isNaN(date.valueOf())) { // valid?
                                calendar.addEvent({
                                    title: 'dynamic event',
                                    start: date,
                                    end: date,
                                    allDay: true
                                });
                                alert('Great. Now, update your database...');
                            } else {
                                alert('Invalid date.');
                            }
                        }
                    }
                }
            });

            calendar.render();


        });

    </script>


</head>
<body>
    <div class="p-5">
        <h2 class="mb-4">Full Calendar</h2>
        <div class="card">
            <div class="card-body p-0">

                <div id='calendar'></div>

            </div>
        </div>
    </div>




    <!-- calendar modal -->
    <div id="modal-view-event" class="modal modal-top fade calendar-modal">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <h4 class="modal-title"><span class="event-icon"></span><span class="event-title"></span></h4>
                    <div class="event-body"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div id="modal-view-event-add" class="modal modal-top fade calendar-modal">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="add-event">
                    <div class="modal-body">
                        <h4>Add Event Detail</h4>
                        <div class="form-group">
                            <label>Title</label>
                            <input type="text" class="form-control" name="v.title">
                        </div>
                        <div class="form-group">
                            <label>Start Date</label>
                            <input type='text' class="datetimepicker form-control" name="v.startdate">
                        </div>
                        <div class="form-group">
                            <label>End Date</label>
                            <input type='text' class="datetimepicker form-control" name="v.enddate">
                        </div>
                        <div class="form-group">
                            <label>Description</label>
                            <textarea class="form-control" name="v.description"></textarea>
                        </div>
                        <div class="form-group">
                            <label>Theme Color</label>
                            <select class="form-control" name="v.themecolor">
                                <option value="fc-bg-default">fc-bg-default</option>
                                <option value="fc-bg-blue">fc-bg-blue</option>
                                <option value="fc-bg-lightgreen">fc-bg-lightgreen</option>
                                <option value="fc-bg-pinkred">fc-bg-pinkred</option>
                                <option value="fc-bg-deepskyblue">fc-bg-deepskyblue</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Event Icon</label>
                            <select class="form-control" name="eicon">
                                <option value="circle">circle</option>
                                <option value="cog">cog</option>
                                <option value="group">group</option>
                                <option value="suitcase">suitcase</option>
                                <option value="calendar">calendar</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

Изображение веб-страницы FullCalendar: -

FullCalendar Webpage

Всего 1 ответ

Автоматический диспенсер мыльной пены от xiaomi.


Я добавил кнопку "Добавить событие", и когда я нажимаю на нее, подсказка не появляется.

This demo показывает, как добавить новое событие в календарь с помощью настраиваемой кнопки, а в примере кода (нажав " Изменить в CodePen " в правом верхнем углу этого page) вы обнаружите, что используется свойство click.

И поскольку @ADyson поделился в комментарии, если вы отметите the doc about "customButtons", вы также сможете получить подробное описание свойств, которые принимает запись customButton.

Кроме того, обратите внимание, что функция обратного вызова не принимает событие календаря в качестве аргумента.

`click` - a callback function that is called when the button is clicked. Accepts two arguments: ( mouseEvent, htmlElement ).

Если вы хотите разрешить пользователю добавлять новое событие в календарь с помощью настраиваемой кнопки, вы можете изменить код, чтобы использовать два запроса для startdate и enddate, как показано ниже.

customButtons: {
    addEventButton: {
        text: 'add event',
        click: function () {
            var dateStr = prompt('Enter start date in YYYY-MM-DD format');
            var dateEnd = prompt('Enter end date in YYYY-MM-DD format');


            var str = new Date(dateStr + 'T00:00:00'); // will be in local time
            var end = new Date(dateEnd + 'T00:00:00');

            if (!isNaN(str.valueOf()) && !isNaN(end.valueOf())) { // valid?
                calendar.addEvent({
                    title: 'dynamic event',
                    start: str,
                    end: end,
                    allDay: true
                });
                alert('Great. Now, update your database...');
            } else {
                alert('Invalid date.');
            }
        }
    }
}

Есть идеи?

10000