2017-06-16 75 views
0

我在文檔準備中創建了fulcalendar,並且我有一個運行以下C#函數來獲取數據的asp按鈕。事件不會呈現給來自C#Fullcalendar的事件

public void getAppointments() 
    { 
     List<Appoinment> appoinmentList = new List<Appoinment>(); 
     AppointmentController appointmentController = new AppointmentController(); 
     PublicUserProfileController publicUserProfileController = new PublicUserProfileController(); 
     PublicUserProfile publicUserProfile = new PublicUserProfile(); 
     //appoinmentList = appointmentController.fetchAppointmentByConsultent(Int32.Parse(Session["ICid"].ToString())); 
     appoinmentList = appointmentController.fetchAppointmentByConsultent(3); 

     var frontAppoinmentList = new List<object>(); 

     foreach (var appoinment in appoinmentList) 
     { 
      publicUserProfile = publicUserProfileController.fetchPublicUserNameById(appoinment.PublicUserProfileId); 
      var name = publicUserProfile.FirstName + " " + publicUserProfile.LastName; 

      frontAppoinmentList.Add(new 
      { 
       id = appoinment.Id.ToString(), 
       title = name, 
       start = appoinment.UtcStartTime, 
       end = appoinment.UtcEndTime 
      }); 

     } 

     // Serialize to JSON string. 
     JavaScriptSerializer jss = new JavaScriptSerializer(); 
     String json = jss.Serialize(frontAppoinmentList); 
     var msg = String.Format("<script>loadCal('{0}');</script>", json); 

     //ClientScript.RegisterStartupScript(GetType(), "hwa", msg, true); 
     ScriptManager.RegisterClientScriptBlock(this, GetType(), "none", msg, false); 

    } 

    protected void btnmonthly_Click(object sender, EventArgs e) 
    { 
     getAppointments(); 
    } 

我有我的JS趕上JSON並加載事件,

function loadCal(eventList){ 
    eventList = $.parseJSON(eventList); 
    alert(JSON.stringify(eventList)); 

     for (var j = 0; j < eventList.length; j++) { 

     eventList[j].start = new Date(parseInt(eventList[j].start.replace("/Date(", "").replace(")/",""), 10)); 
     eventList[j].end = new Date(parseInt(eventList[j].end.replace("/Date(", "").replace(")/",""), 10)); 


    }; 
    alert(JSON.stringify(eventList[0].start)); 

     for (var j = 0; j < eventList.length; j++) { 
      var eId = eventList[0].id; 
      var eStart = eventList[0].start.toISOString(); 
      var eEnd = eventList[0].end.toISOString(); 
      var eTitle = eventList[0].title; 
        var event= 
        [{ 
         id: eId, 
         title: eTitle, 
         start: eStart , 
         end:eEnd 

        }]; 

        $('#appCalendar').fullCalendar('renderEvent', event, true); 
       }; 

    } 

我創建了fullcalendar,因爲這在文件準備好,

$('#appCalendar').fullCalendar({ 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: '' 
     }, 
     defaultDate: today, 
     defaultView: 'month', 
     editable: true 

    }); 

渲染事件不會渲染任何事件,但是如果我在控制檯中傳遞這些事件,事件就會被渲染。

變種事件= [{ID:1,標題: 「的Manoj」,啓動: 「2017-06-15T22:30:00.000Z」, 端:「2017-06-15T23:30:00.000Z 「}]; ('#appCalendar')。fullCalendar('renderEvent',event,true);

這正是我期望的loadCal函數與我通過的json做的事情。當我通過loadCal中的斷點檢查時,這些是爲事件數組(eTitle,eId等)設置的值。

有人可以告訴我爲什麼事件不呈現?我現在已經呆了好幾個小時了。

更新 我改變了C#到一個WebMethod的,

