Skip to content

Instantly share code, notes, and snippets.

@netcell
Last active November 1, 2017 16:14
Show Gist options
  • Save netcell/d98d149394fdd11e3134fbd4514a5c55 to your computer and use it in GitHub Desktop.
Save netcell/d98d149394fdd11e3134fbd4514a5c55 to your computer and use it in GitHub Desktop.
Fullcalendar.io with ionic 2 from forum

Hello Victor,

I just started using this plugin today so I'm not an expert but here is what I did to make it work.

  1. npm install angular2-fullcalendar --save
  2. Create a new component: ionic g component full-calendar
  3. In full-calendar.html I inserted:
<angular2-fullcalendar [options]="calendarOptions"></angular2-fullcalendar>
  1. In full-calendar.ts:
import { Component } from '@angular/core';
@Component({
  selector: 'full-calendar',
  templateUrl: 'full-calendar.html'
})
export class FullCalendarComponent {
  calendarOptions:Object = {
    height: 'parent',
    contentHeight: 'auto',
    fixedWeekCount : false,
    defaultDate: '2016-09-12',
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    defaultView: 'agendaWeek',
    allDaySlot: false,
    minTime: '06:00:00',
    maxTime: '23:00:00',
    header: {
      left: '',
      center: 'prev, title, next',
      right: ''
    },
    events: [
      {
        title: 'All Day Event',
        start: '2016-09-01'
      },
      {
        title: 'Long Event',
        start: '2016-09-07',
        end: '2016-09-10'
      }
    ]
  }
}
  1. Finaly, in the page which needs to use it add:
<full-calendar></full-calendar>

Don't forget to import full-calendar component into app.module.ts

And about the scss, I copied and pasted from node-modules/fullcalendar/dist/fullcalendar.css

@Jmg-21
Copy link

Jmg-21 commented Jan 10, 2017

it works .. but how to set arrayObject to the events from SQlite database .. ionic2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment