More config options for list views; some code cleanup: save frequently used jquery objects in local vars
This commit is contained in:
Thomas Bruederli
parent
a9462f5d0c
commit
9e93cd9613
4 changed files with 72 additions and 74 deletions
|
|
@ -40,7 +40,6 @@ function rcube_calendar(settings)
|
|||
|
||||
/*** private vars ***/
|
||||
var me = this;
|
||||
var fcselector = '#calendar';
|
||||
var day_clicked = day_clicked_ts = 0;
|
||||
var ignore_click = false;
|
||||
|
||||
|
|
@ -468,7 +467,7 @@ function rcube_calendar(settings)
|
|||
],
|
||||
close: function(){
|
||||
$dialog.dialog("destroy").hide();
|
||||
$(fcselector).fullCalendar('refetchEvents');
|
||||
fc.fullCalendar('refetchEvents');
|
||||
}
|
||||
}).show();
|
||||
|
||||
|
|
@ -482,7 +481,7 @@ function rcube_calendar(settings)
|
|||
this.add_event = function() {
|
||||
if (this.selected_calendar) {
|
||||
var now = new Date();
|
||||
var date = $(fcselector).fullCalendar('getDate') || now;
|
||||
var date = fc.fullCalendar('getDate') || now;
|
||||
date.setHours(now.getHours()+1);
|
||||
date.setMinutes(0);
|
||||
var end = new Date(date.getTime());
|
||||
|
|
@ -679,7 +678,7 @@ function rcube_calendar(settings)
|
|||
this.calendar_destroy_source = function(id)
|
||||
{
|
||||
if (this.calendars[id]) {
|
||||
$(fcselector).fullCalendar('removeEventSource', this.calendars[id]);
|
||||
fc.fullCalendar('removeEventSource', this.calendars[id]);
|
||||
$(rcmail.get_folder_li(id, 'rcmlical')).remove();
|
||||
$('#edit-calendar option[value="'+id+'"]').remove();
|
||||
delete this.calendars[id];
|
||||
|
|
@ -696,7 +695,6 @@ function rcube_calendar(settings)
|
|||
var q = rcmail.gui_objects.qsearchbox.value;
|
||||
if (q != '') {
|
||||
var id = 'search-'+q;
|
||||
var fc = $(fcselector);
|
||||
var sources = [];
|
||||
|
||||
if (this._search_message)
|
||||
|
|
@ -730,7 +728,7 @@ function rcube_calendar(settings)
|
|||
editable: false
|
||||
};
|
||||
|
||||
fc.fullCalendar('option', 'listSections', 'day');
|
||||
fc.fullCalendar('option', 'listSections', 'month');
|
||||
fc.fullCalendar('addEventSource', this.search_source);
|
||||
fc.fullCalendar('changeView', 'table');
|
||||
}
|
||||
|
|
@ -749,7 +747,6 @@ function rcube_calendar(settings)
|
|||
|
||||
if (this.search_request) {
|
||||
// restore original event sources and view mode from fullcalendar
|
||||
var fc = $(fcselector);
|
||||
fc.fullCalendar('option', 'listSections', 'smart');
|
||||
fc.fullCalendar('removeEventSource', this.search_source);
|
||||
for (var sid in this.calendars) {
|
||||
|
|
@ -811,7 +808,7 @@ function rcube_calendar(settings)
|
|||
me.quicksearch();
|
||||
}
|
||||
else { // add/remove event source
|
||||
$(fcselector).fullCalendar(action, me.calendars[id]);
|
||||
fc.fullCalendar(action, me.calendars[id]);
|
||||
rcmail.save_pref({ name:'hidden_calendars', value:settings.hidden_calendars.join(',') });
|
||||
}
|
||||
}
|
||||
|
|
@ -832,7 +829,7 @@ function rcube_calendar(settings)
|
|||
}
|
||||
|
||||
// initalize the fullCalendar plugin
|
||||
$(fcselector).fullCalendar({
|
||||
var fc = $('#calendar').fullCalendar({
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
|
|
@ -871,6 +868,8 @@ function rcube_calendar(settings)
|
|||
table: settings['date_long']
|
||||
},
|
||||
listSections: 'smart',
|
||||
listRange: 60, // show 60 days in list view
|
||||
tableCols: ['handle', 'date', 'time', 'title', 'location'],
|
||||
defaultView: settings['default_view'],
|
||||
allDayText: rcmail.gettext('all-day', 'calendar'),
|
||||
buttonText: {
|
||||
|
|
@ -989,7 +988,7 @@ function rcube_calendar(settings)
|
|||
// event handler for clicks on calendar week cell of the datepicker widget
|
||||
var init_week_events = function(){
|
||||
$('#datepicker table.ui-datepicker-calendar td.ui-datepicker-week-col').click(function(e){
|
||||
var base_date = $("#datepicker").datepicker('getDate');
|
||||
var base_date = minical.datepicker('getDate');
|
||||
var day_off = base_date.getDay() - 1;
|
||||
if (day_off < 0) day_off = 6;
|
||||
var base_kw = $.datepicker.iso8601Week(base_date);
|
||||
|
|
@ -997,39 +996,39 @@ function rcube_calendar(settings)
|
|||
var diff = (kw - base_kw) * 7 * 86400000;
|
||||
// select monday of the chosen calendar week
|
||||
var date = new Date(base_date.getTime() - day_off * 86400000 + diff);
|
||||
$(fcselector).fullCalendar('gotoDate', date).fullCalendar('setDate', date).fullCalendar('changeView', 'agendaWeek');
|
||||
$("#datepicker").datepicker('setDate', date);
|
||||
fc.fullCalendar('gotoDate', date).fullCalendar('setDate', date).fullCalendar('changeView', 'agendaWeek');
|
||||
minical.datepicker('setDate', date);
|
||||
window.setTimeout(init_week_events, 10);
|
||||
}).css('cursor', 'pointer');
|
||||
};
|
||||
|
||||
// initialize small calendar widget using jQuery UI datepicker
|
||||
$('#datepicker').datepicker($.extend(datepicker_settings, {
|
||||
var minical = $('#datepicker').datepicker($.extend(datepicker_settings, {
|
||||
inline: true,
|
||||
showWeek: true,
|
||||
changeMonth: false, // maybe enable?
|
||||
changeYear: false, // maybe enable?
|
||||
onSelect: function(dateText, inst) {
|
||||
ignore_click = true;
|
||||
var d = $("#datepicker").datepicker('getDate'); //parse_datetime('0:0', dateText);
|
||||
$(fcselector).fullCalendar('gotoDate', d).fullCalendar('select', d, d, true);
|
||||
var d = minical.datepicker('getDate'); //parse_datetime('0:0', dateText);
|
||||
fc.fullCalendar('gotoDate', d).fullCalendar('select', d, d, true);
|
||||
window.setTimeout(init_week_events, 10);
|
||||
},
|
||||
onChangeMonthYear: function(year, month, inst) {
|
||||
window.setTimeout(init_week_events, 10);
|
||||
var d = $("#datepicker").datepicker('getDate');
|
||||
var d = minical.datepicker('getDate');
|
||||
d.setYear(year);
|
||||
d.setMonth(month - 1);
|
||||
$("#datepicker").data('year', year).data('month', month);
|
||||
//$(fcselector).fullCalendar('gotoDate', d).fullCalendar('setDate', d);
|
||||
minical.data('year', year).data('month', month);
|
||||
//fc.fullCalendar('gotoDate', d).fullCalendar('setDate', d);
|
||||
},
|
||||
}));
|
||||
window.setTimeout(init_week_events, 10);
|
||||
|
||||
// react on fullcalendar buttons
|
||||
var fullcalendar_update = function() {
|
||||
var d = $(fcselector).fullCalendar('getDate');
|
||||
$("#datepicker").datepicker('setDate', d);
|
||||
var d = fc.fullCalendar('getDate');
|
||||
minical.datepicker('setDate', d);
|
||||
window.setTimeout(init_week_events, 10);
|
||||
};
|
||||
$("#calendar .fc-button-prev").click(fullcalendar_update);
|
||||
|
|
|
|||
|
|
@ -95,8 +95,11 @@ var defaults = {
|
|||
week: 'W'
|
||||
},
|
||||
|
||||
// list options
|
||||
// list/table options
|
||||
listSections: 'month', // false|'day'|'week'|'month'|'smart'
|
||||
listRange: 30, // number of days to be displayed
|
||||
listPage: 7, // number of days to jump when paging
|
||||
tableCols: ['handle', 'date', 'time', 'title'],
|
||||
|
||||
// jquery-ui theming
|
||||
theme: false,
|
||||
|
|
@ -651,9 +654,11 @@ function Calendar(element, options, eventSources) {
|
|||
if (value === undefined) {
|
||||
return options[name];
|
||||
}
|
||||
options[name] = value;
|
||||
if (name == 'height' || name == 'contentHeight' || name == 'aspectRatio') {
|
||||
options[name] = value;
|
||||
updateSize();
|
||||
} else if (name.indexOf('list') == 0 || name == 'tableCols') {
|
||||
options[name] = value;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -4296,7 +4301,7 @@ function View(element, calendar, viewName) {
|
|||
|
||||
function opt(name, viewNameOverride) {
|
||||
var v = options[name];
|
||||
if (typeof v == 'object') {
|
||||
if (typeof v == 'object' && !v.length) {
|
||||
return smartProperty(v, viewNameOverride || viewName);
|
||||
}
|
||||
return v;
|
||||
|
|
@ -5356,13 +5361,14 @@ function ListEventRenderer() {
|
|||
var tm = opt('theme') ? 'ui' : 'fc';
|
||||
var headerClass = tm + "-widget-header";
|
||||
var contentClass = tm + "-widget-content";
|
||||
var i, j, seg, event, times, s, skinCss, skinCssAttr, classes, segHeader, segContainer, eventElements;
|
||||
var i, j, seg, event, times, s, skinCss, skinCssAttr, classes, segContainer, eventElements;
|
||||
|
||||
for (j=0; j < segs.length; j++) {
|
||||
seg = segs[j];
|
||||
|
||||
if (seg.title)
|
||||
segHeader = $('<div class="fc-list-header ' + headerClass + '">' + htmlEscape(seg.title) + '</div>').appendTo(getListContainer());
|
||||
if (seg.title) {
|
||||
$('<div class="fc-list-header ' + headerClass + '">' + htmlEscape(seg.title) + '</div>').appendTo(getListContainer());
|
||||
}
|
||||
segContainer = $('<div>').addClass('fc-list-section ' + contentClass).appendTo(getListContainer());
|
||||
s = '';
|
||||
|
||||
|
|
@ -5516,15 +5522,12 @@ function ListView(element, calendar) {
|
|||
|
||||
function render(date, delta) {
|
||||
if (delta) {
|
||||
addDays(date, delta);
|
||||
if (!opt('weekends')) {
|
||||
skipWeekend(date, delta < 0 ? -1 : 1);
|
||||
}
|
||||
addDays(date, opt('listPage') * delta);
|
||||
}
|
||||
t.title = opt('listTexts', 'from') + ' ' + formatDate(date, opt('titleFormat'));
|
||||
t.start = t.visStart = cloneDate(date, true);
|
||||
t.end = addDays(cloneDate(t.start), 1);
|
||||
t.visEnd = addMonths(cloneDate(t.start), 1); // show events one month ahead. Enough?
|
||||
t.end = addDays(cloneDate(t.start), opt('listPage'));
|
||||
t.visEnd = addDays(cloneDate(t.start), opt('listRange'));
|
||||
|
||||
updateOptions();
|
||||
|
||||
|
|
@ -5613,13 +5616,16 @@ function TableEventRenderer() {
|
|||
var table = getListContainer();
|
||||
var headerClass = tm + "-widget-header";
|
||||
var contentClass = tm + "-widget-content";
|
||||
var i, j, seg, event, times, s, skinCss, skinCssAttr, skinClasses, rowClasses, segHeader, segContainer, eventElements;
|
||||
var tableCols = opt('tableCols');
|
||||
var timecol = $.inArray('time', tableCols) >= 0;
|
||||
var i, j, seg, event, times, s, skinCss, skinCssAttr, skinClasses, rowClasses, segContainer, eventElements;
|
||||
|
||||
for (j=0; j < segs.length; j++) {
|
||||
seg = segs[j];
|
||||
|
||||
if (seg.title)
|
||||
segHeader = $('<tbody class="fc-list-header"><tr><td class="fc-list-header ' + headerClass + '" colspan="5">' + htmlEscape(seg.title) + '</td></tr></tbody>').appendTo(table);
|
||||
if (seg.title) {
|
||||
$('<tbody class="fc-list-header"><tr><td class="fc-list-header ' + headerClass + '" colspan="' + tableCols.length + '">' + htmlEscape(seg.title) + '</td></tr></tbody>').appendTo(table);
|
||||
}
|
||||
segContainer = $('<tbody>').addClass('fc-list-section ' + contentClass).appendTo(table);
|
||||
s = '';
|
||||
|
||||
|
|
@ -5637,27 +5643,25 @@ function TableEventRenderer() {
|
|||
rowClasses.push('fc-today');
|
||||
}
|
||||
|
||||
s +=
|
||||
"<tr class='" + rowClasses.join(' ') + "'>" +
|
||||
"<td class='fc-event-handle'>" +
|
||||
"<div class='" + skinClasses.join(' ') + "'" + skinCssAttr + ">" +
|
||||
"<span class='fc-event-inner'></span>" +
|
||||
"</div></td>" +
|
||||
"<td class='fc-event-date' colspan='" + (times[1] ? 1 : 2) + "'>" +
|
||||
htmlEscape(times[0]) +
|
||||
"</td>" +
|
||||
(times[1] ?
|
||||
"<td class='fc-event-time'>" +
|
||||
htmlEscape(times[1]) +
|
||||
"</td>"
|
||||
: "") +
|
||||
"<td class='fc-event-title'>" +
|
||||
htmlEscape(event.title) +
|
||||
"</td>" +
|
||||
"<td class='fc-event-location'>" +
|
||||
htmlEscape(event.location) +
|
||||
"</td>" +
|
||||
"</tr>";
|
||||
s += "<tr class='" + rowClasses.join(' ') + "'>";
|
||||
for (var col, c=0; c < tableCols.length; c++) {
|
||||
col = tableCols[c];
|
||||
if (col == 'handle') {
|
||||
s += "<td class='fc-event-handle'>" +
|
||||
"<div class='" + skinClasses.join(' ') + "'" + skinCssAttr + ">" +
|
||||
"<span class='fc-event-inner'></span>" +
|
||||
"</div></td>";
|
||||
} else if (col == 'date') {
|
||||
s += "<td class='fc-event-date' colspan='" + (times[1] || !timecol ? 1 : 2) + "'>" + htmlEscape(times[0]) + "</td>";
|
||||
} else if (col == 'time') {
|
||||
if (times[1]) {
|
||||
s += "<td class='fc-event-time'>" + htmlEscape(times[1]) + "</td>";
|
||||
}
|
||||
} else {
|
||||
s += "<td class='fc-event-" + col + "'>" + htmlEscape(event[col] || '') + "</td>";
|
||||
}
|
||||
}
|
||||
s += "</tr>";
|
||||
}
|
||||
|
||||
segContainer[0].innerHTML = s;
|
||||
|
|
@ -5731,15 +5735,12 @@ function TableView(element, calendar) {
|
|||
|
||||
function render(date, delta) {
|
||||
if (delta) {
|
||||
addDays(date, delta);
|
||||
if (!opt('weekends')) {
|
||||
skipWeekend(date, delta < 0 ? -1 : 1);
|
||||
}
|
||||
addDays(date, opt('listPage') * delta);
|
||||
}
|
||||
t.title = opt('listTexts', 'from') + ' ' + formatDate(date, opt('titleFormat'));
|
||||
t.start = t.visStart = cloneDate(date, true);
|
||||
t.end = addDays(cloneDate(t.start), 1);
|
||||
t.visEnd = addMonths(cloneDate(t.start), 1); // show events one month ahead. Enough?
|
||||
t.end = addDays(cloneDate(t.start), opt('listPage'));
|
||||
t.visEnd = addDays(cloneDate(t.start), opt('listRange'));
|
||||
|
||||
updateOptions();
|
||||
|
||||
|
|
@ -5760,15 +5761,14 @@ function TableView(element, calendar) {
|
|||
|
||||
|
||||
function buildSkeleton() {
|
||||
var tableCols = opt('tableCols');
|
||||
var s =
|
||||
"<table class='fc-border-separate' style='width:100%' cellspacing='0'>" +
|
||||
"<colgroup>" +
|
||||
"<col class='fc-event-handle' />" +
|
||||
"<col class='fc-event-date' />" +
|
||||
"<col class='fc-event-time' />" +
|
||||
"<col class='fc-event-title' />" +
|
||||
"<col class='fc-event-location' />" +
|
||||
"</colgroup>" +
|
||||
"<colgroup>";
|
||||
for (var c=0; c < tableCols.length; c++) {
|
||||
s += "<col class='fc-event-" + tableCols[c] + "' />";
|
||||
}
|
||||
s += "</colgroup>" +
|
||||
"</table>";
|
||||
div = $('<div>').addClass('fc-list-content').appendTo(element);
|
||||
table = $(s).appendTo(div);
|
||||
|
|
|
|||
|
|
@ -530,6 +530,10 @@ div.fc-event-location {
|
|||
color: #333;
|
||||
}
|
||||
|
||||
.fc-view-table col.fc-event-location {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
/* Settings section */
|
||||
|
||||
fieldset #calendarcategories div {
|
||||
|
|
|
|||
|
|
@ -690,15 +690,10 @@ table.fc-border-separate {
|
|||
width: 1px;
|
||||
}
|
||||
|
||||
|
||||
.fc-view-table col.fc-event-time {
|
||||
width: 8em;
|
||||
}
|
||||
|
||||
.fc-view-table col.fc-event-location {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.fc-view-table td.fc-event-date,
|
||||
.fc-view-table td.fc-event-time {
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue