In order to set date2cal for mailformplus we need to follow 3 important steps:
1. Include the necessary js and css files
page.headerData.80 = TEXT
page.headerData.80.value (
<script type="text/javascript" src="typo3conf/ext/date2cal/js/jscalendar/calendar.js"></script>
<script type="text/javascript" src="typo3conf/ext/date2cal/js/jscalendar/lang/calendar-en.js"></script>
<script type="text/javascript" src="typo3conf/ext/date2cal/js/jscalendar/calendar-setup.js"></script>
<script type="text/javascript" src="typo3conf/ext/date2cal/js/date2cal.js"></script>
<script type="text/javascript" src="typo3conf/ext/date2cal/js/naturalLanguageParser.js"></script>
<link rel="stylesheet" type="text/css" href="typo3conf/ext/date2cal/js/jscalendar/skins/aqua/theme.css" />)
# add translations
# French – DEFAULT
page.headerData.90 = TEXT
page.headerData.90.value = <script type="text/javascript" src="typo3conf/ext/date2cal/js/jscalendar/lang/calendar-fr.js"></script>
2. Create the target input box and the calendar trigger button
<input type="text" name="datebox" id="datebox" value="###value_datebox###" tabindex="13" maxlength="16" size="9"/>
<img id="datebox_trigger" alt="Calendar" title="Calendar" style="cursor: pointer; vertical-align: middle;" src="typo3conf/ext/date2cal/res/calendar.png"/>
3. Write the calendar instantiation code using JavaScript
(The id of “inputField” and “button” should match the textbox and trigger button)
NOTE: this code must be executed after the above input boxes are loaded!
<script type="text/javascript">
Calendar.setup({
inputField : "datebox", // id of the input field
ifFormat : "%d/%m/%Y", // format of the input field
align : "Bl", // alignment (defaults to "Bl")
button : "datebox_trigger", // trigger for the calendar (button ID)
singleClick : true, // single-click mode
});
</script>
That’s all now you should be able to view the calendar if you click the image!!!