2013-09-26 82 views
1

我试图用最新版本的fullcalendar脚本更新fullcalendar-asp-net项目。该项目使用jquery 1.3.2 1.4.7版本的fullcalendar(这是非常古老)(这也是非常古老)。我喜欢这个项目的全部功能,所以我只是想通过使用jquery 1.10.2(最新版本随该版本的jquery提供)将其更新到1.6.6(最新版本)的fullcalendar来使用它。将FullCalendar-asp-net项目更新到最新的1.6.4版本

我遇到的问题是,当我更新脚本时,无法使处理程序显示事件。唯一的变化我做的页头正在改变的脚本,如:

  • jQuery的1.3.2 1.10.2
  • jQuery的UI到1.10.3
  • FullCalendar 1.4.7至1.6.4

所有的后端方法工作正常,所以我可以添加新的事件并将它们保存到数据库并更新它们没有问题。当我重新加载页面时,它们全部消失(意味着它们没有加载)。这是应该加载页面加载日历的js代码(为了简化,删除了不必要的代码)。

var calendar = $('#calendar').fullCalendar({ 
    events: "JsonResponse.ashx", 
}) 

奇怪的是,当我直接复制并粘贴JSON响应事件,他们都出现。代码是这样的:

var calendar = $('#calendar').fullCalendar({ 
    events: [{ id: '42', title: 'asdf', start: 1378771200, end: 1378944000, allDay: true, description: 'asdfasdf' }, 
     { id: '43', title: 'sadfsdf', start: 1378944000, end: 1379030400, allDay: true, description: 'asdfgadfasdfd' }, 
     { id: '44', title: 'asdf', start: 1379030400, end: 1379030400, allDay: true, description: 'asdfasdf' }] 
}) 

我开始认为fullcalendar的版本1.4.7和1.6.4之间,加载事件应该有所不同。当我看文档时,我看到了和我完全一样的东西。发送JSON字符串到事件不是主意吗?由ashx处理程序生成的JSON字符串是正确的,因此它在我直接复制和粘贴时起作用。

我在这里有点迷路,浪费了足够的时间寻找相关信息并阅读基本知识。终于来到这里,希望有人能指点我到正确的方向。

注意:我没有编写ashx代码,认为它并不重要,因为它创建了一个有效的JSON字符串,可以从fullcalendar-asp-net项目中找到它。

谢谢!

回答

2

最后,我最终修改了“fullcalendar-asp-net”项目中原始的ashx处理程序。我没有在foreach循环中向一个字符串添加事件,而是创建了一个事件列表并使用此代码将其转换为Json字符串。

System.Web.Script.Serialization.JavaScriptSerializer oSerializer = 
    new System.Web.Script.Serialization.JavaScriptSerializer(); 
    string sJSON = oSerializer.Serialize(tasksList); 

    context.Response.Write(sJSON); 

完整的ashx代码是这样的。

/// <summary> 
/// Summary description for JsonResponse 
/// </summary> 
public class JsonResponse : IHttpHandler, IRequiresSessionState 
{ 
    public void ProcessRequest(HttpContext context) 
    { 
     context.Response.ContentType = "text/plain"; 

     //CONVERT FROM UTC TIMESTAMP TO LOCAL DATETIME 
     DateTime start = ConvertFromTimeStamp(long.Parse(context.Request.QueryString["start"])); 
     DateTime end = ConvertFromTimeStamp(long.Parse(context.Request.QueryString["end"])); 

     List<int> idList = new List<int>(); 
     List<ImproperCalendarEvent> tasksList = new List<ImproperCalendarEvent>(); 

     //GENERATE JSON SERIALIZABLE EVENTS 
     foreach (CalendarEvent cevent in EventDAO.getEvents(start, end)) 
     { 
      tasksList.Add(new ImproperCalendarEvent 
      { 
       id = cevent.id, 
       title = cevent.title, 
       start = ConvertToTimestamp(Convert.ToDateTime(cevent.start).ToUniversalTime()).ToString(), 
       end = ConvertToTimestamp(Convert.ToDateTime(cevent.end).ToUniversalTime()).ToString(), 
       description = cevent.description, 
       allDay = cevent.allDay, 
      } 
       ); 
      idList.Add(cevent.id); 
     } 

     context.Session["idList"] = idList; 

     //SERIALIZE EVENTS TO STRING 
     System.Web.Script.Serialization.JavaScriptSerializer oSerializer = 
     new System.Web.Script.Serialization.JavaScriptSerializer(); 
     string sJSON = oSerializer.Serialize(tasksList); 

     //WRITE JSON TO RESPONSE OBJECT 
     context.Response.Write(sJSON); 
    } 

    /// <summary> 
    /// Converts a UTC transformed timestamp into a local datetime 
    /// </summary> 
    /// <param name="timestamp"></param> 
    /// <returns></returns> 
    private DateTime ConvertFromTimeStamp(long timestamp) 
    { 
     long ticks = (timestamp * 10000000) + 621355968000000000; 
     return new DateTime(ticks, DateTimeKind.Utc).ToLocalTime(); 
    } 

    private static readonly DateTime Epoch = new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc); 

    private static long ConvertToTimestamp(DateTime value) 
    { 
     TimeSpan elapsedTime = value - Epoch; 
     return (long)elapsedTime.TotalSeconds; 
    } 

    public bool IsReusable 
    { 
     get 
     { 
      return false; 
     } 
    } 
} 

当我问到这个问题,我正在使用网络的方法,而不是该处理程序,所以我的js代码来调用日历是不同的比它应该是。现在,我正在使用与完整日历官方文档中解释的方法完全相同的方法。喜欢;

$('#calendar').fullCalendar({ 
events: '/myfeed.php', }); // for me, that is "JsonResponse.ashx" 

现在它适用于我提到的所有脚本的最新版本。 Jquery 1.10.2,Jquery-UI 1.10.3和fullcalendar 1.6.4。它非常完美!

我希望其他人谁遇到了麻烦搞清楚这个问题,像我一样:)

由于不会吃亏!

+0

嘿,伙计,你介意分享你的整个解决方案吗?我修改了ashx代码,以反映你的,但仍然没有去:/ – esausilva

+0

没关系,我得到它的工作...愚蠢的qTip导致冲突....非常感谢您的代码,美丽的工作 – esausilva

+0

高兴地帮助! ;) – ilter

相关问题