2012-10-12 56 views
0

我在我的應用程序中使用完整日曆,並且想要編輯之前保存的事件。 如何編輯事件?我的代碼如下所示。 我正在使用SQL作爲數據庫。只想編輯在完整日曆中顯示的事件。如何在MVC 4中編輯從完整日曆保存的事件?

@{ 
    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> 

回答

0

你可以實現以下方法:

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

此功能是用相同的方式eventDrop。

參數元素是形成事件的div,您可以爲此添加onclick事件,或者使用按鈕將一些html添加到其內容中。這樣你就可以顯示你的彈出窗口或導航到編輯頁面。你可以使用類似firebug的東西來檢查和調整html,看看有什麼可能。

有關詳細信息,您可以檢查http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/

在那裏,你可以用一個onclick處理程序添加一個onclick處理程序或可能的圖像。在onclick中,您可以顯示某種類型的彈出窗口或導航到其他頁面。在彈出窗口或其他頁面中,您可以製作表單來編輯您的活動。編輯完成後重新加載事件或導航回日曆,您將看到更新的事件。

+0

請您給我一個描述性答案因爲我現在感到困惑。那將寫入這個函數在哪裏? – Rahul

+0

我在我的答案中爲你添加了一些有用的信息。也許你已經有了,但一定要查看完整日曆的官方文檔;這非常有用。 – Tom

+0

好的湯姆我正在檢查那一個。 – Rahul

相關問題