title: Unable to cleanly upgrade from old jscalendar to new jscal2 version
body: <p><strong>Why I need to upgrade</strong><br>
  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 - </p>
  
  <blockquote>
    <ul>
    <li><p>Note that this is a whole new product.</p></li>
    <li><p>Note that it is not compatible with our old calendar project.</p></li>
    </ul>
  </blockquote>
  
  <p><strong>Problem</strong><br>
  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 - <a href="http://www.dynarch.com/projects/calendar/discussion/" rel="nofollow">http://www.dynarch.com/projects/calendar/discussion/</a> 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.</p>
  
  <p>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 <code>function showCalendar()</code> which calls <code>var cal = new Calendar()</code>, like this - </p>
  
  <pre><code>function setActiveStyleSheet()
  function selected()
  function closeHandler()
  function showCalendar(){
      ...
      //some lines of code
      ... 
      var cal = new Calendar(1, null, selected, closeHandler);
      ...
      //some lines of code
      ... 
  }
  ....
  </code></pre>
  
  <p>Check the same here <a href="http://pastebin.com/QHAb0WdB" rel="nofollow">http://pastebin.com/QHAb0WdB</a> </p>
  
  <p>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 - </p>
  
  <pre><code>_dynarch_popupCalendar is not defined
  [Break On This Error] if (_dynarch_popupCalendar != null) { 
  </code></pre>
  
  <p>I guessed, I could restrict the past date by adding the <code>onSelect</code> param to the new Calendar initiation like this - </p>
  
  <pre><code>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();
  }
  </code></pre>
  
  <p>But I did not try anything after modifying in the helper script failed. </p>
  
  <p>Please let me know if you have idea about the correct upgrading process. I am not sure what I am missing something. </p>
  
  <p>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.</p>
  
  <p><strong>Update</strong><br>
  Making it simpler now!!</p>
  
  <p>First of all a correction, this is not an upgrade, because the doc of jscal2 (the one which I want to use) says - </p>
  
  <blockquote>
    <ul>
    <li><p>Note that this is a whole new product.</p></li>
    <li><p>Note that it is not compatible with our old calendar project.</p></li>
    </ul>
  </blockquote>
  
  <p>I understood that the minimum needed to invoke a calendar is - </p>
  
  <pre><code>Calendar.setup({
      cont          : "calendar-container"  // a cont or a trigger
  });
  </code></pre>
  
  <blockquote>
    <p>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.</p>
  </blockquote>
  
  <p>I think I need to write that code to display a popup calendar, like this - </p>
  
  <pre><code>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.
      ... 
  }
  </code></pre>
  
  <p>But, I did not see any such code in the documentation. I tried with this code, but does not work - </p>
  
  <pre><code>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.  
  }
  </code></pre>
  
  <p>Any idea guys?</p>
  
  <p>Thanks</p>
  
  <p><strong>Bounty Started</strong><br>
  Have found a not-so-good, unoptimized solution, posted it in answer, but still looking for a proper solution.</p>