Our team had an MVC 5 project recently with this need. The project required the ability to display a calendar of events from a database as well as add and delete existing calendar items. We looked at DayPilot Lite's & Dhtmlx's JavaScript version 4.1 open source versions.
What we found
Both have JavaScript versions and .Net WebForms and/or MVC integrated versions however for our project we desired the JavaScript versions over the MVC integrated versions as we felt it was cleaner and fit more with our development model (We don't tend to use 3rd party integrated controls). JavaScript was the only free version offered by Dhtmlx while DayPilot offers the lite open source version for WebForms and MVC.
Both have nice tutorials available on their site and on various sites like code project.
What we chose
We used dhtmlx's JavaScript Event Calendar / Ajax Scheduler in an ASP.Net MVC 5 app as it had a few more features in it's open source version that we desired. Namely the color coding option was ready to go out of the box and we found the API very flexible, exposed events and customization options to be very powerful. We have been very happy with it and found it was easy to use their documentation site and samples site to figure out all that we needed to do. We did not use their data connector as we found straight AJAX calls worked easy enough for our scenario.
Getting started with dhtmlx
Here's a couple of articles on code project that we used to get us going with dhtmlx.
In case the links stop working the author is Stas Wolski for both of them. Both examples are old but still effective. Finally, we used their online demos (can be downloaded) and online documentation site as well.
Knowledge share
One of our biggest tricks to the calendar was the date format matching (or mismatch in our initial case).
We used the format of scheduler.config.xml_date = "%m/%d/%Y %H:%i".
For dates coming from our MVC View Model (VM) we made sure to convert them to string formats of short date (@Model.StartDate.ToString("d")) if it was a date in the VM.
If the VM passed a date as a string then we made sure the controller used the following format example (item.StartDate.ToString("MM/dd/yyyy HH:mm:ss")).
Some potential helpful API's we used that might just be of use.
Reacting to calendar clicks - take a look at scheduler.attachEvent
Changing the Hours Scale look - take a look at scheduler.templates.hour_scale
Need to customize the view of different event types - take a look at scheduler.renderEvent and scheduler.templates.event_class
Hiding/Ignoring Weekends in the calendar - take a look at scheduler.ignore_week
Need to have a confirm dialog for a calendar action - take a look at scheduler._dhtmlx_confirm
Minifying Issue
We did find one gotcha with the JS version and MVC in particular that we didn't resolve. If you bundle and minify the dhtmlx's scripts the scheduler breaks as the scheduler object is renamed and becomes undefined. We simply setup the scripts to bundle but not to minify by using Bundle instead of ScriptBundle.
I'm sure there is a way to solve that but we weren't too worried about this in our case as this part of the app was not going to be getting high amounts of traffic....
发布评论
评论（2）
我们团队最近有一个 MVC 5 项目就有这个需求。该项目需要能够显示数据库中的事件日历以及添加和删除现有日历项目。我们查看了 DayPilot Lite 和Dhtmlx 的 JavaScript 版本 4.1 开源版本。
我们发现的
两者都有 JavaScript 版本和 .Net WebForms 和/或 MVC 集成版本，但是对于我们的项目，我们希望 JavaScript 版本超过 MVC 集成版本，因为我们觉得它更干净并且更适合我们的开发模型（我们不倾向于使用第三方集成控件）。 JavaScript 是 Dhtmlx 提供的唯一免费版本，而 DayPilot 则为 WebForms 和 MVC 提供精简版开源版本。
两者在其网站和代码项目等各种网站上都有很好的教程。
我们选择的内容
我们在 ASP.Net MVC 5 应用程序中使用了 dhtmlx 的 JavaScript 事件日历/Ajax 调度程序，因为它的开源版本中还有一些我们想要的功能。也就是说，颜色编码选项已准备好开箱即用，我们发现 API 非常灵活，公开的事件和自定义选项非常强大。我们对此非常满意，并发现使用他们的文档站点和示例站点很容易找出我们需要做的所有事情。我们没有使用他们的数据连接器，因为我们发现直接 AJAX 调用对于我们的场景来说足够简单。
dhtmlx 入门
这里有几篇关于代码项目的文章，我们用它们来开始使用 dhtmlx。
http://www.codeproject.com/Articles/148500/ ASP-NET-MVC-Application 的事件日历
http://www.codeproject.com/Articles/249921/How-to-Build-a-Room-Booking-Calendar-with-dhtmlxSc
如果链接停止工作，作者对于他们俩来说都是Stas Wolski。
这两个例子都很古老但仍然有效。最后，我们使用了他们的在线演示（可以下载）和在线文档网站。
知识共享
我们对日历的最大技巧之一是日期格式匹配（或在我们最初的情况下不匹配）。
我们使用的格式是
scheduler.config.xml_date = "%m/%d/%Y %H:%i"。对于来自 MVC 视图模型 (VM) 的日期，如果它是虚拟机。
如果虚拟机将日期作为字符串传递，那么我们确保控制器使用以下格式示例 (
item.StartDate.ToString("MM/dd/yyyy HH:mm:ss"))。我们使用的一些潜在有用的 API 可能只是有用的。
对日历点击做出反应 - 看一下
scheduler.attachEvent更改小时刻度外观 - 看一下
scheduler.templates.hour_scale需要自定义不同事件类型的视图- 查看
scheduler.renderEvent和scheduler.templates.event_class在日历中隐藏/忽略周末 - 查看
scheduler.ignore_week需要有一个日历操作的确认对话框 - 看看
scheduler._dhtmlx_confirm缩小问题
我们确实发现了 JS 版本和 MVC 的一个问题，特别是我们没有发现的问题解决不了。如果您捆绑并缩小 dhtmlx 的脚本，则调度程序会因调度程序对象被重命名并变得未定义而中断。我们只需使用
Bundle而不是ScriptBundle将脚本设置为捆绑，而不是缩小。我确信有办法解决这个问题，但在我们的案例中我们并不太担心这个问题，因为应用程序的这一部分不会获得大量流量......
Our team had an MVC 5 project recently with this need. The project required the ability to display a calendar of events from a database as well as add and delete existing calendar items. We looked at DayPilot Lite's & Dhtmlx's JavaScript version 4.1 open source versions.
What we found
Both have JavaScript versions and .Net WebForms and/or MVC integrated versions however for our project we desired the JavaScript versions over the MVC integrated versions as we felt it was cleaner and fit more with our development model (We don't tend to use 3rd party integrated controls). JavaScript was the only free version offered by Dhtmlx while DayPilot offers the lite open source version for WebForms and MVC.
Both have nice tutorials available on their site and on various sites like code project.
What we chose
We used dhtmlx's JavaScript Event Calendar / Ajax Scheduler in an ASP.Net MVC 5 app as it had a few more features in it's open source version that we desired. Namely the color coding option was ready to go out of the box and we found the API very flexible, exposed events and customization options to be very powerful. We have been very happy with it and found it was easy to use their documentation site and samples site to figure out all that we needed to do. We did not use their data connector as we found straight AJAX calls worked easy enough for our scenario.
Getting started with dhtmlx
Here's a couple of articles on code project that we used to get us going with dhtmlx.
http://www.codeproject.com/Articles/148500/Event-Calendar-for-an-ASP-NET-MVC-Application
http://www.codeproject.com/Articles/249921/How-to-Build-a-Room-Booking-Calendar-with-dhtmlxSc
In case the links stop working the author is Stas Wolski for both of them.
Both examples are old but still effective. Finally, we used their online demos (can be downloaded) and online documentation site as well.
Knowledge share
One of our biggest tricks to the calendar was the date format matching (or mismatch in our initial case).
We used the format of
scheduler.config.xml_date = "%m/%d/%Y %H:%i".For dates coming from our MVC View Model (VM) we made sure to convert them to string formats of short date (
@Model.StartDate.ToString("d")) if it was a date in the VM.If the VM passed a date as a string then we made sure the controller used the following format example (
item.StartDate.ToString("MM/dd/yyyy HH:mm:ss")).Some potential helpful API's we used that might just be of use.
Reacting to calendar clicks - take a look at
scheduler.attachEventChanging the Hours Scale look - take a look at
scheduler.templates.hour_scaleNeed to customize the view of different event types - take a look at
scheduler.renderEventandscheduler.templates.event_classHiding/Ignoring Weekends in the calendar - take a look at
scheduler.ignore_weekNeed to have a confirm dialog for a calendar action - take a look at
scheduler._dhtmlx_confirmMinifying Issue
We did find one gotcha with the JS version and MVC in particular that we didn't resolve. If you bundle and minify the dhtmlx's scripts the scheduler breaks as the scheduler object is renamed and becomes undefined. We simply setup the scripts to bundle but not to minify by using
Bundleinstead ofScriptBundle.I'm sure there is a way to solve that but we weren't too worried about this in our case as this part of the app was not going to be getting high amounts of traffic....
检查这个
http://www .codeproject.com/Articles/404647/AJAX-Event-Calendar-Scheduler-for-ASP-NET-MVC-3-in
我将在下一个项目中使用它
Check this
http://www.codeproject.com/Articles/404647/AJAX-Event-Calendar-Scheduler-for-ASP-NET-MVC-3-in
I will use it in next project