2017-06-16 80 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