ec.components documentation
  1. Components
  2. CalendarComponent

File

packages/calendar/src/lib/calendar/calendar.component.ts

Description

Input for a datetime.

https://components.entrecode.de/ui/datetime?e=1

Extends

MonthComponent

Implements

ControlValueAccessor

Metadata

providers { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CalendarComponent), multi: true, }
selector ec-calendar
templateUrl calendar.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(defaultDateFormat, defaultTimeFormat, defaultMonthFormat)
Defined in packages/calendar/src/lib/calendar/calendar.component.ts:46

The constructor gets the weekdays for the calendar header and instantiates the allowed input patterns.

Parameters :
Name Optional
defaultDateFormat No
defaultTimeFormat No
defaultMonthFormat No

Inputs

dateOnly
Type : boolean
Defined in packages/calendar/src/lib/calendar/calendar.component.ts:40

If true, the time will not be in the emitted value

disabled
Defined in packages/calendar/src/lib/calendar/calendar.component.ts:36

If true, the date cannot be changed

disablePast
Type : boolean
Defined in packages/calendar/src/lib/calendar/calendar.component.ts:42

If true, past dates cannot be selected

disableTime
Type : boolean
Defined in packages/calendar/src/lib/calendar/calendar.component.ts:38

If true, the time will not be displayed nor will be editable.

placeholder
Default value : ''
Defined in packages/calendar/src/lib/calendar/calendar.component.ts:34

The input's placeholder

colors
Type : Object
Inherited from MonthComponent
Defined in MonthComponent:41

Color mapping for day cells. E.g. to view a month heatmap

date
Type : moment.Moment
Inherited from MonthComponent
Defined in MonthComponent:51

The current date (for showing month)

disabled
Inherited from MonthComponent
Defined in MonthComponent:63

If true, nothing can be changed

disableDrag
Default value : false
Inherited from MonthComponent
Defined in MonthComponent:61

If true, no dragging can be done at all (other drag flags will be ignored)

disableDragAnywhere
Default value : false
Inherited from MonthComponent
Defined in MonthComponent:59

If true, cannot drag anywhere to select a span (can still drag start and end, if not disabled too)

disableDragEnd
Default value : false
Inherited from MonthComponent
Defined in MonthComponent:57

If true, the timespan end cannot be dragged

disableDragStart
Default value : false
Inherited from MonthComponent
Defined in MonthComponent:55

If true, the timespan start cannot be dragged

disablePast
Type : boolean
Inherited from MonthComponent
Defined in MonthComponent:49

If true, past dates cannot be selected

heatmap
Type : Object
Inherited from MonthComponent
Defined in MonthComponent:43

Class mapping for day cells. E.g. to apply different background classes

selected
Type : moment.Moment
Inherited from MonthComponent
Defined in MonthComponent:39

The current selected date

selectSpan
Type : moment.Moment[]
Inherited from MonthComponent
Defined in MonthComponent:47

Timespan in which the dates can be selected.

spancolor
Default value : '#ccc'
Inherited from MonthComponent
Defined in MonthComponent:53

The color of days that are inside the timespan

timespan
Type : moment.Moment[]
Inherited from MonthComponent
Defined in MonthComponent:45

Timespan that is reflected. Marks days inside the span

Outputs

changed
Type : EventEmitter<any>
Defined in packages/calendar/src/lib/calendar/calendar.component.ts:24

Output that emits when the value changes

dayClicked
Type : EventEmitter<any>
Inherited from MonthComponent
Defined in MonthComponent:71

Emits when the selected day changes.

spanChanged
Type : EventEmitter<any>
Inherited from MonthComponent
Defined in MonthComponent:73

Changed Timespan selection

Methods

getPattern
getPattern(_moment)
Defined in packages/calendar/src/lib/calendar/calendar.component.ts:71
Parameters :
Name Optional
_moment No
Returns : any
input
input(value)
Defined in packages/calendar/src/lib/calendar/calendar.component.ts:100

Called upon input value change by the user.

