Custom DateNavigator in BSP using MVC architecture

[Former Member]

This web log provides source code for creating custom develop DateNavigator control highlighting days with different colors.

I have used the MVC architecture to create the same
Created a controller named ZDateNavigator.do with class named ZCL_DateNavigator, In the class the following attributes are declared

In the DO_REQUEST method of the class ZCL_DateNavigator the following code is written
1) to call the view
2) to highlight the (required) days with different colors based on our requirement
method DO_REQUEST.    ...                .*CALL METHOD SUPER-&gtDO_REQUEST  DATA: EVENT1 TYPE REF TO CL_HTMLB_EVENT,          NEXT_PAGE TYPE REF TO IF_BSP_PAGE,          PARAMS TYPE TIHTTPNVP,          IFRAME_URL TYPE STRING.*appending data to cal_tab to show different colors  DATA :l_wa_date_tab  TYPE LINE OF  Ztab_calender_cntrl,        l_dt_val      TYPE          SY-DATUM.  l_dt_val  = SY-DATUM +  3.  MOVE :  'leave_vacation'  TO  l_wa_date_tab-LEAVE_TYPE,             l_dt_val       TO  l_wa_date_tab-LEAVE_DATE.  APPEND l_wa_date_tab TO cal_tab.      l_dt_val  = SY-DATUM +  6.  MOVE :  'leave_vacation'  TO  l_wa_date_tab-LEAVE_TYPE,             l_dt_val       TO  l_wa_date_tab-LEAVE_DATE.  APPEND l_wa_date_tab TO cal_tab.      l_dt_val  = SY-DATUM +  9.  MOVE :  'leave_vacation'  TO  l_wa_date_tab-LEAVE_TYPE,             l_dt_val       TO  l_wa_date_tab-LEAVE_DATE.  APPEND l_wa_date_tab TO cal_tab.    l_dt_val  = SY-DATUM -  1.  MOVE :  'leave_WCholiday'  TO  l_wa_date_tab-LEAVE_TYPE,            l_dt_val        TO  l_wa_date_tab-LEAVE_DATE.  APPEND l_wa_date_tab TO cal_tab.  l_dt_val  = SY-DATUM -  3.  MOVE :  'leave_WCholiday'  TO  l_wa_date_tab-LEAVE_TYPE,            l_dt_val        TO  l_wa_date_tab-LEAVE_DATE.  APPEND l_wa_date_tab TO cal_tab.  l_dt_val  = SY-DATUM -  4.  MOVE :  'leave_other'  TO  l_wa_date_tab-LEAVE_TYPE,            l_dt_val        TO  l_wa_date_tab-LEAVE_DATE.  APPEND l_wa_date_tab TO cal_tab.  DISPATCH_INPUT( ).  IF VIEW_NAME IS INITIAL.    VIEW_NAME = 'DateNavigator.htm'.  ENDIF.  NEXT_PAGE = CREATE_VIEW( VIEW_NAME = VIEW_NAME ).  NEXT_PAGE-&gtset_attribute( name = 'g_action' value = g_action ).  NEXT_PAGE-&gtset_attribute( name = 'CAL_TAB' value = CAL_TAB ).  NEXT_PAGE-&gtset_attribute( name = 'month' value = g_month ).  NEXT_PAGE-&gtset_attribute( name = 'year' value = g_year ).  CALL_VIEW( NEXT_PAGE ).endmethod.

Created the View named DateNavigator.htm and following code is written

