Skip to content

Commit

Permalink
Add support for displaying a single column
Browse files Browse the repository at this point in the history
  • Loading branch information
mherrmann committed Aug 16, 2021
1 parent 72ea79a commit 80c1690
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 8 deletions.
13 changes: 13 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,19 @@ From then on, each FullCalendar Event Object can have a `column` attribute, whic

This defines an event in the second column of the current day.

### Fixing the column

When you start from the above approach with multiple columns, it may become necessary to display just a single (of the several available) columns. The typical use case for this is that every column belongs to one user. Administrators should see all columns. But each user should only see their own column.

fullcalendar-columns supports this via the `fixedColumn` option. For example:

multiColAgendaDay: {
// ... settings as above...
// Only display one column, namely col. number 2:
numColumns: 1,
fixedColumn: 2
}

## Advantages
Unlike other similar solutions, this is *not* a fork of FullCalendar. This has the advantage that you can use it with newer versions of FullCalendar, and do not have to depend on a probably unmaintained clone.

Expand Down
26 changes: 18 additions & 8 deletions fullcalendar-columns.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*!
* fullcalendar-columns v1.11
* fullcalendar-columns v1.12
* Docs & License: https://github.com/mherrmann/fullcalendar-columns
* (c) Michael Herrmann
*/
Expand All @@ -23,6 +23,7 @@
initialize: function() {
this.numColumns = this.opt('numColumns');
this.columnHeaders = this.opt('columnHeaders');
this.fixedColumn = this.opt('fixedColumn');
AgendaView.prototype.initialize.call(this);
this._monkeyPatchGridRendering();
},
Expand Down Expand Up @@ -105,16 +106,20 @@
*/
var cellOrig = that._computeOriginalEvent(cell);
var $html = $(origHeadCellHtml.call(this, cellOrig));
var isFirstCellForDay = cellOrig.column == 0;
var isLastCellForDay = cellOrig.column == that.numColumns - 1;

var isFirstCellForDay, isLastCellForDay;
if (that.numColumns === 1) {
isFirstCellForDay = isLastCellForDay = true;
} else {
isFirstCellForDay = cellOrig.column == 0;
isLastCellForDay = cellOrig.column == that.numColumns - 1;
}
var html = '';
if (isFirstCellForDay) {
// Make the cell appear centered:
var posPercent = 100 * that.numColumns;
html = '<div style="position: relative; width: '
+ posPercent + '%;text-align:center;">'
+ $html.html() + '</div>';
+ posPercent + '%;text-align:center;">'
+ $html.html() + '</div>';
} else {
html = '<div>&nbsp;</div>';
$html.css('border-left-width', 0);
Expand All @@ -126,7 +131,7 @@
// extension") for classes pertaining only to
// fullcalendar-columns:
html += '<div class="fce-col-header">' +
that.columnHeaders[cellOrig.column] + '</div>';
that.columnHeaders[cellOrig.column] + '</div>';
}
$html.html(html);
return $html[0].outerHTML;
Expand All @@ -138,6 +143,8 @@
};
},
_computeFakeEvent: function(event) {
if (this.fixedColumn !== undefined)
return event;
var result = $.extend({}, event);
var start = this.calendar.moment(event.start);
if (start >= this.start) {
Expand Down Expand Up @@ -173,7 +180,10 @@
if (start >= this.start) {
var fakeDayOffset =
this._countNonHiddenDaysBetween(this.start, start);
result.column = fakeDayOffset % this.numColumns;
if (this.fixedColumn === undefined)
result.column = fakeDayOffset % this.numColumns;
else
result.column = this.fixedColumn;
var daysDelta = start.diff(this.start, 'days');
var days = Math.floor(fakeDayOffset / this.numColumns);
result.start = this._addNonHiddenDays(
Expand Down

0 comments on commit 80c1690

Please sign in to comment.