twinssbc/ionic2-calendar

A calendar component based on Ionic framework

Ionic-Calendar directive

Ionic calendar directive

Table of Contents

1. Demo
2. Dependency
3. Usage
4. Options
5. Callback
6. View Customization Option
7. EventSource
8. Performance Tuning
9. Common Questions

Demo

Version 2.0
https://stackblitz.com/edit/ionic-calendar-demo-2-2?file=src%2Fapp%2Fexample.component.html
Version 1.0
https://stackblitz.com/edit/ionic-calendar-demo-1-0?file=src%2Fapp%2Fexample.component.html
Version 0.x
https://stackblitz.com/edit/ionic-calendar-demo?file=pages%2Fhome%2Fhome.html

Dependency

Calendar Version	Ionic Version	Angular Version	Swiper Version
2.5.x	>=8.0.0	>=18.0.0	>=11.0.0
2.4.x	>=7.0.0	>=17.0.0	>=11.0.0
2.3.x	>=7.0.0	>=17.0.0	>=11.0.0
2.2.x	>=7.0.0	>=17.0.0	>=10.1.0
2.1.x	>=7.0.0	>=16.0.0	>=10.1.0
2.0.x	>=7.0.0	>=16.0.0	[8.4.6, 9.0.0)
1.0.x	>=6.1.9	>=15.1.2	[8.4.6, 9.0.0)
0.6.x	>=5.1.0	>=9.1.0
0.5.x	>=4.0.0-rc.1
0.4.x	>=3.9.2
0.3.x	>=3.1.1
0.2.9+	>=2.3.0
0.2.x	2.0.0-rc.5
0.1.x	[2.0.0-rc.1, 2.0.0-rc.4]

version 0.2-0.4 has below dependency:
intl 1.2.5, due to issue angular/angular#3333

Usage

1. Install Calendar Dependency

npm install ionic2-calendar --save

version 1.0.x onwards

version 1.0.x is also published as Ionic6-Calendar package name. So could also run
npm install ionic6-calendar --save
version 2.0.x is also published as Ionic7-Calendar package name. So could also run
npm install ionic7-calendar --save
version 2.5.x is also published as Ionic8-Calendar package name. So could also run
npm install ionic8-calendar --save

NOTE: Starting from Version 1.0.x, the underlying implementaion is based on Swiper instead of IonSlides, so also needs to install Swiper dependency.

• Install swiper dependency
  npm install swiper --save

• Import swiper css in global.scss

@import 'swiper/css';

2. Import the Calendar module

If using version 1.0.x, could use both ionic2-calendar or ionic6-calendar, ionic7-calendar.

• version 0.5.x onwards

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from '@ionic/angular';
import { MyApp } from './app/app.component';
import { NgCalendarModule  } from 'ionic2-calendar';

@NgModule({
    declarations: [
        MyApp
    ],
    imports: [
        NgCalendarModule,
        IonicModule.forRoot(MyApp)
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp
    ]
})
export class AppModule {}

• version 0.1.x - 0.4.x

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app/app.component';
import { NgCalendarModule  } from 'ionic2-calendar';

@NgModule({
    declarations: [
        MyApp
    ],
    imports: [
        NgCalendarModule,
        IonicModule.forRoot(MyApp)
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp
    ]
})
export class AppModule {}

If you are using PageModule, you need to import the NgCalendarModule in your page module

import { NgCalendarModule  } from 'ionic2-calendar';

@NgModule({
  declarations: [
    MyPage
  ],
  imports: [
    IonicPageModule.forChild(MyPage),
    NgCalendarModule
  ],
  entryComponents: [
    MyPage
  ]
})
export class MyPageModule {}

3. Add the directive in the html page

    <calendar [eventSource]="eventSource"
        [calendarMode]="calendar.mode"
        [currentDate]="calendar.currentDate"
        (onCurrentDateChanged)="onCurrentDateChanged($event)"
        (onRangeChanged)="reloadSource(startTime, endTime)"
        (onEventSelected)="onEventSelected($event)"
        (onTitleChanged)="onViewTitleChanged($event)"
        (onTimeSelected)="onTimeSelected($event)"
        [step]="calendar.step">        
    </calendar>

Options

• formatDay
  The format of the date displayed in the month view.
  Default value: 'dd'
• formatDayHeader
  The format of the header displayed in the month view.
  Default value: 'EEE'
• formatDayTitle
  The format of the title displayed in the day view.
  Default value: 'MMMM dd, yyyy'
• formatWeekTitle
  The format of the title displayed in the week view.
  Default value: (version 0.1-0.3) 'MMMM yyyy, Week $n', (version 0.4+) 'MMMM yyyy, 'Week' w'
• formatMonthTitle
  The format of the title displayed in the month view.
  Default value: 'MMMM yyyy'
• formatWeekViewDayHeader
  The format of the header displayed in the week view.
  Default value: 'EEE d'
• formatHourColumn
  The format of the hour column displayed in the week and day view.
  Default value: (version 0.1-0.3) 'j', (version 0.4+) 'ha'
• calendarMode
  The initial mode of the calendar.
  Default value: 'month'

        <calendar ... [calendarMode]="calendar.mode"></calendar>

Version 1.0.x onwards

    import { CalendarMode } from 'ionic2-calendar';

    calendar = {
        mode: 'week' as CalendarMode
    };

Version 0.x

    import { CalendarMode } from 'ionic2-calendar/calendar';

    calendar = {
        mode: 'week' as CalendarMode
    };

• showEventDetail
  If set to true, when selecting the date in the month view, the events happened on that day will be shown below.
  Default value: true
• startingDayMonth
  Control month view starting from which day.
  Default value: 0 (Sunday)
• startingDayWeek
  Control week view starting from which day.
  Default value: 0 (Sunday)
• allDayLabel
  The text displayed in the allDay column header of week and day view.
  Default value: 'all day'
• noEventsLabel
  The text displayed when there’s no event on the selected date in month view.
  Default value: 'No Events'
• eventSource
  The data source of the calendar, when the eventSource is set, the view will be updated accordingly.
  Default value: null
  The format of the eventSource is described in the EventSource section
• queryMode
  If queryMode is set to 'local', when the range or mode is changed, the calendar will use the already bound eventSource to update the view
  If queryMode is set to 'remote', when the range or mode is changed, the calendar will trigger a callback function rangeChanged.
  Users will need to implement their custom loading data logic in this function, and fill it into the eventSource. The eventSource is watched, so the view will be updated once the eventSource is changed.
  Default value: 'local'
• step
  It is used to display the event using more accurate time interval in weekview and dayview. For example, if set to 30, then the event will only occupy half of the row height (If timeInterval option uses default value). The unit is minute. It can be set to 15 or 30.
  Default value: 60

    <calendar ... [step]="calendar.step"></calendar>

    import { Step } from 'ionic2-calendar/calendar';

    calendar = {
        step: 30 as Step
    };

• timeInterval (version >= 0.3)
  It is used to display the rows using more accurate time interval in weekview and dayview. For example, if set to 30, then the time interval between each row is 30 mins. The unit is minute. It should be the factor or multiple of 60, which means 60%timeInterval=0 or timeInterval%60=0.
  Default value: 60

    <calendar ... [timeInterval]="30"></calendar>