<%@page language="abap" %><%@extension name="htmlb" prefix="htmlb" %>&lthtmlb:content design="Design2002" >  &ltlink REL="STYLESHEET" TYPE="text/css" HREF="../zdatenavigator/fordate.css">&lthtmlb:page title="date control " >    &lthtmlb:form>      <%  DATA : l_month           type i.  DATA : l_year            type i.  DATA:  l_calStartMonth   TYPE I.  DATA:  l_calEndMonth     TYPE I.  DATA:  l_calYear         TYPE I .  DATA:  L_WA_CAL_TAB      TYPE line of  ZTAB_CALENDER_CNTRL.  data:  l_calcolor        type  string.  l_calyear = SY-DATUM+0(4).      %>      <%  if  g_action is initial.  year = SY-DATUM+0(4).  month = SY-DATUM+4(2).  else.  if g_action = 'Previous'.    if month = 1.  month = 12.        year = year - 1.    else.  month =  month - 1.  endif.  endif.  if g_action = 'Next'.    if month = 12.  month = 1.        year = year + 1.    else.  month =  month + 1.  endif.  endif.  endif.      %>      <%  month1 = month - 1.  month2 = month.  month3 = month + 1.  month4 = month + 2.  year1 = year.  year2 = year.  year3 = year.  year4 = year.      %>      <%  if month = 1.    month1 = 12.    month2 = month.    month3 = month + 1.    month4 = month + 2.    year1 = year - 1.    year2 = year.    year3 = year.    year4 = year.  endif.      %>      <%  if  month = 11.    month1 = month - 1.    month2 = month.    month3 = month + 1.    month4 = 1.    year1 = year.    year2 = year.    year3 = year.    year4 = year + 1.  endif.      %>      <%  if month = 12.    month1 = month - 1.    month2 = month.    month3 = 1.    month4 = 2.    year1 = year.    year2 = year.    year3 = year + 1.    year4 = year + 1.  endif.      %>      &ltscript type="text/javascript">      var todaydate=new Date()      var curmonth=todaydate.getMonth()+1 //get current month (1-12)      var curyear=todaydate.getFullYear() //get current year      curmonth = 9;      curyear = 2006;      </script>      &ltscript type="text/javascript">      function buildCal(m, y, cM, cH, cDW, cD, brdr, blockno){      var mn=['January','February','March','April','May','June','July','August','September','October','November','December'];      var dim=[31,0,31,30,31,30,31,31,30,31,30,31];      var oD = new Date(y, m-1, 1); //DD replaced line to fix date bug when current day is 31st      oD.od=oD.getDay()+1; //DD replaced line to fix date bug when current day is 31st      var todaydate=new Date() //DD added      var scanfortoday=(y==todaydate.getFullYear() && m==todaydate.getMonth()+1)? todaydate.getDate() : 0 //DD added      dim[1]=(((oD.getFullYear()%100!=0)&&(oD.getFullYear()%4==0))||(oD.getFullYear()%400==0))?29:28;      var t='&ltdiv class="'+cM+'">&lttable class="calendar" cols="7" cellpadding="0" cellspacing="1">&lttr>';      t+='&lttd colspan="6" class="calendarMonthText">&ltfont face = "arial">'+mn[m-1]+'  '+y+'</font></td>';      t+='</tr>';      t+='&lttr>&lttd class="day"&gtSu</td>&lttd class="day"&gtMo</td>&lttd class="day"&gtTu</td>&lttd class="day"&gtWe</td>&lttd class="day"&gtTh</td> &lttd class="day"&gtFr</td>&lttd class="day"&gtSa</td></tr>';      t+='&lttr align="center">';      for(i=1;i<=42;i++){      var x=((i-oD.od>=0)&&(i-oD.od&ltdim[m-1]))? i-oD.od+1 : ' ';      if (x==scanfortoday) //DD added      x='&ltspan id="today">'+x+'</span>' //DD added      t+="&lttd ";      <%  data:l_tmp_mon(2)  type c.  data:l_tmp_year(4) type c.  data:l_tmp_day(2)  type c.  loop at  cal_tab into  L_WA_CAL_TAB.  l_tmp_mon = L_WA_CAL_TAB-LEAVE_DATE+4(2).  l_tmp_year = L_WA_CAL_TAB-LEAVE_DATE+0(4).  l_tmp_day  = L_WA_CAL_TAB-LEAVE_DATE+6(2).  case L_WA_CAL_TAB-LEAVE_TYPE.  when 'leave_vacation'.  concatenate l_calcolor  'if((x ==' l_tmp_day ') && (y ==' l_tmp_year ') && (m ==' l_tmp_mon '))t+=" class=leave_vacation  ";'  into l_calcolor.  when 'leave_WCholiday'.  concatenate l_calcolor  'if((x ==' l_tmp_day ') && (y ==' l_tmp_year ') && (m ==' l_tmp_mon '))t+=" class=leave_WCholiday ";'  into l_calcolor.  when 'leave_other' .  concatenate l_calcolor  'if((x ==' l_tmp_day ') && (y ==' l_tmp_year ') && (m ==' l_tmp_mon '))t+=" class=leave_other ";'  into l_calcolor.  endcase.  clear :l_wa_cal_tab.  endloop.      %>      <%= l_calcolor%>      /*if((x == 26) && (y == 2006) && (m == 6))t+=' class = "leave_vacation " ';      if((x == 14) && (y == 2006) && (m == 7))t+=' class = "leave_WCholiday " ';      if((x == 20) && (y == 2006) && (m == 8))t+=' class = "leave_other " ';*/      t+=">";      if(y != <%= L_calYear%>) t+='&ltfont color = "gray" face = "arial">' ;      t+= x;      if(y != <%= L_calYear%>) t+='</font>';      t+='</td>';      if(((i)%7==0)&&(i&lt36))t+='</tr>&lttr align="center">';      }      return t+='</tr></table></div>';      }      </script>              &ltdiv class="calendarMonthWrapper">                  &ltdiv style="clear:both"></div>              &lttable border=0 align="center" cellpadding="0" cellspacing="1" bgcolor = "white">              &lttr>                  &lttd class="height_f"></td>                </tr>              &lttr>              &lttd>              &ltdiv>            &lttable>&lttr>             &lttd> </td>  &lttd>      &lthtmlb:image src     = "../../sap/public/DATE/gfx_calMonth_left_off.gif"                   onClick = "Request previous" onClientClick="if(curyear==htmlb_form_1.year.value && htmlb_form_1.month.value==1){htmlbevent.cancelSubmit = true;}" />              </td></tr></table></div>      &ltscript type="text/javascript">      document.write(buildCal(<%= month1%> ,<%= year1%>, "main", "month", "daysofweek", "days", 1, 1));      </script></td>      &lttd>      &ltdiv>&lttable>&lttr>&lttd> </td></tr></table></div>      &ltscript>      document.write(buildCal(<%= month2%> ,<%= year2%>, "main", "month", "daysofweek", "days", 1, 2));      </script></td>      &lttd>      &ltdiv>&lttable>&lttr>&lttd> </td></tr></table></div>      &ltscript>      document.write(buildCal(<%= month3%> ,<%= year3%>, "main", "month", "daysofweek", "days", 1, 3));      </script></td>              &lttd>              &ltdiv>&lttable>&lttr>                    &lttd> </td>&lttd> </td>&lttd> </td>&lttd> </td>&lttd> </td>                    &lttd> </td>&lttd> </td>&lttd> </td>&lttd> </td>&lttd> </td>                    &lttd> </td>&lttd> </td>&lttd> </td>&lttd> </td>&lttd> </td>                    &lttd> </td>&lttd> </td>              &lttd>      &lthtmlb:image src     = "../../sap/public/DATE/gfx_calMonth_right_off.gif"                   onClick = "Request Next" onClientClick="if(curyear==htmlb_form_1.year.value && htmlb_form_1.month.value==11){htmlbevent.cancelSubmit = true;}" />              </td></tr></table></div>      &ltscript>      document.write(buildCal(<%= month4%> ,<%= year4%>, "main", "month", "daysofweek", "days", 1, 4));      </script></td>      </tr>      </table>      </div>      &ltspan style="visible:hidden;display:none">      &lthtmlb:textEdit text = "<%= g_action %>" id = "txtYear" />      &lthtmlb:textEdit text = "<%= month %>" id = "month" />      &lthtmlb:textEdit text = "<%= year %>" id  = "year" />      </span>   </htmlb:form>  </htmlb:page></htmlb:content>