Parameters :
Name Optional
value No
Returns : void
ngOnInit
ngOnInit()
Defined in packages/calendar/src/lib/calendar/calendar.component.ts:61
Returns : void
registerOnChange
registerOnChange(fn)
Defined in packages/calendar/src/lib/calendar/calendar.component.ts:139

registerOnChange implementation of ControlValueAccessor

Parameters :
Name Optional
fn No
Returns : void
registerOnTouched
registerOnTouched()
Defined in packages/calendar/src/lib/calendar/calendar.component.ts:144

registerOnTouched implementation of ControlValueAccessor

Returns : void
select
select(selected)
Defined in packages/calendar/src/lib/calendar/calendar.component.ts:80

Updates the value with the given moment and propagates the change.

Parameters :
Name Optional
selected No
Returns : void
setDisabledState
setDisabledState(isDisabled)
Defined in packages/calendar/src/lib/calendar/calendar.component.ts:146
Parameters :
Name Optional
isDisabled No
Returns : void
setValue
setValue(value)
Defined in packages/calendar/src/lib/calendar/calendar.component.ts:115

called when the value should be changed from inside the component. calls propagateChange and emits the change output

Parameters :
Name Optional
value No
Returns : void
writeValue
writeValue(value: Date)
Defined in packages/calendar/src/lib/calendar/calendar.component.ts:121

Selects the given Date when the model changes.

Parameters :
Name Type Optional
value Date No
Returns : string
alter
alter(value, span: string)
Inherited from MonthComponent
Defined in MonthComponent:326

Updates the viewed date to reflect the given relative changes.

Parameters :
Name Type Optional
value No
span string No
Returns : void
canAlter
canAlter(value, span: string)
Inherited from MonthComponent
Defined in MonthComponent:320
Parameters :
Name Type Optional
value No
span string No
Returns : any
clearSelection
clearSelection()
Inherited from MonthComponent
Defined in MonthComponent:301

Clears the current selected date

Returns : void
dragOverDay
dragOverDay(day: Day, e?)
Inherited from MonthComponent
Defined in MonthComponent:98
Parameters :
Name Type Optional
day Day No
e Yes
Returns : void
dragStart
dragStart(day, e)
Inherited from MonthComponent
Defined in MonthComponent:154
Parameters :
Name Optional
day No
e No
Returns : void
getDayColor
getDayColor(_moment: moment.Moment)
Inherited from MonthComponent
Defined in MonthComponent:188
Parameters :
Name Type Optional
_moment moment.Moment No
Returns : any
getDayHeat
getDayHeat(_moment: moment.Moment)
Inherited from MonthComponent
Defined in MonthComponent:194
Parameters :
Name Type Optional
_moment moment.Moment No
Returns : any
getMonth
getMonth(day, type?: string)
Inherited from MonthComponent
Defined in MonthComponent:221

Returns days of current month

Parameters :
Name Type Optional Default value
day No moment()
type string Yes
Returns : Array<Day>
isDraggable
isDraggable(day)
Inherited from MonthComponent
Defined in MonthComponent:89
Parameters :
Name Optional
day No
Returns : any
isInTimeSpan
isInTimeSpan(date)
Inherited from MonthComponent
Defined in MonthComponent:150
Parameters :
Name Optional
date No
Returns : any
isSelectable
isSelectable(date, span: string)
Inherited from MonthComponent
Defined in MonthComponent:313
Parameters :
Name Type Optional Default value
date No
span string No 'days'
Returns : any
isSelected
isSelected(_moment: moment.Moment)
Inherited from MonthComponent
Defined in MonthComponent:306

Returns true if the given moment is currently selected (on a day basis)

Parameters :
Name Type Optional
_moment moment.Moment No
Returns : boolean
mouseOver
mouseOver(day, e)
Inherited from MonthComponent
Defined in MonthComponent:180
Parameters :
Name Optional
day No
e No
Returns : void
mouseUp
mouseUp(day, e)
Inherited from MonthComponent
Defined in MonthComponent:171
Parameters :
Name Optional
day No
e No
Returns : void
ngOnChanges
ngOnChanges(change)
Inherited from MonthComponent
Defined in MonthComponent:206

