trb-calendar
v0.0.24
Published
## Quick Start
Downloads
31
Readme
Calendar
Quick Start
<trb-calendar></trb-calendar>
Api
|Binding|Name|Type|Description| |--|--|--|--| |Input|config|ICalendarViewConfig|The complete configuration for the calendar| |Input|dates|CellData|A Payloadable data for customizing porposes| |Output|selectionChange|CalendarSelection|Event fired when a cell selection is changed| |Output|monthSelectionChange|IMonthChange|Event fired when a month selection is changed|
ICalendarViewConfig
|Name|Type|Description|
|--|--|--|--|
|header|ICalendarHeaderConfig
|Configuration for the header|
|month|IMonthViewConfig
|Configuration for the month|
|selection|range
simple
picked
|Define the selection strategy to use|
|stylePrefix|string
|overwrite all the style prefix, assigning the new one. Default is trb
|
ICalendarHeaderConfig
|Name|Type|Description|Default|
|--|--|--|--|--|
|linkedMonths|boolean
|When two months are showing, the months must move together|true
|
|pastMonths|boolean
|Header allow go to months of past|true
|
IMonthViewConfig
|Name|Type|Description|Default|
|--|--|--|--|--|
|hideWeekends|boolean
|hide the weekend columns|false
|
|hideDaysOutsideMonth|boolean
|hide the overflow days, used to complete the 7 x 5 cells|true
|
|showTwoCalendarIfNeed|boolean
|show two calendar if the selection is range or picked|true
|
|firstDay|number
|configure the first day used in the calendar, starting in 0 as Sunday|0
|
|monthLabels|string[]
|month label to show in the header|english month labels|
|dayLabels|string[]
|labels to show in the days row|english day labels|
|dayLength|number
|number of letters to show in the days row|3
|
|showChangeYearButton|boolean
|show the arrow button to change the year in the header|true
|
|showChangeMonthButton|boolean
|show the arrow button to change the month in the header|true
|
CellData (Input)
As an optional input for the calendar, you can provide a list of CellData<T>
, each for a specific date (using the date
field) and with a disabled
and payload
optional fields.
The
payload
is really important if you want to customize the calendar with your business specific data.
|Name|Type|Description|
|--|--|--|--|
|date|string
|the current date in YYYY-MM-DD
format|
|payload|any
|your specific payload|
|disabled|boolean
|the passed in disabled option|
Customize components
You can customize the inner components of the calendar. To do this you must to provide the template of each component you want to customize.
For each template you must to provide the current context.
<trb-calendar
[dates]="dates"
[config]="config"
(selectionChange)="onSelectionChange($event)"
(monthSelectionChange)="onMonthSelectionChange($event)">
<trb-calendar-month *trbCalendarMonth="let context;" [context]="context">
<trb-calendar-header
*trbCalendarHeader="let context;"
[context]="context">
</trb-calendar-header>
<trb-calendar-cell
*trbCalendarCell="let context;"
[context]="context">
<!-- custom cell html here -->
<span class="my-price" *ngIf="context.payload">${{ context.payload }}</span>
</trb-calendar-cell>
</trb-calendar-month>
</trb-calendar>
Customize Cell
Continuing the above example, asume you pass in the dates
input the following array.
dates:CellData<any> = [{
date: '2019-05-05',
payload: {
currency : 'USD',
value: 460
}
} ... ]
The data will be propagated inside the calendar to reach the proper cell (2019-05-05).
Then you draw the data in the cell as in this line
<span class="my-price" *ngIf="context.payload">${{ context.payload }}</span>
CellContext
|Name|Type|Description|
|--|--|--|--|
|date|string
|the current date in YYYY-MM-DD
format|
|payload|any
|your specific payload|
|disabled|boolean
|the passed in disabled option|
|selection|ICalendarSelection
|the current selection state in the calendar|
|monthSelection|MonthSelection
|the current month selection state in the calendar|
|hideDaysOutsideMonth|boolean
|the configuration to hide the outside months days|
Date Payload
Styling
This is the hierachy for the calendar classes:
trb-calendar
trb-calendar-month
trb-calendar-header
trb-calendar-header-buttons
label
trb-calendar-row trb-calendar-day-labels
day-label
trb-calendar-row
trb-calendar-cell
overlay
label
Note that you can provide a prefix to overwrite all the trb
with your own prefix, using stylePrefix
.
Style event classes
Each cell receives bunch of event classes depending of their state.
|Css Class|Event Description|
|-|-|
|selected|the cell is selected|
|from|the cell is selected, and is the first selection in the range|
|to|the cell is selected, and is the last selection in the range|
|in-range|the cell is inside a range selection|
|past|the cell is from past of the current day|
|outside-month|the cell is outside the current calendar month|
|today|the cell is from today|
|has-payload|the cell has any payload|
|selection-simple|the cell selection type is simple
|
|selection-range|the cell selection type is range
|
|selection-pick|the cell selection type is picked
|
|disabled|the cell is mark as disabled|