datepicker events next to calendar

datepicker events next to calendar

I would like to show events of current month next to the calendar. just like the following image. and next and previous button show events if they are available inside the script.


following is the script i am using.

  1. $(document).ready(function(e) {


    var events = [
        { Title: "Five K for charity", Date: new Date("03/13/2013") },
        { Title: "Dinner", Date: new Date("03/25/2013") },
        { Title: "Meeting with manager", Date: new Date("03/01/2013") }
    ];

    $("#cal").datepicker({
        beforeShowDay: function(date) {
            var result = [true, '', null];
            var matching = $.grep(events, function(event) {
                return event.Date.valueOf() === date.valueOf();
            });
           
            if (matching.length) {
                result = [true, 'highlight', null];
            }
            return result;
        },
        onSelect: function(dateText) {
            var date,
                selectedDate = new Date(dateText),
                i = 0,
                event = null;
           
            while (i < events.length && !event) {
                date = events[i].Date;

                if (selectedDate.valueOf() === date.valueOf()) {
                    event = events[i];
                    var array1 = new Array();
                     array1 = events.split( " " );
                     array1 = $.unique(array1);
                     $('#cal').append(array1+'');
                }
               
                i++;
            }
            if (event) {
                //alert(event.Title);
                $("#cal").append("<div>"+event.Title+"</div>");
               
            }
           
        }

    });

    });