CODEWITHSUNDEEP
jqueryangulartypescriptfullcalendarionic2
Ivan Lencina
Ivan Lencina

Reputation: 1785

Add events in full-calendar with Ionic 2

I have an Ionic 2 app, which is using fullcalendar.

I followed these steps to use it on Ionic 2 and it works very well.

But now, I need to create events dynamically from the page component that include this custom component.

I have an profile component:

So, in profile page, I can see the calendar, and I've already edited their styles. Now I want to create events from this page, but I don't know how to reference it properly.

I tried with:

import { FullCalendarComponent } from .....

@Component({
....
    providers: [FullCalendarComponent]
})

.
.
.
FullCalendarComponent.calendarOptions.events = myEvents;

But I can't see any change running it, and console don't throws me any errors..

Thanks so much in advance!

EDIT:

In full calendar component (components/full-calendar):

full-calendar.html:

<angular2-fullcalendar [options]="calendarOptions"></angular2-fullcalendar>

full-calendar.ts:

import { Component } from '@angular/core';

@Component({
    selector: 'full-calendar',
    templateUrl: 'full-calendar.html'
})
export class FullCalendarComponent {
    
    calendarOptions: any = {  // Before it was type : Object
        //height: 'parent',
        locale: 'es',
        contentHeight: 'auto',
        fixedWeekCount : false,
        weekends: true,/**
        defaultDate: '2017-01-03',*/
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        defaultView: 'month', //basicWeek
        allDaySlot: false,
        minTime: '06:00:00',
        maxTime: '23:00:00',
        header: {
            left: 'prev',
            center: 'title', //'prev, title, next'
            right: 'next'
        },
        events: [
        {
            title: 'All Day Event',
            start: '2016-09-01'
        },
        {
            title: 'Long Event',
            start: '2016-09-07',
            end: '2016-09-10'
        }]
    }
}

In profile page component (pages/profile):

profile.html: (I have more code but only show the important)

<div class="calendar">
    <full-calendar [options]="calOptions" #mycal></full-calendar>
</div>

profile.ts:

import { Component, ViewChild, ElementRef } from '@angular/core';
import { FullCalendarComponent } from '../../components/full-calendar/full-calendar';
import * as $ from 'jquery';
    
    
@Component({
    selector: 'page-profile',
    templateUrl: 'profile.html',
    providers: [FullCalendarComponent]
})
export class ProfilePage {
@ViewChild('mycal', { read: ElementRef }) myCal: ElementRef;
   
calOptions: any = {
    locale: 'es',
    contentHeight: 'auto',
    fixedWeekCount : false,
    weekends: true,/**
    defaultDate: '2017-01-03',*/
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    defaultView: 'month', //basicWeek
    allDaySlot: false,
    minTime: '06:00:00',
    maxTime: '23:00:00',
    header: {
        left: 'prev',
        center: 'title', //'prev, title, next'
        right: 'next'
    },
    events: []
};
    
constructor(
    public navCtrl: NavController,
    private alertCtrl: AlertController,
    public platform: Platform,
    public toastCtrl: ToastController,
    private loadingCtrl: LoadingController,
    public auth: FirebaseAuth
) {}
    
public setCalendarEvents(): void {
    
    let events: Array<any> = [];
    
    for (let entry of this.consecutiveDates) {
        let event = {
            allDay: true,
            title: ' ',
            start: entry
        };
    
        events.push(event);
    }
    
    this.calOptions.events = events;
    $(this.myCal.nativeElement).fullCalendar('addEventSource', events);
}

This throws me:

Template parse errors:
Can't bind to 'options' since it isn't a known property of 'full-calendar'.
1. If 'full-calendar' is an Angular component and it has 'options' input, then verify that it is part of this module.
2. If 'full-calendar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

Upvotes: 0

Views: 2175

Answers (1)

Smit
Smit

Reputation: 2138

The .ts doesnt work sometime. Some suggested to create you own.

But here is what i have done. In the .ts create a elementRef. Class variables

@ViewChild('mycal', { read: ElementRef }) myCal: ElementRef
calOptions: any = {}; //options

And then when you have events say, from firebase, do the below. where slots are your events. In some method.

this.calOptions.events = slots
 $(this.myCal.nativeElement).fullCalendar('addEventSource', slots)

Remember: slots is array of objects not a single object!

In html:

<full-calendar [options]="calOptions "#mycal></full-calendar>

More information: https://gist.github.com/shah-smit/85aff341cd4a20494910ab2c17e82777/edit

Upvotes: 2

Related Questions