Month calendar

This calendar widget is a simple month-widget.

The widget takes an array and display the records on days.

Events
2024-01
MondayTuesdayWednesdayThursdayFridaySaturdaySundayWeek
01
02
03
04
.. .. .. ..
05

Sourcecode

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 . "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" . $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: 

Month calendar

Comments