无法从旧的jscalendar彻底升级到新的jscal2版本

Question

Why I need to upgrade
I need to have the feature of disabling of navigating to dates past some date, so I am considering upgrading from jscalendar (http://www.dynarch.com/projects/calendar/old/) to jscal2 (http://www.dynarch.com/projects/calendar/) in my project. But in homepage and documentation of the new jscal2, following things are mentioned -

• Note that this is a whole new product.

• Note that it is not compatible with our old calendar project.

Problem
So, I am confused, if an upgrade with minimal changes in my current project is possible and if so how exactly to do that. I have already posted a comment in the site - http://www.dynarch.com/projects/calendar/discussion/ and waiting for some reply. In the meantime, I thought those who have used the product might be able to help, so here is my question.

The existing code of my project uses jscalendar version 1.51 (I see there is this line written in the calendar.js file - calendar.js,v 1.51). There are some lines of these helper code, which contains the function showCalendar() which calls var cal = new Calendar() , like this -

function setActiveStyleSheet()
function selected()
function closeHandler()
function showCalendar(){
    ...
    //some lines of code
    ... 
    var cal = new Calendar(1, null, selected, closeHandler);
    ...
    //some lines of code
    ... 
}
....

Check the same here http://pastebin.com/QHAb0WdB

But I don't see that helper script in the new version's demos which I downloaded today. I tried by removing inclusion of all the js/css files of the old version, included files of the new version, but keeping only the same jscalendar.js, but it gives this js error -

_dynarch_popupCalendar is not defined
[Break On This Error] if (_dynarch_popupCalendar != null) { 

I guessed, I could restrict the past date by adding the onSelect param to the new Calendar initiation like this -

onSelect: function() {
   var date = Calendar.intToDate(this.selection.get());
   LEFT_CAL.args.min = date; // setting minimum date, so as to not allow browsing past this date
   LEFT_CAL.redraw();
   this.hide();
}

But I did not try anything after modifying in the helper script failed.

Please let me know if you have idea about the correct upgrading process. I am not sure what I am missing something.

I had thought it would be as simple as just changing inclusion of the js and may be css files and no change would be needed in code. I would just need to set some more config parameters corresponding to disabling the dates as I desire.

Update
Making it simpler now!!

First of all a correction, this is not an upgrade, because the doc of jscal2 (the one which I want to use) says -

• Note that this is a whole new product.

• Note that it is not compatible with our old calendar project.

I understood that the minimum needed to invoke a calendar is -

Calendar.setup({
    cont          : "calendar-container"  // a cont or a trigger
});

All arguments are optional. However, you should provide one of cont (for inline calendars) or trigger for popup calendars, or else provide your own code to display a popup calendar. We'll see how this can be done later.

I think I need to write that code to display a popup calendar, like this -

function showCalendar(){
    ...
    //some lines of code
    ... 
    var cal = new Calendar();
    ...
    //some code to display the calendar, based on the details already being passed to this function - which button was clicked, where to attach the calendar, etc.
    ... 
}

But, I did not see any such code in the documentation. I tried with this code, but does not work -

function trigger()
{

cal = new Calendar({
        inputField: "startdate",
        dateFormat: "%B %d, %Y",
        bottomBar: false,
        showTime:true
        }
});
cal.redraw(); //blind try - does not work, but it does not give any errors. But I 
don't see any other proper function to do this in the doc.  
}

Any idea guys?

Thanks

Bounty Started
Have found a not-so-good, unoptimized solution, posted it in answer, but still looking for a proper solution.

Answer 1

Answering myself, but still looking for a proper solution. I wrote this code to keep using the showCalendar() function after moving from jscalendar to jsCal2 -

var instance = null; //tracker of calendar instances

function showCalendar(id, format, showsTime, showsOtherMonths) 
{
    //some code here


    //create a dummy holder so as to place the calendar inside, so that I can use the "cont" attribute. (Have to use either cont or trigger. )
    if(instance!=null)
    {
        instance.hide();
        instance = null;
        $("table.DynarchCalendar-topCont").remove(); //I am having to kill the earlier calendar instance on every calendar display call, because otherwise multiple instances were getting created in DOM, causing confusion. 

        //get date in input field - since earlier instance is killed

    }


if($("div#container").length == 0)
    {
        $('body').append('<div id="container" style="position: absolute;">&nbsp;</div>');
    }


        cal = new Calendar({
                cont: "container",
                inputField: id,
                dateFormat: format,
                bottomBar: false,
                min: minDateLimit,
                showTime: showsTime,
                weekNumbers: true,
                selection : intDate,
                onSelect: function() {

                    //set selected value into attached input field
                    var selectedDate = this.selection.get();
                    date = Calendar.intToDate(selectedDate);
                    date = Calendar.printDate(date, format);
                    $('#'+id).val(date);

                    this.hide();
                },
                onBlur: function() { //clicking outside hide calendar
                    this.hide();
            }
        });

    cal.moveTo(intDate); //since new instance of calendar is being created everytime, need to move to the date 
    cal.popup(id,"Br");
    instance = cal;

    return false;
}

I tried a lot for some proper way to initiate a popup calendar from inside an inline onclick function (showcalendar() function here). But, in the documentation of new jscal2 calendar, the initiation of calendar supports only binding method, and no way to do the same from inside a function which is called from an inline onclick. Here is the documentation - http://www.dynarch.com/projects/calendar/doc/ (check the trigger and cont parameters, one of which is mandatory). I applied some dirty fix to do the same and as a result had to write code to do some things which are otherwise automatically done by the plugin (eg display of selected date = date on input field, on display of calendar).