Improving the UI of the mini js calendar

main/inc/lib/formvalidator/Element/calendar_popup.php

@@ -52,10 +52,9 @@ header('Content-Type: text/html; charset='. api_get_system_encoding());
 <style type="text/css">
 /*<![CDATA[*/
 @import "<?php echo api_get_path(WEB_CODE_PATH); ?>css/<?php echo api_get_setting('stylesheets'); ?>/default.css";
-table.calendar
-{
+table.calendar {
 	width: 100%;
-	font-size: 11px;
+	font-size: 12px;
 	font-family: verdana, arial, helvetica, sans-serif;
 }
 table.calendar .monthyear
@@ -63,9 +62,11 @@ table.calendar .monthyear
 	background-color: #4171B5;
 	text-align: center;
 	color: #ffffff;
+	font-size:12px;
+	padding:5px;
+	margin:10px;
 }
-table.calendar .daynames
-{
+table.calendar .daynames {
 	background-color: #D3DFF1;
 	text-align: center;
 }
@@ -91,16 +92,26 @@ table.calendar td a:hover
 {
 	background-color: #ffff00;
 }
-table.calendar .monthyear a
+
+table.calendar td a div
+{
+	padding:5px;
+}
+
+table.calendar td a div:hover
 {
+	background-color: #ffff00;
+}
+
+table.calendar .monthyear a {	
 	text-align: center;
-	color: #ffffff;
+	/* color: #ffffff; */
 }
 table.calendar .monthyear a:hover
 {
 	text-align: center;
-	color: #ff0000;
-	background-color: #ffff00;
+	/*color: #ff0000;*/
+	/*background-color: #ffff00;*/
 }
 /*]]>*/
 </style>

main/inc/lib/formvalidator/Element/tbl_change.js.php

@@ -108,13 +108,13 @@ function initCalendar() {
 
     //heading table
     str += '<table class="calendar"><tr><th class="monthyear" width="50%">';
-    str += '<a href="javascript:month--; initCalendar();">&laquo;</a> ';
+    str += '<a href="javascript:month--; initCalendar();"><?php echo Display::return_icon('action_prev.png',get_lang('Previous'));?></a> ';
     str += month_names[month];
-    str += ' <a href="javascript:month++; initCalendar();">&raquo;</a>';
+    str += ' <a href="javascript:month++; initCalendar();"><?php echo Display::return_icon('action_next.png',get_lang('Next'));?></a>';
     str += '</th><th class="monthyear" width="50%">';
-    str += '<a href="javascript:year--; initCalendar();">&laquo;</a> ';
+    str += '<a href="javascript:year--; initCalendar();"><?php echo Display::return_icon('action_prev.png',get_lang('Previous'));?></a> ';
     str += year;
-    str += ' <a href="javascript:year++; initCalendar();">&raquo;</a>';
+    str += ' <a href="javascript:year++; initCalendar();"><?php echo Display::return_icon('action_next.png',get_lang('Next'));?></a>';
     str += '</th></tr></table>';
 
     str += '<table class="calendar"><tr>';
@@ -146,7 +146,7 @@ function initCalendar() {
         } else {
             style = '';
         }
-        str += "<td" + style + "><a href=\"javascript:returnDate(" + i +","+month+","+year + ");\" >" + i + "</a></td>"
+        str += "<td" + style + "><a href=\"javascript:returnDate(" + i +","+month+","+year + ");\" ><div>" + i + "</div></a></td>"
         dayInWeek++;
     }
     for (i = dayInWeek; i < 7; i++) {