Embed the jQuery calendar in the page, outside an input field

Question

1. I would like to have the jQuery calendar in my application but not as a datepicker. Is it possible to embed it in the page?

2. I would like to add custom data to each date. Is this possible?

Answer 1

I have an example I made a few weeks ago for giving a date a color and hover. You can change this code the way you want it! A LIVE example: http://marc2.nl/workshops.html (this demo does give it a background color and adds a hover to the links). Intead of giving it a background color or add a hover you can add an image to it.

Initializing:

var calDates = {"36":{"datetime":"2013-02-18 11:02:22","name":"name1","color":"e8b1b1","url":"url1"},"37":{"datetime":"2013-01-22 11:03:08","name":"name2","color":"9fd69f","url":"url2"}};

$("#calendar").datepicker({
    onChangeMonthYear : updateDates,
    onSelect : updateDates
});
updateDates();

Loop through the dates and give it the right color:

function updateDates()
{
    // Timeout is needed otherwise jQuery UI has not yet updates the month
    setTimeout(function(){
        for( var k in calDates )
        {
            var obj = calDates[k], 
                yearMonthDay = obj.datetime.split(" ")[0].split("-"),
                time = obj.datetime.split(" ")[1];

            $("#calendar [data-month='" + (parseInt(yearMonthDay[1]) - 1) + "'][data-year='" + yearMonthDay[0] + "'] a").each(function(){
                if( $(this).text() == yearMonthDay[2])
                {
                    $(this)
                        .css({
                            backgroundColor : "#" + obj.color,
                            cursor: "pointer",
                            position : "relative"
                        })
                        .unbind("click")
                        .attr("href", obj.url)
                        .bind("click", function(){
                            document.location = $(this).attr("href");
                        })
                        .bind("mouseenter", function(){
                            $(this).find(".hover").show();
                        })
                        .bind("mouseleave", function(){
                            $(this).find(".hover").hide();
                        })
                        .append("<div class='hover'><strong>" + obj.name + "</strong><br />" + time + "</div>");

                }
            });
        }
    }, 10);
}

Answer 2

So, what you really want is a Calendar widget ? You can check Google for "jquery calendar". This is the first one I found:

http://arshaw.com/fullcalendar/

Here's quite a big list of options:

http://www.tripwiremagazine.com/2012/11/jquery-calendar-date-pickers.html

And another list of five:

http://www.devcurry.com/2010/06/5-jquery-calendar-plugins-that-can-be.html