date2cal for mailformplus

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!!!

bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark