Просмотр исходного кода

Add option to display week numbers in day cells

This adds the option to display week numbers in the day cells instead
of along the side. The user option `basicViewWeekNrPosition` is
introduced, which can have two possible values:

- `weekNrSeparateColumn` (default): Display week numbers in a separate
  column on the left. This is the current behavior, and therefore
  should remain default.

- `weekNrDayCell`: Display week number in a day cell. In case of month
  and basicWeek views, week numbers will be in the top left of the
  cells of the first day of the week according to the calculation
  method. In case of basicDay view, the week number will be in the top
  left of the day shown, regardless of the day of the week.

General notes:

- The option does not affect the `agendaDay` and `agendaWeek` views,
  which currently show the week number in the column of the time slots,
  meaning it is not taking up any extra room.

- With `weekNrDayCell`, the week number is not shown if the first day
  of the week according to the calculation method is not in view, for
  example:

  - When showing only Monday through Friday while the week number
    changes on Sunday.
  - In `basicDay` view, when viewing any other day than the first day
    of the week.

- For `weekNrDayCell`, the relationship with `weekNumberCalculation`
  and `firstDay`:

  - With ISO: Week number always shown on Monday, as per ISO 8601. Is
    not influenced by the `firstDay` option.

  - With custom function: A sequence of 7 days is tested with the
    custom function to determine on which day of the week the week
    number changes. Is not influenced by the `firstDay` option.

  - With local: If `firstDay` is set, the week number will be shown on
    that day. If not, the week number is shown on the first day of the
    week according to the locale (lang). If that is also not set, it is
    shown on Sunday.

Notes regarding HTML classes:

- In an earlier commit, the day numbers and their class `fc-day-number`
  were moved from their own `td` element to a new `span` within that
  `td`. The `td` got class `fc-numbercell` instead and can contain
  `span` elements for `fc-day-number` and `fc-week-number`.

- As a result, two different elements that can now have the class
  `fc-week-number`, depending on the week number display:

  - `weekNrSeparateColumn` (default): A `td` element with class
    `fc-week-number`, which contains a `span` element without class.
    (Same as before.)

  - `weekNrDayCell`: A `span` element with class `fc-week-number`
    inside a `td` element with class `fc-numbercell`.

An earlier commit already made existing CSS selectors a bit more
specific, hopefully preventing unexpected results.
Peter Nowee 10 лет назад
Родитель
Сommit
bb22504824
3 измененных файлов с 45 добавлено и 10 удалено
  1. 17 6
      src/basic/BasicView.js
  2. 8 0
      src/basic/basic.css
  3. 20 4
      src/common/DayGrid.js

+ 17 - 6
src/basic/BasicView.js

