CODEWITHSUNDEEP
jqueryjquery-ui
traedet
traedet

Reputation: 1

Datepicker events handler

I have got this addon to my datepicker but I dont want it to give me an alertbox. I want it to show a div under the datepicker with the event on that day.

I don't know how to change the if (event) to a <div> instead of an alert.

$(function(){
    var events = [ 
        { Title: "Five K for charity", Date: new Date("09/13/2011") }, 
        { Title: "Dinner", Date: new Date("09/25/2011") }, 
        { Title: "Meeting with manager", Date: new Date("09/01/2011") }
    ];
    $("#datepicker").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];
                }
                i++;
            }
            if (event) {
                alert(event.Title);
            }
        }
    });    
});

Upvotes: 0

Views: 445

Answers (1)

Sander
Sander

Reputation: 13431

well, i don't know your markup (html) but here is how you can do it then...

instead of alert(event.Title); try this:

var eventContainer = ($('#eventContainer').length) ? $('#eventContainer').empty() : $('<div id="eventContainer"></div>');
var eventItem = $('<div/>');
eventItem.text(event.Title);
eventContainer.append(eventItem);
$("#datepicker").after(eventContainer);

edit I added the code to a jsFiddle so you can test around with it yourself http://jsfiddle.net/ambiguous/TgZQJ/11/

Upvotes: 2

Related Questions