使用JavaScript / JQuery渲染交互式时间表

时间:2012-02-15 14:03:37

标签: c# javascript jquery asp.net razor

我正在使用JavaScript / ASP.NET / C#/ CSS / HTML / Compact SQL服务器创建一个网站。

我创建了大部分网站和基本的数据库设计,我想完全测试。

为此,我想创建一个JavaScript / JQuery前端。我希望拥有的基本功能与Google日历完全相同(至少从一开始)。

我非常希望用户能够通过拖放选择多次,当用户拖拽并下降到特定时间时,系统会提示他们输入任务的名称。

然后,用户单击“提交”,数据将保存在数据库中 - 包括用户ID,事件开始时间/持续时间和事件名称。

我的问题很模糊,但最好的办法是什么呢?我确切地知道我想做什么,但我的问题是:

  • 使用JQuery / JavaScript创建交互式时间表 - 是否有任何现有的渲染效果,我可以使用类似的数据库整合/创意吗?
  • 如何在数据库中保存所有这些数据?如果它是一个表格我可以传递数据,但因为它不是我不知道如何做到这一点?

非常感谢,如果我的任何细节太模糊,请提出问题,我会详细说明。

2 个答案:

答案 0 :(得分:1)

已经有一些jQuery插件可以满足你的需求:

FullCalendar(请务必查看页面底部的所有演示,更具体地说是the drag and drop oneFrontier Calendar
DhtmlxSchedule(不是jquery,但可能是最先进的)

如果您不想使用其中一个插件,至少查看这些插件的代码可能是一个好的开始。

  

如何在数据库中保存所有这些数据?如果它是一种形式我   可以传递数据,但因为它不是我不知道这怎么可能   可以吗?

您只需要使用您的数据发出ajax请求即可。无需使用表单,只需发送帖子或获取请求到您的处理页面。

答案 1 :(得分:0)

我不确定日历结构,但您可以使用jQuery Grid plugin,尽管我建议您生成日历结构和初始数据服务器端,并且可能使用AJAX加载它。

所有其他互动都可以使用jQuery UI进行,包括拖拽和放大使用AJAX删除功能以存储对数据的更新。