• autoSelect
  If set to true, the current calendar date will be auto selected when calendar is loaded or swiped in the month and week view.
  Default value: true
• locale
  The locale used to display text in the calendar.
  Check Localization section for more details.
  Default value: undefined (which means the local language)

    <calendar ... [locale]="calendar.locale"></calendar>

    calendar = {
        locale: 'en-GB'
    };

• markDisabled
  The callback function used to determine if the time should be marked as disabled.

    <calendar ... [markDisabled]="markDisabled"></calendar>

    markDisabled = (date: Date) => {
        var current = new Date();
        return date < current;
    };

• dateFormatter
  The custom date formatter to transform date to text.
  If the custom date formatter is not set, the default Angular DatePipe is used. The format method in dateFormatter is optional, if omitted, the default Angular DatePipe is used.

    <calendar ... [dateFormatter]="calendar.dateFormatter"></calendar>

    calendar = {
        dateFormatter: {
            formatMonthViewDay: function(date:Date) {
                return date.getDate().toString();
            },
            formatMonthViewDayHeader: function(date:Date) {
                return 'testMDH';
            },
            formatMonthViewTitle: function(date:Date) {
                return 'testMT';
            },
            formatWeekViewDayHeader: function(date:Date) {
                return 'testWDH';
            },
            formatWeekViewTitle: function(date:Date) {
                return 'testWT';
            },
            formatWeekViewHourColumn: function(date:Date) {
                return 'testWH';
            },
            formatDayViewHourColumn: function(date:Date) {
                return 'testDH';
            },
            formatDayViewTitle: function(date:Date) {
                return 'testDT';
            }
        }
    };        

• dir
  If set to "rtl", the calendar supports RTL language. This feature is only supported in Ionic 2.3.0 version onwards.
  Default value: ""

• scrollToHour
  Make weekview and dayview scroll to the specific hour after entering to the new view.
  Default value: 0

• preserveScrollPosition
  If set to true, the previous/next views in weekview and dayview will also scroll to the same position as the current active view.
  Default value: false

• lockSwipeToPrev
  If set to true, swiping to previous view is disabled.
  Default value: false

    <calendar ... [lockSwipeToPrev]="lockSwipeToPrev"></calendar>

    onCurrentDateChanged(event:Date) {
        var today = new Date();
        today.setHours(0, 0, 0, 0);
        event.setHours(0, 0, 0, 0);

        if (this.calendar.mode === 'month') {
            if (event.getFullYear() < today.getFullYear() || (event.getFullYear() === today.getFullYear() && event.getMonth() <= today.getMonth())) {
                this.lockSwipeToPrev = true;
            } else {
                this.lockSwipeToPrev = false;
            }
        }
    }

• lockSwipeToNext (version 1.0.x onwards) If set to true, swiping to next view is disabled.
  Default value: false

    <calendar ... [lockSwipeToNext]="lockSwipeToNext"></calendar>

    onCurrentDateChanged(event:Date) {
        var today = new Date();
        today.setHours(0, 0, 0, 0);
        event.setHours(0, 0, 0, 0);

        if (this.calendar.mode === 'month') {
            if (event.getFullYear() > today.getFullYear() || (event.getFullYear() === today.getFullYear() && event.getMonth() >= today.getMonth())) {
                this.lockSwipeToNext = true;
            } else {
                this.lockSwipeToNext = false;
            }
        }
    }

• lockSwipes
  If set to true, swiping is disabled.
  Default value: false

Version 1.x
Note: Since swiping is disabled, you could set currentDate or call slideToPrev/slideToNext method to move the calendar to previous/next view. You need to first set the lockSwipes to false, move the slide, then set it back.

    <calendar ... [lockSwipes]="lockSwipes"></calendar>

    moveSlide() {
        this.calendar.lockSwipes = false;
        setTimeout(function() {
            this.myCalendar.slideNext();
            this.calendar.lockSwipes = true;
        },100);
    }

Version 0.x
Note: Since swiping is disabled, you could set currentDate or call slideToPrev/slideToNext method to move the calendar to previous/next view. Do not set lockSwipeToPrev in the constructor phase. It will cause the view not updating when changing the currentDate. You could either set it in some callback function after initialization phase or use setTimeout to trigger some delay.

    <calendar ... [lockSwipes]="lockSwipes"></calendar>

    ngAfterViewInit() {
        var me = this;
        setTimeout(function() {
            me.lockSwipes = true;
        },100);
    }

• startHour
  Limit the weekview and dayview starts from which hour (0-23).
  Default value: 0

    <calendar ... startHour="9"></calendar>

• endHour
  Limit the weekview and dayview ends until which hour (1-24).
  Default value: 24

    <calendar ... endHour="19"></calendar>

• sliderOptions
  Options to pass to the underlying swiper instance. See https://swiperjs.com/swiper-api#parameters for valid options.

    <calendar ... sliderOptions="sliderOptions"></calendar>

    options = {
        spaceBetween: 10,
        threshold: 50
    };

• dayviewShowCategoryView (version: 2.4+)
  Determines if show dayview with category
  Type: boolean
  Default value: false

• dayviewCategorySource (version: 2.4+)
  Determines the source the category names so that events with corresponding category will display accordingly. If events are not assigned with category, they will NOT be placed in the category view.
  Type: Set<string>
  Default value: null

    <calendar ... [dayviewCategorySource]="calendar.dayviewCategorySource"></calendar>

    calendar = {
        dayviewCategorySource: new Set<string>(['Alice', 'Bob', 'Charlie'])
    };

Callback

• onCurrentDateChanged
  The callback function triggered when the date that is currently viewed changes.

    <calendar ... (onCurrentDateChanged)="onCurrentDateChanged($event)"></calendar>

    onCurrentChanged = (ev: Date) => {
        console.log('Currently viewed date: ' + ev);
    };

• onRangeChanged
  The callback function triggered when the range or mode is changed if the queryMode is set to 'remote'
  The ev parameter contains two fields, startTime and endTime.

    <calendar ... (onRangeChanged)="onRangeChanged($event)"></calendar>

    onRangeChanged = (ev: { startTime: Date, endTime: Date }) => {
        Events.query(ev, (events) => {
            this.eventSource = events;
        });
    };

• onEventSelected
  The callback function triggered when an event is clicked

    <calendar ... (onEventSelected)="onEventSelected($event)"></calendar>

    onEventSelected = (event) => {
        console.log(event.title);
    };

• onTimeSelected
  The callback function triggered when a time slot is selected.
  The ev parameter contains three fields, selectedTime, events and disabled, if there's no event at the selected time, the events field will be either undefined or empty array

    <calendar ... (onTimeSelected)="onTimeSelected($event)"></calendar>

    onTimeSelected = (ev: { selectedTime: Date, events: any[], disabled: boolean }) => {
        console.log('Selected time: ' + ev.selectedTime + ', hasEvents: ' + (ev.events !== undefined && ev.events.length !== 0) + ', disabled: ' + ev.disabled);
    };

