JavaScript 中的日历小部件

Question

使用 JavaScript 创建日历（例如 jquery Datepicker ）的最佳方法是什么，我可以在其中添加更多功能？

我想在其中显示一些不同颜色的日期数组以及选择一个日期。

我应该尝试编辑源代码，还是更好地使用一些库并自己完成？

对于第一种情况，我想找到一些关于 jquery Datepicker 源的良好文档。对于第二个，我想找到一些库，它可以创建一个良好且易于使用的日历。

Answer 1

我想在其中显示一些不同颜色的日期数组并选择一个日期。

jQueryUI 的 datepicker 已经有了这个。

疯狂演示

$(function() {
    var someDates = ['10/8/2010', '10/28/2010', '10/30/2010']; // the array of dates
    
    $("#datepicker").datepicker({
        beforeShowDay: function(date) {
            for (var i = 0; i < someDates.length; i++) {
                if (new Date(someDates[i]).toString() == date.toString()) {

                    return [true,'someDates']; // someDates here is a class
                    // with that added class you could do your style..
                    // html would then be rendered something like this,
                    // <td class="someDates"><a href="">8</a></td>
                }
            }
            return [true];
        }
    });
});​

，你可以更多。尝试阅读 event-beforeShowDay

Answer 2

如果您不介意自己编写一些代码，可以尝试我的 calendar-logic.js 。

它根本没有 UI。您将完全控制日历的外观和行为，而不必担心一个月有多少周等背后的数学。

Answer 3

jQuery Datepicker 小部件已经为日历提供了足够的功能。添加自定义颜色更多的是一种样式（因此是 CSS）的事情。此外，文档很容易找到， 也是如此谷歌搜索它。

最后，编辑源代码从来都不是一个好主意，因为升级会覆盖您的更改。

Answer 4

看看 extjs 日历 - 它看起来更具可扩展性 - 并且还有一个专业版本（付费）

http://www.sencha.com/blog/2010/09/08/ext-js-3-3-calendar-component/