@@ -10,7 +10,9 @@ var BasicView = FC.BasicView = View.extend({
 	dayGrid: null, // the main subcomponent that does most of the heavy lifting
 
 	dayNumbersVisible: false, // display day numbers on each day cell?
-	weekNumbersVisible: false, // display week numbers along the side?
+	weekNumbersVisible: false, // display week numbers?
+	colWeekNumbersVisible: false, // display week numbers along the side?
+	cellWeekNumbersVisible: false, // display week numbers in day cell?
 
 	weekNumberWidth: null, // width of all the week-number cells running down the side
 
@@ -68,6 +70,15 @@ var BasicView = FC.BasicView = View.extend({
 		this.dayNumbersVisible = this.dayGrid.rowCnt > 1; // TODO: make grid responsible
 		this.weekNumbersVisible = this.opt('weekNumbers');
 		this.dayGrid.numbersVisible = this.dayNumbersVisible || this.weekNumbersVisible;
+		if (this.weekNumbersVisible) {
+			if (this.opt('basicViewWeekNrPosition') === 'weekNrDayCell') {
+				this.cellWeekNumbersVisible = true;
+				this.colWeekNumbersVisible = false;
+			} else {
+				this.cellWeekNumbersVisible = false;
+				this.colWeekNumbersVisible = true;
+			};
+		}
 
 		this.el.addClass('fc-basic-view').html(this.renderSkeletonHtml());
 		this.renderHead();
@@ -146,7 +157,7 @@ var BasicView = FC.BasicView = View.extend({
 
 	// Refreshes the horizontal dimensions of the view
 	updateWidth: function() {
-		if (this.weekNumbersVisible) {
+		if (this.colWeekNumbersVisible) {
 			// Make sure all week number cells running down the side have the same width.
 			// Record the width for cells created later.
 			this.weekNumberWidth = matchCellWidths(
@@ -301,7 +312,7 @@ var basicDayGridMethods = {
 	renderHeadIntroHtml: function() {
 		var view = this.view;
 
-		if (view.weekNumbersVisible) {
+		if (view.colWeekNumbersVisible) {
 			return '' +
 				'<th class="fc-week-number ' + view.widgetHeaderClass + '" ' + view.weekNumberStyleAttr() + '>' +
 					'<span>' + // needed for matchCellWidths
@@ -318,7 +329,7 @@ var basicDayGridMethods = {
 	renderNumberIntroHtml: function(row) {
 		var view = this.view;
 
-		if (view.weekNumbersVisible) {
+		if (view.colWeekNumbersVisible) {
 			return '' +
 				'<td class="fc-week-number" ' + view.weekNumberStyleAttr() + '>' +
 					'<span>' + // needed for matchCellWidths
@@ -335,7 +346,7 @@ var basicDayGridMethods = {
 	renderBgIntroHtml: function() {
 		var view = this.view;
 
-		if (view.weekNumbersVisible) {
+		if (view.colWeekNumbersVisible) {
 			return '<td class="fc-week-number ' + view.widgetContentClass + '" ' +
 				view.weekNumberStyleAttr() + '></td>';
 		}
@@ -349,7 +360,7 @@ var basicDayGridMethods = {
 	renderIntroHtml: function() {
 		var view = this.view;
 
-		if (view.weekNumbersVisible) {
+		if (view.colWeekNumbersVisible) {
 			return '<td class="fc-week-number" ' + view.weekNumberStyleAttr() + '></td>';
 		}
 

+ 8 - 0
src/basic/basic.css

@@ -51,10 +51,18 @@
 	min-width: 1.25em;
 }
 
+.fc-ltr .fc-basic-view .fc-numbercell span.fc-week-number {
+	float: left;
+}
+
 .fc-ltr .fc-basic-view .fc-numbercell span.fc-day-number {
 	float: right;
 }
 
+.fc-rtl .fc-basic-view .fc-numbercell span.fc-week-number {
+	float: right;
+}
+
 .fc-rtl .fc-basic-view .fc-numbercell span.fc-day-number {
 	float: left;
 }

+ 20 - 4
src/common/DayGrid.js

@@ -137,19 +137,35 @@ var DayGrid = FC.DayGrid = Grid.extend(DayTableMixin, {
 	// The number row will only exist if either day numbers or week numbers are turned on.
 	renderNumberCellHtml: function(date) {
 		var classes;
+		var weekCalcFirstDoW;
 
-		if (!this.view.dayNumbersVisible) { // if there are week numbers but not day numbers
+		if (!this.view.dayNumbersVisible && !this.view.cellWeekNumbersVisible) {
+			// no numbers in day cell (week number must be along the side)
 			return '<td/>'; //  will create an empty space above events :(
 		}
 
 		classes = this.getDayClasses(date);
 		classes.unshift('fc-numbercell');
 
+		if (this.view.cellWeekNumbersVisible) {
+			weekCalcFirstDoW = (date._locale || date._lang).
+				_fullCalendar_weekCalcFirstDoW;
+		}
+
 		return '' +
 			'<td class="' + classes.join(' ') + '" data-date="' + date.format() + '">' +
-				'<span class="fc-day-number">' +
-					date.date() +
-				'</span>' +
+				((this.view.cellWeekNumbersVisible && (date.day() === weekCalcFirstDoW)) ?
+					'<span class="fc-week-number fc-weeknr-daycell">' +
+						date.format('w') +
+					'</span>' :
+					''
+					) +
+				(this.view.dayNumbersVisible ?
+					'<span class="fc-day-number">' +
+						date.date() +
+					'</span>' :
+					''
+					) +
 			'</td>';
 	},