2015-05-04 129 views
0

我想添加一些事件到fullcalendar。 在ASPX一個WebMethod生成一個JSON給JS 但我不能用完整的日曆結果鏈接的網頁的方法, 我可以添加手冊事件。fullcalendar不顯示事件

的JS:

$(document).ready(function() { 
$('#btnInit').click(function() { 
    var start = Date.parse($("#MainContent_dateD").text()); 
    var end = Date.parse($("#MainContent_dateF").text()); 
    var cle = $("#MainContent_HF_cleU").val(); 
    $.ajax({ 
     type: "POST", 
     url: "ConsultationPlanning.aspx/getPlanning", 
     data: '{"start": "' + start + '", "end": "' + end + '"}', 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (msg) { 
      if (msg == null) { 
       alert('no result'); 
       return; 
      } 
      alert("received: " + msg.d); 
      document.getElementById("MainContent_dateD").innerHTML = msg.d; 
      $('#calendar').fullCalendar({ 
       eventSources: JSON.parse(msg.d) 
      }); 
     }, 
     error: function(msg){ 
      alert("marche pas : " + msg); 
     } 
    }); 
}); 

$('#calendar').fullCalendar({ 
    header: { 
     left: 'prev,next today', 
     center: 'title', 
     right: 'month,agendaWeek,agendaDay' 
    }, 
    hiddenDays: [0], 
    defaultView: 'month', 
    editable: false, 
    allDaySlot: false, 
    selectable: false, 
    eventSources: [{ 
     url: 'ConsultationPlanning.aspx/getPlanning' 
    }] 
});}) 

首先,在這個webMethods的是字符串 參數和aspx.cs:

public static String getPlanning(string start, string end) 
    { 
     List<String> ls1 = new List<string>(); 
     IList<Planning> ls2= new List<Planning>(); 

     DateTime t = Convert.ToDateTime(start); 
     DateTime t2 = t.AddHours(1.0); 
     Planning p=new Planning(); 

     for (int i = 0; i < 4; i++) 
     { 
      p.id = "" + i + "" ; 
      p.title = "event "+i ; 
      p.start = String.Format("{0:s}", t.AddDays(Convert.ToDouble(i))); 
      p.end = String.Format("{0:s}", t2.AddDays(Convert.ToDouble(i))); 
      ls2.Add(p); 
     } 
     System.Web.Script.Serialization.JavaScriptSerializer oSerializer = new System.Web.Script.Serialization.JavaScriptSerializer(); 
     string sJSON = oSerializer.Serialize(ls2); 
     return sJSON; 
    } 

我檢查JSON文件到jsonlint.com和它的驗證,所以我猜這個錯誤是在js中,但我不知道在哪裏。

和JSON:

[ 
    {"id":"0","title":"event 0","start":"2015-05-04T12:35:37","end":"2015-05-04T13:35:37"}, 
    {"id":"1","title":"event 1","start":"2015-05-05T12:35:37","end":"2015-05-05T13:35:37"}, 
    {"id":"2","title":"event 2","start":"2015-05-06T12:35:37","end":"2015-05-06T13:35:37"}, 
    {"id":"3","title":"event 3","start":"2015-05-07T12:35:37","end":"2015-05-07T13:35:37"}] 
+0

那麼您可以通過服務器返回的JSON飼料的樣品? –

+0

請參閱我的答案在這裏:http://stackoverflow.com/questions/30092190/populating-events-in-full-calender-javascript-from-the-database/30092608#30092608 – Sherlock

回答

0

,因爲它是在首先沒有事件完整的日曆負荷日曆永遠正確加載DATAS。並且,我想我應該做一個addEventSource ... 有移動的的document.ready(功能)呼叫後, 的解決方案是,以獲得JSON的結果的事件,而不是EventSource的:

$(document).ready(function() { 
var start = Date.parse($("#MainContent_dateD").text()); 
var end = Date.parse($("#MainContent_dateF").text()); 
var cle = $("#MainContent_HF_cleU").val(); 

$.ajax({ 
    type: "POST", 
    url: "ConsultationPlanning.aspx/getPlanning", 
    data: '{"start": "' + start + '", "end": "' + end + '"}', 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 

    success: function (msg) { 
     if (msg == null) { 
      alert('no result'); 
      return; 
     } 

     $('#calendar').fullCalendar({ 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'month,agendaWeek,agendaDay' 
      }, 
      hiddenDays: [0], 
      defaultView: 'month', 
      editable: false, 
      allDaySlot: false, 
      selectable: false, 
      events: JSON.parse(msg.d) 
     }); 
    }, 

    error: function(msg){ 
     alert("function not working : " + msg); 
    } 
}); 
}) 

我現在不收的問題,如果您有任何建議,使代碼更好。

0

添加events: [<%=getPlanning%>]和刪除eventSources

+0

JavaScript不希望:<% = getPlanning%>], 但我改變enventSources的事件,它的作品,當我點擊,當日歷不是首先加載。我接近讓它成功。非常感謝 – Olivier

+0

我已經使用過。它的工作原理 –

+0

雖然這個源代碼可能會提供一個答案,但幾句解釋會使當前和未來的讀者受益。 – Thom

0

你應該試試這個代碼只得到事件在給定的範圍內,那麼,回調應該做的魔力:

eventSources: { 
    events: function (start, end, callback) { 
     $.ajax({ 
      type: "POST", 
      url: "ConsultationPlanning.aspx/getPlanning", 
      data: '{ "start": "' + start.toISOString() + '", "end": "' + end.toISOString() + '" }', 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (msg) { 
       callback(msg.d); 
      } 
     } 
    } 
} 

要使其工作,你有更換服務器方法的簽名日期時間參數...

+0

你認爲錯誤來自日期格式嗎?我可以用web服務讀取它們並管理它們... 但是,回調會導致頁面錯誤。 – Olivier