calendar widget in javascript

Question

What is the best way to create a calendar with JavaScript like the jquery Datepicker where I can add some more functionality?

I want to display some arrays of dates in different colors in it as well as selecting a date.

Shall I try to edit the source code, or better, use some library and do it myself?

For the first case I would like to find some good documentation of the jquery Datepicker source. For the second I would like to find some library, which creates a good and easy to use calendar.

Answer 1

The jQuery Datepicker widget already provides enough functionality for a calendar. Adding custom colors is more of a style (thus CSS) thing. Also, documentation is very easy to find, so is Googling for it.

Lastly, editing the source code is never a good idea, since an upgrade will overwrite your changes.

Answer 2

If you don't mind writing some code of your own, you could try my calendar-logic.js.

It does no UI at all. You'll get full control of the look and behaviour of the calendar, without having to worry about the math behind how many weeks there are in a month, etc.

Answer 3

Have a look at the extjs calendar - it looks far more extensible - and there is a pro version (paid for ) as well

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

Answer 4

I want to display some arrays of dates in different colors in it as well as selecting a date.

jQueryUI's datepicker already have this.

crazy demo

$(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];
        }
    });
});​

and you could do more. Try reading event-beforeShowDay