Question

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

我目前有一个视图，显示div中的datepicker日历

<!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日历事件所需的方法以及将显示它们的视图时遇到了困难。我想要使标准的datepicker元素更大，并为事件详细信息显示提供一个弹出窗口。

任何人都可以帮忙吗？

Answer 1

在我的一些经验中，使用jquery UI datepicker进行类似的操作非常困难。如果您希望日历作为日期选择器工作，并且能够根据当天编辑事件和节目，我认为最适合您的解决方案是Arshaw Fullcalendar

FullCalendar

这是一个日历（不是日期选择器），但您可以创建自定义事件，使其作为日期选择器日历用于您的目的。您可以选择从特定日期渲染事件的日期。您正在使用MVC，因此需要使用JSON这样的日期

public ActionResult GetEvents()
    {

       //code to return the events from DB

        return Json(evevtsObject,JsonRequestBehavior.AllowGet);  
    }

要在日历上加载事件，您需要调用＆＃34;事件＆＃34;日历中的功能。

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);


                });
        }

希望这会有所帮助。

尝试使用datepicker javascript创建活动日历

1 个答案: