Browse files

Add: current time indicator (closes #57)

  • Loading branch information...
1 parent 2a90238 commit 0e06956a936c768e71e17e43d3a7e2bfc3f8e6a9 @K-Phoen K-Phoen committed Apr 28, 2012
Showing with 130 additions and 89 deletions.
  1. +91 −84 jquery.weekcalendar.css
  2. +35 −3 jquery.weekcalendar.js
  3. +4 −2 weekcalendar.html
View
175 jquery.weekcalendar.css
@@ -1,130 +1,127 @@
-
-
.wc-container {
- font-size: 14px;
- font-family: arial, helvetica;
+ font-size: 14px;
+ font-family: arial, helvetica;
}
.wc-toolbar {
- padding: 1em;
+ padding: 1em;
font-size:0.8em;
}
-.wc-toolbar .wc-nav
-{
+.wc-toolbar .wc-nav {
float:left;
}
-.wc-toolbar .wc-display{
+.wc-toolbar .wc-display {
float: right;
}
.wc-toolbar button {
- margin-top: 0;
- margin-bottom: 0;
+ margin-top: 0;
+ margin-bottom: 0;
}
-.wc-toolbar .wc-title{
- text-align:center;
+.wc-toolbar .wc-title {
+ text-align: center;
padding:0;
margin:0;
}
.wc-container table {
- border-collapse: collapse;
- border-spacing: 0;
+ border-collapse: collapse;
+ border-spacing: 0;
}
.wc-container table td {
- margin: 0;
- padding: 0;
+ margin: 0;
+ padding: 0;
}
-.wc-header{
- background: #eee;
+.wc-header {
+ background: #eee;
border-width:1px 0;
border-style:solid;
}
.wc-header table{
- width: 100%;
+ width: 100%;
table-layout:fixed;
}
.wc-grid-timeslot-header,
.wc-header .wc-time-column-header {
- width: 45px;
+ width: 45px;
}
.wc-header .wc-scrollbar-shim {
- width: 16px;
+ width: 16px;
}
.wc-header .wc-day-column-header {
- text-align: center;
- padding: 0.4em;
+ text-align: center;
+ padding: 0.4em;
}
.wc-header .wc-user-header{
- text-align: center;
- padding: 0.4em 0;
+ text-align: center;
+ padding: 0.4em 0;
overflow:hidden;
}
.wc-grid-timeslot-header {
- background: #eee;
+ background: #eee;
}
.wc-scrollable-grid {
- overflow: auto;
- overflow-x: hidden !important;
- overflow-y: auto !important;
- position: relative;
- background-color: #fff;
- width: 100%;
+ overflow: auto;
+ overflow-x: hidden !important;
+ overflow-y: auto !important;
+ position: relative;
+ background-color: #fff;
+ width: 100%;
}
table.wc-time-slots {
- width: 100%;
- table-layout: fixed;
- cursor: default;
+ width: 100%;
+ table-layout: fixed;
+ cursor: default;
overflow:hidden;
}
.wc-day-column {
- width: 13.5%;
- overflow: visible;
- vertical-align: top;
+ width: 13.5%;
+ overflow: visible;
+ vertical-align: top;
}
.wc-day-column-header{border-width: 0 0 1px 3px; border-style: solid;border-color:transparent;}
.wc-scrollable-grid .wc-day-column-last,
.wc-scrollable-grid .wc-day-column-middle{border-width: 0 0 0 1px; border-style: dashed;}
.wc-scrollable-grid .wc-day-column-first{border-width: 0 0 0 3px; border-style: double;}
.wc-day-column-inner {
- width: 100%;
- position:relative;
+ width: 100%;
+ position:relative;
}
.wc-no-height-wrapper{
- position:relative;
+ position:relative;
overflow: visible;
- height: 0px;
+ height: 0px;
}
.wc-time-slot-wrapper {
-/* top: 3px;*/
+/* top: 3px;*/
}
.wc-oddeven-wrapper .wc-full-height-column{
-/* top: 2px; */
+/* top: 2px; */
/* Modern Browsers */ opacity: 0.4;
/* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
/* IE 5-7 */ filter: alpha(opacity=40);
/* Netscape */ -moz-opacity: 0.4;
/* Safari 1 */ -khtml-opacity: 0.4;
}
.wc-freebusy-wrapper .wc-freebusy{
-/* top: 1px;*/
+/* top: 1px;*/
/* Modern Browsers */ opacity: 0.4;
/* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
/* IE 5-7 */ filter: alpha(opacity=40);
@@ -133,8 +130,8 @@ table.wc-time-slots {
}
.wc-time-slots {
- position: absolute;
- width: 100%;
+ position: absolute;
+ width: 100%;
}
.wc-column-odd,
@@ -151,72 +148,72 @@ table.wc-time-slots {
.wc-header .wc-today.ui-state-active.wc-day-column-last{border-right-width:3px;}
.wc-full-height-column{
- display:block;
+ display:block;
/* width:100%;*/
}
.wc-time-header-cell {
- padding: 5px;
- height: 80px; /* reference height */
+ padding: 5px;
+ height: 80px; /* reference height */
}
.wc-time-slot {
- border-bottom: 1px dotted #ddd;
+ border-bottom: 1px dotted #ddd;
}
.wc-hour-header {
- text-align: right;
+ text-align: right;
}
.wc-hour-header.ui-state-active,
.wc-hour-header.ui-state-default{
border-width:0 0 1px 0;
}
.wc-hour-end, .wc-hour-header {
- border-bottom: 1px solid #ccc;
- color: #555;
+ border-bottom: 1px solid #ccc;
+ color: #555;
}
.wc-business-hours {
- background-color: #E6EEF1;
- border-bottom: 1px solid #ccc;
- color: #333;
- font-size: 1.4em;
+ background-color: #E6EEF1;
+ border-bottom: 1px solid #ccc;
+ color: #333;
+ font-size: 1.4em;
}
.wc-business-hours .wc-am-pm {
- font-size: 0.6em;
+ font-size: 0.6em;
}
.wc-day-header-cell {
- text-align: center;
- vertical-align: middle;
- padding: 5px;
+ text-align: center;
+ vertical-align: middle;
+ padding: 5px;
}
.wc-time-slot-header .wc-header-cell {
- text-align: right;
- padding-right: 10px;
+ text-align: right;
+ padding-right: 10px;
}
.wc-cal-event {
- background-color: #68a1e5;
+ background-color: #68a1e5;
/* Modern Browsers */ opacity: 0.8;
/* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
/* IE 5-7 */ filter: alpha(opacity=80);
/* Netscape */ -moz-opacity: 0.8;
/* Safari 1 */ -khtml-opacity: 0.8;
- position: absolute;
- text-align: center;
- overflow: hidden;
- cursor: pointer;
- color: #fff;
- width: 100%;
- display: none;
+ position: absolute;
+ text-align: center;
+ overflow: hidden;
+ cursor: pointer;
+ color: #fff;
+ width: 100%;
+ display: none;
}
@@ -228,30 +225,30 @@ table.wc-time-slots {
}
.wc-cal-event.ui-resizable-resizing {
- cursor: s-resize;
+ cursor: s-resize;
}
.wc-cal-event .wc-time {
- background-color: #2b72d0;
- border: 1px solid #1b62c0;
- color: #fff;
- padding: 0;
- font-weight: bold;
+ background-color: #2b72d0;
+ border: 1px solid #1b62c0;
+ color: #fff;
+ padding: 0;
+ font-weight: bold;
}
.wc-container .ui-draggable .wc-time {
- cursor: move;
+ cursor: move;
}
.wc-cal-event .wc-title {
- position: relative;
+ position: relative;
}
.wc-container .ui-resizable-s {
- height: 10px;
- line-height: 10px;
- bottom: -2px;
- font-size: .75em;
+ height: 10px;
+ line-height: 10px;
+ bottom: -2px;
+ font-size: .75em;
}
@@ -264,6 +261,16 @@ table.wc-time-slots {
background:url("./libs/css/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png") repeat scroll 50% 50% #666666;
}
+/** hourLine */
+
+.wc-hourline {
+ height: 0pt;
+ border-top: 2px solid #FF7F6E;
+ overflow: hidden;
+ position: absolute;
+ width: 100%;
+}
+
/* IE6 hacks */
* html .wc-no-height-wrapper{position:absolute;}
* html .wc-time-slot-wrapper{top:3px;}
View
38 jquery.weekcalendar.js
@@ -26,7 +26,8 @@
_jQuery14OrLower = (10 * _v[0] + _v[1]) < 15;
$.widget('ui.weekCalendar', (function() {
- var _currentAjaxCall;
+ var _currentAjaxCall, _hourLineTimeout;
+
return {
options: {
date: new Date(),
@@ -63,12 +64,13 @@
},
switchDisplay: {},
scrollToHourMillis: 500,
- allowEventDelete: false,
+ allowEventDelete: false,
allowCalEventOverlap: false,
overlapEventsSeparate: false,
- totalEventsWidthPercentInOneColumn : 100,
+ totalEventsWidthPercentInOneColumn: 100,
readonly: false,
allowEventCreation: true,
+ hourLine: false,
deletable: function(calEvent, element) {
return true;
},
@@ -1248,7 +1250,37 @@
self._disableTextSelect($weekDayColumns);
+ _hourLineTimeout && clearInterval(_hourLineTimeout);
+
+ if (options.hourLine) {
+ self._drawCurrentHourLine();
+
+ _hourLineTimeout = setInterval(function() {
+ self._drawCurrentHourLine();
+ }, 60 * 1000); // redraw the line each minute
+ }
+ },
+
+ /**
+ * Draws a thin line which indicates the current time.
+ */
+ _drawCurrentHourLine: function() {
+ var d = new Date(),
+ options = this.options;
+
+ // first, we remove the old hourline if it exists
+ $('.wc-hourline', this.element).remove();
+
+ // then we recreate it
+ var nbHours = d.getHours() + d.getMinutes() / 60;
+ var positionTop = nbHours * options.timeslotHeight * options.timeslotsPerHour;
+ $('.wc-scrollable-grid .wc-today', this.element).append(
+ $('<div>', {
+ 'class': 'wc-hourline',
+ style: 'top: ' + positionTop + 'px'
+ })
+ );
},
/*
View
6 weekcalendar.html
@@ -60,8 +60,10 @@
$(document).ready(function() {
$('#calendar').weekCalendar({
- timeslotsPerHour: 4,
- data:eventData,
+ timeslotsPerHour: 6,
+ timeslotHeigh: 30,
+ hourLine: true,
+ data: eventData,
height: function($calendar) {
return $(window).height() - $('h1').outerHeight(true);
},

0 comments on commit 0e06956

Please sign in to comment.