JSCalendarContrib < TWiki

---+!! JS Calendar Contrib
<!--
   Contributions to this contrib package are appreciated. Please update this page at
   http://twiki.org/cgi-bin/view/Plugins/JSCalendarContrib or provide feedback at
   http://twiki.org/cgi-bin/view/Plugins/JSCalendarContribDev.
   If you are a TWiki contributor please update the extension in the SVN repository.
-->
<sticky>
<div style="float:right; background-color:#EBEEF0; margin:0 0 20px 20px; padding: 0 10px 0 10px;">
%TOC{title="Page contents"}%
</div>
</sticky>
%SHORTDESCRIPTION%

---++ Deprecation Notice and Migration

This [[http://www.dynarch.com/projects/calendar/][Mishoo JSCalendar]] based DHTML pop-up calendar is now repackaged as DatePickerPlugin. Simply installing the TWiki:Plugins.DatePickerPlugin is not enough:
   * Extensions that have a dependency on !JSCalendarContrib need to be updated to version 2012-12-12 or later:
      * ChecklistTablePlugin - TWiki:Plugins.ChecklistTablePlugin on twiki.org
      * DateFieldPlugin - TWiki:Plugins.DateFieldPlugin on twiki.org
      * EditTablePlugin - TWiki:Plugins.EditTablePlugin on twiki.org
      * EditTablerowPlugin - TWiki:Plugins.EditTablerowPlugin on twiki.org
      * FormPlugin - TWiki:Plugins.FormPlugin on twiki.org
      * RenderFormPlugin - TWiki:Plugins.RenderFormPlugin on twiki.org
   * TWiki pages that use !JSCalendarContrib need to be updated (see below).
   * Once plugins and page content have been updated it is safe to remove this !JSCalendarContrib completely.

---++ Migrate Popup Calendar in HTML Forms

Please update your content to use the [[VarDATEPICKER][%<nop>DATEPICKER{}%]] variable instead of handcrafted HTML to show a popup calendar.

<table><tr><td valign="top">
*The old !JSCalendarContrib way:*
<verbatim>
%INCLUDE{"%SYSTEMWEB%.JSCalendarContribInline"}%
<input type="text" name="start_date" id="cal_val_here" />
<input type="image"
 src="%PUBURL%/%SYSTEMWEB%/JSCalendarContrib/img.gif" 
 onclick="javascript:
  return showCalendar('cal_val_here','%Y-%m-%d')" />
</verbatim>

</td><td>&nbsp;</td><td style="background-color: #ddd; width: 5px;">&nbsp;</td><td>&nbsp;</td><td valign="top">
*Change to the new DatePickerPlugin way:*
<pre>
<span style="color:#d11;">%<nop>DATEPICKER{ name="start_date" }%</span>
</pre>
</td></tr></table>

---++ Migrate Plugins using !JSCalendarContrib

Please update your plugins to use the new DatePickerPlugin. Example:

<table><tr><td valign="top">
*The old !JSCalendarContrib way:*
<verbatim>
use TWiki::Contrib::JSCalendarContrib;
...
my $fromDate =
 TWiki::Contrib::JSCalendarContrib::renderDateForEdit(
   'from', '1 April 1999');
my $toDate =
 TWiki::Contrib::JSCalendarContrib::renderDateForEdit(
   'to', undef, '%Y');
</verbatim>

</td><td>&nbsp;</td><td style="background-color: #ddd; width: 5px;">&nbsp;</td><td>&nbsp;</td><td valign="top">
*Change to the new DatePickerPlugin way:*
<pre>
use TWiki::<span style="color:#d11;">Plugins::DatePickerPlugin</span>;
...
my $fromDate =
 TWiki::<span style="color:#d11;">Plugins::DatePickerPlugin::renderForEdit</span>(
   'from', '1 April 1999');
my $toDate =
 TWiki::<span style="color:#d11;">Plugins::DatePickerPlugin::renderForEdit</span>(
   'to', undef, '%Y');
</pre>
</td></tr></table>

Example using hand-crafted Javascript:

<table><tr><td valign="top">
*The old !JSCalendarContrib way:*
<verbatim>
use TWiki::Contrib::JSCalendarContrib;
...

sub commonTagsHandler {
  ....
  TWiki::Contrib::JSCalendarContrib::addHEAD( 'twiki' );

  my $cal = CGI::image_button(
      -name => 'img_datefield',
      -onclick =>
       "return showCalendar('id_datefield','%Y %b %e')",
      -src=> TWiki::Func::getPubUrlPath() . '/' .
             TWiki::Func::getTwikiWebname() .
             '/JSCalendarContrib/img.gif',
      -alt => 'Calendar',
      -align => 'middle' )
    . CGI::textfield(
      { name => 'date', id => "id_datefield" });
  ....
}
</verbatim>

</td><td>&nbsp;</td><td style="background-color: #ddd; width: 5px;">&nbsp;</td><td>&nbsp;</td><td valign="top">
*Change to the new DatePickerPlugin way:*
<pre>
use TWiki::<span style="color:#d11;">Plugins::DatePickerPlugin</span>;
...

sub commonTagsHandler {
  ....
  TWiki::<span style="color:#d11;">Plugins::DatePickerPlugin::addToHEAD</span>( 'twiki' );

  my $cal = CGI::image_button(
      -name => 'img_datefield',
      -onclick =>
       "return showCalendar('id_datefield','%Y %b %e')",
      -src=> TWiki::Func::getPubUrlPath() . '/' .
             TWiki::Func::getTwikiWebname() .
             '/<span style="color:#d11;">DatePickerPlugin</span>/img.gif',
      -alt => 'Calendar',
      -align => 'middle' )
    . CGI::textfield(
      { name => 'date', id => "id_datefield" });
  ....
}
</pre>
</td></tr></table>

---++ Contrib Info

   * Set SHORTDESCRIPTION = DEPRECATED pop-up calendar with date picker -- please upgrade to new DatePickerPlugin

|  Author: | TWiki:Main.CrawfordCurrie http://c-dot.co.uk |
|  Copyright: | &copy; See [[%ATTACHURL%/doc/html/reference.html][the Mishoo documentation]] for Mishoo JSCalendar %BR% &copy; 2007-2012 TWiki:TWiki.TWikiContributor for TWiki !JSCalendarContrib |
|  License: | GPL ([[http://www.gnu.org/copyleft/gpl.html][GNU General Public License]]) |
|  Dependencies: | None |
|  Version: | 2012-12-12 |
| Change History: | <!-- versions below in reverse order -->&nbsp; |
|  2012-12-12: | TWikibug:Item7077: Deprecate this contrib in favor of the new DatePickerPlugin -- TWiki:Main.PeterThoeny |
|  2012-12-08: | TWikibug:Item6962: Configure change: Move contrib settings from top level section to Extensions section -- TWiki:Main.PeterThoeny |
|  2012-08-11: | TWikibug:Item6837: Doc fixes; updated installation instructions -- TWiki:Main.PeterThoeny |
|  2011-07-08: | TWikibug:Item6725: Change global package variables from "use vars" to "our" -- TWiki:Main.PeterThoeny |
|  2010-12-03: | TWikibug:Item6609: In %SYSTEMWEB%.TWikiForms type table, automatically list the =date= form field type defined in this contrib -- TWiki:Main.PeterThoeny |
|  2010-11-17: | TWikibug:Item6530: Doc fixes: Changing TWIKIWEB to SYSTEMWEB |
|  2010-11-04: | TWikibug:Item6603: Add transparent image for nicer date button in TWiki Forms |
|  2010-05-16: | TWikibug:Item6433: Doc improvements |
|  2009-04-27 | TWikibug:Item6254 Adding "JSCalendarContrib Settings" section to configure; changing default to ISO date format; improved documentation (TWiki:Main/PeterThoeny) |
|  2008-09-10 | TWikibug:Item5991 Applied patch to fix rendering on IE7 |
|  2007-09-06 | TWikibug:Item4030 Added doc for using the calendar in user forms |
|  13603 | TWikibug:Item2982 cleaned up the interface to the contrib, re-added a date rendering function with a more generic interface |
|  11594 | Allow format to be configured. |
|  11415 | Add a =renderFormFieldForEditHandler= so other plugins can forward to this handler to add the date field to the TWikiForms. (TWiki:Main.ThomasWeigert) |
|  10247 | TWikibug:Item2054 put the calendar at z-index 2000, way above pattern skin divs. |
|  6634 | TWikibug:Item453  removed EditTablePlugins private copy of the Mishoo JS calendar, and made sure it works with JSCalendarContrib. Improved the documentation of the JSCalendar while I was there. |
|  6626 | TWikibug:Item468  updated docs for Dakar release |
|  5048 | Cairo readiness |
|  5039 | Split from !SharedCode |
|  27 Dec 2005 | updated to calendar version 1.0; set style for Safari to win2k-1|
|  14 Aug 2004 | Separated out from !SharedCode module |
|  Home: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC% |
|  Feedback: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Dev |
|  Appraisal: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Appraisal |

__Related Topics:__ DatePickerPlugin, VarDATEPICKER, JSCalendarContribInline, %SYSTEMWEB%.TWikiPreferences, %SYSTEMWEB%.TWikiForms
This topic: TWiki > JSCalendarContrib
Topic revision: r18 - 2012-12-12 - TWikiContributor
Copyright © 1999-2025 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.JSCalendarContrib.