[WebMethod(EnableSession = true)] 
    public static string GetEvents() 
    { 
     List<Appoinment> appoinmentList = new List<Appoinment>(); 
     AppointmentController appointmentController = new AppointmentController(); 
     PublicUserProfileController publicUserProfileController = new PublicUserProfileController(); 
     PublicUserProfile publicUserProfile = new PublicUserProfile(); 
     //appoinmentList = appointmentController.fetchAppointmentByConsultent(Int32.Parse(Session["ICid"].ToString())); 
     appoinmentList = appointmentController.fetchAppointmentByConsultent(3); 

     var frontAppoinmentList = new List<object>(); 

     foreach (var appoinment in appoinmentList) 
     { 
      publicUserProfile = publicUserProfileController.fetchPublicUserNameById(appoinment.PublicUserProfileId); 
      var name = publicUserProfile.FirstName + " " + publicUserProfile.LastName; 

      frontAppoinmentList.Add(new 
      { 
       id = appoinment.Id.ToString(), 
       title = name, 
       start = appoinment.UtcStartTime, 
       end = appoinment.UtcEndTime 
      }); 

     } 

     // Serialize to JSON string. 
     JavaScriptSerializer jss = new JavaScriptSerializer(); 
     String json = jss.Serialize(frontAppoinmentList); 
     return json; 
    } 

和我的jQuery來,

$(document).ready(function() { 
    $('#appCalendar').fullCalendar({ 
    eventClick: function() { 
     alert('a day has been clicked!'); 
    }, 
     events: function (start, end, callback) { 
     $.ajax({ 
      type: "POST", //WebMethods will not allow GET 
      url: "AppointmentDiary.aspx/GetEvents", //url of a webmethod - example below 

      //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).each(function() { 
         var startd=  new Date(parseInt(this.start.replace("/Date(", "").replace(")/",""), 10)); 
         var endd = new Date(parseInt(this.end.replace("/Date(", "").replace(")/",""), 10));     
         events.push({ 
         title: this.title, //your calevent object has identical parameters 'title', 'start', ect, so this will work 
         start:startd.toISOString(), // will be parsed into DateTime object  
         end: endd.toISOString(), 
         id: this.id 
        }); 
       });      
       //if(callback) callback(events); 
       //$('#appCalendar').fullCalendar('renderEvent',events[0], true); 
       alert(JSON.stringify(events[0])); 

      } 
     }); 
     return events; 
    } 
    }); 
}); 

回調變爲 '假' 時,這個運行,但我可以看到, webmethod在格式化日期後將其返回到警報中,

enter image description here

我從aspx獲取數據,我可以在jQuery中讀取它,但我仍然無法渲染一個even.at這一點,我不知道它可以做什麼。你可以看看我的代碼,並指出最新的錯誤?我也不明白在函數中使用(開始,結束,回調),因爲我不在webmethod中使用它。

+0

是你的'loadCal(EVENTLIST)'調用'click'的函數? fullCalendar創建日曆對象之前 – Curiousdev

+0

loadCal是最有可能調用。您需要重構您的js一點,以確保正確的順序 – Andrei

回答

0

我終於解決了我的問題。

我的C#爲獲取數據並傳遞一個JSON是方法,

[WebMethod(EnableSession = true)] 
    public static string GetEvents() 
    { 
     List<Appoinment> appoinmentList = new List<Appoinment>(); 
     AppointmentController appointmentController = new AppointmentController(); 
     PublicUserProfileController publicUserProfileController = new PublicUserProfileController(); 
     PublicUserProfile publicUserProfile = new PublicUserProfile(); 
     //appoinmentList = appointmentController.fetchAppointmentByConsultent(Int32.Parse(Session["ICid"].ToString())); 
     appoinmentList = appointmentController.fetchAppointmentByConsultent(3); 

     var frontAppoinmentList = new List<object>(); 

     foreach (var appoinment in appoinmentList) 
     { 
      publicUserProfile = publicUserProfileController.fetchPublicUserNameById(appoinment.PublicUserProfileId); 
      var name = publicUserProfile.FirstName + " " + publicUserProfile.LastName; 

      frontAppoinmentList.Add(new 
      { 
       id = appoinment.Id.ToString(), 
       title = name, 
       start = appoinment.UtcStartTime, 
       end = appoinment.UtcEndTime 
      }); 

     } 

     // Serialize to JSON string. 
     JavaScriptSerializer jss = new JavaScriptSerializer(); 
     String json = jss.Serialize(frontAppoinmentList); 
     return json; 
    } 

