jengalas
10/28/2013 - 2:00 PM

LibCal hours module - monthly calendar

LibCal hours module - monthly calendar

libcalhours.css
content_copyfile_download
#lc_lcol { display: none; }
.lc_cal_oh	{ font: 12px/1.5em Arial, Helvetica, sans-serif; overflow: hidden; width: 1000px; }
.lc_hours_cal {  margin: 10px 2px 30px 2px; width: 745px; background-color: #fff; border-spacing:0; border-collapse:collapse; -webkit-box-shadow:1px 1px 3px 0 #aaa; box-shadow:1px 1px 3px 0 #aaa; -webkit-border-radius:5px 5px 0 0;  border-radius:5px 5px 0 0;} 
.lc_header_title { font-size: 20px; font-weight: normal; padding: 10px 20px; }
.lc_header_date {  padding: 10px 20px; font-size: 20px; font-weight: normal; }
.lc_hours_cal tr.days { text-align: center; color: #000; background-color: #F3F3F3; font-size: 11px; text-transform: uppercase; border-top: 1px solid #D0D0D0; border-bottom: 1px solid #D0D0D0; }
.lc_hours_cal tr.days td { border-right: 1px solid #D0D0D0; width: 14%;}
.lc_hours_cal .noday, .lc_hours_cal td.day { vertical-align:text-top; border-right: 1px solid #D0D0D0; border-bottom: 1px solid #D0D0D0; }
.lc_day_l { text-align: right; color: #000; font-size: 12px; padding: 2px; }
.lc_hours_cal td.day { border-right: 1px solid #D0D0D0; }
.lc_loc { border-radius: 3px; margin: 1px; padding: 1px 3px; color: #fff; line-height: 1em; font-size: 12px; }
.lc_loc_name { display: none; margin:0; padding:2px 0; font-size: 11px; }
.lc_sub_loc { margin-left: 3px;}
.lc_hours_cal .cells { height: 50px; }
.lc_today { background-color: #FFFFCC;}
.lc_cal_hours_nav{ width: 100px; z-index: 90; clear: right; overflow: hidden; position: absolute; margin: 0; text-align: center; padding: 0 0 0 653px; }
.lc_cal_prev{ float: left; padding: 0; margin: 30px 0 0 0; width: 40px; height: 20px; display: block; left: 0; font-size: 30px;	}
.lc_cal_next{ float: left; padding: 0; margin: 30px 0 0 0; width: 40px; height: 20px; display: block; right: 0; font-size: 30px;	}
.lc_cal_prev .disabled, .lc_cal_next .disabled{ display: none; }
.lc_list { margin-bottom: 5px;}
.lc_list_box { width: 25px; height: 25px; display:inline-block; border-radius: 3px; padding: 0;}
.lc_list_cb { padding: 0; margin: 6px; }
.lc_list  label {font-weight:bold; word-break: normal;} 
.lc_footnote_cal { overflow: hidden; width: 100%; margin-bottom: 10px; } 
.lc_dot { padding: 0 6px; font-weight: bold; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } 
.s-lc-note{ display: inline-block; } 
.loc_115 { background-color: #490f5b; }
index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>LibCal Hours Module API - Monthly Calendar</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" href="css/libcalhours.css" rel="stylesheet" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  </head>
  <body>
    <script src="//lcimages.s3.amazonaws.com/hours_month.js"></script> 
    <div id="lcmonth966"></div> 
      <script>
        $(function(){ 
          var lcmonth966 = new $.LibCalHoursCal( $("#lcmonth966"), { iid: 966, lid: 0, months: 4 }); 
        });
    </script> 
  </body>
</html>