Hi everyone,

Sorry if there is a solution for my question in this forum but I don´t know how to search exactly. I´m a PHP programmer but not so good in Javascript. I´m tring to build an agenda like Google Agenda and I´m using this solution:

http://www.web-delicious.com/jquery-event-calendar/

My question is: when I click at any time a box is show and I have to fill the input field with the name of the event. I would like to use de autocomplete at this input field, using this solution from JQuery:

http://jqueryui.com/demos/autocomplete/

I have made many changes at the code but doesn´t work. When I try to call de autocomplete nothing happens.

This is the code from event box:

HTML Code:
function quickadd(start, end, isallday, pos) {
    if ((!option.quickAddHandler && option.quickAddUrl == "") || option.readonly) {
        return;
    }
    var buddle = $("#bbit-cal-buddle");
    if (buddle.length == 0) {
        var temparr = [];
        temparr.push('<div id="bbit-cal-buddle" style="z-index: 180; width: 400px;visibility:hidden;" class="bubble">');
        temparr.push('<table class="bubble-table" cellSpacing="0" cellPadding="0"><tbody><tr><td class="bubble-cell-side"><div id="tl1" class="bubble-corner"><div class="bubble-sprite bubble-tl"></div></div>');
        temparr.push('<td class="bubble-cell-main"><div class="bubble-top"></div><td class="bubble-cell-side"><div id="tr1" class="bubble-corner"><div class="bubble-sprite bubble-tr"></div></div>  <tr><td class="bubble-mid" colSpan="3"><div style="overflow: hidden" id="bubbleContent1"><div><div></div><div class="cb-root">');
        temparr.push('<table class="cb-table" cellSpacing="0" cellPadding="0"><tbody><tr><th class="cb-key">');
        temparr.push(i18n.xgcalendar.time, ':</th><td class=cb-value><div id="bbit-cal-buddle-timeshow"></div></td></tr><tr><th class="cb-key">');
        temparr.push(i18n.xgcalendar.content, ':</th><td class="cb-value"><div class="textbox-fill-wrapper"><div class="textbox-fill-mid"><input id="bbit-cal-what" class="textbox-fill-input"/></div></div><div class="cb-example">');
        temparr.push(i18n.xgcalendar.example, '</div></td></tr></tbody></table><input id="bbit-cal-start" type="hidden"/><input id="bbit-cal-end" type="hidden"/><input id="bbit-cal-allday" type="hidden"/><input id="bbit-cal-quickAddBTN" value="');
        temparr.push(i18n.xgcalendar.create_event, '" type="button"/>&nbsp; <SPAN id="bbit-cal-editLink" class="lk">');
        temparr.push(i18n.xgcalendar.update_detail, ' <StrONG>&gt;&gt;</StrONG></SPAN></div></div></div><tr><td><div id="bl1" class="bubble-corner"><div class="bubble-sprite bubble-bl"></div></div><td><div class="bubble-bottom"></div><td><div id="br1" class="bubble-corner"><div class="bubble-sprite bubble-br"></div></div></tr></tbody></table><div id="bubbleClose1" class="bubble-closebutton"></div><div id="prong2" class="prong"><div class=bubble-sprite></div></div></div>');
        var tempquickAddHanler = temparr.join("");
        temparr = null;
        $(document.body).append(tempquickAddHanler);
        buddle = $("#bbit-cal-buddle");
        var calbutton = $("#bbit-cal-quickAddBTN");
        var lbtn = $("#bbit-cal-editLink");
        var closebtn = $("#bubbleClose1").click(function() {
            $("#bbit-cal-buddle").css("visibility", "hidden");
            realsedragevent();
        });
        calbutton.click(function(e) {
            if (option.isloading) {
                return false;
            }
            option.isloading = true;
            var what = $("#bbit-cal-what").val();
            var datestart = $("#bbit-cal-start").val();
            var dateend = $("#bbit-cal-end").val();
            var allday = $("#bbit-cal-allday").val();
            var f = /^[^\$\<\>]+$/.test(what);
            if (!f) {
                alert(i18n.xgcalendar.invalid_title);
                $("#bbit-cal-what").focus();
                option.isloading = false;
                return false;
            }
            var zone = new Date().getTimezoneOffset() / 60 * -1;
            var param = [{
                "name": "CalendarTitle", 
                value: what
            },
{
                "name": "CalendarStartTime", 
                value: datestart
            },
{
                "name": "CalendarEndTime", 
                value: dateend
            },
{
                "name": "IsAllDayEvent", 
                value: allday
            },
{
                "name": "timezone", 
                value: zone
            }];

            if (option.extParam) {
                for (var pi = 0; pi < option.extParam.length; pi++) {
                    param[param.length] = option.extParam[pi];
                }
            }

            if (option.quickAddHandler && $.isFunction(option.quickAddHandler)) {
                option.quickAddHandler.call(this, param);
                $("#bbit-cal-buddle").css("visibility", "hidden");
                realsedragevent();
            }
            else {
                $("#bbit-cal-buddle").css("visibility", "hidden");
                var newdata = [];
                var tId = -1;
                option.onBeforeRequestData && option.onBeforeRequestData(2);
                $.post(option.quickAddUrl, param, function(data) {
                    if (data) {
                        if (data.IsSuccess == true) {
                            option.isloading = false;
                            option.eventItems[tId][0] = data.Data;
                            option.eventItems[tId][8] = 1;
                            render();
                            option.onAfterRequestData && option.onAfterRequestData(2);
                        }
                        else {
                            option.onRequestDataError && option.onRequestDataError(2, data);
                            option.isloading = false;
                            option.onAfterRequestData && option.onAfterRequestData(2);
                        }

                    }

                }, "json");

                newdata.push(-1, what);
                var sd = strtodate(datestart);
                var ed = strtodate(dateend);
                var diff = DateDiff("d", sd, ed);
                newdata.push(sd, ed, allday == "1" ? 1 : 0, diff > 0 ? 1 : 0, 0);
                newdata.push(-1, 0, "", ""); 
                tId = Ind(newdata);
                realsedragevent();
                render();
            }
        });
        lbtn.click(function(e) {
            if (!option.EditCmdhandler) {
                alert("EditCmdhandler" + i18n.xgcalendar.i_undefined);
            }
            else {
                if (option.EditCmdhandler && $.isFunction(option.EditCmdhandler)) {
                    option.EditCmdhandler.call(this, ['0', $("#bbit-cal-what").val(), $("#bbit-cal-start").val(), $("#bbit-cal-end").val(), $("#bbit-cal-allday").val()]);
                }
                $("#bbit-cal-buddle").css("visibility", "hidden");
                realsedragevent();
            }
            return false;
        });
        buddle.mousedown(function(e) {
            return false
        });
    }
			
    var dateshow = CalDateShow(start, end, !isallday, true);			
    var off = getbuddlepos(pos.left, pos.top);
    if (off.hide) {
        $("#prong2").hide()
    }
    else {
        $("#prong2").show()
    }
    $("#bbit-cal-buddle-timeshow").html(dateshow);
    var calwhat = $("#bbit-cal-what").val("");
    $("#bbit-cal-allday").val(isallday ? "1" : "0");
    $("#bbit-cal-start").val(dateFormat.call(start, i18n.xgcalendar.dateformat.fulldayvalue + " HH:mm"));
    $("#bbit-cal-end").val(dateFormat.call(end, i18n.xgcalendar.dateformat.fulldayvalue + " HH:mm"));
    buddle.css({
        "visibility": "visible", 
        left: off.left, 
        top: off.top
    });			
    calwhat.blur().focus(); //add 2010-01-26 blur() fixed chrome 
    $(document).one("mousedown", function() {
        $("#bbit-cal-buddle").css("visibility", "hidden");
        realsedragevent();
    });
    return false;
}
Can anyone help me? Any orientation will be wonderful!