尝试使用日期选择器创建事件日历javascript

我正在尝试使用javascript datepicker来帮助显示日历并能够选择日期以在该日期添加/查看/编辑事件。尝试使用日期选择器创建事件日历javascript

我现在有一个观点，即显示一个div的日期选择器压延

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Event Calendar</title> 
    <link rel="stylesheet" href="/Content/themes/base/jquery-ui.css"> 
    <script src="/Scripts/jquery-1.10.2.js"></script> 
    <script src="/Scripts/jquery-ui-1.10.4.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <script> 
     $(function() { 
      $("#datepicker").datepicker(); 
     }); 
    </script> 
</head> 
<body> 

Date: <div id="datepicker"></div> 
</body> 
</html>

我有一个模型，今天的事件将显示事件当天

namespace TryEvents2.Models 
{ 
    public class TodaysEventsViewModel 
    { 
     public List<Event> events; 
    } 
}

针对特定的模型事件

namespace TryEvents2.Models 
{ 
    [Bind(Exclude = "Id")] 
    public class Event 
    { 
     [ScaffoldColumn(false)] 
     public int Id { get; set; } 

     [DisplayName("Start Date")] 
     public DateTime Start { get; set; } 

     [DisplayName("End Date")] 
     public DateTime End { get; set; } 

     [DisplayName("Event Details")] 
     public string Message { get; set; } 

     [DisplayName("User")] 
     public string UserName { get; set; } 

     public void setEvent() 
     { 

     } 
    } 
}

数据库日历实体的模型

namespace TryEvents2.Models 
{ 
    public class CalendarEntities : DbContext 
    { 
    public DbSet<Event> Events { get; set; } 
    } 
}

我有以下

namespace TryEvents2.Controllers 
{ 
    public class HomeController : Controller 
    { 
     CalendarEntities db = new CalendarEntities(); 

     public ActionResult Index() 
     { 

      return View(); 
     } 

     public ActionResult About() 
     { 
      return View(); 
     } 

     public PartialViewResult GetWEntitiesByDate(DateTime date) 
     { 
      var entities = db.Events.Where(x => x.Start == date.Date); 
      var todaysEvents = new TodaysEventsViewModel {events = entities.ToList() }; 


      return PartialView("_TodaysEvents", todaysEvents); 
     } 


    } 
}

我遇到的困难会从这里开始创造必要的CRUD操作日历事件，这将是展示他们的观点方法的家庭控制器。我想让标准的日期选择器元素变大，并有一个弹出窗口来显示事件细节。

任何人都可以帮忙吗？

来源

2014-05-21 programmerNOOB

在我的一些经验做这样的事情是相当困难的jQuery UI日期选取器。如果你想有一个日历的作品作为一个日期选择器，并能够编辑的事件，并列出了不同的一天，我想你最好的解决办法是Arshaw Fullcalendar

FullCalendar

这是一个日历（不是一个日期选择器），但您可以创建自定义事件以使其作为日期选择日历用于您的目的。您可以选择日期来显示特定日期的事件。所以使你约会需要JSON这样

public ActionResult GetEvents() 
    { 

     //code to return the events from DB 

     return Json(evevtsObject,JsonRequestBehavior.AllowGet); 
    }

而对于事件上你需要调用从日历中的“事件”功能的日历加载您正在使用MVC。

events: function (startdate, enddate, callback) { 
      var url = "Controller/GetEvents"; 
      $.getJSON(url, 

       function (result) { 
        if (result != null) { 
         for (i in result) { 
          var calEvent = result[i]; 


          calEvent.startdate = new Date(parseInt(calEvent.startdate.replace("/Date(", "").replace(")/", ""), 10)); 
          calEvent.end = new Date(parseInt(calEvent.enddate.replace("/Date(", "").replace(")/", ""), 10)); 
         } 
        } 

        var calevents = result; 


        callback(calevents); 


       }); 
     }

希望这会有所帮助。

来源

2014-05-27 00:18:17

这确实有很大的帮助，一些方法看起来像从数据库中返回和写入信息的方法是什么？ – programmerNOOB

那么我写的是从数据库中检索“事件”到日历，并将它们显示为fullcalendar主页。 1.你需要一个来自4列数据库的表来启动：（id，startdate，enddate，extracolumn）。 2.您需要创建对数据库的查询并返回json以json格式的事件使用fullcalendar事件函数将事件加载到日历中。并创建CRUD取决于您的需要 –

我确实创建了4列的表。我只是遇到了其余的问题，我知道实体框架允许自动化的CRUD方法正确 – programmerNOOB

尝试使用日期选择器创建事件日历javascript

回答

相关问题