• onDayHeaderSelected
  The callback function triggered when a day header is selected in week view.
  The ev parameter contains three fields, selectedTime, events and disabled, if there's no event at the selected time, the events field will be either undefined or empty array

    <calendar ... (onDayHeaderSelected)="onDayHeaderSelected($event)"></calendar>

    onDayHeaderSelected = (ev: { selectedTime: Date, events: any[], disabled: boolean }) => {
        console.log('Selected day: ' + ev.selectedTime + ', hasEvents: ' + (ev.events !== undefined && ev.events.length !== 0) + ', disabled: ' + ev.disabled);
    };

• onTitleChanged
  The callback function triggered when the view title is changed

    <calendar ... (onTitleChanged)="onViewTitleChanged($event)"></calendar>

    onViewTitleChanged = (title: string) => {
        this.viewTitle = title;
    };

View Customization Option

There are two ways to customize the look and feel. If you just want to simply change the color or size of certain element, you could override the styles of the predefined css classes. CSS Customization section lists some important css classes. If you need to change the layout of certain element, you could refer to the Template Customization part.

CSS Customization

The customized styles should be added in global.scss. Just adding in each components css file may not work due to the View Encapsulation.

• monthview-primary-with-event
  The date that is in current month and having events

• monthview-secondary-with-event
  The date that is in previous/next month and having events

• monthview-selected
  The selected date

• monthview-current
  The current date

• monthview-disabled
  The disabled date

• weekview-with-event
  The date having all day events, applied to the day header in week view

• weekview-current
  The current date, applied to the day header in week view

• weekview-selected
  The selected date, applied to the day header in week view

• weekview-allday-label
  Applied to the all day label in week view

• dayview-allday-label
  Applied to the all day label in day view

• calendar-hour-column
  Applied to the hour column in both weekview and day view

• dayview-category-header (version: 2.4+)
  Applied to the category section in day view

• dayview-category-header-item (version: 2.4+)
  Applied to the category header item in day view

Template Customization

Note: For any css class appear in the customized template, you need to specify the styles by yourself. The styles defined in the calendar component won’t be applied because of the view encapsulation. You could refer to calendar.ts to get the definition of context types.

• monthviewDisplayEventTemplate
  Type: TemplateRef<IMonthViewDisplayEventTemplateContext>
  The template provides customized view for event displayed in the active monthview

    <ng-template #monthviewDisplayEventTemplate let-view="view" let-row="row" let-col="col">
        {{view.dates[row*7+col].label}}
    </ng-template>

    <calendar ... [monthviewDisplayEventTemplate]="monthviewDisplayEventTemplate"></calendar>

• monthviewInactiveDisplayEventTemplate
  Type: TemplateRef<IMonthViewDisplayEventTemplateContext>
  The template provides customized view for event displayed in the inactive monthview

    <ng-template #monthviewInactiveDisplayEventTemplate let-view="view" let-row="row" let-col="col">
        {{view.dates[row*7+col].label}}
    </ng-template>

    <calendar ... [monthviewInactiveDisplayEventTemplate]="monthviewInactiveDisplayEventTemplate"></calendar>

• monthviewEventDetailTemplate
  Type: TemplateRef<IMonthViewEventDetailTemplateContext>
  The template provides customized view for event detail section in the monthview

    <ng-template #monthviewEventDetailTemplate let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel">
    ... 
    </ng-template>

    <calendar ... [monthviewEventDetailTemplate]="monthviewEventDetailTemplate"></calendar>

• weekviewHeaderTemplate (version >= 0.4.5)
  Type: TemplateRef<IDisplayWeekViewHeader>
  The template provides customized view for day header in the weekview

    <ng-template #weekviewHeaderTemplate let-viewDate="viewDate"> 
        <div class="custom-day-header"> {{ viewDate.dayHeader }} </div> 
    </ng-template> 
 
    <calendar ... [weekviewHeaderTemplate]="weekviewHeaderTemplate"></calendar>

• weekviewAllDayEventTemplate
  Type: TemplateRef<IDisplayAllDayEvent>
  The template provides customized view for all day event in the weekview

    <ng-template #weekviewAllDayEventTemplate let-displayEvent="displayEvent">
        <div class="calendar-event-inner">{{displayEvent.event.title}}</div>
    </ng-template>

    <calendar ... [weekviewAllDayEventTemplate]="weekviewAllDayEventTemplate"></calendar>

• weekviewNormalEventTemplate
  Type: TemplateRef<IDisplayEvent>
  The template provides customized view for normal event in the weekview

    <ng-template #weekviewNormalEventTemplate let-displayEvent="displayEvent">
        <div class="calendar-event-inner">{{displayEvent.event.title}}</div>
    </ng-template>

    <calendar ... [weekviewNormalEventTemplate]="weekviewNormalEventTemplate"></calendar>

• dayviewCategoryItemTemplate (version: 2.4+)
  The template provides customized view for category item with categoryId and categoryName in the day view

    <ng-template #dayviewCategoryItemTemplate let-category="category">
        {{ category.categoryName }}
    </ng-template>

    <calendar ... [dayviewCategoryItemTemplate]="dayviewCategoryItemTemplate"></calendar>

• dayviewAllDayEventTemplate
  Type: TemplateRef<IDisplayAllDayEvent>
  The template provides customized view for all day event in the dayview

    <ng-template #dayviewAllDayEventTemplate let-displayEvent="displayEvent">
        <div class="calendar-event-inner">{{displayEvent.event.title}}</div>
    </ng-template>

    <calendar ... [dayviewAllDayEventTemplate]="dayviewAllDayEventTemplate"></calendar>

• dayviewNormalEventTemplate
  Type: TemplateRef<IDisplayEvent>
  The template provides customized view for normal event in the dayview

    <ng-template #dayviewNormalEventTemplate let-displayEvent="displayEvent">
        <div class="calendar-event-inner">{{displayEvent.event.title}}</div>
    </ng-template>

    <calendar ... [dayviewNormalEventTemplate]="dayviewNormalEventTemplate"></calendar>

• weekviewAllDayEventSectionTemplate (version >= 0.3)
  Type: TemplateRef<IWeekViewAllDayEventSectionTemplateContext>
  The template provides customized view for all day event section (table part) in the weekview

        <ng-template #weekviewAllDayEventSectionTemplate let-day="day" let-eventTemplate="eventTemplate">
            <div [ngClass]="{'calendar-event-wrap': day.events}" *ngIf="day.events"
                 [ngStyle]="{height: 25*day.events.length+'px'}">
                <div *ngFor="let displayEvent of day.events" class="calendar-event" tappable
                     (click)="onEventSelected(displayEvent.event)"
                     [ngStyle]="{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}">
                    <ng-template [ngTemplateOutlet]="eventTemplate"
                                 [ngTemplateOutletContext]="{displayEvent:displayEvent}">
                    </ng-template>
                </div>
            </div>
        </ng-template>

        <calendar ... [weekviewAllDayEventSectionTemplate]="weekviewAllDayEventSectionTemplate"></calendar>

