Add current time indicator to day and week views (#457)
This commit is contained in:
Thomas
parent
00628dd5d5
commit
7fdfb25a96
7 changed files with 146 additions and 22 deletions
|
|
@ -59,6 +59,7 @@ class calendar extends rcube_plugin
|
|||
'calendar_agenda_range' => 60,
|
||||
'calendar_agenda_sections' => 'smart',
|
||||
'calendar_event_coloring' => 0,
|
||||
'calendar_time_indicator' => true,
|
||||
'calendar_date_format_sets' => array(
|
||||
'yyyy-MM-dd' => array('MMM d yyyy', 'M-d', 'ddd MM-dd'),
|
||||
'dd-MM-yyyy' => array('d MMM yyyy', 'd-M', 'ddd dd-MM'),
|
||||
|
|
@ -938,6 +939,7 @@ class calendar extends rcube_plugin
|
|||
$settings['agenda_range'] = (int)$this->rc->config->get('calendar_agenda_range', $this->defaults['calendar_agenda_range']);
|
||||
$settings['agenda_sections'] = $this->rc->config->get('calendar_agenda_sections', $this->defaults['calendar_agenda_sections']);
|
||||
$settings['event_coloring'] = (int)$this->rc->config->get('calendar_event_coloring', $this->defaults['calendar_event_coloring']);
|
||||
$settings['time_indicator'] = (int)$this->rc->config->get('calendar_time_indicator', $this->defaults['calendar_time_indicator']);
|
||||
$settings['timezone'] = $this->timezone;
|
||||
$settings['dst'] = $this->dst_active;
|
||||
|
||||
|
|
|
|||
|
|
@ -1755,6 +1755,7 @@ function rcube_calendar_ui(settings)
|
|||
columnFormat: { day: 'dddd ' + settings['date_short'] },
|
||||
titleFormat: { day: 'dddd ' + settings['date_long'] },
|
||||
allDayText: rcmail.gettext('all-day', 'calendar'),
|
||||
currentTimeIndicator: settings.time_indicator,
|
||||
eventRender: fc_event_render,
|
||||
eventClick: function(event) {
|
||||
event_show_dialog(event);
|
||||
|
|
@ -2264,6 +2265,7 @@ function rcube_calendar_ui(settings)
|
|||
},
|
||||
selectable: true,
|
||||
selectHelper: false,
|
||||
currentTimeIndicator: settings.time_indicator,
|
||||
loading: function(isLoading) {
|
||||
me.is_loading = isLoading;
|
||||
this._rc_loading = rcmail.set_busy(isLoading, 'loading', this._rc_loading);
|
||||
|
|
@ -2393,7 +2395,6 @@ function rcube_calendar_ui(settings)
|
|||
}
|
||||
});
|
||||
|
||||
|
||||
// format time string
|
||||
var formattime = function(hour, minutes, start) {
|
||||
var time, diff, unit, duration = '', d = new Date();
|
||||
|
|
|
|||
|
|
@ -77,6 +77,9 @@ $rcmail_config['calendar_work_start'] = 6;
|
|||
// working hours end
|
||||
$rcmail_config['calendar_work_end'] = 18;
|
||||
|
||||
// show line at current time of the day
|
||||
$rcmail_config['calendar_time_indicator'] = true;
|
||||
|
||||
// how to colorize events:
|
||||
// 0: according to calendar color
|
||||
// 1: according to category color
|
||||
|
|
|
|||
|
|
@ -1,6 +1,14 @@
|
|||
--- js/fullcalendar.js.orig 2011-04-09 14:13:16.000000000 +0200
|
||||
+++ js/fullcalendar.js 2011-09-13 14:05:26.000000000 +0200
|
||||
@@ -47,12 +47,16 @@
|
||||
--- js/fullcalendar-1.5.2.js 2011-08-21 22:07:18.000000000 +0200
|
||||
+++ js/fullcalendar.js 2011-10-18 23:01:09.000000000 +0200
|
||||
@@ -29,6 +29,7 @@
|
||||
right: 'today prev,next'
|
||||
},
|
||||
weekends: true,
|
||||
+ currentTimeIndicator: false,
|
||||
|
||||
// editing
|
||||
//editable: false,
|
||||
@@ -47,12 +48,16 @@
|
||||
titleFormat: {
|
||||
month: 'MMMM yyyy',
|
||||
week: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}",
|
||||
|
|
@ -19,7 +27,7 @@
|
|||
},
|
||||
timeFormat: { // for event elements
|
||||
'': 'h(:mm)t' // default
|
||||
@@ -73,8 +77,28 @@
|
||||
@@ -73,8 +78,28 @@
|
||||
today: 'today',
|
||||
month: 'month',
|
||||
week: 'week',
|
||||
|
|
@ -49,7 +57,7 @@
|
|||
|
||||
// jquery-ui theming
|
||||
theme: false,
|
||||
@@ -424,6 +448,7 @@
|
||||
@@ -424,6 +449,7 @@
|
||||
setSize();
|
||||
unselect();
|
||||
currentView.clearEvents();
|
||||
|
|
@ -57,7 +65,7 @@
|
|||
currentView.renderEvents(events);
|
||||
currentView.sizeDirty = false;
|
||||
}
|
||||
@@ -500,8 +525,8 @@
|
||||
@@ -500,8 +526,8 @@
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -68,7 +76,7 @@
|
|||
}
|
||||
|
||||
|
||||
@@ -523,6 +548,7 @@
|
||||
@@ -523,6 +549,7 @@
|
||||
markEventsDirty();
|
||||
if (elementVisible()) {
|
||||
currentView.clearEvents();
|
||||
|
|
@ -76,7 +84,7 @@
|
|||
currentView.renderEvents(events, modifiedEventID);
|
||||
currentView.eventsDirty = false;
|
||||
}
|
||||
@@ -632,6 +658,9 @@
|
||||
@@ -632,6 +659,9 @@
|
||||
if (name == 'height' || name == 'contentHeight' || name == 'aspectRatio') {
|
||||
options[name] = value;
|
||||
updateSize();
|
||||
|
|
@ -86,7 +94,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@@ -897,15 +926,16 @@
|
||||
@@ -897,15 +927,16 @@
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -107,7 +115,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@@ -1092,8 +1122,9 @@
|
||||
@@ -1092,8 +1123,9 @@
|
||||
stickySource.events.push(event);
|
||||
event.source = stickySource;
|
||||
}
|
||||
|
|
@ -118,7 +126,7 @@
|
|||
reportEvents(cache);
|
||||
}
|
||||
|
||||
@@ -1579,10 +1610,23 @@
|
||||
@@ -1581,10 +1613,23 @@
|
||||
return 'th';
|
||||
}
|
||||
return ['st', 'nd', 'rd'][date%10-1] || 'th';
|
||||
|
|
@ -143,7 +151,7 @@
|
|||
|
||||
fc.applyAll = applyAll;
|
||||
|
||||
@@ -3534,10 +3578,10 @@
|
||||
@@ -3536,10 +3581,10 @@
|
||||
function slotSelectionMousedown(ev) {
|
||||
if (ev.which == 1 && opt('selectable')) { // ev.which==1 means left mouse button
|
||||
unselect(ev);
|
||||
|
|
@ -156,7 +164,29 @@
|
|||
var d1 = cellDate(origCell);
|
||||
var d2 = cellDate(cell);
|
||||
dates = [
|
||||
@@ -3762,7 +3806,8 @@
|
||||
@@ -3651,7 +3696,7 @@
|
||||
var calendar = t.calendar;
|
||||
var formatDate = calendar.formatDate;
|
||||
var formatDates = calendar.formatDates;
|
||||
-
|
||||
+ var timeLineInterval;
|
||||
|
||||
|
||||
/* Rendering
|
||||
@@ -3675,6 +3720,12 @@
|
||||
setHeight(); // no params means set to viewHeight
|
||||
}
|
||||
renderSlotSegs(compileSlotSegs(slotEvents), modifiedEventId);
|
||||
+
|
||||
+ if (opt('currentTimeIndicator')) {
|
||||
+ window.clearInterval(timeLineInterval);
|
||||
+ timeLineInterval = window.setInterval(setTimeIndicator, 30000);
|
||||
+ setTimeIndicator();
|
||||
+ }
|
||||
}
|
||||
|
||||
|
||||
@@ -3764,7 +3815,8 @@
|
||||
height,
|
||||
slotSegmentContainer = getSlotSegmentContainer(),
|
||||
rtl, dis, dit,
|
||||
|
|
@ -166,7 +196,7 @@
|
|||
|
||||
if (rtl = opt('isRTL')) {
|
||||
dis = -1;
|
||||
@@ -3789,8 +3834,11 @@
|
||||
@@ -3791,8 +3843,11 @@
|
||||
outerWidth = availWidth / (levelI + forward + 1);
|
||||
}else{
|
||||
if (forward) {
|
||||
|
|
@ -180,7 +210,7 @@
|
|||
}else{
|
||||
// can be entire width, aligned left
|
||||
outerWidth = availWidth;
|
||||
@@ -3801,7 +3849,7 @@
|
||||
@@ -3803,7 +3858,7 @@
|
||||
* dis + (rtl ? availWidth - outerWidth : 0); // rtl
|
||||
seg.top = top;
|
||||
seg.left = left;
|
||||
|
|
@ -189,7 +219,45 @@
|
|||
seg.outerHeight = bottom - top;
|
||||
html += slotSegHtml(event, seg);
|
||||
}
|
||||
@@ -4260,7 +4308,7 @@
|
||||
@@ -3953,6 +4008,37 @@
|
||||
}
|
||||
|
||||
|
||||
+ // draw a horizontal line across the agenda view indicating the current time (#143)
|
||||
+ 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' });
|
||||
+ }
|
||||
+ };
|
||||
+
|
||||
|
||||
/* Dragging
|
||||
-----------------------------------------------------------------------------------*/
|
||||
@@ -4262,7 +4348,7 @@
|
||||
|
||||
function opt(name, viewNameOverride) {
|
||||
var v = options[name];
|
||||
|
|
@ -198,7 +266,7 @@
|
|||
return smartProperty(v, viewNameOverride || viewName);
|
||||
}
|
||||
return v;
|
||||
@@ -4804,6 +4852,8 @@
|
||||
@@ -4806,6 +4892,8 @@
|
||||
}
|
||||
seg.outerHeight = element[0].offsetHeight + val;
|
||||
}
|
||||
|
|
@ -207,11 +275,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
@@ -5204,5 +5254,561 @@
|
||||
@@ -5206,5 +5294,561 @@
|
||||
};
|
||||
|
||||
}
|
||||
-
|
||||
-})(jQuery);
|
||||
+
|
||||
+
|
||||
+/* Additional view: list (by bruederli@kolabsys.com)
|
||||
|
|
@ -769,5 +838,5 @@
|
|||
+}
|
||||
+
|
||||
+
|
||||
})(jQuery);
|
||||
+})(jQuery);
|
||||
\ No newline at end of file
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ var defaults = {
|
|||
right: 'today prev,next'
|
||||
},
|
||||
weekends: true,
|
||||
currentTimeIndicator: false,
|
||||
|
||||
// editing
|
||||
//editable: false,
|
||||
|
|
@ -3695,7 +3696,7 @@ function AgendaEventRenderer() {
|
|||
var calendar = t.calendar;
|
||||
var formatDate = calendar.formatDate;
|
||||
var formatDates = calendar.formatDates;
|
||||
|
||||
var timeLineInterval;
|
||||
|
||||
|
||||
/* Rendering
|
||||
|
|
@ -3719,6 +3720,12 @@ function AgendaEventRenderer() {
|
|||
setHeight(); // no params means set to viewHeight
|
||||
}
|
||||
renderSlotSegs(compileSlotSegs(slotEvents), modifiedEventId);
|
||||
|
||||
if (opt('currentTimeIndicator')) {
|
||||
window.clearInterval(timeLineInterval);
|
||||
timeLineInterval = window.setInterval(setTimeIndicator, 30000);
|
||||
setTimeIndicator();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -4001,6 +4008,37 @@ function AgendaEventRenderer() {
|
|||
}
|
||||
|
||||
|
||||
// draw a horizontal line across the agenda view indicating the current time (#143)
|
||||
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' });
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/* Dragging
|
||||
-----------------------------------------------------------------------------------*/
|
||||
|
|
|
|||
|
|
@ -1136,7 +1136,7 @@ div.fc-event-location {
|
|||
|
||||
.fc-listappend {
|
||||
text-align: center;
|
||||
margin-top: 1em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.fc-listappend .message {
|
||||
|
|
|
|||
|
|
@ -616,6 +616,17 @@ table.fc-border-separate {
|
|||
}
|
||||
|
||||
|
||||
.fc-timeline {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-top: 2px solid #3ec400;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
/* List view (by bruederli@kolabsys.com)
|
||||
------------------------------------------------------------------------*/
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue