We have developed a custom module for appointment. We need to get date of the appointment. We have added the below code in my custom page xml and phtml files

In XML file:

<reference name="head">
    <action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params></params></action>
    <action method="addItem"><type>js</type><name>calendar/calendar.js</name><params></params></action>
    <action method="addItem"><type>js</type><name>calendar/calendar-setup.js</name><params></params></action>
    <block type="core/html_calendar" name="html_calendar" as="html_calendar" template="page/js/calendar.phtml"/>

In phtml file:

<input name="dob" id="_dob" value="" type="text">
    <img title="Select date" id="_dob_trig" src="<?php echo $this->getSkinUrl('images/calendar.gif')?>" class="v-middle">

and in footer section of the page:

<script type="text/javascript">
        inputField : '_dob',
        ifFormat : '%m/%e/%y',
        button : '_dob_trig',
        align : 'Bl',
        singleClick : true

There is no JavaScript error, but calendar window does not open while clicking the calendar icon.

What I'm missing? Please help.

  • Do you actually see the Javascripts and CSS in your HTML <head>?
    – 7ochem
    Commented Feb 5, 2015 at 14:24
  • Please check parent div absolute or relative. If its absolute make it relative because calendar is open but not display properly. I think its display at header setction
    – Ajay Patel
    Commented Feb 12, 2017 at 3:51

2 Answers 2


When I try your code I get a JS error:

Uncaught TypeError: Cannot read property 'length' of undefinedcalendar.js:1660 Date.parseDatecalendar-setup.js:21 triggerEl.(anonymous function)

If I add all of the initialization that goes along with the calendar above the footer calendar <script> then it works.

<script type="text/javascript">
enUS = {"m":{"wide":["January","February","March","April","May","June","July","August","September","October","November","December"],"abbr":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]}}; // en_US locale reference
Calendar._DN = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; // full day names
Calendar._SDN = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]; // short day names
Calendar._FD = 0; // First day of the week. "0" means display Sunday first, "1" means display Monday first, etc.
Calendar._MN = ["January","February","March","April","May","June","July","August","September","October","November","December"]; // full month names
Calendar._SMN = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; // short month names
Calendar._am = "AM"; // am/pm
Calendar._pm = "PM";

// tooltips
Calendar._TT = {};
Calendar._TT["INFO"] = "About the calendar";

Calendar._TT["ABOUT"] =
"DHTML Date/Time Selector\n" +
"(c) dynarch.com 2002-2005 / Author: Mihai Bazon\n" +
"For latest version visit: http://www.dynarch.com/projects/calendar/\n" +
"Distributed under GNU LGPL. See http://gnu.org/licenses/lgpl.html for details." +
"\n\n" +
"Date selection:\n" +
"- Use the \xab, \xbb buttons to select year\n" +
"- Use the " + String.fromCharCode(0x2039) + ", " + String.fromCharCode(0x203a) + " buttons to select month\n" +
"- Hold mouse button on any of the above buttons for faster selection.";
Calendar._TT["ABOUT_TIME"] = "\n\n" +
"Time selection:\n" +
"- Click on any of the time parts to increase it\n" +
"- or Shift-click to decrease it\n" +
"- or click and drag for faster selection.";

Calendar._TT["PREV_YEAR"] = "Prev. year (hold for menu)";
Calendar._TT["PREV_MONTH"] = "Prev. month (hold for menu)";
Calendar._TT["GO_TODAY"] = "Go Today";
Calendar._TT["NEXT_MONTH"] = "Next month (hold for menu)";
Calendar._TT["NEXT_YEAR"] = "Next year (hold for menu)";
Calendar._TT["SEL_DATE"] = "Select date";
Calendar._TT["DRAG_TO_MOVE"] = "Drag to move";
Calendar._TT["PART_TODAY"] = ' (' + "Today" + ')';

// the following is to inform that "%s" is to be the first day of week
Calendar._TT["DAY_FIRST"] = "Display %s first";

// This may be locale-dependent. It specifies the week-end days, as an array
// of comma-separated numbers. The numbers are from 0 to 6: 0 means Sunday, 1
// means Monday, etc.
Calendar._TT["WEEKEND"] = "0,6";

Calendar._TT["CLOSE"] = "Close";
Calendar._TT["TODAY"] = "Today";
Calendar._TT["TIME_PART"] = "(Shift-)Click or drag to change value";

// date formats
Calendar._TT["DEF_DATE_FORMAT"] = "%b %e, %Y";
Calendar._TT["TT_DATE_FORMAT"] = "%B %e, %Y";

Calendar._TT["WK"] = "Week";
Calendar._TT["TIME"] = "Time:";

CalendarDateObject._LOCAL_TIMZEONE_OFFSET_SECONDS = -18000;
CalendarDateObject._SERVER_TIMZEONE_SECONDS = 1423128369;



<script type="text/javascript">
    inputField : '_dob',
    ifFormat : '%m/%e/%y',
    button : '_dob_trig',
    align : 'Bl',
    singleClick : true
  • We have tried in footer section. we get the "TypeError: Calendar._MN is undefined" error message.
    – Rat
    Commented Feb 6, 2015 at 3:46
  • Be sure to put it before <script type="text/javascript"> //<![CDATA[ Calendar.setup({ (See edited answer above) Commented Feb 6, 2015 at 3:56
  • Hi, We tried the above steps but not show the calendar. I've added in the header section, calender section div is created and its display property is none. Please check the code.
    – Rat
    Commented Feb 6, 2015 at 4:07
  • <div class="calendar" style="position: absolute; display: none; left: 181px; top: 471px;">
    – Rat
    Commented Feb 6, 2015 at 4:08
  • Are you seeing the calendar JS and Css in the source of the page? Commented Feb 6, 2015 at 12:05

In your front layout add below code

<reference name="head">
        <action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params/><!--<if/><condition>can_load_calendar_js</condition>--></action>
        <action method="addItem"><type>js</type><name>calendar/calendar.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
        <action method="addItem"><type>js</type><name>calendar/calendar-setup.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
        <block type="core/html_calendar" name="head.calendar" as="calendar" template="page/js/calendar.phtml"/>

add below code to your template file

<input type="text" name="date" id="date" value="" />
<img title="Select date" id="date_button" src="<?php echo $this->getSkinUrl('images/grid-cal.gif'); ?>" class="v-middle">

add below script below input date field

<script type="text/javascript">// <![CDATA[
   inputField : 'date',
   ifFormat : '%m/%e/%y %H:%M:%S',
   button : 'date_button',
   showsTime: true,
   align : 'Bl',
   singleClick : true

    // ]]></script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.