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

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