This calendar widget is a simple month-widget.
The widget takes an array and display the records on days.
2024-04 | |||||||
Monday | Tuesday | Wednesday | Thursday | Friday | Saturday | Sunday | Week |
14 | |||||||
15 | |||||||
16 | |||||||
17 | |||||||
.. | .. | .. | .. | .. | 18 |
Source for the page
001: <?php 002: //---------------------------------------------------------------------- 003: // 004: // Copyright (C) 2014 Göran Hasse, <gorhas@raditex.nu>, Raditex AB 005: // All rights reserved. 006: // 007: // Raditex Warehouse Management System (rWMS) 008: // info@raditex.nu 009: // 010: // Credit to 011: // http://davidwalsh.name/php-calendar 012: // use: calendar-month.css 013: //---------------------------------------------------------------------- 014: 015: //include_once("libs/rbis-library-main.php"); 016: //include_once("libs/rbis-library-lists.php"); 017: //include_once("libs/rbis-library-database.php"); 018: //include_once("libs/rbis-library-widgets.php"); 019: //include_once("libs/rbis-library-utils.php"); 020: 021: include_once('framework-config.php'); // configuration data 022: include_once('raditex-library.php'); // main library 023: include_once('framework-lists.php'); // lists - like menues an other 024: include_once('libs/rbis-library-widgets.php'); 025: include_once('libs/rbis-library-database.php'); 026: include_once('libs/rbis-library-html.php'); 027: 028: page_start(); 029: 030: $month = rbis_variable_retrieve('month', 'now'); 031: 032: page_header($header_image,"User: gorhas@demo.se"); 033: page_drop_down_menu($site_menu); 034: 035: page_menu($framework_widgets_menu); 036: 037: page_row_start(); 038: page_column_start_left(); 039: 040: // Main content of site 041: 042: html_h('Month calendar', 1); 043: 044: html_p("This calendar widget is a simple month-widget."); 045: 046: html_p("The widget takes an array and display the records on days."); 047: 048: 049: //---------------------------------------------------------------------- 050: // function: rbis_widget_calendar 051: // A generic calendar to display table records ordered by day. 052: // $calendar_month: should be in the form 2014-09-25 053: // $day_field: the field that we want to organise in the calendar. A date or timestamp field. 054: // $balloon_field: "description" is a good ballon field but we could have others. 055: //---------------------------------------------------------------------- 056: 057: // 058: // FIXIT! When adding a month to a date this don't handle lap-years - how to fix this?? 059: // 060: function utils_month_string( $date_str, $months) 061: { 062: 063: $date = new DateTime($date_str); 064: $start_day = $date->format('j'); 065: 066: $date->modify("+{$months} month"); 067: $end_day = $date->format('j'); 068: 069: if ($start_day != $end_day) 070: $date->modify('last day of last month'); 071: 072: return $date; 073: 074: } 075: 076: 077: //---------------------------------------------------------------------- 078: // 079: //---------------------------------------------------------------------- 080: function verify_date($date) 081: { 082: return DateTime::createFromFormat('m/d/Y', $date); 083: } 084: 085: //---------------------------------------------------------------------- 086: // The widget takes an array of records and display them on days. 087: // 088: //---------------------------------------------------------------------- 089: function widget_calendar_month($calendar_month ="now", 090: $object_edit_page="page_to_edit_the_object.php", 091: $object_uuid_name="object_uuid_name", 092: $object_list_page="object_list_page.php", 093: $object_list_date="object_list_date", 094: $calendar_titel="Calendar title", 095: $info_field='name', 096: $calendar_page='index.php', 097: $records=array()) 098: { 099: 100: //html_message_info("Calendar month: " . $calendar_month); 101: 102: 103: // How to use this?? 104: verify_date($calendar_month); 105: 106: //rbis_error_log("rbis-library-calendar: calendar_month : " . $calendar_month ); 107: 108: // FIXIT! If calendar month is wrong all ends upp in a mess... 109: if($calendar_month == NULL || $calendar_month == "") 110: { 111: $calendar_month = "now"; 112: $now = new DateTime('now'); 113: $calendar_month = $now->format('m'); 114: $calendar_year = $now->format('Y'); 115: } 116: 117: if($calendar_month == '-1' || $calendar_month == "now" ) 118: { 119: $current_month = new DateTime('now'); 120: } 121: else 122: { 123: if( verify_date($calendar_month) ) 124: { 125: $current_month = new DateTime(); 126: } 127: else 128: { 129: $current_month = new DateTime($calendar_month); 130: } 131: 132: //$current_month = new DateTime('2014-11-01'); 133: } 134: 135: // 136: // FIXIT! When adding a month to a date this don't handle lap-years - how to fix this?? 137: // 138: 139: $month = date_format($current_month,'m'); 140: $year = date_format($current_month, 'Y'); 141: 142: // html_message_info("New date : " . $calendar_month . ": " . $year . " - " . $month ); 143: 144: $previous_month = utils_month_string(date_format($current_month,'Y-m-d'), -1); 145: $next_month = utils_month_string(date_format($current_month,'Y-m-d'), 1); 146: 147: // Start table 148: $calendar = '<table cellpadding="0" cellspacing="0" class="month-calendar">'; 149: 150: // table headings 151: $calendar.= '<tr class="month-calendar-row"><td class="month-calendar-day-head-row" colspan="8"><span class="month-calendar-title">' . $calendar_titel . " " . $year . " - " . $month . '</span></td></tr>'; 152: 153: 154: // Buttons at top 155: $calendar .= "<tr class='month-calendar-row'>"; 156: 157: // Spacer 158: $calendar .= "<td colspan='2' class='month-calendar-day-head'></td>"; 159: 160: // Left button 161: $calendar .= "<td class='month-calendar-day-head'><a href='" . $calendar_page . "?month=" . 162: date_format($previous_month, 'Y-m-d') . "'><button type='button' class='button-in-month-header-left'><span class='glyphicon glyphicon-arrow-left'>" . 163: "</span>" . _("Previous") . "</button></a>"; 164: 165: // Middle button 166: $calendar .= "<td class='month-calendar-day-head'><a href='" . $calendar_page . "?month=now'><button type=button class='button-in-month-header'>". _("Current month") . "</button></a>"; 167: 168: // Righ button 169: $calendar .= "<td class='month-calendar-day-head'><a href='" . $calendar_page . "?month=" . 170: date_format($next_month, 'Y-m-d') . "'><button type='button' class='button-in-month-header-right'>" . _("Next") . 171: "<span class='glyphicon glyphicon-arrow-right'></span></button></a>"; 172: 173: // Spacer 174: $calendar .= "<td colspan='3' class='month-calendar-day-head'></td>"; 175: $calendar .= "</tr>"; 176: 177: // Weekday name in header 178: $calendar.= '<tr class="month-calendar-day-head-row">' . 179: '<td class="month-calendar-day-head-xx">' . _('Monday') . '</td>' . 180: '<td class="month-calendar-day-head-xx">' . _('Tuesday') . '</td>' . 181: '<td class="month-calendar-day-head-xx">' . _('Wednesday') . '</td>' . 182: '<td class="month-calendar-day-head-xx">' . _('Thursday') . '</td>' . 183: '<td class="month-calendar-day-head-xx">' . _('Friday') . '</td>' . 184: '<td class="month-calendar-day-head-xx">' . _('Saturday') . '</td>' . 185: '<td class="month-calendar-day-head-xx">' . _('Sunday') . '</td>' . 186: '<td class="month-calendar-day-head-week">' . _("Week") . '</td></tr>'; 187: 188: 189: // Days and weeks vars now ... 190: $running_day = date('w',mktime(0,0,0,$month,0,$year)); 191: $days_in_month = date('t',mktime(0,0,0,$month,1,$year)); 192: $days_in_this_week = 1; 193: $day_counter = 0; 194: $dates_array = array(); 195: 196: // row for week one 197: $calendar.= '<tr class="month-calendar-row">'; 198: 199: // print "blank" days until the first of the current week 200: for($x = 0; $x < $running_day; $x++): 201: $calendar.= '<td class="month-calendar-day-np"> </td>'; 202: $days_in_this_week++; 203: endfor; 204: 205: // keep going with days.... 206: // this forloop have : in the end!!!! not so good programming! 207: 208: for($list_day = 1; $list_day <= $days_in_month; $list_day++): 209: $calendar.= '<td class="month-calendar-day">'; 210: 211: // Add in the day number 212: $day_tmp = sprintf('%2d', $list_day); 213: $day_tmp = str_pad($list_day, 2, '0', STR_PAD_LEFT); 214: 215: $current_date = $year . "-" . $month . "-" . $day_tmp; 216: 217: $current_date_balloon = "Date: " . $current_date . "<br>" . "url: " . $object_list_page . "?" . $object_list_date . "=" . $current_date; 218: 219: // Day number 220: $calendar.= "<div class='month-calendar-day-number' title='" . $current_date_balloon ."'><a class='month-calendar-day-number-item' href='" . $object_list_page . "?" . $object_list_date . "=" . $current_date . "'>" . $list_day . "</a></div>"; 221: 222: // "<a draggable='true' ondragstart='handleDragStart();' title='" . $balloon_text . "' href='" . $object_edit_page . "?" . $object_uuid_name . "=" . $record['object_uuid'] . "'>"; 223: 224: // Unwind the records 225: foreach($records as $record) 226: { 227: 228: if( $record['calendar_date'] == $current_date ) 229: { 230: 231: $balloon_text = "Name: " . $record['name'] . "<br />" . 232: "Description: " . $record['description'] . "<br />" . 233: "Id: " . $record['object_uuid']; 234: 235: $calendar .= "<div class='month-calendar-day-AA'>"; 236: $calendar .= "<div draggable='true' class='month-calendar-day-item'>"; 237: 238: // Color on the link 239: switch($record['status']) 240: { 241: case 'ACTIVE': 242: $calendar .= "<span class='calendar-badge badge-active badge-calendar-id'>"; 243: break; 244: case 'HALTED': 245: $calendar .= "<span class='calendar-badge badge-halted badge-calendar-id'>"; 246: break; 247: case 'DELETED': 248: $calendar .= "<span class='calendar-badge badge-deleted badge-calendar-id'>"; 249: break; 250: case 'COMPLETED': 251: $calendar .= "<span class='calendar-badge badge-completed badge-calendar-id'>"; 252: break; 253: default: 254: $calendar .= "<span class='calendar-badge badge-default badge-calendar-id'>"; 255: break; 256: } 257: 258: $calendar .= "<a draggable='true' ondragstart='handleDragStart();' title='" . $balloon_text . "' href='" . $object_edit_page . "?" . $object_uuid_name . "=" . $record['object_uuid'] . "'>"; 259: 260: $calendar .= "" . $record[$info_field] . "</a></span>"; 261: $calendar .= "</div></div>"; 262: 263: } 264: } 265: 266: $calendar.= '</td>'; 267: 268: if($running_day == 6): 269: $date_for_week = new DateTime($current_date); 270: 271: $calendar .= "<td class='month-calendar-table-data-week-number'><div class='month-calendar-week-number'>" . $date_for_week->format("W") . "</div></td>"; 272: $calendar .= '</tr>'; 273: 274: if(($day_counter+1) != $days_in_month): 275: $calendar.= '<tr class="month-calendar-row">'; 276: 277: 278: endif; 279: $running_day = -1; 280: $days_in_this_week = 0; 281: endif; 282: $days_in_this_week++; $running_day++; $day_counter++; 283: endfor; 284: 285: // finish the rest of the days in the week 286: // Have endif.... 287: if($days_in_this_week < 8): 288: for($x = 1; $x <= (8 - $days_in_this_week); $x++): 289: $calendar.= '<td class="month-calendar-day-np">.. </td>'; 290: 291: 292: // FIXIT - this coding style we dont't want 293: endfor; 294: $date_for_week = new DateTime($current_date); 295: $calendar .= "<td><div class='month-calendar-week-number'>" . $date_for_week->format("W") . "</div></td>"; 296: 297: endif; 298: 299: /* final row */ 300: $calendar.= '</tr>'; 301: 302: /* end the table */ 303: $calendar.= '</table>'; 304: 305: /* all done, return result */ 306: printf("%s", $calendar); 307: 308: 309: } 310: 311: //---------------------------------------------------------------------- 312: // 313: //---------------------------------------------------------------------- 314: 315: // 316: // Test data 317: // 318: 319: $db_records = array( 320: array("calendar_date" => "2016-11-10", "object_uuid" => "da0d9d4e-af58-11e6-8727-970304220a13", 321: "name" => "WP 1 - Test with long string in name", "status" => "ACTIVE", "description" => "Some info here"), 322: 323: array("calendar_date" => "2016-11-12", "object_uuid" => "015e9fce-af59-11e6-bba9-ff24e713ee1e", 324: "name" => "WP 2", "status" => "HALTED", "description" => "Some more info here"), 325: 326: array("calendar_date" => "2016-11-10", "object_uuid" => "0d4c4822-af59-11e6-8ba8-e34f3d6d4ec5", 327: "name" => "WP 3 - Test with long string in name", "status" => "ACTIVE", "description" => "Some more info here"), 328: 329: array("calendar_date" => "2016-11-12", "object_uuid" => "14d27b48-af59-11e6-86b2-2b02d87960e7", 330: "name" => "WP 4", "status" => "ACTIVE", "description" => "Some more info here"), 331: 332: array("calendar_date" => "2016-11-10", "object_uuid" => "1a893932-af59-11e6-b2be-9338ca2338ea", 333: "name" => "WP 5", "status" => "ACTIVE", "description" => "Some more info here"), 334: 335: array("calendar_date" => "2016-11-14", "object_uuid" => "20414144-af59-11e6-b335-034c70f19043", 336: "name" => "WP 6", "status" => "ACTIVE", "description" => "Some more info here"), 337: 338: array("calendar_date" => "2016-11-30", "object_uuid" => "25eadeca-af59-11e6-bea5-0bf1c31c7b1b", 339: "name" => "WP 7", "status" => "ACTIVE", "description" => "Some more info here"), 340: 341: array("calendar_date" => "2016-12-10", "object_uuid" => "25eadeca-af59-11e6-bea5-0bf1c31c7b1b", 342: "name" => "WP 8", "status" => "ACTIVE", "description" => "Some more info here") 343: ); 344: 345: //---------------------------------------------------------------------- 346: // NOTE if we have a database we can generate the records in this manner 347: //---------------------------------------------------------------------- 348: 349: // $query = sprintf("select to_date(delivery_date::TEXT, 'YYYY-MM-DD') as calendar_date, material_batch_uuid as object_uuid, " . 350: // "name, description, status from rwms.material_batch where " . 351: // "to_date(delivery_date::TEXT, 'YYYY-MM')::TEXT like '%%%s%%' order by delivery_date", $month); 352: // Postgresql 353: // $db_records = pg_query($db_connection, $query); 354: 355: //---------------------------------------------------------------------- 356: // Call the widget 357: //---------------------------------------------------------------------- 358: widget_calendar_month($month, 359: "rbis-person-edit.php", 360: "person_uuid", 361: "rbis-person-list.php", 362: "first-working-day", 363: $calendar_titel="Workpoints", 364: $info_field='name', 365: $calendar_page='calendar-month.php', 366: $db_records); 367: 368: 369: 370: html_h("Sourcecode", 2); 371: 372: html_p("Source for the page"); 373: 374: // html-version of this file 375: include_once("src/calendar-month-numbered.html"); 376: 377: html_p("Source for the CSS"); 378: 379: include_once("src/calendar-month.css.html"); 380: 381: 382: page_column_end(); 383: page_row_end(); 384: 385: page_footer("http://www.raditex.nu","Raditex Konsult","http://www.rscada.se","rScada"); 386: page_end(); 387: print("<script src='libs/rbis-library-utils.js'></script>"); 388: print("<script src='http://d3js.org/d3.v3.js'></script>"); 389: print("<script src='libs/graph-simple.js'></script>"); 390: //---------------------------------------------------------------------- 391: // EOF 392: //---------------------------------------------------------------------- 393: ?> 394:
Source for the CSS
001: 002: /*********************************************************************** 003: * 004: * calendar-week widget 005: * calendar-month.css 006: * Copyright, Raditex Control AB, 2016 007: * Goran Hasse, <gorhas@raditex.nu> 008: * 009: ***********************************************************************/ 010: 011: /********************************************************************** 012: * 013: ***********************************************************************/ 014: .calendar-week-header-row 015: { 016: 017: height: 50px; 018: font-size: 10px; 019: font-family: Helvetica, Arial, sans; 020: background-color: #DDDDFF; 021: 022: } 023: 024: .calendar-week-header 025: { 026: font-size: 14px; 027: text-align: center; 028: background-color: #DDDDFF; 029: } 030: 031: .calendar-week-header-top 032: { 033: height: 20px; 034: font-size: 14px; 035: text-align: center; 036: background-color: #DDDDFF; 037: color: blue; 038: } 039: 040: .calendar-week-title 041: { 042: 043: height: 50px; 044: font-size: 18px; 045: text-align: center; 046: background-color: #DDDDFA; 047: } 048: 049: .calendar 050: { 051: width: 400px; 052: height: 250px; 053: border-collapse: collapse; 054: font-size: 10px; 055: font-family: Helvetica, Arial, sans; 056: background-color: white; 057: } 058: 059: .calendar tbody td { 060: border: 1px solid black; 061: text-align: right; 062: vertical-align: top; 063: width: 14%; 064: } 065: 066: .calendar td.empty { 067: border: none; 068: } 069: 070: 071: /********************************************************************** 072: * month-calendar widget 073: ***********************************************************************/ 074: .month-calendar 075: { 076: border-left:5px solid #999; 077: border-top:5px solid #999; 078: border-bottom:5px solid #999; 079: border-right:5px solid #999; 080: 081: font-family: Sans; 082: 083: border: 2px solid black; 084: 085: margin-top: 5px; 086: 087: margin-bottom: 60px; 088: 089: width: 100%; 090: 091: } 092: 093: .month-calendar-row 094: { 095: 096: font-family: Sans; 097: font-align: center; 098: 099: background-color: rgb(152,209,211); 100: 101: border-bottom: 1px solid #999; 102: border-top: 1px solid #999; 103: border-right: 1px solid #999; 104: border-left: 1px solid #999; 105: 106: 107: } 108: 109: .droparea:-moz-drag-over 110: { 111: 112: border: 2px solid black; 113: 114: } 115: 116: .month-calendar-day-head-drop:-moz-drag-over 117: { 118: border: 1px solid black; 119: } 120: 121: div.month-calendar-day-item 122: { 123: 124: color: #FFFFFF; 125: /* border: 8px solid black; */ 126: 127: } 128: 129: .month-calendar-title 130: { 131: 132: font-family: Sans; 133: font-size: 30px; 134: color: #003399; 135: 136: } 137: 138: .month-calendar-day 139: { 140: width: 250px; 141: min-height:80px; 142: font-size:10px; 143: text-overflow: ellipsis; 144: white-space: nowrap; 145: table-layout: fixed; 146: max-width: 200px; 147: overflow: hidden; 148: vertical-align: top; 149: word-wrap: break-word; 150: /* border: 1px solid black; */ 151: /* background-color: #eeeeee; */ 152: color: #669; 153: font-weight: bold; 154: position: relative; 155: 156: border-bottom: 1px solid #999; 157: border-top: 1px solid #999; 158: border-right: 1px solid #999; 159: border-left: 1px solid #999; 160: 161: 162: } * html div.month-calendar-day { height: 0; } 163: 164: /* td.calendar-day:hover{ background:#eceff5; } */ 165: 166: .month-calendar-day:hover 167: { 168: background: #CCFFFF; 169: } 170: 171: .month-calendar-day-np 172: { 173: background: rgb(204,204,204); 174: min-height: 80px; 175: 176: } * html div.month-calendar-day-np { height:80px; } 177: 178: 179: .month-calendar-day-head-row 180: { 181: 182: background: #A9C1D9; 183: text-align: center; 184: 185: font-weight: bold; 186: font-style: Sans; 187: font-size: 20px; 188: 189: 190: border-bottom: 1px solid #999; 191: border-top: 1px solid #999; 192: border-right: 1px solid #999; 193: border-left: 1px solid #999; 194: 195: 196: } 197: 198: .month-calendar-day-head 199: { 200: 201: background: #A9C1D9; 202: 203: /* padding: 3px; */ 204: 205: 206: font-weight: bold; 207: font-style: Sans; 208: font-size: 28px; 209: /* color: rgb(255,255,255); */ 210: text-align: center; 211: /* 212: width: 210px; 213: 214: padding: 5px; 215: */ 216: 217: /* 218: border-bottom: 1px solid #999; 219: border-top: 1px solid #999; 220: border-right: 1px solid #999; 221: border-left: 1px solid #999; 222: */ 223: 224: } 225: 226: .month-calendar-day-head-xx 227: { 228: 229: background: #A9C1D9; 230: 231: /* padding: 3px; */ 232: 233: 234: font-weight: bold; 235: font-style: Sans; 236: font-size: 18px; 237: color: rgb(133,43,64); 238: text-align: center; 239: /* 240: width: 210px; 241: 242: padding: 5px; 243: */ 244: 245: 246: border-bottom: 1px solid #999; 247: border-top: 1px solid #999; 248: border-right: 1px solid #999; 249: border-left: 1px solid #999; 250: 251: 252: } 253: 254: .month-calendar-day-head-week 255: { 256: 257: background: #A9C1D9; 258: 259: color: rgb(133,43,64); 260: font-weight: bold; 261: font-style: Sans; 262: font-size: 18px; 263: 264: text-align:center; 265: width:50px; 266: /* padding:5px; */ 267: 268: border-bottom:1px solid #999; 269: border-top:1px solid #999; 270: border-right:1px solid #999; 271: 272: 273: } 274: 275: 276: .month-calendar-table-data-week-number 277: { 278: 279: background: #A9C1D9; 280: vertical-align: top; 281: position: relative; 282: font-size: 30px; 283: /* background: #9999FF; */ 284: margin: 3px 3px 3px 3px; 285: padding: 3px; 286: 287: color: rgb(0,0,0); 288: 289: border-bottom:1px solid #999; 290: border-top:1px solid #999; 291: border-right:1px solid #999; 292: 293: } 294: 295: .month-calendar-week-number 296: { 297: vertical-align: top; 298: position: relative; 299: font-size: 30px; 300: font-align: center; 301: horizontal-align: center; 302: background: #9999FF; 303: 304: margin: 3px 3px 3px 3px; 305: padding: 3px; 306: 307: border-bottom: 0px solid #999; 308: border-top: 0px solid #999; 309: border-right: 0px solid #999; 310: 311: color: rgb(255,255,255); 312: 313: } 314: 315: .month-calendar-day-number-item 316: { 317: 318: font-size: 18px; 319: color: rgb(255,255,255); 320: 321: } 322: 323: .month-calendar-day-number 324: { 325: position: relative; 326: vertical-align: top; 327: /* background: #A9C1D9; */ 328: background: rgb(241,90,36); 329: 330: padding-top: 0; 331: padding-bottom: 0; 332: font-size: 18px; 333: color: rgb(255,255,255); 334: font-weight: bold; 335: /* text-decoration: underline; */ 336: float: right; 337: 338: margin-top: 3px; 339: margin-bottom: 3px; 340: margin-left: 3px; 341: margin-right: 3px; 342: 343: width: 30px; 344: text-align: center; 345: z-index: 60; 346: opacity: 1.0; 347: } 348: 349: /* shared */ 350: 351: 352: td .month-calendar-day, td .month-calendar-day-np 353: { 354: 355: width: 120px; 356: padding: 5px; 357: border-bottom: 1px solid #999; 358: border-right: 1px solid #999; 359: border-left: 1px solid #999; 360: border-top: 1px solid #999; 361: 362: } 363: 364: .month-calendar-day, .month-calendar-day-np 365: { 366: width: 120px; 367: padding: 5px; 368: border-bottom: 1px solid #999; 369: border-right:1px solid #999; 370: /* 371: border-left: 1px solid #999; 372: border-top: 1px solid #999; 373: */ 374: 375: } 376: 377: 378: .button-in-month-header 379: { 380: 381: /* background: #ff0000; */ 382: 383: color: rgb(0,0,0); 384: 385: font-style: Sans; 386: 387: font-weight: bold; 388: padding: 5px; 389: 390: margin-top: 0; 391: margin-bottom: 0; 392: 393: 394: font-size: 15px; 395: 396: background: #A9C1FF; 397: /* 398: color: #161411; 399: */ 400: width: 150px; 401: 402: /* background: #A9C1FF; */ 403: 404: 405: border-radius: 3px; 406: box-shadow: none; 407: 408: z-index: 80; 409: 410: margin-top: 0; 411: margin-bottom: 0; 412: 413: /* padding: 10px 8px; */ 414: 415: } 416: 417: .button-in-month-header-left 418: { 419: 420: /* background: #ff0000; */ 421: font-size: 15px; 422: color: rgb(0,0,0); 423: 424: font-weight: bold; 425: padding: 5px; 426: 427: background: rgb(0,153,153); 428: background: #A9C1FF; 429: /* 430: color: #161411; 431: */ 432: width: 150px; 433: 434: /* background: #A9C1FF; */ 435: 436: /* 437: 438: background-image: url("http://www.raditex.nu/framework/img/arrow-left.png"); 439: background-repeat: no-repeat; 440: 441: background-attatchment: fixed; 442: background-position: 5% 50%; 443: 444: */ 445: 446: border-radius: 0px; 447: box-shadow: none; 448: 449: z-index: 1000; 450: 451: margin-top: 0; 452: margin-bottom: 0; 453: 454: /* padding: 10px 8px; */ 455: 456: } 457: 458: .button-in-month-header-right 459: { 460: 461: /* background: #ff0000; */ 462: 463: font-size: 15px; 464: font-weight: bold; 465: padding: 5px; 466: 467: color: rgb(0,0,0); 468: 469: background: rgb(0,153,153); 470: background: #A9C1FF; 471: 472: width: 150px; 473: 474: 475: /* 476: background-image: url("http://www.raditex.nu/framework/img/arrow-right.png"); 477: background-repeat: no-repeat; 478: 479: background-attatchment: fixed; 480: background-position: 95% 50%; 481: 482: */ 483: border-radius: 0px; 484: box-shadow: none; 485: 486: z-index: 1000; 487: 488: margin-top: 10px; 489: margin-bottom: 10px; 490: 491: /* padding: 10px 8px; */ 492: 493: } 494: 495: 496: 497: 498: /* 499: Alternate 500: 501: table.calendar { border-left:1px solid #999; border-collapse:collapse; } 502: tr.calendar-row { } 503: td.calendar-day { min-height:80px; font-size:1.0em; position:relative; margin:0; padding:0; } * html div.calendar-day { height:80px; } 504: td.calendar-day:hover { background-color:#eceff5; margin:0; padding:5px; } 505: td.calendar-day-np { background-color:#eee; margin:0; padding:0; min-height:80px; } * html div.calendar-day-np { height:80px; } 506: td.calendar-day-head { background-color:#ccc; font-weight:bold; text-align:center; width:120px; padding:5px; margin:0; border-bottom:1px solid #999; border-top:1px solid #999; border-right:1px solid #999; } 507: div.day-number { background:#999; padding:5px; color:#fff; font-weight:bold; float:right; margin:-5px -5px 0 0; width:20px; text-align:center; } 508: td.calendar-day, td.calendar-day-np { width:120px; padding:5px; border-bottom:1px solid #999; border-right:1px solid #999; margin:0; } 509: 510: */ 511:
Comments