Ionic-conference-calendar-header NPM

Ionic Conference Calendar Header

A sweet conference style calendar.

Setup

Install

npm install ionic-conference-calendar-header

Add component to declarations

import { IonicConferenceCalendarHeader } from 'ionic-conference-calendar-header'

@NgModule({
  declarations: [
    IonicConferenceCalendarHeader
  ]
})
export class AppModule {}

Add to your page

<!-- pretty-header is what gives it that gradient. that's not part of the component -->
<ion-header class="pretty-header">
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
  </ion-navbar>

  <ionic-conference-calendar-header (change)="onDateChanged($event)"
                                    [date]="activeDate"
                                    [dates]="eventDates">
  </ionic-conference-calendar-header>
</ion-header>

Import the stylesheet

(this changes the selected date color to your primary color)

@import '../node_modules/ionic-conference-calendar-header/src/ionicConferenceCalendarHeader.component.scss';

API

	Name	Data Type	Description	Example
Input	date	string \| Date	The date to select in the header. The date must already exist in the given dates.	"2018-01-01"	new Date()
Input	dates	Array\<string \| Date>	All of the possible dates.	"2018-01-01", "2018-01-02", new Date(), new Date()
Input	view	string	Optional view type setting. Possible values are "days" and "months". Defaults to days	"days"	"months"
(Output)	change	string		"2018-01-01"