0

我在我的应用程序中使用 Full Calender，并且想要编辑之前保存的事件。如何编辑事件？我的代码如下所示。我使用 SQL 作为数据库。只想编辑显示在完整日历中的事件。

@{
    ViewBag.Title = "schedule";
}

@Html.Partial("_Calendar")


<script type="text/javascript">

    $(function () {
        var date = new Date();
        var d = date.getDate();
        var y = date.getFullYear();
        var m = date.getMonth();
        var calendar = $('#calendar').fullCalendar({
            header: { left: 'prev,next today', center: 'title' },
            selectable: true,
            theme: true,
            minTime: '8:00',
            defaultEventMinutes: 30,
            maxTime: '17:00',
            allDaySlot: false,
            defaultView: 'agendaWeek',
            weekends: false,
            firstHour: 9,
            selectHelper: true,

            select: function (start, end, allDay) {
                //var date1 = dateFormat(new Date(start).toGMTString(), 'mm/dd/yyyy HH:MM:ss');
                //var date2 = dateFormat(new Date(end).toGMTString(), 'mm/dd/yyyy HH:MM:ss');


                var title = prompt('Event Title:');

                    if (!!title) {
                        $.ajax({
                            type: "POST",
                            data: { Start: start.toJSON(), End: end.toJSON(), Note: title },
                            url: rootURL + "Contractor/schedule/SaveSchedule",
                            color:'yellow',
                            dataType: "json",
                            success: function (data) {
                                $('#eventToAdd').modal('hide');
                                calendar.fullCalendar('renderEvent', { title: title, start: start, end: end, allDay: allDay }, true);                                        
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                $("#eventToAdd").dialog("close");
                            }
                        });
                    }
                    calendar.fullCalendar('unselect');

            },
            eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc, calEvent, jsEvent, ui, view) {
                var date1 = dateFormat(new Date(event.start), 'mm/dd/yyyy HH:MM:ss');
                var date2 = dateFormat(new Date(event.end), 'mm/dd/yyyy HH:MM:ss');
                $.ajax({
                    type: "POST",
                    data: { 'id':event.id, 'Start': date1, 'End': date2},
                    url: "/Contractor/schedule/UpdateSchedule",
                    dataType: "json",
                    success: function (data) {


                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {

                    }
                });
            },
            editable: true,
            events: '@Url.Action("Getevent","Schedule")',
            eventColor: '#028323'

        });


    });

   </script>
4

1 回答 1

0

您可以实现以下方法：

eventRender: function(event, element, view) {}

该函数的编写方式与 eventDrop 相同。

参数元素是构成事件的 div，您可以在其中添加 onclick 事件或使用按钮将一些 html 附加到其内容中。这样您就可以显示弹出窗口或导航到编辑页面。您可以使用 firebug 之类的东西来检查和调整 html，看看有什么可能。

有关更多详细信息，您可以查看http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/

在那里，您可以添加一个 onclick 处理程序，或者可以添加一个带有 onclick 处理程序的图像。在 onclick 中，您可以显示某种弹出窗口或导航到其他页面。在弹出窗口或其他页面中，您可以制作一个表格来编辑您的活动。编辑完成后重新加载事件或导航回您的日历，您将看到更新的事件。

于 2012-10-12T08:56:56.747 回答