Google Calendar won't Load

[rpascal]

I am trying to load in my google calendar but whenever i do no data is displayed. I am able to get my google calendar to load if i edit the demo from full calendars website. I am also able to get the calendar to load with the example provided in the readme on github. I tried these two ways with no luck.

  calendarOptions: Object = {
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,listYear'
            },
            displayEventTime: false, // don't show the time column in list view
            googleCalendarApiKey: 'AIzaSyDcnW6WejpTOCffshGDDb4neIrXVUA1EAE',
            // US Holidays
            events: 'en.usa#holiday@group.v.calendar.google.com',
            eventClick: function(event) {
                // opens events in a popup window
                window.open(event.url, 'gcalevent', 'width=700,height=600');
                return false;
            },
  };

 calendarOptions: Object = {
            googleCalendarApiKey: 'AIzaSyDcnW6WejpTOCffshGDDb4neIrXVUA1EAE',
            events: {
                googleCalendarId: 'en.usa#holiday@group.v.calendar.google.com'
            },
  };

I don't know if i need to import something else to get this to work but it would be great if you could help. Thank you.

[lbertenasco]

Hi @rpascal I've never used this library with googleCalendarApiKey. Could you try to create a sample plunker that replicates this issue?

[rpascal]

Hi @lbertenasco I am not very good with plunker but I was able to set up a github for it. Hopefully that is okay if not let me and I'll try to figure out plunker. Here is the link: https://github.com/rpascal/Ionic-2-Full-Calendar

[lbertenasco]

@rpascal Perfect! I'll git it a try this weekend :smiley:

[rpascal]

@lbertenasco Thank you! I just realized I never said I was using Ionic 2 is that okay or would it be better if i made an angular 2 project?

[lbertenasco]

@rpascal it should be ok :+1:

[vijj]

<angular2-fullcalendar id="fullcalendar" *ngIf="show_calender" [options]="calendarOptions" ></angular2-fullcalendar>

............. this.calendarOptions = { height: 'auto', header: { left: 'title', center: 'month,agendaWeek,agendaDay,agendaAll', right: 'today prevYear,prev,next,nextYear' }, dayClick: function (date, jsEvent, view) { console.log(view) var today_date = moment().format('YYYY-MM-DD'); var day_clcik = moment(date).format('YYYY-MM-DD');

    location.pathname = 'main/health/appointments/' + today_date + '/month/add/' + day_clcik;

  },
  eventDrop: this.alertOnDrop,
  eventResize: this.alertOnResize,
  eventClick: this.showAppointment,
  eventSources: [
    this.Appointments
  ],
  // visibleRange: {
  //   start: '2017-03-22',
  //   end: '2017-03-25'
  // },
  defaultView: 'month',
  // validRange: function (nowDate) {
  //   return {
  //     start: nowDate,
  //     end: nowDate.clone().add(1, 'months')
  //   };
  // },
  theme: false,
  fixedWeekCount: true,
  defaultDate: moment().format('YYYY-MM-DD'),
  editable: true,
  eventLimit: true, // allow "more" link when too many events
  events: []
};

[rpascal]

@lbertenasco Did you have any luck getting this to work?

[lbertenasco]

Hi @rpascal ! Sorry I was away for a while. I'll give it a look this week :)

[sGerli]

I think this isn't working because to use FullCalendar with Google Calendar you have to import gcal.min.js (comes in the FullCalendar package). But I don't know how to do this. https://fullcalendar.io/docs/google_calendar/

[lbertenasco]

Hi @sGerli You can add fullcalendar/gcal.js into scripts: [] in your .angular-cli.json file. First create the file and folders: assets/lib/fullcalendar/gcal.js And then require it on your scripts:

      "scripts": [
            "assets/lib/fullcalendar/gcal.js"
      ],

Let me know if this helps !

[sGerli]

No, that doesn't work, I think because it loads before Jquery and FullCalendar. Console:

Uncaught ReferenceError: jQuery is not defined
    at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:6:136)
    at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:6:144)
    at eval (<anonymous>)
    at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9)
    at Object.../../../../script-loader/index.js!../../../../../src/assets/lib/fullcalendar/gcal.min.js (gcal.min.js?9e4a:1)
    at __webpack_require__ (bootstrap 9ab51ab…:54)
    at Object.2 (scripts.bundle.js:37)
    at __webpack_require__ (bootstrap 9ab51ab…:54)
    at webpackJsonpCallback (bootstrap 9ab51ab…:25)
    at scripts.bundle.js:1

[daniel-van-niekerk]

No, that doesn't work, I think because it loads before Jquery and FullCalendar.

The scripts are loaded in the order they appear in the .angular-cli.json file. Just make sure jquery is loaded first.

[sGerli]

Still dosn't work, with:

"scripts": [
          "../node_modules/jquery/dist/jquery.min.js",
          "../node_modules/fullcalendar/dist/fullcalendar.min.js",
          "../node_modules/fullcalendar/dist/gcal.min.js"
      ],

I get:

Uncaught ReferenceError: moment is not defined
    at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:6:170)
    at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:6:178)
    at eval (<anonymous>)
    at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9)
    at Object.../../../../script-loader/index.js!../../../../fullcalendar/dist/fullcalendar.min.js (fullcalendar.min.js?b9ab:1)
    at __webpack_require__ (bootstrap b6cd230a890fb3aa53fe:54)
    at Object.2 (scripts.bundle.js:66)
    at __webpack_require__ (bootstrap b6cd230a890fb3aa53fe:54)
    at webpackJsonpCallback (bootstrap b6cd230a890fb3aa53fe:25)
    at scripts.bundle.js:1

[sGerli]

I added moment.js , now I get 0 errors, but still no calendar

[sGerli]

Update: Requiring the scripts through the .angular-cli.json doesn't work. To make it work you have to go to the node-modules folder and then fullcalendar, and in there add a index.js that contains both, the source code of fullcalendar.js and gcal.js, then go into fullcalendar's package.json and change the main to index.js and that should work.

That's a really messy and manual solution that has to be manually configured every time you download dependencies. So is there a better and persistent way of doing this?

[daniel-van-niekerk]

I tried adding gcal as well and using this code to get the events:

eventSources: [
  {
    events: this.getEvents.bind(this)
  },
  {
    googleCalendarApiKey: '<API Key>',
    googleCalendarId: '<Calendar ID>'
  }
]

No errors but also no google calendar events. Local events works fine. The browser also doesn't seem to try to fetch anything from google. If anyone has any ideas please let us know.

[sGerli]

@daniel-van-niekerk for now the only way is to manually merge gcal.js and fullcalendar.js as describe in my other comment.

[lbertenasco]

Any news on this issue? I'm closing this since it appears to be resolved by a dirty fix. And it's not a direct issue related to the library. Feel free to reopen the issue to continue the conversation :)