ec.components documentation
  1. Components
  2. DaterangeComponent

File

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

Extends

MonthComponent

Implements

OnInit

Metadata

selector ec-daterange
templateUrl ./daterange.component.html

Index

Properties
Methods
Inputs
Outputs

Inputs

date
Type : moment.Moment
Default value : moment()
Defined in packages/calendar/src/lib/daterange/daterange.component.ts:11

The date that should be displayed at start.

timespan
Type : moment.Moment[]
Defined in packages/calendar/src/lib/daterange/daterange.component.ts:13

span of moments which is reflected

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

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

ngOnInit
ngOnInit()
Defined in packages/calendar/src/lib/daterange/daterange.component.ts:15
Returns : void
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 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, Input, OnInit } from '@angular/core';
import moment from 'moment-es6';
import { MonthComponent } from '../calendar/month.component';

@Component({
  selector: 'ec-daterange',
  templateUrl: './daterange.component.html',
})
export class DaterangeComponent extends MonthComponent implements OnInit {
  /** The date that should be displayed at start. */
  @Input() date: moment.Moment = moment();
  /** span of moments which is reflected */
  @Input() timespan: moment.Moment[];

  ngOnInit() {}
}

<div class="ec-daterange">
    <ec-calendar (spanChanged)="spanChanged.emit($event)" [timespan]="timespan" [date]="date" class="ec-daterange-start"></ec-calendar>
</div>
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""