PmWiki | Cookbook / GuiEditDateButton

Summary: javascript calendar to insert a date

Version: 2.0 November 2, 2006

Prerequisites: PmWiki 2

Status: Stable

Maintainer: noe

Categories: Editing Layout

Questions answered by this recipe

How can I choose a date in a calendar and insert this date in pmwiki edit window ?

Description

Add a "Date" button to pmwiki guiedit toolbar

When you click this "Date" button, a popup calendar appears and the selected date is inserted at the beginning of the wiki page if the focus is not in the edit zone, otherwise the date is inserted at the cursor location.

Installation

Download GuiEditDateButton2.zip Δ (94Ko)
Copy date.gif in pub/guiedit/
Copy calendar.js, calendar-win2k-cold-1.css, jscalendar-pmwiki.js and the lang directory in pub/pmwiki/
Add this in your local/config.php file :

  $GUIButtons['date'] = array(750, '', '', '',
 '<a href=\"#\" onclick=\"showCalendar();\"><img src=\'$GUIButtonDirUrlFmt/date.gif\' title=\'$[Date]\' /></a>');

Add this in your template file (default is pub/skins/pmwiki/pmwiki.tmpl) after the line <link rel='stylesheet'..../> to load the javascript calendar :

  <link rel="stylesheet" type="text/css" media="all" href="$SkinDirUrl/calendar-win2k-cold-1.css" title="win2k-cold-1" />
  <script type="text/javascript" src="$SkinDirUrl/calendar.js"></script>
  <script type="text/javascript" src="$SkinDirUrl/lang/calendar-en.js"></script>
  <script type="text/javascript" src="$SkinDirUrl/jscalendar-pmwiki.js"></script>

Notes

Default template file is pub/skins/pmwiki/pmwiki.tmpl but you can make a copy of the pmwiki skin avoiding it to be overwritten during the next pmwiki upgrade, see http://www.pmwiki.org/wiki/PmWiki/SkinTemplates)
Don't forget to enable the guiedit toolbar in local/config.php ($EnableGUIButtons = 1;) and to enable javascript in your browser !
To choose another language just include the appropriate javascript lang file in your template file
To choose another date format see dateFormat in jscalendar-pmwiki.js and http://www.dynarch.com/demos/jscalendar/doc/html/reference.html#node_sec_5.3.5
To modify the markups before and after the date, see calDateMopen and calDateMclose in jscalendar-pmwiki.js
To modify the behaviour of the markup insertion see the onSelect function and in jscalendar-pmwiki.js

Release Notes

GuiEditDateButton2 uses http://www.dynarch.com/projects/calendar/.
Previous version : jscal_1.01.zip Δ

Comments

Not requiring a full calendar application, but just a method to quickly insert the current date and time, the following button definition works for me.

 $GUIButtons['sig'] = array(660, '\\n\\n* Change Log on $CurrentTime by $Author\\n\\n->', '\\n\\n', '$[Log Entry]',
                    '$GUIButtonDirUrlFmt/sig.gif"$[Insert Change Log on <CurrentTime> by <Author>]"');

Just append to /local/config.php, mod the text and formating to suite. It will insert at the current cursor location. Use whatever icon you like. $CurrentTime I believe is a standard variable set in pmwiki.php with the following:

$Now=time();

$TimeFmt = '%B %d, %Y, at %I:%M %p';

SDV($CurrentTime,strftime($TimeFmt,$Now));

$Author may also be a standard variable, but I'm not 100% sure what it will return if you don't have logins enable as our site has. Note, however, that the $CurrentTime variable will be set at the time the edit window was initialized and does not increment during the session. Hope this is a useful solution for different needs.

Advice: If you are using this element as a GUI button, then don't forget to copy the calendar.js, calendar-win2k-cold-1.css, jscalendar-pmwiki.js and the lang directory into the directory of the skin that you are using or you will never get it to work. A must have on all wikisites!Real Chris October 27, 2008, at 07:36 AM

Contributors

Mihai Bazon - Author of this javascript calendar
noe - PmWiki integration - November 2, 2006

GuiEditDateButton