0

I'm trying to use the Full Calendar version 4 so I can use mouse over events on events in background mode. For some reason I cannot initialize it in my component(set options), I mean its working when I run ng serve, but I get error on my IDE. I will post the picture error here along with my code. Official docs you can see here https://fullcalendar.io/docs/v4/release-notes

I tried using OptionInputs as a parameter but that didn't work

  import { Component, OnInit } from '@angular/core';
  import { DataService } from './../../shared/services/data.service';
  import 'fullcalendar';
  import { Calendar } from 'fullcalendar';

  @Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.css']
  })
 export class CalendarComponent implements OnInit {
 constructor(private dataService: DataService) {}

 myEvents = [];

 transformDate(str: String) {
   return str.substr(0, 10);
 }
  ngOnInit() {
const calendarEl = document.getElementById('calendar');

const calendar = new Calendar(calendarEl, {
  events: [
    {
      title: 'Test A',
      start: '2018-10-09T16:00:00'
    }
  ]
});

calendar.render();

} }

enter image description here

rio
  • 757
  • 5
  • 19
  • 32
  • 1
    The error is there in your screenshot. You did not put the `plugins` parameter... take a look into `OptionInputs` so see the correct options structure. – distante Feb 05 '19 at 09:25
  • @distante I already saw it but couldn't figure out what's wrong. export interface OptionsInput extends OptionsInputBase { buttonText?: ButtonTextCompoundInput; views?: { [viewId: string]: ViewOptionsInput; }; plugins: PluginDef[]; } – rio Feb 05 '19 at 09:31
  • Can you put together a [stackblitz](http://stackblitz.com) with the error? – distante Feb 05 '19 at 11:10
  • @distante https://stackblitz.com/edit/angular-4wpwzc – rio Feb 05 '19 at 12:12

1 Answers1

1

You are writing the options object in a wrong structure, it requires a plugin property

const calendar = new Calendar(calendarEl, {
  events: [
    {
      title: 'Test A',
      start: '2018-10-09T16:00:00'
    }
  ],
   plugins: []
});

Stackblitz

distante
  • 6,438
  • 6
  • 48
  • 90