Question

我在我的应用程序中使用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>

Answer 1

您可以实施以下方法：

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

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

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

有关详细信息，请查看http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/

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

如何在MVC 4中编辑之前从完整日历中保存的事件？

1 个答案: