ShowEventPopup不起作用

Question

我试图在我的项目上使用FullCalendar，但一切似乎都很好，但是当我单击一天时，弹出窗口没有显示。

这是代码：

JAVASCRIPT：

function ShowEventPopup(date) {
        ClearPopupFormValues();

        $('#popupEventForm').show();
        $('#eventTitle').focus();
    }

HTML：

<div id="popupEventForm" class="modal hide" style="display: none;">
<div class="modal-header"><h3>Add new event</h3></div>
<div class="modal-body">
    <form id="EventForm" class="well">
        <input type="hidden" id="eventID">
        <label>Event title</label>
        <input type="text" id="eventTitle" placeholder="Title here"><br />
        <label>Scheduled date</label>
        <input type="text" id="eventDate"><br />
        <label>Scheduled time</label>
        <input type="text" id="eventTime"><br />
        <label>Appointment length (minutes)</label>
        <input type="text" id="eventDuration" placeholder="15"><br />
    </form>
</div>

有人能帮我吗？

Answer 1

在全日历配置中尝试此功能。

dayClick: function( date, jsEvent, view) {
    ClearPopupFormValues();
    $('#popupEventForm').show();
    $('#eventTitle').focus();
}

另外这是您的html中缺少一个结尾的div

<div id="popupEventForm" class="modal hide" style="display: none;">
    <div class="modal-header"><h3>Add new event</h3></div>
    <div class="modal-body">
        <form id="EventForm" class="well">
            <input type="hidden" id="eventID">
            <label>Event title</label>
            <input type="text" id="eventTitle" placeholder="Title here"><br />
            <label>Scheduled date</label>
            <input type="text" id="eventDate"><br />
            <label>Scheduled time</label>
            <input type="text" id="eventTime"><br />
            <label>Appointment length (minutes)</label>
            <input type="text" id="eventDuration" placeholder="15"><br />
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" id="btnPopupCancel" data-dismiss="modal" class="btn">Cancel</button>
        <button type="button" id="btnPopupSave" data-dismiss="modal" class="btn btn-primary">Save event</button>
    </div>
</div>

它在本地对我有效。

Answer 2

Java脚本

<script>
$(document).ready(function () {

    var sourceFullView = { url: '/Pannello/GetDiaryEvents/' };
    var sourceSummaryView = { url: '/Pannello/GetDiarySummary/' };
    var CalLoading = true;

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultView: 'agendaWeek',
        editable: true,
        allDaySlot: false,
        selectable: true,
        slotMinutes: 30,
        events: '/Pannello/GetDiaryEvents/',

        eventClick: function (calEvent, jsEvent, view) {
            alert('You clicked on event id: ' + calEvent.id
                + "\nSpecial ID: " + calEvent.someKey
                + "\nAnd the title is: " + calEvent.title);

        },

        eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc) {
            if (confirm("Confermi lo spostamento?")) {
                UpdateEvent(event.id, event.start);
            }
            else {
                revertFunc();
            }
        },

        eventResize: function (event, dayDelta, minuteDelta, revertFunc) {

            if (confirm("Confermi il cambio del tempo per l'appuntamento?")) {
                UpdateEvent(event.id, event.start, event.end);
            }
            else {
                revertFunc();
            }
        },



        dayClick: function (date, allDay, jsEvent, view) {
            //$('#eventTitle').val("");
            //var start = moment(start).format('dd/MM/yyyy');
            //$('#eventDate').val("");
            //var time = moment(start).format('HH:mm');
            //$('#eventTime').val("");

            window.alert("Testo del messaggio");

            $('#popupEventForm').show();

            ShowEventPopup(date);
        },

        viewRender: function (view, element) {

            if (!CalLoading) {
                if (view.name == 'month') {
                    $('#calendar').fullCalendar('removeEventSource', sourceFullView);
                    $('#calendar').fullCalendar('removeEvents');
                    $('#calendar').fullCalendar('addEventSource', sourceSummaryView);
                }
                else {
                    $('#calendar').fullCalendar('removeEventSource', sourceSummaryView);
                    $('#calendar').fullCalendar('removeEvents');
                    $('#calendar').fullCalendar('addEventSource', sourceFullView);
                }
            }
        }

    });

    CalLoading = false;


});

$('#btnPopupCancel').click(function () {
    ClearPopupFormValues();
    $('#popupEventForm').hide();
});

$('#btnPopupSave').click(function () {

    $('#popupEventForm').hide();

    var dataRow = {
        'Title': $('#eventTitle').val(),
        'NewEventDate': $('#eventDate').val(),
        'NewEventTime': $('#eventTime').val(),
        'NewEventDuration': $('#eventDuration').val()
    }

    ClearPopupFormValues();

    $.ajax({
        type: 'POST',
        url: "/Home/SaveEvent",
        data: dataRow,
        success: function (response) {
            if (response == 'True') {
                $('#calendar').fullCalendar('refetchEvents');
                alert('New event saved!');
            }
            else {
                alert('Error, could not save event!');
            }
        }
    });
});

function ShowEventPopup(date) {
    ClearPopupFormValues();

    $('#popupEventForm').show();
    $('#eventTitle').focus();
}

function ClearPopupFormValues() {
    $('#eventID').val("");
    $('#eventTitle').val("");
    $('#eventDateTime').val("");
    $('#eventDuration').val("");
}

function UpdateEvent(EventID, EventStart, EventEnd) {

    var dataRow = {
        'ID': EventID,
        'NewEventStart': EventStart,
        'NewEventEnd': EventEnd
    }

    $.ajax({
        type: 'POST',
        url: "/Home/UpdateEvent",
        dataType: "json",
        contentType: "application/json",
        data: JSON.stringify(dataRow)
    });
}

其他2功能

 <div class="modal-footer">
    <button type="button" id="btnPopupCancel" data-dismiss="modal" class="btn">Cancel</button>
    <button type="button" id="btnPopupSave" data-dismiss="modal" class="btn btn-primary">Save event</button>
</div>