Decalred the following attributes in the view as shown below

Two button images are uploaded into the system to navigate and a css file was used named fordate.css in which it contains the contents as below
.calendar_wrapper      { float: left; margin-bottom: 10px; }.calendar_background                 { float: left; border-left: 1px #6699CC solid; border-bottom: 1px #6699CC solid; border-right: 1px #6699CC solid; padding: 0px 0px 5px 0px; }.calendarMonthWrapper     { float: left; width: 680px; }table.calendarSingle       { float: left; background: #FFFFFF; margin: 0px 3px 0px 3px; }table.calendarSingle td       { font: normal 10px Arial, Helvetica, sans-serif; color: #000000; text-align: right; vertical-align: top; background-color: #FFFFFF; padding: 5px 5px 10px 10px; }table.calendarSingle td.day      { font: bold 10px Arial, Helvetica, sans-serif; color: #FFFFFF; text-align: center; letter-spacing: 1px; text-transform: uppercase; background-color: #A8B7D4; padding: 5px 5px 5px 5px; }table.calendarSingle td.calendarMonthText  { font: normal 12px Arial, Helvetica, sans-serif; color: #000000; text-align: center; letter-spacing: 1px; text-transform: uppercase; background: #FFFFFF; }table.calendarSingle td.futurePayDay   { background: #6699CC; }table.calendar       { float: left; background: #FFFFFF; margin: 0px 3px 0px 3px; }table.calendar td      { font: normal 10px Arial, Helvetica, sans-serif; color: #000000; text-align: right; vertical-align: top; background-color: #6699CC; padding: 3px 3px 5px 3px; }table.calendar td.day     { font: bold 10px Arial, Helvetica, sans-serif; color: #FFFFFF; text-align: center; letter-spacing: 1px; text-transform: uppercase; background-color: #6699CC; padding: 3px 3px 5px 3px; }table.calendar td.calendarMonthText  { font: normal 12px Arial, Helvetica, sans-serif; color: #000000; text-align: center; letter-spacing: 1px; text-transform: uppercase; background: #FFFFFF; }table.calendar td.arrow     { background: #FFFFFF; }.calendarArrowBack a     { text-decoration: none; background: url(../images/gfx_calMonth_left_off.gif) #FFFFFF no-repeat ; width: 20px; height: 20px; padding: 3px 10px 5px 10px; }.calendarArrowBack a:hover    { background: url(../images/gfx_calMonth_left_over.gif) #FFFFFF no-repeat; }.calendarArrowForward a     { text-decoration: none; background: url(../images/gfx_calMonth_right_off.gif) #FFFFFF no-repeat; width: 20px; height: 20px; padding: 3px 10px 5px 10px; }.calendarArrowForward a:hover   { background: url(../images/gfx_calMonth_right_over.gif) #FFFFFF no-repeat; }table.calendar td.previousPayDay    { background: #6699CC;  padding: 3px 0px 0px 0px; }table.calendar td.previousPayDay a    { color: #FFFFFF; text-align: right; vertical-align: top; background: #97CA97; padding: 3px 3px 5px 3px; }table.calendar td.previousPayDay a:hover  { color: #015EFF; background: #84B284; padding: 3px 3px 5px 3px; }table.calendar td.currentPayDay     { background: #F4CC53; padding: 3px 0px 0px 0px; }table.calendar td.currentPayDay a    { color: #FFFFFF; text-align: right; vertical-align: top; background: #F4CC53; padding: 3px 3px 5px 3px; }table.calendar td.currentPayDay a:hover   { color: #015EFF; background: #6699CC; padding: 3px 3px 5px 3px; }table.calendar td.futurePayDay     { background: #A8B7D4; }table.calendar td.leave_WCholiday               { background: #FB9700;  padding: 3px 3px 5px 3px; } table.calendar td.leave_vacation                { background: #990066;  padding: 3px 3px 5px 3px; color: #FFFFFF; } table.calendar td.leave_other                   { background: #6FB610;  padding: 3px 3px 5px 3px; }
For the navigation on button click following code is written in the do handle event of the class ZCL_DateNavigator

method DO_HANDLE_EVENT. DATA: EVENT1 TYPE REF TO CL_HTMLB_EVENT, PARAMS TYPE TIHTTPNVP, IFRAME_URL TYPE STRING.g_action = request-&gtget_form_field( 'txtYear').g_month = request-&gtget_form_field( 'month').g_year = request-&gtget_form_field( 'year').event1 ?= cl_htmlb_manager=&gtget_event( request ).  if event1 is bound.    case event1-&gtserver_event.      when 'Request previous'.          g_action = 'Previous'.       when 'Request Next'.          g_action = 'Next'.    endcase.  endif.endmethod.