When changing the date or selected input, the calendar will update its view to display the month containing it.

Parameters :
Name Optional
change No
Returns : void
ngOnInit
ngOnInit()
Inherited from MonthComponent
Defined in MonthComponent:201

Initializes the calendar.

Returns : void
selectDay
selectDay(_moment: moment.Moment, emit)
Inherited from MonthComponent
Defined in MonthComponent:277

Selects the day of the given moment.

Parameters :
Name Type Optional Default value
_moment moment.Moment No
emit No true
Returns : void
setDate
setDate(date: moment.Moment)
Inherited from MonthComponent
Defined in MonthComponent:263

Sets the calendars viewed date to the given moment's month. Renders always 42 cells to keep the layout consistent.

Parameters :
Name Type Optional Default value
date moment.Moment No this.selected || this.date
Returns : void
setToday
setToday()
Inherited from MonthComponent
Defined in MonthComponent:339

Sets the current selected date to today.

Returns : void
today
today()
Inherited from MonthComponent
Defined in MonthComponent:334

Sets the current viewed date to today.

Returns : void

Properties

Public defaultDateFormat
Decorators :
@Inject('moment.format.date')
Defined in packages/calendar/src/lib/calendar/calendar.component.ts:50
Public defaultTimeFormat
Decorators :
@Inject('moment.format.time')
Defined in packages/calendar/src/lib/calendar/calendar.component.ts:51
grid
Type : MonthComponent
Decorators :
@ViewChild(MonthComponent, {static: true})
Defined in packages/calendar/src/lib/calendar/calendar.component.ts:30

The calendar view child.

inputValue
Type : string
Default value : ''
Defined in packages/calendar/src/lib/calendar/calendar.component.ts:28

The current value of the input

Private patterns
Type : []
Default value : ['DD.MM.YYYY', 'DD.MM', 'DD.MM.YY', 'MM-DD-YYYY', 'YYYY-MM-DD', 'YYYY-MM-DD']
Defined in packages/calendar/src/lib/calendar/calendar.component.ts:44

Allowed date input patterns. The first one will be standard.

propagateChange
Default value : () => {...}
Defined in packages/calendar/src/lib/calendar/calendar.component.ts:136

Change propagation for ControlValueAccessor

Private timeFormat
Type : string
Default value : 'HH:mm'
Defined in packages/calendar/src/lib/calendar/calendar.component.ts:46

Sets the input format of the time

value
Type : string
Default value : ''
Defined in packages/calendar/src/lib/calendar/calendar.component.ts:26

The current value

Public weekdays
Type : string[]
Defined in packages/calendar/src/lib/calendar/calendar.component.ts:32

Array of the days of a week.

Public cells
Type : Array<Day>
Inherited from MonthComponent
Defined in MonthComponent:67

The cells containing the days

Protected changeSpan
Type : Subject<moment.Moment[]>
Default value : new Subject()
Inherited from MonthComponent
Defined in MonthComponent:75
dragged
Type : any
Inherited from MonthComponent
Defined in MonthComponent:35
Public formatted
Type : string
Inherited from MonthComponent
Defined in MonthComponent:65

The current month as string

Public monthFormat
Type : string
Default value : 'MMMM YYYY'
Inherited from MonthComponent
Defined in MonthComponent:69

Format for month in header

move
Type : boolean
Inherited from MonthComponent
Defined in MonthComponent:36
todayMoment
Default value : moment()
Inherited from MonthComponent
Defined in MonthComponent:37 
import { Component, EventEmitter, forwardRef, Inject, Input, Output, ViewChild } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
/* import { SymbolService } from '../../symbol/symbol.service'; */
import moment from 'moment-es6';
import { MonthComponent } from './month.component';

/** Input for a datetime.
 *
 * <example-url>https://components.entrecode.de/ui/datetime?e=1</example-url>
 */
