【问题标题】:fullCalendar events not showing even though correct JSON feed即使正确的 JSON 提要,fullCalendar 事件也没有显示
【发布时间】:2012-09-09 15:37:40
【问题描述】:

作为一群其他人,我在让我的 JSON 提要事件在日历中呈现时遇到了问题。问题通常是错误的 JSON 格式,但事实并非如此,因为我已经使用 JSONlint 对其进行了验证,并在 Site.Master 中对 JSON 提要进行了硬编码,结果是肯定的。

FireBug 正在正确获取 JSON 响应,但它仍未显示在 fullCalendar 中。我没有想法。

FireBug 响应: [{"id":1,"title":"TESTTITLE","info":"INFOINFOINFO","start":"2012-08-20T12:00:00","end":"2012-08-20T12 :00:00","用户":1}]

JSON.aspx

public partial class JSON : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
    // Get events from db and add to list.
    DataClassesDataContext db = new DataClassesDataContext();
    List<calevent> eventList = db.calevents.ToList();

    // Select events and return datetime as sortable XML Schema style.
    var events = from ev in eventList
                 select new
                 {
                     id = ev.event_id,
                     title = ev.title,
                     info = ev.description,
                     start = ev.event_start.ToString("s"),
                     end = ev.event_end.ToString("s"),
                     user = ev.user_id
                 };

    // Serialize to JSON string.
    JavaScriptSerializer jss = new JavaScriptSerializer();
    String json = jss.Serialize(events);

    Response.Write(json);
    Response.End();
   }
}

Site.master

<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />    
<link href='fullcalendar/fullcalendar.css' rel='stylesheet' type='text/css' />
<script src='jquery/jquery-1.7.1.min.js' type='text/javascript'></script>
<script src='fullcalendar/fullcalendar.js' type='text/javascript' ></script>
<script type="text/javascript">
     $(document).ready(function () {
         $('#fullcal').fullCalendar({

            eventClick: function() {
                alert('a day has been clicked!');
            },
          events: 'JSON.aspx' 
         })
     });
</script>

我几天来一直在扫描相关问题,但似乎没有一个能解决我的问题......

【问题讨论】:

标签: c# asp.net json jquery fullcalendar


【解决方案1】:

试试这个,你必须在 aspx 文件中有一个 webmethod,fullcalendar 可以异步调用

       $(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: "json.aspx/GetEvents",   //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);
                }
            });
        }
       })

那么这将在 json.aspx 中

[WebMethod(EnableSession = true)]
public static string GetEvents(string userID)
{
    DataClassesDataContext db = new DataClassesDataContext();
List<calevent> eventList = db.calevents.ToList();

// Select events and return datetime as sortable XML Schema style.
var events = from ev in eventList
             select new
             {
                 id = ev.event_id,
                 title = ev.title,
                 info = ev.description,
                 start = ev.event_start.ToString("s"),
                 end = ev.event_end.ToString("s"),
                 user = ev.user_id
             };

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

【讨论】:

  • 好的,我发帖后编辑了很多时间,放了很多cmets,如果你在我发帖后立即尝试,现在不一样了,试试这个
  • 是的,我确实在之后直接尝试过,但没有成功。我会再试一次!谢谢我尝试了省略数据字段的新代码并更改了 GetEvents() 的参数,现在全日历消失了。
  • 如果 fullcalendar 消失了,那么你有一些无效的 javascript 导致它不起作用
  • 谢谢斯科特。我更新到最新的完整日历,现在可以正常工作了!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多