錯誤 - 完整日曆將不會POST

Question

我們如何進行以下工作以便發佈事件？
事件可以添加到日曆中，我們只需要將它們發佈到我們的API。小提琴：https://jsfiddle.net/H_INGRAM/9oup1jfb/4/

這是我第一次使用Ajax。

$(document).ready(function() 
{ 
    /* 
     date store today date. 
     d store today date. 
     m store current month. 
     y store current year. 
    */ 
    var date = new Date(); 
    var d = date.getDate(); 
    var m = date.getMonth(); 
    var y = date.getFullYear(); 

    var calendar = $('#calendar').fullCalendar(
    { 
     header: 
     { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     }, 

     defaultView: 'agendaWeek', 
     selectable: true, 
     selectHelper: true, 

     select: function(start, end, allDay) 
     { 

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

      if (title) 
      { 
       calendar.fullCalendar('renderEvent', 
        { 
         title: title, 
         start: start, 
         end: end, 
         allDay: allDay 
        }, 
        true // make the event "stick" 
       ); 
      } 
      calendar.fullCalendar('unselect'); 
     }, 

     editable: true, 

     events: [ 
      { 
       title: 'All Day Event', 
       start: new Date(y, m, 1) 
      }, 
      { 
       title: 'Long Event', 
       start: new Date(y, m, d-5), 
       end: new Date(y, m, d-2) 
      }, 
      { 
       id: 999, 
       title: 'Repeating Event', 
       start: new Date(y, m, d-3, 16, 0), 
       allDay: false 
      }, 
      { 
       id: 999, 
       title: 'Repeating Event', 
       start: new Date(y, m, d+4, 16, 0), 
       allDay: false 
      }, 
      { 
       title: 'Meeting', 
       start: new Date(y, m, d, 10, 30), 
       allDay: false 
      }, 
      { 
       title: 'Lunch', 
       start: new Date(y, m, d, 12, 0), 
       end: new Date(y, m, d, 14, 0), 
       allDay: false 
      }, 
      { 
       title: 'Birthday Party', 
       start: new Date(y, m, d+1, 19, 0), 
       end: new Date(y, m, d+1, 22, 30), 
       allDay: false 
      }, 
      { 
       title: 'Click for Google', 
       start: new Date(y, m, 28), 
       end: new Date(y, m, 29), 
       url: 'http://google.com/' 
      } 
     ] 
    }); 

}); 

$(document).ready(function() { 
    $('#fullcal').fullCalendar({ 
    eventClick: function() { 
     alert('a day has been clicked!'); 
    }, 
     events: function (start, end, callback) { 
     $.ajax({ 
      type: "POST", //WebMethods will not allow GET 
      url: "/events-truett-volunteership.html", //url of a webmethod - example below 
      data: "{'userID':'" + $('#<%= hidUserID.ClientID %>').val() + "'}", //this is what I use to pass who's calendar it is 
      //completely take out 'data:' line if you don't want to pass to webmethod - Important to also change webmethod to not accept any parameters 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (doc) { 
       var events = []; //javascript event object created here 
       var obj = $.parseJSON(doc.d); //.net returns json wrapped in "d" 
       $(obj.event).each(function() { //yours is obj.calevent       
         events.push({ 
         title: $(this).attr('title'), //your calevent object has identical parameters 'title', 'start', ect, so this will work 
         start: $(this).attr('start'), // will be parsed into DateTime object  
         end: $(this).attr('end'), 
         id: $(this).attr('id') 
        }); 
       });      
       callback(events); 
      } 
     }); 
    } 
    }); 
}); 

Answer 1

肯定，你將有一個提交處理或按鈕點擊發送的數據，所以裏面，簡直讓所有客戶端事件，然後進行序列化和用ajax發送到服務器。

$('.submitEvent').click(function(){ 
var clientEvent = JSON.stringify($('#calendar').fullCalendar('clientEvents')); 
         $.ajax({ // ajax call starts 
          url: url 
          data: clientEvent, 
          dataType: 'json', 
          success: function(data) 
          { 
           // success handler 
          } 
         }); 
}); 

HTML

<input type="button" class="btn btn-primary submitEvent" value="SUBMIT"/> 

感謝