我Jquery的用於創建Fullcalendar和渲染的事項,

$(document).ready(function() { 

    $.ajax({ 
     type: "POST", 
     url: "AppointmentDiary.aspx/GetEvents", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (doc) { 

      var events = []; 
      var docd = doc.d; 


      var obj = $.parseJSON(doc.d); 
      console.log(obj); 
      alert(JSON.stringify(obj)); 
for (var j = 0; j < obj.length; j++) { 

     obj[j].start = new Date(parseInt(obj[j].start.replace("/Date(", "").replace(")/",""), 10)); 
     obj[j].start = obj[j].start.toISOString(); 
     obj[j].end = new Date(parseInt(obj[j].end.replace("/Date(", "").replace(")/",""), 10)); 
     obj[j].end = obj[j].end.toISOString(); 


    }; 

      $('#appCalendar').fullCalendar({ 
       header: { 
        left: 'prev,next today', 
        center: 'title', 
        right: 'month,agendaWeek,agendaDay' 
       }, 
       eventClick: function() { 

       }, 

       editable: false, 

       events: obj //Just pass obj to events 
      }) 
      console.log(events); 

     }, 
     error: function (xhr, status, error) { 
      alert(xhr.responseText); 
     } 
    }); 
}); 
0
[{ id:1, title:"manoj", start:"2017-06-15T22:30:00.000Z", end:"2017-06-15T23:30:00.000Z" }] 

陣列renderEvent方法預計對象。嘗試發送

{ id:1, title:"manoj", start:"2017-06-15T22:30:00.000Z", end:"2017-06-15T23:30:00.000Z" } 

改爲。

或者,使用renderEvents(注意是複數)方法(https://fullcalendar.io/docs/event_rendering/renderEvents/),並調用它一次,它發送eventList作爲一個參數(你將不得不在每個事件第一收拾了日期,你現在要做的,儘管你可以在服務器上做到這一點,而不是更有效率。使用JSON.NET作爲你的串行器可以解決它)。


但是......真的,這不是你如何打算用fullCalendar加載事件的批量列表。這將是做這一切在客戶端非常慢,而且還爲您加載所有的事件,將它一次 - 當你的應用程序已經運行了一段時間,想象一下,你有整整一年的價值以上,將會變得更慢,並且可能沒有人會看到年長者。

相反,你應該創建一個單獨的服務器方法(例如一個WebMethod或其他JSON服務),它可以接受一個開始和結束日期,只是返回的日期之間的相關事件。你告訴fullCalendar這種方法的URL,當您啓動它,像這樣:

events: "Events.aspx/GetEvents" 

然後,日曆啓動時,它從服務器請求(通過AJAX)實際顯示僅日期的事件在當時的日曆上。當日期或視圖更改時,它會請求更新的新日期列表。最重要的是,它自動執行此操作,無需您進一步干預。有關此方法的更多詳細信息,請參閱https://fullcalendar.io/docs/event_data/events_json_feed/

N.B.如果您無法使服務器方法符合直接JSON訂閱源的要求,則可以使用JavaScript函數作爲中介,在傳遞它之前更改參數的格式和/或更改返回數據的格式到fullCalendar。見https://fullcalendar.io/docs/event_data/events_function/

如果您實現這些解決方案將是更容易管理日曆上的事件之一。

+0

我現在將我的功能更改爲webmethod。我無法讓它繼續工作。你能看看更新嗎?謝謝一堆! – PeeBee

+0

嘿,我有點修復它。謝謝你的幫助。 – PeeBee

+0

@PeeBee沒問題,很高興你能解決它。如果答案對你有幫助,請考慮提高和/或將其標記爲已接受的答案,謝謝:-) – ADyson