0

アプリケーションでフル カレンダーを使用しており、以前に保存したイベントを編集したいと考えています。イベントを編集するにはどうすればよいですか? 私のコードは以下のとおりです。データベースとして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 に答える