ionic-horizontal-calendar
Customizable calendar with touchable scrolling and arrow to render the next days
Github Repository https://github.com/daniele92vp/ionic-horizontal-calendar
Installation
npm i ionic-horizontal-calendar
Usage, input and output available
The following example show how to use the ionic-horizontal-calendar
<ionic-horizontal-calendar locale="de" minDate="minDate" class="calendar" firstDayAutoSelected="true" displayMode="daily" > <ion-label header #header> Calendar Demo </ion-label></ionic-horizontal-calendar>Following are the Input properties available
| Input | Type | Default value | Description |
|---|---|---|---|
| dayCount | number | 7 | Number of display displayed per row |
| daysToExclude | function | () => {...} | Days to exclude from selection |
| minDate | any | - | Minimum date to display |
| maxDate | any | - | Maximum date to display |
| scrollSensivity | number | 1.0 | Sensibility of scrolling |
| locale | string | - | Zone to use as locale |
| firstDayAutoSelected | boolean | false | Autoselection of day for today |
| displayMode | string | daily | Render day by day or weekly |
Following are the Output properties available
| Output | Type | Description |
|---|---|---|
| nextDayClicked | function | Emitted when to left or when right arrow clicked |
| prevDayClicked | function | Emitted when to right or when left arrow clicked |
| daySelected | function | Emitted when a day is selected |
Customization
The following css properties are customizable, simple pass a class and inside of it customize what you prefer
--background-color-calendar
--border-botto-calendar
--padding-top-calendar
--margin-header
--margin-bottom-header
--text-align-header
--display-header
--align-items-header
--justify-content-header
--font-size-header
--color-month
--margin-month
--text-align-month
--font-size-month
--width-days
--height-days
--width-arrow
--opacity-disabled-arrow
--background-color-day-unavailable
--border-bottom-day-selected
--font-size-number-date
--text-align-number-date
--color-number-date
--font-size-text-date
--color-text-date
--text-align-text-date
--color-number-day-unavailable
--color-text-day-unavailable