Fullcalendar: define different modes for list subdivision

This commit is contained in:
Thomas Bruederli 2011-06-14 20:07:17 -06:00
parent 6ea6dd386b
commit 83869428c3
3 changed files with 74 additions and 52 deletions

View file

@ -730,7 +730,7 @@ function rcube_calendar(settings)
editable: false editable: false
}; };
fc.fullCalendar('option', 'smartSections', false); fc.fullCalendar('option', 'listSections', 'day');
fc.fullCalendar('addEventSource', this.search_source); fc.fullCalendar('addEventSource', this.search_source);
fc.fullCalendar('changeView', 'table'); fc.fullCalendar('changeView', 'table');
} }
@ -750,7 +750,7 @@ function rcube_calendar(settings)
if (this.search_request) { if (this.search_request) {
// restore original event sources and view mode from fullcalendar // restore original event sources and view mode from fullcalendar
var fc = $(fcselector); var fc = $(fcselector);
fc.fullCalendar('option', 'smartSections', true); fc.fullCalendar('option', 'listSections', 'smart');
fc.fullCalendar('removeEventSource', this.search_source); fc.fullCalendar('removeEventSource', this.search_source);
for (var sid in this.calendars) { for (var sid in this.calendars) {
if (this.calendars[sid] && this.calendars[sid].active) if (this.calendars[sid] && this.calendars[sid].active)
@ -870,7 +870,7 @@ function rcube_calendar(settings)
list: settings['date_long'], list: settings['date_long'],
table: settings['date_long'] table: settings['date_long']
}, },
smartSections: true, listSections: 'smart',
defaultView: settings['default_view'], defaultView: settings['default_view'],
allDayText: rcmail.gettext('all-day', 'calendar'), allDayText: rcmail.gettext('all-day', 'calendar'),
buttonText: { buttonText: {

View file

@ -91,11 +91,12 @@ var defaults = {
nextWeek: 'Next week', nextWeek: 'Next week',
thisMonth: 'This month', thisMonth: 'This month',
nextMonth: 'Next month', nextMonth: 'Next month',
future: 'Future events' future: 'Future events',
week: 'W'
}, },
// list options // list options
smartSections: false, listSections: 'month', // false|'day'|'week'|'month'|'smart'
// jquery-ui theming // jquery-ui theming
theme: false, theme: false,
@ -1533,8 +1534,8 @@ function formatDates(date1, date2, format, options) {
for (i2=i+1; i2<len; i2++) { for (i2=i+1; i2<len; i2++) {
if (format.charAt(i2) == ']') { if (format.charAt(i2) == ']') {
var subformat = format.substring(i+1, i2); var subformat = format.substring(i+1, i2);
var subres = formatDate(date, subformat, options); var subres = formatDate(otherDate, subformat, options);
if (subres != formatDate(otherDate, subformat, options)) { if (subres != formatDate(date, subformat, options)) {
res += subres; res += subres;
} }
i = i2; i = i2;
@ -1605,6 +1606,18 @@ var dateFormatters = {
}; };
// Determine the week of the year based on the ISO 8601 definition.
// copied from jquery UI Datepicker
var iso8601Week = function(date) {
var checkDate = cloneDate(date);
// Find Thursday of this week starting on Monday
checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
var time = checkDate.getTime();
checkDate.setMonth(0); // Compare with Jan 1
checkDate.setDate(1);
return Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 1;
};
fc.applyAll = applyAll; fc.applyAll = applyAll;
@ -5276,7 +5289,7 @@ function ListEventRenderer() {
var segs = []; var segs = [];
var colFormat = opt('titleFormat', 'day'); var colFormat = opt('titleFormat', 'day');
var firstDay = opt('firstDay'); var firstDay = opt('firstDay');
var smartSegs = opt('smartSections'); var segmode = opt('listSections');
var event, i, dd, wd, md, seg, segHash, curSegHash, segDate, curSeg = -1; var event, i, dd, wd, md, seg, segHash, curSegHash, segDate, curSeg = -1;
var today = clearTime(new Date()); var today = clearTime(new Date());
var weekstart = addDays(cloneDate(today), -((today.getDay() - firstDay + 7) % 7)); var weekstart = addDays(cloneDate(today), -((today.getDay() - firstDay + 7) % 7));
@ -5296,24 +5309,30 @@ function ListEventRenderer() {
md = segDate.getMonth() + ((segDate.getYear() - today.getYear()) * 12) - today.getMonth(); md = segDate.getMonth() + ((segDate.getYear() - today.getYear()) * 12) - today.getMonth();
// build section title // build section title
if (!smartSegs) { if (segmode == 'smart') {
if (dd < 0) {
segHash = opt('listTexts', 'past');
} else if (dd == 0) {
segHash = opt('listTexts', 'today');
} else if (dd == 1) {
segHash = opt('listTexts', 'tomorrow');
} else if (wd == 0) {
segHash = opt('listTexts', 'thisWeek');
} else if (wd == 1) {
segHash = opt('listTexts', 'nextWeek');
} else if (md == 0) {
segHash = opt('listTexts', 'thisMonth');
} else if (md == 1) {
segHash = opt('listTexts', 'nextMonth');
}
} else if (segmode == 'month') {
segHash = formatDate(segDate, 'MMMM yyyy');
} else if (segmode == 'week') {
segHash = opt('listTexts', 'week') + ' ' + iso8601Week(segDate);
} else if (segmode == 'day') {
segHash = formatDate(segDate, colFormat); segHash = formatDate(segDate, colFormat);
} else if (dd < 0) {
segHash = opt('listTexts', 'past');
} else if (dd == 0) {
segHash = opt('listTexts', 'today');
} else if (dd == 1) {
segHash = opt('listTexts', 'tomorrow');
} else if (wd == 0) {
segHash = opt('listTexts', 'thisWeek');
} else if (wd == 1) {
segHash = opt('listTexts', 'nextWeek');
} else if (md == 0) {
segHash = opt('listTexts', 'thisMonth');
} else if (md == 1) {
segHash = opt('listTexts', 'nextMonth');
} else { } else {
segHash = formatDate(segDate, colFormat); segHash = '';
} }
// start new segment // start new segment
@ -5341,7 +5360,8 @@ function ListEventRenderer() {
for (j=0; j < segs.length; j++) { for (j=0; j < segs.length; j++) {
seg = segs[j]; seg = segs[j];
segHeader = $('<div class="fc-list-header ' + headerClass + '">' + htmlEscape(seg.title) + '</div>').appendTo(getListContainer()); if (seg.title)
segHeader = $('<div class="fc-list-header ' + headerClass + '">' + htmlEscape(seg.title) + '</div>').appendTo(getListContainer());
segContainer = $('<div>').addClass('fc-list-section ' + contentClass).appendTo(getListContainer()); segContainer = $('<div>').addClass('fc-list-section ' + contentClass).appendTo(getListContainer());
s = ''; s = '';
@ -5408,28 +5428,31 @@ function ListEventRenderer() {
function renderEventTime(event, seg) { function renderEventTime(event, seg) {
var timeFormat = opt('timeFormat'); var timeFormat = opt('timeFormat');
var dateFormat = opt('columnFormat'); var dateFormat = opt('columnFormat');
var segmode = opt('listSections');
var duration = event.end.getTime() - event.start.getTime(); var duration = event.end.getTime() - event.start.getTime();
var datestr = '', timestr = ''; var datestr = '', timestr = '';
if (!opt('smartSections')) { if (segmode == 'smart') {
// no date display if grouped by day if (event.start < seg.start) {
} else if (event.start < seg.start) { datestr = opt('listTexts', 'until') + ' ' + formatDate(event.end, (event.allDay || event.end.getDate() != seg.start.getDate()) ? dateFormat : timeFormat);
datestr = opt('listTexts', 'until') + ' ' + formatDate(event.end, (event.allDay || event.end.getDate() != seg.start.getDate()) ? dateFormat : timeFormat); } else if (duration > DAY_MS) {
} else if (duration > DAY_MS) { datestr = formatDates(event.start, event.end, dateFormat + '[ - ' + dateFormat + ']');
datestr = formatDates(event.start, event.end, dateFormat + '[ - ' + dateFormat + ']'); } else if (seg.daydiff == 0) {
} else if (seg.daydiff == 0) { datestr = opt('listTexts', 'today');
datestr = opt('listTexts', 'today'); } else if (seg.daydiff == 1) {
} else if (seg.daydiff == 1) { datestr = opt('listTexts', 'tomorrow');
datestr = opt('listTexts', 'tomorrow'); } else if (seg.weekdiff == 0 || seg.weekdiff == 1) {
} else if (seg.weekdiff == 0 || seg.weekdiff == 1) { datestr = formatDate(event.start, 'dddd');
datestr = formatDate(event.start, 'dddd'); } else if (seg.daydiff > 1 || seg.daydiff < 0) {
} else if (seg.daydiff > 1 || seg.daydiff < 0) { datestr = formatDate(event.start, dateFormat);
datestr = formatDate(event.start, dateFormat); }
} else if (segmode != 'day') {
datestr = formatDates(event.start, event.end, dateFormat + (duration > DAY_MS ? '[ - ' + dateFormat + ']' : ''));
} }
if (!datestr && event.allDay) { if (!datestr && event.allDay) {
timestr = opt('allDayText'); timestr = opt('allDayText');
} else if (duration < DAY_MS && !event.allDay) { } else if ((duration < DAY_MS || !datestr) && !event.allDay) {
timestr = formatDates(event.start, event.end, timeFormat); timestr = formatDates(event.start, event.end, timeFormat);
} }
@ -5581,7 +5604,7 @@ function TableEventRenderer() {
events.sort(sortCmp); events.sort(sortCmp);
reportEvents(events); reportEvents(events);
renderSegs(compileSegs(events), modifiedEventId); renderSegs(compileSegs(events), modifiedEventId);
getListContainer().removeClass('fc-list-smart fc-list-normal').addClass(opt('smartSections') ? 'fc-list-smart' : 'fc-list-normal'); getListContainer().removeClass('fc-list-smart fc-list-day fc-list-month fc-list-week').addClass('fc-list-' + opt('listSections'));
} }
function renderSegs(segs, modifiedEventId) { function renderSegs(segs, modifiedEventId) {
@ -5594,7 +5617,8 @@ function TableEventRenderer() {
for (j=0; j < segs.length; j++) { for (j=0; j < segs.length; j++) {
seg = segs[j]; seg = segs[j];
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)
segHeader = $('<tbody class="fc-list-header"><tr><td class="fc-list-header ' + headerClass + '" colspan="5">' + htmlEscape(seg.title) + '</td></tr></tbody>').appendTo(table);
segContainer = $('<tbody>').addClass('fc-list-section ' + contentClass).appendTo(table); segContainer = $('<tbody>').addClass('fc-list-section ' + contentClass).appendTo(table);
s = ''; s = '';
@ -5618,12 +5642,14 @@ function TableEventRenderer() {
"<div class='" + skinClasses.join(' ') + "'" + skinCssAttr + ">" + "<div class='" + skinClasses.join(' ') + "'" + skinCssAttr + ">" +
"<span class='fc-event-inner'></span>" + "<span class='fc-event-inner'></span>" +
"</div></td>" + "</div></td>" +
"<td class='fc-event-date'>" + "<td class='fc-event-date' colspan='" + (times[1] ? 1 : 2) + "'>" +
htmlEscape(times[0]) + htmlEscape(times[0]) +
"</td>" + "</td>" +
"<td class='fc-event-time'>" + (times[1] ?
htmlEscape(times[1]) + "<td class='fc-event-time'>" +
"</td>" + htmlEscape(times[1]) +
"</td>"
: "") +
"<td class='fc-event-title'>" + "<td class='fc-event-title'>" +
htmlEscape(event.title) + htmlEscape(event.title) +
"</td>" + "</td>" +

View file

@ -629,11 +629,7 @@ table.fc-border-separate {
.fc-view-table td.fc-list-header { .fc-view-table td.fc-list-header {
border-width: 0; border-width: 0;
border-bottom-width: 1px; border-bottom-width: 1px;
padding: 3px; padding: 3px 5px;
}
.fc-view-table .fc-list-smart td.fc-list-header {
text-align: center;
} }
.fc-view-table .fc-first td.fc-list-header { .fc-view-table .fc-first td.fc-list-header {
@ -690,7 +686,7 @@ table.fc-border-separate {
width: 7em; width: 7em;
} }
.fc-view-table .fc-list-normal col.fc-event-date { .fc-view-table .fc-list-day col.fc-event-date {
width: 1px; width: 1px;
} }