Calendar control example

In the following example, a calendar is added to an instruction form. Tables within the forms allow for easier placement of the calendar. The instruction file will look similar to the following example:
ePro_Ins_FP_CalendarExample.png
The HTML code for the previous example resembles the following:
<html>
<body lang=EN-US style='tab-interval:.5in'>
<form>
 <table border=0 cellspacing=0 cellpadding=0 width="92%" style='width:92.72%>
  
Trusted

   <td width="100%" valign=top style='width:100.0%>
    <strong>
          <font color=navy face=Verdana>
           Identify a pallet to be used for this batch. If one does not exist, label it &lt;SOP&gt;BATCHID&lt;/SOP&gt;-"Today's Date" (BatchID-07202017).
      	 </font></strong>
         </td>
        </tr>
       </table>
      </form>
 <!-- This calendar script complements of www.htmlbestcodes.com -->
      <script language="javascript" type="text/javascript">
var day_of_week = new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat');
var month_of_year = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
//  DECLARE AND INITIALIZE VARIABLES
var Calendar = new Date();
var year = Calendar.getFullYear();     // Returns year
var month = Calendar.getMonth();    // Returns month (0-11)
var today = Calendar.getDate();    // Returns day (1-31)
var weekday = Calendar.getDay();    // Returns day (1-31)
>var DAYS_OF_WEEK = 7;    // "constant" for number of days in a week
var DAYS_OF_MONTH = 31;    // "constant" for number of days in a month
var cal;    // Used for printing
Calendar.setDate(1);    // Start the calendar day at '1'
Calendar.setMonth(month);    // Start the calendar month at now
/* VARIABLES FOR FORMATTING
NOTE: You can format the 'BORDER', 'BGCOLOR', 'CELLPADDING', 'BORDERCOLOR'
      tags to customize your caledanr's look. */
           var TR_start = '
Trusted
';
var TR_end = '</TR>';
var highlight_start = '<TD WIDTH="30"><TABLE CELLSPACING=0 BORDER=1 BGCOLOR=DEDEFF BORDERCOLOR=CCCCCC>
Trusted
<TD WIDTH=20><B><CENTER>';
var highlight_end   = '</CENTER></TD></TR></TABLE></B>';
var TD_start = '<TD WIDTH="30"><CENTER>';
var TD_end = '</CENTER></TD>';
      /* BEGIN CODE FOR CALENDAR
NOTE: You can format the 'BORDER', 'BGCOLOR', 'CELLPADDING', 'BORDERCOLOR'
tags to customize your calendar's look.*/
      cal =  '<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0 BORDERCOLOR=BBBBBB>
Trusted
<TD>';
cal += '<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=2>' + TR_start;
cal += '<TD COLSPAN="' + DAYS_OF_WEEK + '" BGCOLOR="#EFEFEF"><CENTER><B>';
cal += month_of_year[month]  + '   ' + year + '</B>' + TD_end + TR_end;
cal += TR_start;
      //   DO NOT EDIT BELOW THIS POINT  //
      // LOOPS FOR EACH DAY OF WEEK
for(index=0; index < DAYS_OF_WEEK; index++)
{     
      // BOLD TODAY'S DAY OF WEEK
if(weekday == index)
cal += TD_start + '<B>' + day_of_week[index] + '</B>' + TD_end;
      // PRINTS DAY
else
cal += TD_start + day_of_week[index] + TD_end;
}
      cal += TD_end + TR_end;
      cal += TR_start;
      // FILL IN BLANK GAPS UNTIL TODAY'S DAY
>for(index=0; index < Calendar.getDay(); index++)
cal += TD_start + '  ' + TD_end;
   // LOOPS FOR EACH DAY IN CALENDAR
for(index=0; index < DAYS_OF_MONTH; index++)
{
if( Calendar.getDate() > index )
{
  // RETURNS THE NEXT DAY TO PRINT
  week_day =Calendar.getDay();
  // START NEW ROW FOR FIRST DAY OF WEEK
  if(week_day == 0)
  cal += TR_start;  
        if(week_day != DAYS_OF_WEEK)
  {   
        // SET VARIABLE INSIDE LOOP FOR INCREMENTING PURPOSES
 var day  = Calendar.getDate();  
        // HIGHLIGHT TODAY'S DATE
 if( today==Calendar.getDate() )
  cal += highlight_start + day + highlight_end + TD_end;    
        // PRINTS DAY
  else
  cal += TD_start + day + TD_end;
  }     
        // END ROW FOR LAST DAY OF WEEK
  if(week_day == DAYS_OF_WEEK)
  cal += TR_end;
  } 
        // INCREMENTS UNTIL END OF THE MONTH
  Calendar.setDate(Calendar.getDate()+1); 
      }// end for loop     
      cal += '</TD></TR></TABLE></TABLE>';   
      //  PRINT CALENDAR
document.write(cal);    
      //  End -->
</script>    
      <form>
 <table border=0 cellspacing=0 cellpadding=0 width="92%" style='width:92.72%>
  
Trusted

   <td width="100%" valign=top style='width:100.0%>
    <strong>
    <font color=navy face=Verdana>
     Enter the weighed amount: <INPUT TYPE="text" SIZE="20" NAME="ACTUAL_AMOUNT">KG&nbsp;
    <br /><br />
	 Scan in the barcode label: <INPUT TYPE="text" SIZE="53" NAME="BARCODE">
    </font></strong>
   </td>
  </tr>
 </table>
</form> 
      </body>
</html>
(See the
eProcedure
 Administrator Guide
 for information on using scripting within instruction files.)
Provide Feedback
Have questions or feedback about this documentation? Please submit your feedback here.
Normal