@Component({
  selector: 'ec-calendar',
  templateUrl: 'calendar.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CalendarComponent),
      multi: true,
    },
  ],
})
export class CalendarComponent extends MonthComponent implements ControlValueAccessor {
  /** Output that emits when the value changes */
  @Output() changed: EventEmitter<any> = new EventEmitter();
  /** The current value */
  value = '';
  /** The current value of the input */
  inputValue = '';
  /** The calendar view child. */
  @ViewChild(MonthComponent, { static: true }) grid: MonthComponent;
  /** Array of the days of a week. */
  public weekdays: string[];
  /** The input's placeholder */
  @Input() placeholder = '';
  /** If true, the date cannot be changed */
  @Input() disabled;
  /** If true, the time will not be displayed nor will be editable. */
  @Input() disableTime: boolean;
  /** If true, the time will not be in the emitted value */
  @Input() dateOnly: boolean;
  /** If true, past dates cannot be selected */
  @Input() disablePast: boolean;
  /** Allowed date input patterns. The first one will be standard. */
  private patterns = ['DD.MM.YYYY', 'DD.MM', 'DD.MM.YY', 'MM-DD-YYYY', 'YYYY-MM-DD', 'YYYY-MM-DD'];
  /** Sets the input format of the time */
  private timeFormat = 'HH:mm';

  /** The constructor gets the weekdays for the calendar header and instantiates the allowed input patterns.*/
  constructor(
    @Inject('moment.format.date') public defaultDateFormat,
    @Inject('moment.format.time') public defaultTimeFormat,
    @Inject('moment.format.month') protected defaultMonthFormat /* public symbol: SymbolService */,
  ) {
    /* super(symbol); */
    super(defaultMonthFormat);
    this.patterns = defaultDateFormat ? [defaultDateFormat] : this.patterns;
    this.timeFormat = defaultTimeFormat || this.timeFormat;
    this.weekdays = moment.weekdaysMin(true);
  }

  ngOnInit() {
    if (!this.disableTime) {
      this.patterns = this.patterns
        .map((pattern) => {
          return pattern + ' ' + this.timeFormat;
        })
        .concat(this.patterns);
    }
  }

  getPattern(_moment) {
    const format = _moment.creationData().format;
    if (this.patterns.indexOf(format) !== -1) {
      return format;
    }
    return this.patterns[0];
  }

  /** Updates the value with the given moment and propagates the change. */
  select(selected) {
    if (this.disabled) {
      console.warn('cannot select date: calendar is set to disabled=true');
      return;
    }
    if (this.value && selected.hour() === 0 && selected.minute() === 0) {
      const previous = moment(this.value, this.patterns, true);
      selected.hour(previous.hour());
      selected.minute(previous.minute());
    }
    this.value = selected.format(this.getPattern(selected));
    this.inputValue = this.value;
    if (this.dateOnly) {
      this.setValue(selected.format("YYYY-MM-DD") || 'invalid');
    } else {
      this.setValue(selected.toISOString() || 'invalid');
    }
  }

  /** Called upon input value change by the user. */
  input(value) {
    this.value = value;
    const typed = moment(value, [...this.patterns, moment.ISO_8601], true);
    if (typed.isValid()) {
      this.grid.selectDay(typed, false);
      this.setValue(typed.toISOString());
    } else if (value === '') {
      this.grid.clearSelection();
      this.setValue(null);
    } else {
      this.setValue(typed.toISOString() || 'invalid');
    }
  }

  /** called when the value should be changed from inside the component. calls propagateChange and emits the change output */
  setValue(value) {
    this.propagateChange(value);
    this.changed.emit(value);
  }

  /** Selects the given Date when the model changes. */
  writeValue(value: Date) {
    if (!value) {
      return '';
    }
    const date = moment(value);
    if (!date.isValid()) {
      console.warn('written model value is not valid', date);
      return;
    }
    this.value = date.format(this.patterns[0]) || '';
    this.inputValue = this.value;
    this.grid.selectDay(moment(value));
  }