• weekviewNormalEventSectionTemplate (version >= 0.3)
  Type: TemplateRef<IWeekViewNormalEventSectionTemplateContext>
  The template provides customized view for normal event section (table part) in the weekview

        <ng-template #weekviewNormalEventSectionTemplate let-tm="tm" let-hourParts="hourParts" let-eventTemplate="eventTemplate">
            <div [ngClass]="{'calendar-event-wrap': tm.events}" *ngIf="tm.events">
                <div *ngFor="let displayEvent of tm.events" class="calendar-event" tappable
                     (click)="onEventSelected(displayEvent.event)"
                     [ngStyle]="{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}">
                    <ng-template [ngTemplateOutlet]="eventTemplate"
                                 [ngTemplateOutletContext]="{displayEvent:displayEvent}">
                    </ng-template>
                </div>
            </div>
        </ng-template>

        <calendar ... [weekviewNormalEventSectionTemplate]="weekviewNormalEventSectionTemplate"></calendar>

• dayviewAllDayEventSectionTemplate (version >= 0.3)
  Type: TemplateRef<IDayViewAllDayEventSectionTemplateContext>
  The template provides customized view for all day event section (table part) in the dayview

        <ng-template #dayviewAllDayEventSectionTemplate let-allDayEvents="allDayEvents" let-eventTemplate="eventTemplate">
            <div *ngFor="let displayEvent of allDayEvents; let eventIndex=index"
                 class="calendar-event" tappable
                 (click)="onEventSelected(displayEvent.event)"
                 [ngStyle]="{top: 25*eventIndex+'px',width: '100%',height:'25px'}">
                <ng-template [ngTemplateOutlet]="eventTemplate"
                             [ngTemplateOutletContext]="{displayEvent:displayEvent}">
                </ng-template>
            </div>
        </ng-template>

        <calendar ... [dayviewAllDayEventSectionTemplate]="dayviewAllDayEventSectionTemplate"></calendar>

• dayviewNormalEventSectionTemplate (version >= 0.3)
  Type: TemplateRef<IDayViewNormalEventSectionTemplateContext>
  The template provides customized view for normal event section (table part) in the dayview

        <ng-template #dayviewNormalEventSectionTemplate let-tm="tm" let-hourParts="hourParts" let-eventTemplate="eventTemplate">
            <div [ngClass]="{'calendar-event-wrap': tm.events}" *ngIf="tm.events">
                <div *ngFor="let displayEvent of tm.events" class="calendar-event" tappable
                     (click)="onEventSelected(displayEvent.event)"
                     [ngStyle]="{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}">
                    <ng-template [ngTemplateOutlet]="eventTemplate"
                                 [ngTemplateOutletContext]="{displayEvent:displayEvent}">
                    </ng-template>
                </div>
            </div>
        </ng-template>

        <calendar ... [dayviewNormalEventSectionTemplate]="dayviewNormalEventSectionTemplate"></calendar>

• weekviewInactiveAllDayEventSectionTemplate (version >= 0.5)
  Type: TemplateRef<IWeekViewAllDayEventSectionTemplateContext>
  The template provides customized view for all day event section (table part) in the inactive weekview

        <ng-template #weekviewInactiveAllDayEventSectionTemplate let-day="day" let-eventTemplate="eventTemplate">
            <div [ngClass]="{'calendar-event-wrap': day.events}" *ngIf="day.events"
                 [ngStyle]="{height: 25*day.events.length+'px'}">
                <div *ngFor="let displayEvent of day.events" class="calendar-event" tappable
                     (click)="onEventSelected(displayEvent.event)"
                     [ngStyle]="{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}">
                    <ng-template [ngTemplateOutlet]="eventTemplate"
                                 [ngTemplateOutletContext]="{displayEvent:displayEvent}">
                    </ng-template>
                </div>
            </div>
        </ng-template>

        <calendar ... [weekviewInactiveAllDayEventSectionTemplate]="weekviewInactiveAllDayEventSectionTemplate"></calendar>

• weekviewInactiveNormalEventSectionTemplate (version >= 0.5)
  Type: TemplateRef<IWeekViewNormalEventSectionTemplateContext>
  The template provides customized view for normal event section (table part) in the inactive weekview

        <ng-template #weekviewInactiveNormalEventSectionTemplate let-tm="tm" let-hourParts="hourParts" let-eventTemplate="eventTemplate">
            <div [ngClass]="{'calendar-event-wrap': tm.events}" *ngIf="tm.events">
                <div *ngFor="let displayEvent of tm.events" class="calendar-event" tappable
                     (click)="onEventSelected(displayEvent.event)"
                     [ngStyle]="{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}">
                    <ng-template [ngTemplateOutlet]="eventTemplate"
                                 [ngTemplateOutletContext]="{displayEvent:displayEvent}">
                    </ng-template>
                </div>
            </div>
        </ng-template>

        <calendar ... [weekviewInactiveNormalEventSectionTemplate]="weekviewInactiveNormalEventSectionTemplate"></calendar>

• dayviewInactiveAllDayEventSectionTemplate (version >= 0.5)
  Type: TemplateRef<IDayViewAllDayEventSectionTemplateContext>
  The template provides customized view for all day event section (table part) in the inactive dayview

        <ng-template #dayviewInactiveAllDayEventSectionTemplate let-allDayEvents="allDayEvents" let-eventTemplate="eventTemplate">
            <div *ngFor="let displayEvent of allDayEvents; let eventIndex=index"
                 class="calendar-event" tappable
                 (click)="onEventSelected(displayEvent.event)"
                 [ngStyle]="{top: 25*eventIndex+'px',width: '100%',height:'25px'}">
                <ng-template [ngTemplateOutlet]="eventTemplate"
                             [ngTemplateOutletContext]="{displayEvent:displayEvent}">
                </ng-template>
            </div>
        </ng-template>

        <calendar ... [dayviewInactiveAllDayEventSectionTemplate]="dayviewInactiveAllDayEventSectionTemplate"></calendar>

• dayviewInactiveNormalEventSectionTemplate (version >= 0.5)
  Type: TemplateRef<IDayViewNormalEventSectionTemplateContext>
  The template provides customized view for normal event section (table part) in the inactive dayview

        <ng-template #dayviewInactiveNormalEventSectionTemplate let-tm="tm" let-hourParts="hourParts" let-eventTemplate="eventTemplate">
            <div [ngClass]="{'calendar-event-wrap': tm.events}" *ngIf="tm.events">
                <div *ngFor="let displayEvent of tm.events" class="calendar-event" tappable
                     (click)="onEventSelected(displayEvent.event)"
                     [ngStyle]="{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}">
                    <ng-template [ngTemplateOutlet]="eventTemplate"
                                 [ngTemplateOutletContext]="{displayEvent:displayEvent}">
                    </ng-template>
                </div>
            </div>
        </ng-template>

        <calendar ... [dayviewInactiveNormalEventSectionTemplate]="dayviewInactiveNormalEventSectionTemplate"></calendar>

EventSource

EventSource is an array of event object which contains at least below fields:

• title
  Type: string

• startTime
  Type: Date
  If allDay is set to true, the startTime has to be as a UTC date which time is set to 0:00 AM, because in an allDay event, only the date is considered, the exact time or timezone doesn't matter.
  For example, if an allDay event starting from 2014-05-09, then startTime is

    var startTime = new Date(Date.UTC(2014, 4, 8));

