通过双击在 JQuery FullCalendar 上添加约会

Question

我正在摆弄 JQuery 完整日历，我想在您的帮助下解决的问题是通过双击向日历添加事件。我在 JQuery 中连接了双击事件，但我不确定如何处理它。当我双击日历时，它会显示一个弹出窗口 window，这很好。我知道如何将事件的详细信息发送到后面的代码。我想我的大问题是当这个人双击时，我该如何调出一个表格让他们填写？我只有四个字段和通过 EWS 传递到 Exchange 的全天选项。那一面工作得很好。所以我需要帮助弄清楚如何做两件事。

当他们双击时，会弹出一个表单供他们添加详细信息

将信息发送到后面的代码 - 重新使用 ajax 调用？创建一个新的？

    $(document).ready(function () {
    initThemeChooser({
        init: function (themeSystem) {
            $('#calendar').fullCalendar({
                themeSystem: themeSystem,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay,listMonth'
                },
                selectable: true,
                selectHelper: true,
                weekNumbers: true,
                navLinks: true,
                editable: true,
                eventLimit: true,
                events:  <% =JsonEvent %>,
                eventDrop: function (event, delta, revertFunc) {
                    if (!confirm("Are you sure about this change?"))     {
                        revertFunc();
                    } else {
                        UpdateEvent(event);
                        $(this).fullCalendar( 'refetchEvents' );
                    }
                },
                eventResize: function(event, delta, revertFunc) {
                    alert(event.title + " changed end is now " + event.end.format());
                    if (!confirm("is this okay?")) {
                        revertFunc();
                    }
                    else
                    {
                        UpdateEvent(event);
                        $(this).fullCalendar( 'refetchEvents' );
                    }
                },
                eventClick: function(calEvent, jsEvent, view) {

                    alert('Event: ' + calEvent.title + '\nDate: ' + moment(calEvent.Start).format("MM-DD-YYYY") + '\nStart: ' + moment(calEvent.start).format("hh:mm:ss A") + '\nEnd: ' + moment(calEvent.end).format("hh:mm:ss A"));
                    $(this).fullCalendar( 'refetchEvents' );
                    // change the border color just for fun
                    $(this).css('border-color', 'red');

                },
                eventDoubleClick: function(calEvent, jsEvent, view) {

                    alert('Event: ' + calEvent.title);
                    alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
                    alert('View: ' + view.name);

                    // change the border color just for fun
                    $(this).css('border-color', 'red');
                }
            });

            function UpdateEvent(event)
            {
                var data = {};
                data.id = event.id;
                data.starts = event.start;
                data.ends = event.end;
                data.subject = event.title;

                $.ajax({
                    url: 'Calendar.aspx/UpdateEvent',
                    method: 'POST',
                    dataType: 'JSON',
                    contentType: 'application/json; charset=utf-8',
                    data: JSON.stringify(data),
                    success: function (response, type, xhr) {
                        var retVal = JSON.stringify(response);
                    },
                    error: function (xhr) {
                        window.alert('error: ' + xhr.statusText);
                    }

                });

            }
        },
        change: function (themeSystem) {
            $('#calendar').fullCalendar('option', 'themeSystem', themeSystem);
        }

    });
});

Answer 1

这是您应该采用的方法：

1) 显示包含您的表单的新 div（可能使用 CSS 样式等使其有效地成为模态对话框）而不是警报。

2) 我假设 Create 的行为需要与 Update 略有不同，所以我猜你也需要一个略有不同的 ajax 调用。

通过双击在 JQuery FullCalendar 上添加约会

Add appointment on JQuery FullCalendar with double click

javascript

ajax

jquery

double-click

fullcalendar