File

src/calendar/year-view/calendar-year.component.ts

Implements

OnInit

Metadata

selector ibm-calendar-year-view

Index

Properties
Methods
Inputs

Inputs

model

DateTimeModel to be used in this view.

Type: DateTimeModel

Methods

inRange
inRange(yearIndex: number)

Returns value indicating whether year is part of a range selection

Parameters :
Name Type Optional Description
yearIndex number

index of year in view

Returns : any

boolean

isCurrentYear
isCurrentYear(yearIndex: number)

Returns value indicating whether year is current year

Parameters :
Name Type Optional Description
yearIndex number

index of year in view

Returns : boolean

boolean

isDisabled
isDisabled(yearIndex: number)

Returns value indicating whether year is disabled

Parameters :
Name Type Optional Description
yearIndex number

index of year in view

Returns : any

boolean

isSelected
isSelected(yearIndex: number)

Returns value indicating whether year is selected

Parameters :
Name Type Optional Description
yearIndex number

index of year in view

Returns : boolean

boolean

ngOnInit
ngOnInit()
Returns : void
range
range(stop: number, start: , step: )

Wrapper for range function in utils because it cannot be directly used in template

Parameters :
Name Type Optional Description
stop number
start
step
Returns : any

Array

selectYear
selectYear(yearIndex: number)

Sets model's startDate and endDate

Parameters :
Name Type Optional Description
yearIndex number

index of year in view

Returns : void

Properties

currentView
currentView: Date
Type : Date

Date being used in this view.

rangeSelectionInProgress
rangeSelectionInProgress:
Default value : false

State to determine whether you are selecting startDate or endDate

import {
	Component,
	Input,
	OnInit
} from "@angular/core";
import { DateTimeModel } from "./../date-time-model.class";
import { range } from "../../common/utils";

@Component({
	selector: "ibm-calendar-year-view",
	template: `
	<div class="calendar-view">
		<ibm-calendar-header [currentView]="currentView" header="yearOnlyRange"></ibm-calendar-header>
		<table class="calendar_grid">
			<tr
			class="grid_row--months"
			*ngFor="let i of range(-1, 2, -1)">
				<td
				*ngFor="let j of range(-1, 1, -1)"
				(click)="selectYear(i * 2 + j)"
				[ngClass]="{
					'today': isCurrentYear(i * 2 + j),
					'selected': isSelected(i * 2 + j),
					'range': inRange(i * 2 + j),
					'disabled': isDisabled(i * 2 + j)
				}">
					<div>
						<p>
							{{currentView.getFullYear() - (i * 2 + j)}}
						</p>
					</div>
				</td>
			</tr>
		</table>
	</div>
	`
})

export class CalendarYear implements OnInit {
	/**
	 * `DateTimeModel` to be used in this view.
	 *
	 * @type {DateTimeModel}
	 * @memberof CalendarMonths
	 */
	@Input() model: DateTimeModel;

	/**
	 * `Date` being used in this view.
	 *
	 * @type {Date}
	 * @memberof CalendarMonths
	 */
	currentView: Date = new Date();

	/**
	 * State to determine whether you are selecting `startDate` or `endDate`
	 *
	 * @memberof CalendarMonths
	 */
	rangeSelectionInProgress = false;

	ngOnInit() {
		this.currentView = new Date(this.model.startDate);
		if (!this.currentView || isNaN(this.currentView.getTime())) {
			this.currentView = new Date();
		}
	}

	/**
	 * Wrapper for `range` function in utils because it cannot
	 * be directly used in template
	 *
	 * @param {number} stop
	 * @param {number} [start=0]
	 * @param {number} [step=1]
	 * @returns Array<any>
	 * @memberof CalendarMonths
	 */
	range(stop: number, start = 0, step = 1) {
		return range(stop, start, step);
	}

	/**
	 * Returns value indicating whether `year` is current year
	 *
	 * @param {number} yearIndex index of year in view
	 * @returns boolean
	 * @memberof CalendarYear
	 */
	isCurrentYear(yearIndex: number) {
		const now = new Date();
		const currentYear = this.currentView.getFullYear() - yearIndex; // Last year in the calendar view

		return currentYear === now.getFullYear();
	}

	/**
	 * Returns value indicating whether `year` is disabled
	 *
	 * @param {number} yearIndex index of year in view
	 * @returns boolean
	 * @memberof CalendarYear
	 */
	isDisabled(yearIndex: number) {
		const year = this.currentView.getFullYear() - yearIndex;
		return this.model.isDateDisabled(new Date(year, 1, 1));
	}

	/**
	 * Returns value indicating whether `year` is part of a range selection
	 *
	 * @param {number} yearIndex index of year in view
	 * @returns boolean
	 * @memberof CalendarYear
	 */
	inRange(yearIndex: number) {
		const year = this.currentView.getFullYear() - yearIndex;
		return this.model.isDateInRange(new Date(year, 1, 1));
	}

	/**
	 * Returns value indicating whether `year` is selected
	 *
	 * @param {number} yearIndex index of year in view
	 * @returns boolean
	 * @memberof CalendarYear
	 */
	isSelected(yearIndex: number) {
		const currentYearProvided = this.currentView.getFullYear() - yearIndex;

		for (let i = 0; i < 6; i ++) {
			const currentYearInView = this.currentView.getFullYear() - i;

			const isCurrentYearStart =
				currentYearInView === this.model.startDate.getFullYear() &&
				currentYearProvided === this.model.startDate.getFullYear();

			const isCurrentYearEnd =
				currentYearInView === this.model.endDate.getFullYear() &&
				currentYearProvided === this.model.endDate.getFullYear();

			if (isCurrentYearStart || isCurrentYearEnd) {
				return true;
			}
		}
		return false;
	}

	/**
	 * Sets model's `startDate` and `endDate`
	 *
	 * @param {number} yearIndex index of year in view
	 * @memberof CalendarYear
	 */
	selectYear(yearIndex: number) {
		const selectedYear = this.currentView.getFullYear() - yearIndex;

		if (this.isDisabled(yearIndex)) {
			return;
		}

		if (this.rangeSelectionInProgress) {
			this.rangeSelectionInProgress = false;
			this.model.selectYearEnd(new Date(selectedYear));
			this.model.endDate = new Date(selectedYear, 11, 31);
			if (this.model.startDate.getTime() > this.model.endDate.getTime()) {
				const tmp = this.model.startDate;
				this.model.startDate = this.model.endDate;
				this.model.endDate = tmp;
			}
		} else {
			this.rangeSelectionInProgress = true;
			this.model.selectYear(new Date(selectedYear, 1, 1));
		}
	}
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""