javascript中的日歷小部件

Question

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

我想以不同的顏色在其中顯示日期數組，以及選擇一個日期。

我應該嘗試編輯源代碼，還是更好地使用一些庫自己做？

對於第一種情況，我想找到有關jQuery Datepicker源的一些很好的文檔。 對於第二個，我想找到一些庫，它創建了一個易於使用的日歷。

Answer 1

我想以不同的顏色在其中顯示日期數組，以及選擇一個日期。

jQueryUI的日期選擇器已經具有此功能。

瘋狂的演示

$(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）。 此外，很容易找到文檔，因此Googling也很容易找到它 。

最后，編輯源代碼絕不是一個好主意，因為升級將覆蓋您的更改。

Answer 4

看看extjs日歷-它看起來更具可擴展性-並且還有一個專業版（收費）

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