• endTime
  Type: Date
  If allDay is set to true, the startTime has to be as a UTC date which time is set to 0:00 AM, because in an allDay event, only the date is considered, the exact time or timezone doesn't matter.
  For example, if an allDay event ending to 2014-05-10, then endTime is

    var endTime = new Date(Date.UTC(2014, 4, 9));

• allDay
  Type: boolean
  Indicates the event is allDay event or regular event

• category (optional)
  Type: string
  Indicates which category the event belongs to. If the value is specified but not one of dayviewCategorySource, the event will not display in category view.

Note The calendar only watches for the eventSource reference for performance consideration. That means only you manually reassign the eventSource value, the calendar gets notified, and this is usually fit to the scenario when the range is changed, you load a new data set from the backend. In case you want to manually insert/remove/update the element in the eventSource array, you can call instance method ‘loadEvents’ event to notify the calendar manually.

Instance Methods

• loadEvents
  When this method is called, the calendar will be forced to reload the events in the eventSource array. This is only necessary when you directly modify the element in the eventSource array.

import { CalendarComponent } from "ionic2-calendar";

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {
    @ViewChild(CalendarComponent, null) myCalendar:CalendarComponent;
    eventSource;
    …
    loadEvents: function() {
        this.eventSource.push({
            title: 'test',
            startTime: startTime,
            endTime: endTime,
            allDay: false
        });
        this.myCalendar.loadEvents();
    }
}

• slideNext (version >= 0.5)
  Slide the calendar to the next date range.

import { CalendarComponent } from "ionic2-calendar";

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {
    @ViewChild(CalendarComponent, null) myCalendar:CalendarComponent;
    …
    slideNext: function() {
        this.myCalendar.slideNext();
    }
}

• slidePrev (version >= 0.5)
  Slide the calendar to the previous date range.

import { CalendarComponent } from "ionic2-calendar";

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {
    @ViewChild(CalendarComponent, null) myCalendar:CalendarComponent;
    …
    slidePrev: function() {
        this.myCalendar.slidePrev();
    }
}

• update (version >= 0.6.5)
  Update the underlying slides.

import { CalendarComponent } from "ionic2-calendar";

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {
    @ViewChild(CalendarComponent, null) myCalendar:CalendarComponent;
    …
    slidePrev: function() {
        this.myCalendar.update();
    }
}

Localization

You could use locale option to achieve the localization.
If locale option is not specified, the calendar will use the LOCALE_ID set at the module level.
By default, the LOCALE_ID is en-US. You can override it in the module as below. If you pass undefined, the LOCALE_ID will be detected using the browser language setting. But using explicit value is recommended, as browser has different level of localization support.
Note that the event detail section in the month view doesn't support locale option, only LOCALE_ID takes effect. This is because it uses DatePipe in html directly. You could easily leverage customized event detail template to switch to other locale.

import { NgModule, LOCALE_ID } from '@angular/core';

@NgModule({
    …
    providers: [
        { provide: LOCALE_ID, useValue: 'zh-CN' }
    ]
})

For version 0.4.x+ which depends on Ionic 3.9.2+ and Angular 5.0+, locale module needs to be registered explicitly in module file as below.

import { registerLocaleData } from '@angular/common';
import localeZh from '@angular/common/locales/zh';
registerLocaleData(localeZh);

If you want to change the locale dynamically, you should use locale option instead of LOCALE_ID.

Performance Tuning

In the CPU profile, the default Intl based localization code occupies a big portion of the execution time. If you don’t need localization on certain parts, you can use the custom dateFormatter to override the date transform method. For example, the date in month view usually doesn’t require localization, you could use below code to just display the date part. If the month view day header doesn’t need to include the date, you could also use a string array containing static labels to save the date calculation.

<calendar ... [dateFormatter]="calendar.dateFormatter"></calendar>

calendar = {
    dateFormatter: {
        formatMonthViewDay: function(date:Date) {
            return date.getDate().toString();
        }            
    }
};

Known issue (No longer exists in version 1.0.x)

This component updates the ion-slide dynamically so that only 3 looped slides are needed.
The ion-slide in Ionic2 uses Swiper. It seems in the Swiper implementation, the next slide after the end of looped slide is a separate cached slide, instead of the first slide.
I can't find out a way to force refresh that cached slide, so you will notice that when sliding from the third month to the forth month, the preview month is not the forth month, but the first month.
Once the sliding is over, the slide will be forced to render the forth month.

Common Questions

• Error: Cannot find module "intl"
  Answer: This calendar has dependency on 'Intl'. Run npm install [email protected] to install the dependency

• Error: Cannot read property 'getFullYear' of undefined
  Answer: If you bind currentDate like this: [currentDate]="calendar.currentDate". You need to assign calendar.currentDate a valid Date object

• How to switch the calendar to previous/next month programmatically?
  Answer: You can change currentDate to the date in previous/next month. You could also call the instance method slideNext/slidePrev.

• Error: Cannot read property 'dayHeaders' of undefined
  Answer: Take a look at the Localization section. For version 0.4.x+, you need to manually register the locale.

• Error: TypeError: event_1.startTime.getTime is not a function
  Answer: This is due to the startTime field of the event object is not a valid Date object. Be aware that different browser has different implementation of new Date() constructor. Some date string format may not be supported. It is recommended to use millisecond or year/month/date parameters.

• Error: How to override css
  Answer: By default, the css applied on each component is view encapsulated, for example, .table-bordered[_ngcontent-jto-c5]. You need to remove the encapsulated part.

.table-bordered[_ngcontent-jto-c5] {
    border: 1px solid #ddd !important;
}

ionic2-calendar's Issues

Cannot read property 'getFullYear' of undefined

After installing the module using the regular command:

npm install ionic2-calendar --save

I get this error message as soon as the app loads:

EXCEPTION: Error in ./CalendarComponent class CalendarComponent - inline template:35:16 caused by: Cannot read property 'getFullYear' of undefined

I have debugged and found that the error occurs on line 160 on the file monthview.js.

In the following function the currentDate object parameter comes in as undefined:

MonthViewComponent.prototype.getRange = function (currentDate) {
        //-- NEXT LINE THROWS AN EXCEPTION BECAUSE currentDate IS undefined
        var year = currentDate.getFullYear(), month = currentDate.getMonth(), firstDayOfMonth = new Date(year, month, 1), difference = this.startingDayMonth - firstDayOfMonth.getDay(), numDisplayedFromPreviousMonth = (difference > 0) ? 7 - difference : -difference, startDate = new Date(firstDayOfMonth.getTime());
        if (numDisplayedFromPreviousMonth > 0) {
            startDate.setDate(-numDisplayedFromPreviousMonth + 1);
        }
        var endDate = new Date(startDate.getTime());
        endDate.setDate(endDate.getDate() + 42);
        return {
            startTime: startDate,
            endTime: endDate
        };
    };

Scroll position in day and weekview not saved after swiping

When swiping in dayview or weekview the scroll-point is not saved.
This means if I scroll to the bottom and then swipe the scroll position will be again at the top (12am).

can't build/run in ionic 2 rc.3

Hi,
I use your components in ionic 2 rc.3
I import components in main.prod.ts but it can't build.

Someone can help me?
Thanks a lot

I get Cannot find module "intl" error

Hi

I tried to use the ionic2-Calendar but I get the below error when I try to run the app by ionic serve

