Jquery绑定数组数据

时间:2015-06-23 12:30:28

标签: c# jquery asp.net

类别:

public class Event
    {
        public Guid EventID { get { return new Guid(); } }
        public string EventName { get; set; }
        public string StartDate { get; set; }
        public string EndDate { get; set; }
        public int ImageType { get; set; }
        public string Url { get; set; }
    }

CaseCalendar.aspx.cs

[WebMethod]
public static IList GetEvents()
{
 IList events = new List<Event>();
 for (int i = 0; i < DateTime.DaysInMonth(DateTime.Now.Year, DateTime.Now.Month); i++)
 {
 events.Add(new Event
 {
 EventName = "My Event " + i.ToString(),
 StartDate = DateTime.Now.AddDays(i).ToString("MM-dd-yyyy"),
 EndDate = DateTime.Now.AddDays(1).ToString("MM-dd-yyyy"),
 ImageType = i % 2,
 Url = @"http://www.test.com"

 });
 }
 return events;
}

Jquery的:

 <script type='text/javascript'>

 $(document).ready(function () {

$.ajax({
type: "POST",
contentType: "application/json",
data: "{}",
url: "CaseCalendar.aspx/GetEvents",
dataType: "json",
success: function (data) {

          $('#calendar').fullCalendar({
          editable: true,
          lang: 'tr',
          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/'
        }
       ]
    });


 });

我正在尝试将数据从方法绑定到事件。

我如何根据我的示例将数据从GetEvents方法绑定到事件(在jquery中)。我正在尝试绑定如下,但它对我不起作用。

  $('#calendar').fullCalendar({
                        editable: true,
                        lang: 'tr',
                        events: data;

 });

任何帮助将不胜感激。

感谢。

1 个答案:

答案 0 :(得分:0)

您需要添加可能需要的moment.js

$('#calendar').fullCalendar({
                            editable: true,
                            lang: 'tr',
                            events: $.map(data, function (item, i) {
                                 var event = new Object();
                                 event.title = item.EventName;
                                 event.start = moment(item.StartDate).utc();
                                 event.end = moment(item.EndDate).utc();
                                 //Add others
                                 return event;
                            });

});

由于我之前遇到过这个问题,我问 this question 并且能够自己解决问题