  /** Change propagation for ControlValueAccessor */
  propagateChange = (_: any) => { };

  /** registerOnChange implementation of ControlValueAccessor */
  registerOnChange(fn) {
    this.propagateChange = fn;
  }

  /** registerOnTouched implementation of ControlValueAccessor */
  registerOnTouched() { }

  setDisabledState(isDisabled) {
    this.disabled = isDisabled;
  }
}

<svg
  aria-hidden="true"
  style="position: absolute; width: 0; height: 0; overflow: hidden;"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xlink="http://www.w3.org/1999/xlink"
>
  <defs>
    <symbol id="arrowhead-left" viewBox="0 0 24 24">
      <title>arrowhead-left</title>
      <path
        d="M13.829 19c-0.292 0-0.582-0.127-0.78-0.373l-4.828-6c-0.298-0.371-0.294-0.901 0.011-1.267l5-6c0.353-0.424 0.984-0.481 1.409-0.128s0.481 0.984 0.127 1.408l-4.475 5.371 4.315 5.362c0.346 0.43 0.278 1.060-0.153 1.406-0.184 0.149-0.406 0.221-0.626 0.221z"
      ></path>
    </symbol>
    <symbol id="arrowhead-right" viewBox="0 0 24 24">
      <title>arrowhead-right</title>
      <path
        d="M9.999 19c-0.226 0-0.453-0.076-0.64-0.232-0.424-0.353-0.481-0.984-0.128-1.408l4.476-5.371-4.315-5.362c-0.346-0.43-0.278-1.060 0.152-1.406 0.431-0.346 1.060-0.278 1.407 0.152l4.828 6c0.298 0.371 0.294 0.901-0.011 1.267l-5 6c-0.198 0.237-0.482 0.36-0.769 0.36z"
      ></path>
    </symbol>
    <symbol id="today" viewBox="0 0 24 24">
      <title>today</title>
      <path d="M16 12c0 2.209-1.791 4-4 4s-4-1.791-4-4c0-2.209 1.791-4 4-4s4 1.791 4 4z"></path>
    </symbol>
  </defs>
</svg>
<style>
  .ixo {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
  }
</style>
<div class="ec-calendar">
  <nav class="ec-calendar-controls">
    <a
      (click)="grid.alter(-1, 'months')"
      class="btn btn_clear btn_square ec-calendar-controls__prev"
      [class.is-disabled]="!grid.canAlter(-1, 'month')"
    >
      <svg class="ixo">
        <use xlink:href="#arrowhead-left"></use>
      </svg>
    </a>
    <div class="ec-calendar-title">{{ grid.formatted }}</div>
    <a
      *ngIf="isSelectable(todayMoment)"
      (click)="grid.setToday()"
      class="btn btn_clear btn_square ec-calendar-controls__current"
    >
      <svg class="ixo">
        <use xlink:href="#today"></use>
      </svg>
    </a>
    <a
      (click)="grid.alter(1, 'months')"
      class="btn btn_clear btn_square ec-calendar-controls__next"
      [class.is-disabled]="!grid.canAlter(1, 'month')"
    >
      <svg class="ixo">
        <use xlink:href="#arrowhead-right"></use>
      </svg>
    </a>
  </nav>
  <div class="ec-calendar-month ">
    <ul class="ec-calendar-weekdays ">
      <li *ngFor="let weekday of weekdays">
        {{ weekday }}
      </li>
    </ul>
    <ec-month
      [disabled]="disabled"
      [disableDrag]="disableDrag"
      [disableDragAnywhere]="disableDragAnywhere"
      [disableDragStart]="disableDragStart"
      [disableDragEnd]="disableDragEnd"
      (spanChanged)="spanChanged.emit($event)"
      [selectSpan]="selectSpan"
      [disablePast]="disablePast"
      [timespan]="timespan"
      [heatmap]="heatmap"
      [date]="date"
      (dayClicked)="select($event)"
      #grid
    ></ec-month>
  </div>
</div>
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""