Cannot find module "intl"
Error: Cannot find module "intl"
at Object. (http://localhost:8100/build/main.js:117496:7)
at webpack_require (http://localhost:8100/build/main.js:20:30)
at Object. (http://localhost:8100/build/main.js:117876:75)
at webpack_require (http://localhost:8100/build/main.js:20:30)
at Object. (http://localhost:8100/build/main.js:94583:74)
at webpack_require (http://localhost:8100/build/main.js:20:30)
at Object. (http://localhost:8100/build/main.js:133104:70)
at webpack_require (http://localhost:8100/build/main.js:20:30)
at http://localhost:8100/build/main.js:66:18
at http://localhost:8100/build/main.js:69:10

p.s I installed intl by npm install -g intl and still error

Would you please help me out

Angular 2 module support

I'm looking to pull this into an Ionic2 application using Angular2 final; however, this library only exposes itself as a Directive, which can no longer be declared on a Component directly. Are there any plans of supporting this soon?

Use only weekview and coloring events

More than an issue, this is a question. Sorry if this is not the right place, in that case please tell me what is the best way to ask questions.

I'm considering your component for a new Ionic2 based project. I've a couple of questions:

• is it possible to use just the weekview and not the entire calendar component?
• is it possibile to color events differently, for example using a #rgb code given from the eventSource?

Thank you very much for your work!

Hello, what should you do to achieve this effect

@twinssbc

Can't bind to 'loop' since it isn't a known property of 'ion-slides'.

I follow Readme trying to put calendar in my app. I end up with following error:

polyfills.js:3 Unhandled Promise rejection: Template parse errors:
Can't bind to 'loop' since it isn't a known property of 'ion-slides'.

1. If 'ion-slides' is an Angular component and it has 'loop' input, then verify that it is part of this module.
2. If 'ion-slides' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
   ("
   
   
   <ion-slides #monthSlider [ERROR ->][loop]="true" (ionSlideDidChange)="onSlideChanged()">
   
   "): MonthViewComponent@2:37 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors:
   Can't bind to 'loop' since it isn't a known property of 'ion-slides'.

I do check the slides api that says loop is an input property:

loop -- boolean -- If true, continuously loop from the last slide to the first slide.

My ionic version is 2.1.4
What's happening ? Please help, thank you!

How Can I Use load events with a remote API?

Actualmente I'm working with ir, but when I click load events the gaps are empty.

Request for some assistance in changing or adding few things

Thanks for creating such a fantastic component.

Its almost perfect but just few things i would like to know.

here is how the calendar that we want to look like https://gyazo.com/8b2d678ec14e97a9919326b126cef99b

to make it look like this we just need to know following things.

1. How do we make the calendar border less?
2. Right now to change month and we have to swipe which is good but what if we want to change months why clicks? I read that you have used ion-slide for this but is this slide api accessible from outside?
3. Want the remove the event listing that you have at bottom of the calendar how do we do that?

startingDayMonth is ignored when compiling on android.

This option runs as it should on the browser, but it seems the default value is used when running inside an emulator/(smartphone?).
Thanks for your help.

template customization not working on ios simulator but working on browser

I am not able to see the changes on simulator while applying css changes in calendar.js template.
my code is -
"<div class="calendar-event-inner" [style.backgroundColor]=displayEvent.event.color>{{displayEvent.event.title}}"
where style.backgroundColor is converted to inline css e.g.( background-color: blue) on browser. But not applied for ios simulator.

Please help.

How can I use it with the latest Ionic2 version?

Hey folks,

I really have to have this great plugin, but how can I use it with the latest Ionic2 version. Here are some more information about my used enviroment:

Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.2
Ionic App Lib Version: 2.1.1
Ionic App Scripts Version: 0.0.27
OS: Distributor ID:     Ubuntu Description:     Ubuntu 16.04.1 LTS
Node Version: v4.2.6

So actually what I did - among your documentation I included it differently, because I was not able to include it like you described it on your Github page neither as described in the README file.

I did the following (File: app.module.ts):

...
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CalendarComponent } from 'ionic2-calendar/ionic2-calendar'
...
@NgModule({
  declarations: [
    MyApp,
    HomePage,
    Calendar,
    CalendarComponent
  ],
...
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

When I build or serve it I don't get any mistake, but when I try to open it, e.g. in the browser I constantly get this message in the console.

Unhandled Promise rejection: Template parse errors:

Can't bind to 'formatDay' since it isn't a known property of 'monthview'. ("ngSwitch]="calendarMode" class="calendar-container">
            <monthview *ngSwitchCase="'month'" [ERROR ->][formatDay]="formatDay" [formatDayHeader]="formatDayHeader" [formatMonthTitle]="formatMonthTitle"
   "): CalendarComponent@2:47
Can't bind to 'formatDayHeader' since it isn't a known property of 'monthview'. (" class="calendar-container">
            <monthview *ngSwitchCase="'month'" [formatDay]="formatDay" [ERROR ->][formatDayHeader]="formatDayHeader" [formatMonthTitle]="formatMonthTitle"
             [startingDayMo"): CalendarComponent@2:71
Can't bind to 'formatMonthTitle' since it isn't a known property of 'monthview'. ("     <monthview *ngSwitchCase="'month'" [formatDay]="formatDay" [formatDayHeader]="formatDayHeader" [ERROR ->][formatMonthTitle]="formatMonthTitle"
             [startingDayMonth]="startingDayMonth" [showEventDe"): CalendarComponent@2:107
Can't bind to 'startingDayMonth' since it isn't a known property of 'monthview'. ("="formatDay" [formatDayHeader]="formatDayHeader" [formatMonthTitle]="formatMonthTitle"
             [ERROR ->][startingDayMonth]="startingDayMonth" [showEventDetail]="showEventDetail" [noEventsLabel]="noEventsLa"): CalendarComponent@3:13
Can't bind to 'showEventDetail' since it isn't a known property of 'monthview'. ("DayHeader" [formatMonthTitle]="formatMonthTitle"
             [startingDayMonth]="startingDayMonth" [ERROR ->][showEventDetail]="showEventDetail" [noEventsLabel]="noEventsLabel" [eventSource]="eventSource"
...

and so on...

So what can I do? I need this plugin urgently, because it's excactly what I was looking for.

Thanks,
Oliver

Performance on Android 5.x devices (week swipe)

It runs well on iOS devices, but not in non-modern Androids, especially on the sliding weeks. Is there any workaround can improve it?

Highlight specific columns + doubleclick event to select data

Hi
Two questions:

1. I would like to highlight specific days.. for instance highlighting the weekends.
2. use doubleclick instead of click to select a day in month view.

Regards

Blank calendar

Hi,

I followed the instructions but i get a blank calendar (the calendar div is here).

Can you provide an example a the .ts file to make the directive working ?

Thanks a lot

MonthView wrong day selected

When clicking on a day in monthview that is after march 26 the day before is selected. This is probably due to day light saving change.

Issue while building in android

I am getting the below error in console while trying to build the app into android using the command
ionic run android

[21:00:12] Error: Error at D:/My Works/ITS app Main/ITS/.tmp/pages/calendar/cal
endar.ngfactory.ts:160:36
[21:00:12] Module ''*'' has no exported member 'Wrapper_CalendarComponent'.
[21:00:12] ngc failed
[21:00:12] ionic-app-script task: "build"
[21:00:12] Error: Error

I am using Angular 2.1.1

Unable to install ionic2 calendar

When running npm install ionic2-calendar --save

Shows these errors

npm ERR! Linux 4.9.5-200.fc25.x86_64
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "install" "ionic2-calendar" "--save"
npm ERR! node v6.9.4
npm ERR! npm v3.10.10
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] postinstall: typings install
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] postinstall script 'typings install'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ionic2-calendar package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! typings install
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs ionic2-calendar
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls ionic2-calendar
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /home/myApp/npm-debug.log

calendar.currentDate not updated in swipe of week view

I have added next and prev buttons the calendar week view.

On click of them I am calling the below functions:

nextWeek() {
this.calendar.currentDate = new Date(this.calendar.currentDate.setDate(this.calendar.currentDate.getDate() + 7));
}

prevWeek(){
this.calendar.currentDate = new Date(this.calendar.currentDate.setDate(this.calendar.currentDate.getDate() - 7));
}

This is working fine. But when I swipe right or left, I am getting the next/previous weeks but the calendar.currentDate is not getting updated. i.e., if i click next button after a right swipe, Instead of getting the next week, the current week will load again.

Is there a way where the currentDate will get updated in swipe also?

Is it possible to show left and right arrows in week view to move to next and previous week.

Is it possible to show left and right arrows in week view to move to next and previous week. Now only swipe is possible

Head to head on the contents of the calendar

Idea: refresh calendar

when change calendar mode by funcationally (not button click) this.calendar.mode = mode; not working

Change language

Is it possible to set the calendar to a specific or local language ?

Building next month view in advance before swiping end

In month view, when swiping to the next/previous month, before releasing the cursor/finger and the next/previous is visible, the classes (.text-muted, .monthview-disabled) are not properly applied to those dummy slides.
Which means before releasing the cursor/finger, the layout shown is not visually correct.

Incomplete data

Hi,
to be quick about it, please have a look at this youtube: screenrecorded about the behaviour of the calendar in my app. Can't figure why I can't select any of the days except ones in the first slide and why only 3 slides populated?
Any idea where the issue might be? My code is identical with the one in the demo.

My machine system info:
Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.5
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.0
ios-sim version: 5.0.11
OS: macOS Sierra
Node Version: v5.12.0
Xcode version: Xcode 8.2.1 Build version 8C1002

Thank you.

Runtime Error Cannot find module "intl"

i tried to integrate date picker bu ti am getting this error:

Runtime Error
Cannot find module "intl"

stacktrace:
Error: Cannot find module "intl"
at Object. (http://localhost:8100/build/main.js:108974:7)
at webpack_require (http://localhost:8100/build/main.js:20:30)
at Object. (http://localhost:8100/build/main.js:109354:75)
at webpack_require (http://localhost:8100/build/main.js:20:30)
at Object. (http://localhost:8100/build/main.js:90056:74)
at webpack_require (http://localhost:8100/build/main.js:20:30)
at Object. (http://localhost:8100/build/main.js:123658:70)
at webpack_require (http://localhost:8100/build/main.js:20:30)
at http://localhost:8100/build/main.js:66:18
at http://localhost:8100/build/main.js:69:10

Any help please

Display Range

Hi,

You could implement an attribute to define what date range tha can be selected?

Ie.: "2018-08-10,2018-08-30", will show only the days between those dates.

ionic serve works, ionic build - ngc fails

Hi I have been following your documentation, works for ionic serve, but ionic emulate fails with this error

[17:59:47]  Error: Unexpected value 'NgCalendarModule' imported by the module 'AppModule'
[17:59:47]  ngc failed
[17:59:47]  ionic-app-script task: "build"
[17:59:47]  Error: Error

ionic info

Your system information:

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.2
Ionic App Scripts Version: 0.0.36
OS:
Node Version: v5.12.0

package.json

 "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/compiler-cli": "0.6.2",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/platform-server": "2.0.0",
    "@ionic/storage": "^1.0.3",
    "ionic-angular": "^2.0.0-rc.0",
    "ionic-native": "^2.0.3",
    "ionic2-calendar": "0.0.9",
    "ionicons": "^3.0.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.21"
  },
  "devDependencies": {
    "@ionic/app-scripts": "0.0.36",
    "typescript": "^2.0.3"
  },

app.module.ts

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';

import { NgCalendarModule } from 'ionic2-calendar';
import { MapPage } from '../pages/map/map';
import { EventPage } from '../pages/event/event';
import { EventDetailPage } from '../pages/event-detail/event-detail';
import {EventCalendar} from '../pages/event-calendar/event-calendar'
import { InfoPage } from '../pages/info/info';
import { TabsPage } from '../pages/tabs/tabs';

@NgModule({
  declarations: [
    MyApp,
    MapPage,
    EventPage,
    EventDetailPage,
    EventCalendar,
    InfoPage,
    TabsPage
  ],
  imports: [
    NgCalendarModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    MapPage,
    EventPage,
    EventDetailPage,
    EventCalendar,
    InfoPage,
    TabsPage
  ],
  providers: []
})
export class AppModule {}

after this I am adding the directive to the html page.

I understand there are changes after ionic rc, should i be doing things differently?

Any help is appreciated!

Disable events in calendar.

HI guys nice work here.
it would be great to support disabling calendar dates, like for 1 day disable a range of hours.
disableEventSource = {
monday: [startDate:8 am: endDate:3pm]
tuesday: same stuff
}
another nice feature would be to show events with different colors. on event source to set event cell class and then in css you can customize appereance of that cel.

Can I change default configuration?

Hi,

I would like to know if this is possible:

1. Show day titles in another language.
2. Disable past days
3. Set start day of week to monday.
4. Disable the saturdays and sundays.

Someone can help me?

Thanks!

Idea: use fullcalendar

Hi

I have been torn between using your calendar vs fullcalendar. I would like to recommend that instead of building the control from scratch it might be better to simply use something like fullcalendar which has a large set of features and that way you can either customise the views to your liking. Its feature rich and tried and tested by thousands of users and recently they included touch support.

Right now i am probably going to hack out how you implemented swiper and try use your approach with fullcalendar.

Just my 2 cents.

February ends the 31 instead of 28.

Test with ionic2-calendar v0.2.0.

February should end on the 28th, not the 31. I think it's just about the display cause it's sliding as it should to march when I selected the 29+ of Feb.

Great work by the way, this calendar is very useful to me ;)

Broken with Ionic RC5

The components are not working anymore since I upgraded to RC5. This is probably due to the breaking changes on the slides component

Highlight the selected event in week view all day events section

Is there a way to customize the calendar? In the week view where the full day events are shown, the height of event is set as 25px and also the top is calculated as a multiple of 25px. Is there a way to alter these?

I have a requirement to change the color of the clicked event so that the user will know which event is clicked. Is that possible? I can see this happening in month view

Thanks in advance.

The demo url does not work on Safari on iPhone with iOS 9.3.4

I try to launch the demo site (https://twinssbc.github.io/Ionic2-Calendar/demo/) on Safari on iPhone with iOS 9.3.4 but I do not see anything.
Is there a reason for this?
Thanks in advance

Module ''*'' has no exported member

Hi.
When i try emulate or build:

[23:40:22] Error: Error at /Users/vlad/apps/eveses3/.tmp/pages/full/full.ngfactory.ts:149:36
[23:40:22] Module ''*'' has no exported member 'Wrapper_CalendarComponent'.
[23:40:22] ngc failed
[23:40:22] ionic-app-script task: "build"
[23:40:22] Error: Error

npm ERR! Darwin 16.0.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v6.9.1
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! ionic-hello-world@ build: ionic-app-scripts build
npm ERR! Exit status 1

'typings' is not recognized as an internal or external command

Hi,

Whenever I am running npm install ionic2-calendar --save, I am getting the following:

[email protected] postinstall C:\Users\Emixis\Documents\Ionic2\Apps\MainApp\node_modules\ionic2-calendar
typings install

'typings' is not recognized as an internal or external command,
operable program or batch file.

I ran npm install typings --global successfully.
I have added "typings": "2.1.0" to my package.json's dependencies.
The PATH to my npm folder is correct.

Thanks

Performance in Android API 23. Wrong me.slider.getActiveIndex()

Hi!!

I´m running the app with ionic run android command using API23 of Android and the app behaviour is diferent that when I run the application with ionic serve.

The issue appears just when the app is started due to the active index of slider components is 2 (me.slider.getActiveIndex()).

When I obtain this index testing in the device is 2, and when I test it in the browser is 0 (the expected value)

Could you know why this result?

Slides looping

This is about the Swiper issue as noted in the readme:

This component updates the ion-slide dynamically so that only 3 looped slides are 
needed. The ion-slide in Ionic2 uses Swiper. It seems in the Swiper implementation, 
the next slide after the end of looped slide is a separate cached slide, instead of the 
first slide. I can't find out a way to force refresh that cached slide, so you will notice 
that when sliding from the third month to the forth month, the preview month is not 
the forth month, but the first month. Once the sliding is over, the slide will be forced 
to render the forth month.

It seems to be the exact same issue as this: ionic-team/ionic-framework#6515, an issue when using NgFor on slides. Some options for workarounds are mentioned there, but I haven't succeeded implementing one so far. Did you already try something like it?

Pushing new events

What's the proper way to add events to eventSource and refresh the calendar to display them ?

No Directive annotation exception

Hi.
As per usage procedure, it occurred following error.

5 881004 group EXCEPTION: Error in ./ModalCmp class ModalCmp_Host - inline template:0:0
7 881005 error ORIGINAL EXCEPTION: No Directive annotation found on CalendarComponent
6 881004 error EXCEPTION: Error in ./ModalCmp class ModalCmp_Host - inline template:0:0
8 881005 error ORIGINAL STACKTRACE:
9 881006 error Error: No Directive annotation found on CalendarComponent
at new BaseException (http://localhost:8100/build/js/app.bundle.js:4785:23)
at DirectiveResolver.resolve (http://localhost:8100/build/js/app.bundle.js:12072:15)
at CompileMetadataResolver.getDirectiveMetadata (http://localhost:8100/build/js/app.bundle.js:16978:51)
at http://localhost:8100/build/js/app.bundle.js:17100:62
at Array.map (native)
at CompileMetadataResolver.getViewDirectivesMetadata (http://localhost:8100/build/js/app.bundle.js:17100:27)
at RuntimeCompiler._getCompiledTemplate (http://localhost:8100/build/js/app.bundle.js:21087:36)
at RuntimeCompiler._getTransitiveCompiledTemplates (http://localhost:8100/build/js/app.bundle.js:21105:80)
at http://localhost:8100/build/js/app.bundle.js:21108:77
at Array.forEach (native)
10 881006 error ERROR CONTEXT:

What is a problem?

Thanks in advance.

#week on title incorrect

On Week view, # of week says this week is #52 of 2016, but isnt in fact is #1 of 2017.

Module ''*'' has no exported member 'Wrapper_CalendarComponent'

ionic 2 for android

cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.12
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45
OS: Windows 7
Node Version: v6.9.1

Limit the range for weekview

Is it possible within the current build to limit the number of weeks (on weekview) that a user can swipe? Or if not, is it possible to implement this feature?

For example, I'd like to only allow them to swipe within the current month.

Thanks!

After swiping to the next month, the same day becomes selected but onTimeSelected() did not trigger

In month view, is it normal when the month is changed, the same day becomes highlighted?
For example, it is selecting 10 May, after swipe and jump to June, 10 June will be highlighted. But onTimeSelected() did not trigger.

hi ,how to i should use the custom view

@twinssbc

Error: Module build failed: Error: ENOENT: no such file or directory, open '/Users/UI002/WebstormProjects/untitled/arvix-ober/arvix-ober-html/app-ionic2/mynewapp/node_modules/.0.2.3@ionic2-calendar/calendar.ngfactory.js'

run in safrie 10.0.2 i should how to do

Render the swipe animation lag on Android

When week# changed will got about 5~7 sec latency,
No matter in the Dev or run in Android phone (it runs well on iOS devices),
Is there any solution?

Uncaught ReferenceError: IntlPolyfill is not defined

Hi,

I am on angular 2.2.3 and I have installed intl 1.2.5 to can use this calendar.

When I try to serve it shows me an error

Uncaught ReferenceError: IntlPolyfill is not defined
at http://192.168.1.87:8100/build/main.js:108347:4
at http://192.168.1.87:8100/build/main.js:125146:2

And dont shows me more information.

Someone has any idea to what can be the problem?

Here is my package.json

{
  "name": "xxxxx",
  "author": "xxxxx",
  "version": "1.0.0",
  "homepage": "xxxxx",
  "private": true,
  "scripts": {
    "build": "ionic-app-scripts build",
    "watch": "ionic-app-scripts watch",
    "serve:before": "watch",
    "emulate:before": "build",
    "deploy:before": "build",
    "build:before": "build",
    "run:before": "build"
  },
  "dependencies": {
    "@angular/common": "^2.0.0",
    "@angular/compiler": "^2.0.0",
    "@angular/compiler-cli": "^0.6.2",
    "@angular/core": "^2.0.0",
    "@angular/forms": "^2.0.0",
    "@angular/http": "^2.0.0",
    "@angular/platform-browser": "^2.0.0",
    "@angular/platform-browser-dynamic": "^2.0.0",
    "@angular/platform-server": "^2.0.0",
    "@ionic/storage": "^1.1.6",
    "intl": "^1.2.5",
    "ionic-angular": "^2.0.0-rc.3",
    "ionic-native": "^2.0.3",
    "ionic2-calendar": "0.0.15",
    "ionicons": "^3.0.0",
    "moment": "2.17.1",
    "rxjs": "^5.0.0-beta.12",
    "zone.js": "^0.6.21"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^0.0.30",
    "typescript": "^2.0.3"
  },
  "config": {
    "ionic_bundler": "webpack"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard",
    "cordova-plugin-crosswalk-webview"
  ],
  "cordovaPlatforms": [
    "ios",
    "android"
  ],
  "description": "xxxxxxx"
}

Thanks!