summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorSebastian Wagner2011-10-25 09:37:35 +0200
committerSebastian Wagner2011-10-25 09:37:35 +0200
commitb9ab2aa96a8b93c92233fd0c5f845c329a7383dd (patch)
treeaae141ad7ef4dbec312d03bc174dc85a299fe3af
parentminor (diff)
downloadpoolctrl-b9ab2aa96a8b93c92233fd0c5f845c329a7383dd.tar.gz
poolctrl-b9ab2aa96a8b93c92233fd0c5f845c329a7383dd.tar.xz
poolctrl-b9ab2aa96a8b93c92233fd0c5f845c329a7383dd.zip
current timeline implemented
-rwxr-xr-xapplication/views/scripts/event/index.phtml12
-rwxr-xr-xpublic/media/css/fullcalendar.css595
-rwxr-xr-xpublic/media/js/fullcalendar.js44
3 files changed, 319 insertions, 332 deletions
diff --git a/application/views/scripts/event/index.phtml b/application/views/scripts/event/index.phtml
index 87fb8a6..58441ea 100755
--- a/application/views/scripts/event/index.phtml
+++ b/application/views/scripts/event/index.phtml
@@ -203,12 +203,13 @@ var dayClick = false;
allDaySlot: false,
selectable: true,
selectHelper: true,
- defaultView: 'agendaWeek',
- allDay : false,
+ currentTimeIndicator: true,
+ allDay : false,
+ defaultView: 'agendaWeek',
slotMinutes: 15,
defaultEventMinutes: 10,
- loading: function(bool) { if (bool) $('#progress').show(); else $('#progress').hide(); },
+ loading: function(bool) { if (bool) $('#progress').show(); else $('#progress').hide(); },
/*
dayClick: function( date, allDay, jsEvent, view ) {
@@ -725,8 +726,7 @@ var dayClick = false;
if (view.name == 'agendaDay') {
element.find('.fc-event-title').append("<br/> Type: " + event.category + "<br/> Note: " + event.note + "<br/> Participants: " + event.participants);
}
- }
-
+ }
});
// EventType Buttons
@@ -1018,4 +1018,4 @@ selected one?</p>
</div>
<!-- add loading image -->
-<IMG id="progress" class="mitte" src="/media/img/loader.gif"/> \ No newline at end of file
+<IMG id="progress" class="fc-progress" src="/media/img/loader.gif"/> \ No newline at end of file
diff --git a/public/media/css/fullcalendar.css b/public/media/css/fullcalendar.css
index 529ca04..886d600 100755
--- a/public/media/css/fullcalendar.css
+++ b/public/media/css/fullcalendar.css
@@ -8,163 +8,144 @@
* Date: Sat Apr 9 14:09:51 2011 -0700
*
*/
-
-
.fc {
direction: ltr;
text-align: left;
- }
-
+}
+
.fc table {
border-collapse: collapse;
border-spacing: 0;
- }
-
-html .fc,
-.fc table {
+}
+
+html .fc,.fc table {
font-size: 1em;
- }
-
-.fc td,
-.fc th {
+}
+
+.fc td,.fc th {
padding: 0;
vertical-align: top;
- }
-
-
+}
/* Header
------------------------------------------------------------------------*/
-
.fc-header td {
white-space: nowrap;
- }
+}
.fc-header-left {
width: 25%;
text-align: left;
- }
-
+}
+
.fc-header-center {
text-align: center;
- }
-
+}
+
.fc-header-right {
width: 25%;
text-align: right;
- }
-
+}
+
.fc-header-title {
display: inline-block;
vertical-align: top;
font-size: xx-small;
- }
-
+}
+
.fc-header-title h2 {
margin-top: 0;
white-space: nowrap;
- }
-
+}
+
.fc .fc-header-space {
padding-left: 0px;
- }
-
+}
+
.fc-header .fc-button {
margin-bottom: 1em;
vertical-align: top;
- }
-
-/* buttons edges butting together */
+}
+/* buttons edges butting together */
.fc-header .fc-button {
margin-right: -1px;
- }
-
+}
+
.fc-header .fc-corner-right {
margin-right: 1px; /* back to normal */
- }
-
+}
+
.fc-header .ui-corner-right {
margin-right: 0; /* back to normal */
- }
-
+}
+
/* button layering (for border precedence) */
-
-.fc-header .fc-state-hover,
-.fc-header .ui-state-hover {
+.fc-header .fc-state-hover,.fc-header .ui-state-hover {
z-index: 2;
- }
-
+}
+
.fc-header .fc-state-down {
z-index: 3;
- }
+}
-.fc-header .fc-state-active,
-.fc-header .ui-state-active {
+.fc-header .fc-state-active,.fc-header .ui-state-active {
z-index: 4;
- }
-
-
-
+}
+
/* Content
------------------------------------------------------------------------*/
-
.fc-content {
clear: both;
- }
-
+}
+
.fc-view {
width: 100%; /* needed for view switching (when view is absolute) */
overflow: hidden;
- }
-
-
+}
/* Cell Styles
------------------------------------------------------------------------*/
-
-.fc-widget-header, /* <th>, usually */
-.fc-widget-content { /* <td>, usually */
+.fc-widget-header, /* <th>, usually */ .fc-widget-content {
+ /* <td>, usually */
border: 1px solid #ccc;
- }
-
-.fc-state-highlight { /* <td> today cell */ /* TODO: add .fc-today to <th> */
+}
+
+.fc-state-highlight { /* <td> today cell */
+ /* TODO: add .fc-today to <th> */
background: #ffc;
- }
-
+}
+
.fc-cell-overlay { /* semi-transparent rectangle while dragging */
background: #9cf;
opacity: .2;
- filter: alpha(opacity=20); /* for IE */
- }
-
-
+ filter: alpha(opacity = 20); /* for IE */
+}
/* Buttons
------------------------------------------------------------------------*/
-
.fc-button {
position: relative;
display: inline-block;
cursor: pointer;
- }
-
+}
+
.fc-state-default { /* non-theme */
border-style: solid;
border-width: 1px 0;
- }
-
+}
+
.fc-button-inner {
position: relative;
float: left;
overflow: hidden;
- }
-
+}
+
.fc-state-default .fc-button-inner { /* non-theme */
border-style: solid;
border-width: 0 1px;
- }
-
+}
+
.fc-button-content {
position: relative;
float: left;
@@ -172,32 +153,30 @@ html .fc,
line-height: 1.9em;
padding: 0 .6em;
white-space: nowrap;
- }
-
+}
+
/* icon (for jquery ui) */
-
.fc-button-content .fc-icon-wrap {
position: relative;
float: left;
top: 50%;
- }
-
+}
+
.fc-button-content .ui-icon {
position: relative;
float: left;
- margin-top: -50%;
- *margin-top: 0;
- *top: -50%;
- }
-
+ margin-top: -50%; *
+ margin-top: 0; *
+ top: -50%;
+}
+
/* gloss effect */
-
.fc-state-default .fc-button-effect {
position: absolute;
top: 50%;
left: 0;
- }
-
+}
+
.fc-state-default .fc-button-effect span {
position: absolute;
top: -100px;
@@ -209,83 +188,73 @@ html .fc,
border-color: #fff;
background: #444;
opacity: .09;
- filter: alpha(opacity=9);
- }
-
+ filter: alpha(opacity = 9);
+}
+
/* button states (determines colors) */
-
-.fc-state-default,
-.fc-state-default .fc-button-inner {
+.fc-state-default,.fc-state-default .fc-button-inner {
border-style: solid;
border-color: #ccc #bbb #aaa;
background: #F3F3F3;
color: #000;
- }
-
-.fc-state-hover,
-.fc-state-hover .fc-button-inner {
+}
+
+.fc-state-hover,.fc-state-hover .fc-button-inner {
border-color: #999;
- }
-
-.fc-state-down,
-.fc-state-down .fc-button-inner {
+}
+
+.fc-state-down,.fc-state-down .fc-button-inner {
border-color: #555;
background: #777;
- }
-
-.fc-state-active,
-.fc-state-active .fc-button-inner {
+}
+
+.fc-state-active,.fc-state-active .fc-button-inner {
border-color: #555;
background: #777;
color: #fff;
- }
-
-.fc-state-disabled,
-.fc-state-disabled .fc-button-inner {
+}
+
+.fc-state-disabled,.fc-state-disabled .fc-button-inner {
color: #999;
border-color: #ddd;
- }
-
+}
+
.fc-state-disabled {
cursor: default;
- }
-
+}
+
.fc-state-disabled .fc-button-effect {
display: none;
- }
-
-
+}
/* Global Event Styles
------------------------------------------------------------------------*/
-
.fc-event {
border-style: solid;
border-width: 0;
font-size: 0.85em;
cursor: default;
- }
-
-a.fc-event,
-.fc-event-draggable {
+}
+
+a.fc-event,.fc-event-draggable {
cursor: pointer;
- }
-
+}
+
a.fc-event {
text-decoration: none;
- }
-
+}
+
.fc-rtl .fc-event {
text-align: right;
- }
-
+}
+
.fc-event-skin {
- border-color: #36c; /* default BORDER color */
+ border-color: #36c; /* default BORDER color */
background-color: #36c; /* default BACKGROUND color */
- color: #fff; /* default TEXT color */
- opacity: 1; /* opacity hack */
- }
-
+ color: #fff; /* default TEXT color */
+ opacity: 1; /* opacity hack */
+}
+
.fc-event-inner {
position: relative;
width: 100%;
@@ -293,215 +262,189 @@ a.fc-event {
border-style: solid;
border-width: 2px;
overflow: hidden;
- }
+}
-.fc-event-time,
-.fc-event-title {
+.fc-event-time,.fc-event-title {
padding: 0 1px;
- }
-
+}
+
.fc-event-time-0 {
background: url(/media/img/pause.png) top right no-repeat;
- }
-
+}
+
.fc-event-time-1 {
- background: url(/media/img/play.gif) top right no-repeat;
- }
-
+ background: url(/media/img/play.gif) top right no-repeat;
+}
+
.fc-event-time-2 {
- background: url(/media/img/default.png) top right no-repeat;
- }
-
+ background: url(/media/img/default.png) top right no-repeat;
+}
+
.fc-event-time-3 {
- background: url(/media/img/delete.png) top right no-repeat;
- }
-
-.fc .ui-resizable-handle { /*** TODO: don't use ui-resizable anymore, change class ***/
+ background: url(/media/img/delete.png) top right no-repeat;
+}
+
+.fc .ui-resizable-handle {
+ /*** TODO: don't use ui-resizable anymore, change class ***/
display: block;
position: absolute;
z-index: 99999;
overflow: hidden; /* hacky spaces (IE6/7) */
- font-size: 300%; /* */
+ font-size: 300%; /* */
line-height: 50%; /* */
- }
-
-
-
+}
+
/* Horizontal Events
------------------------------------------------------------------------*/
-
.fc-event-hori {
border-width: 1px 0;
margin-bottom: 1px;
- }
-
+}
+
/* resizable */
-
.fc-event-hori .ui-resizable-e {
- top: 0 !important; /* importants override pre jquery ui 1.7 styles */
- right: -3px !important;
- width: 7px !important;
- height: 100% !important;
+ top: 0 !important; /* importants override pre jquery ui 1.7 styles */
+ right: -3px !important;
+ width: 7px !important;
+ height: 100% !important;
cursor: e-resize;
- }
-
+}
+
.fc-event-hori .ui-resizable-w {
- top: 0 !important;
- left: -3px !important;
- width: 7px !important;
- height: 100% !important;
+ top: 0 !important;
+ left: -3px !important;
+ width: 7px !important;
+ height: 100% !important;
cursor: w-resize;
- }
-
+}
+
.fc-event-hori .ui-resizable-handle {
_padding-bottom: 14px; /* IE6 had 0 height */
- }
-
-
-
+}
+
/* Fake Rounded Corners (for buttons and events)
------------------------------------------------------------*/
-
.fc-corner-left {
margin-left: 1px;
- }
-
-.fc-corner-left .fc-button-inner,
-.fc-corner-left .fc-event-inner {
+}
+
+.fc-corner-left .fc-button-inner,.fc-corner-left .fc-event-inner {
margin-left: -1px;
- }
-
+}
+
.fc-corner-right {
margin-right: 1px;
- }
-
-.fc-corner-right .fc-button-inner,
-.fc-corner-right .fc-event-inner {
+}
+
+.fc-corner-right .fc-button-inner,.fc-corner-right .fc-event-inner {
margin-right: -1px;
- }
-
+}
+
.fc-corner-top {
margin-top: 1px;
- }
-
+}
+
.fc-corner-top .fc-event-inner {
margin-top: -1px;
- }
-
+}
+
.fc-corner-bottom {
margin-bottom: 1px;
- }
-
+}
+
.fc-corner-bottom .fc-event-inner {
margin-bottom: -1px;
- }
-
-
-
+}
+
/* Fake Rounded Corners SPECIFICALLY FOR EVENTS
-----------------------------------------------------------------*/
-
.fc-corner-left .fc-event-inner {
border-left-width: 1px;
- }
-
+}
+
.fc-corner-right .fc-event-inner {
border-right-width: 1px;
- }
-
+}
+
.fc-corner-top .fc-event-inner {
border-top-width: 1px;
- }
-
+}
+
.fc-corner-bottom .fc-event-inner {
border-bottom-width: 1px;
- }
-
-
-
+}
+
/* Reusable Separate-border Table
------------------------------------------------------------*/
-
table.fc-border-separate {
border-collapse: separate;
- }
-
-.fc-border-separate th,
-.fc-border-separate td {
+}
+
+.fc-border-separate th,.fc-border-separate td {
border-width: 1px 0 0 1px;
- }
-
-.fc-border-separate th.fc-last,
-.fc-border-separate td.fc-last {
+}
+
+.fc-border-separate th.fc-last,.fc-border-separate td.fc-last {
border-right-width: 1px;
- }
-
-.fc-border-separate tr.fc-last th,
-.fc-border-separate tr.fc-last td {
+}
+
+.fc-border-separate tr.fc-last th,.fc-border-separate tr.fc-last td {
border-bottom-width: 1px;
- }
-
-.fc-border-separate tbody tr.fc-first td,
-.fc-border-separate tbody tr.fc-first th {
+}
+
+.fc-border-separate tbody tr.fc-first td,.fc-border-separate tbody tr.fc-first th
+ {
border-top-width: 0;
- }
-
-
+}
/* Month View, Basic Week View, Basic Day View
------------------------------------------------------------------------*/
-
.fc-grid th {
text-align: center;
- }
-
+}
+
.fc-grid .fc-day-number {
float: right;
padding: 0 2px;
- }
-
+}
+
.fc-grid .fc-other-month .fc-day-number {
opacity: 0.3;
- filter: alpha(opacity=30); /* for IE */
+ filter: alpha(opacity = 30); /* for IE */
/* opacity with small font can sometimes look too faded
might want to set the 'color' property instead
making day-numbers bold also fixes the problem */
- }
-
+}
+
.fc-grid .fc-day-content {
clear: both;
padding: 2px 2px 1px; /* distance between events and day edges */
- }
-
+}
+
/* event styles */
-
.fc-grid .fc-event-time {
font-weight: bold;
- }
-
+}
+
/* right-to-left */
-
.fc-rtl .fc-grid .fc-day-number {
float: left;
- }
-
+}
+
.fc-rtl .fc-grid .fc-event-time {
float: right;
- }
-
-
+}
/* Agenda Week View, Agenda Day View
------------------------------------------------------------------------*/
-
.fc-agenda table {
border-collapse: separate;
- }
-
+}
+
.fc-agenda-days th {
text-align: center;
- }
-
+}
+
.fc-agenda .fc-agenda-axis {
width: 50px;
padding: 0 4px;
@@ -509,96 +452,87 @@ table.fc-border-separate {
text-align: right;
white-space: nowrap;
font-weight: normal;
- }
-
+}
+
.fc-agenda .fc-day-content {
padding: 2px 2px 1px;
- }
-
+}
+
/* make axis border take precedence */
-
.fc-agenda-days .fc-agenda-axis {
border-right-width: 1px;
- }
-
+}
+
.fc-agenda-days .fc-col0 {
border-left-width: 0;
- }
-
+}
+
/* all-day area */
-
.fc-agenda-allday th {
border-width: 0 1px;
- }
-
+}
+
.fc-agenda-allday .fc-day-content {
min-height: 34px; /* TODO: doesnt work well in quirksmode */
_height: 34px;
- }
-
+}
+
/* divider (between all-day and slots) */
-
.fc-agenda-divider-inner {
height: 2px;
overflow: hidden;
- }
-
+}
+
.fc-widget-header .fc-agenda-divider-inner {
background: #eee;
- }
-
+}
+
/* slot rows */
-
.fc-agenda-slots th {
border-width: 1px 1px 0;
- }
-
+}
+
.fc-agenda-slots td {
border-width: 1px 0 0;
background: none;
- }
-
+}
+
.fc-agenda-slots td div {
height: 20px;
- }
-
-.fc-agenda-slots tr.fc-slot0 th,
-.fc-agenda-slots tr.fc-slot0 td {
+}
+
+.fc-agenda-slots tr.fc-slot0 th,.fc-agenda-slots tr.fc-slot0 td {
border-top-width: 0;
- }
+}
-.fc-agenda-slots tr.fc-minor th,
-.fc-agenda-slots tr.fc-minor td {
+.fc-agenda-slots tr.fc-minor th,.fc-agenda-slots tr.fc-minor td {
border-top-style: dotted;
- }
-
-.fc-agenda-slots tr.fc-minor th.ui-widget-header {
- *border-top-style: solid; /* doesn't work with background in IE6/7 */
- }
-
+}
+.fc-agenda-slots tr.fc-minor th.ui-widget-header { *
+ border-top-style: solid; /* doesn't work with background in IE6/7 */
+}
/* Vertical Events
------------------------------------------------------------------------*/
-
.fc-event-vert {
border-width: 0 1px;
- }
-
-.fc-event-vert .fc-event-head,
-.fc-event-vert .fc-event-content {
+}
+
+.fc-event-vert .fc-event-head,.fc-event-vert .fc-event-content {
position: relative;
z-index: 2;
width: 100%;
overflow: hidden;
- }
-
+}
+
.fc-event-vert .fc-event-time {
white-space: nowrap;
font-size: 10px;
- }
-
-.fc-event-vert .fc-event-bg { /* makes the event lighter w/ a semi-transparent overlay */
+}
+
+.fc-event-vert .fc-event-bg {
+ /* makes the event lighter w/ a semi-transparent overlay */
position: absolute;
z-index: 1;
top: 0;
@@ -607,34 +541,47 @@ table.fc-border-separate {
height: 100%;
background: #fff;
opacity: .3;
- filter: alpha(opacity=30);
- }
-
-.fc .ui-draggable-dragging .fc-event-bg, /* TODO: something nicer like .fc-opacity */
-.fc-select-helper .fc-event-bg {
- display: none\9; /* for IE6/7/8. nested opacity filters while dragging don't work */
- }
-
+ filter: alpha(opacity = 30);
+}
+
+.fc .ui-draggable-dragging .fc-event-bg,
+ /* TODO: something nicer like .fc-opacity */ .fc-select-helper .fc-event-bg
+ {
+ display: none\9;
+ /* for IE6/7/8. nested opacity filters while dragging don't work */
+}
+
/* resizable */
-
.fc-event-vert .ui-resizable-s {
- bottom: 0 !important; /* importants override pre jquery ui 1.7 styles */
- width: 100% !important;
- height: 8px !important;
+ bottom: 0 !important; /* importants override pre jquery ui 1.7 styles */
+ width: 100% !important;
+ height: 8px !important;
overflow: hidden !important;
line-height: 8px !important;
- font-size: 11px !important;
+ font-size: 11px !important;
font-family: monospace;
text-align: center;
cursor: s-resize;
- }
-
+}
+
.fc-agenda .ui-resizable-resizing { /* TODO: better selector */
_overflow: hidden;
- }
-
-.mitte {
- position: absolute;
- left: 48%;
- top: 60%;
- } \ No newline at end of file
+}
+
+.fc-timeline {
+ position: absolute;
+ width: 100%;
+ left: 0;
+ margin: 0;
+ padding: 0;
+ border: none;
+ /*border-top: 1px solid #3ec400;*/
+ border-top: 1px solid #000000;
+ z-index: 999;
+}
+
+.fc-progress {
+ position: absolute;
+ left: 48%;
+ top: 60%;
+} \ No newline at end of file
diff --git a/public/media/js/fullcalendar.js b/public/media/js/fullcalendar.js
index 099af56..b8c8183 100755
--- a/public/media/js/fullcalendar.js
+++ b/public/media/js/fullcalendar.js
@@ -3833,6 +3833,7 @@ function AgendaEventRenderer() {
var calendar = t.calendar;
var formatDate = calendar.formatDate;
var formatDates = calendar.formatDates;
+ var timeLineInterval;
@@ -3859,6 +3860,13 @@ function AgendaEventRenderer() {
setHeight(); // no params means set to viewHeight
}
renderSlotSegs(compileSlotSegs(slotEvents), modifiedEventId);
+
+ // current_time_indication hack
+ if (opt('currentTimeIndicator')) {
+ window.clearInterval(timeLineInterval);
+ timeLineInterval = window.setInterval(setTimeIndicator, 30000);
+ setTimeIndicator();
+ }
}
@@ -4148,7 +4156,39 @@ function AgendaEventRenderer() {
eventElementHandlers(event, eventElement);
}
+ // draw a horizontal line indicating the current time
+ function setTimeIndicator() {
+
+ var container = getBodyContent();
+ var timeline = container.children('.fc-timeline');
+ if (timeline.length == 0) { // if timeline isn't there, add it
+ timeline = $('<hr>').addClass('fc-timeline').appendTo(container);
+ }
+
+ var cur_time = new Date();
+ if (t.visStart < cur_time && t.visEnd > cur_time) {
+ timeline.show();
+ } else {
+ timeline.hide();
+ return;
+ }
+
+ var secs = (cur_time.getHours() * 60 * 60) + (cur_time.getMinutes() * 60) + cur_time.getSeconds();
+ var percents = secs / 86400; // 24 * 60 * 60 = 86400, # of seconds in
+ // a day
+
+ timeline.css('top', Math.floor(container.height() * percents - 1) + 'px');
+ if (t.name == 'agendaWeek') { // week view, don't want the timeline to
+ // go the whole way across
+ var daycol = $('.fc-today', t.element);
+ //var left = daycol.position().left + 1;
+ //var width = daycol.width();
+ //timeline.css({left: left + 'px', width: width + 'px' });
+ var width = daycol.width() * 8;
+ timeline.css({width: width + 'px' });
+ }
+ }
/*
* Dragging
@@ -4225,7 +4265,7 @@ function AgendaEventRenderer() {
stop: function(ev, ui) {
hoverListener.stop();
var cell = hoverListener.stop();
- //var date = t.cellDate(cell);
+ // var date = t.cellDate(cell);
clearOverlays();
trigger('eventDragStop', eventElement, event, ev, ui);
if (revert) {
@@ -4321,7 +4361,7 @@ function AgendaEventRenderer() {
},
stop: function(ev, ui) {
var cell = hoverListener.stop();
- //var date = t.cellDate(cell);
+ // var date = t.cellDate(cell);
clearOverlays();
trigger('eventDragStop', eventElement, event, ev, ui);
if (cell && (dayDelta || minuteDelta || allDay)) {