Как мне решить эту ошибку:
WEBPACK_IMPORTED_MODULE_3_ionic_native.a.open не является функцией
, когда я использую NishanthKabra / Ionic2_GoogleCalendar решение.
Я хочу интегрировать календарь Google в приложение ionic 3 и создавать и сохранять события с помощью календаря Google, как я могу это реализовать?
Мой код:
.ts файл:
calendarEvent:any = {};
attendees = [{
email:""
}];
validation:any = {};
CLIENT_ID = 'xxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com';
SCOPES = ["https://www.googleapis.com/auth/calendar","https://www.googleapis.com/auth/calendar.events","https://www.googleapis.com/auth/calendar.events.readonly","https://www.googleapis.com/auth/calendar.readonly","https://www.googleapis.com/auth/calendar.settings.readonly"];
APIKEY = "xxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
REDIRECTURL = "http://localhost/callback";
sendInvite() {
if(!this.validate()) {
alert("Please fill all fields for sending invite.");
return;
}
this.validation.failure = false;
var startDateTimeISO = this.buildISODate(this.calendarEvent.startDate,
this.calendarEvent.startTime);
var enddateTimeISO = this.buildISODate(this.calendarEvent.endDate,
this.calendarEvent.endTime);
this.popLastAttendeeIfEmpty(this.attendees);
// var browserRef = InAppBrowser.open('https://accounts.google.com/o/oauth2/auth?client_id=' + this.CLIENT_ID + '&redirect_uri=' + this.REDIRECTURL + '&scope=https://www.googleapis.com/auth/calendar&approval_prompt=force&response_type=token', '_blank', 'location=yes');
var browserRef = InAppBrowser['open']('https://accounts.google.com/o/oauth2/auth?client_id=' + this.CLIENT_ID + '&redirect_uri=' + this.REDIRECTURL + '&scope=https://www.googleapis.com/auth/calendar&approval_prompt=force&response_type=token', '_blank', 'location=no')
browserRef.addEventListener("loadstart", (event) => {
if ((event["url"]).indexOf("http://localhost/callback") === 0) {
var url = event["url"];
var token = url.split('access_token=')[1].split('&token_type')[0];
browserRef.removeEventListener("exit", (event) => { });
browserRef.close();
//Sending the google calendar invite from the google api
gapi.client.setApiKey(this.APIKEY);
var request = gapi.client.request({
'path': '/calendar/v3/calendars/primary/events?alt=json',
'method': 'POST',
'headers': {
'Authorization': 'Bearer ' + token
},
'body': JSON.stringify({
"summary": this.calendarEvent.name,
"location": this.calendarEvent.location,
"description": this.calendarEvent.description,
"start": {
"dateTime": startDateTimeISO,
"timeZone": "Asia/Kolkata"
},
"end": {
"dateTime": enddateTimeISO,
"timeZone": "Asia/Kolkata" // TODO : Parameterize this timezone
},
"recurrence": [
"RRULE:FREQ=DAILY;COUNT=1"
],
"attendees": this.attendees,
"reminders": {
"useDefault": false,
"overrides": [
{
"method": "email",
"minutes": 1440
},
{
"method": "popup",
"minutes": 10
}
]
}
}),
'callback': function (jsonR, rawR) {
if(jsonR.id){
alert("Invitation sent successfully");
} else {
alert("Failed to sent invite.");
}
console.log(jsonR);
}
});
}
});
}
buildISODate(date, time){
var dateArray = date && date.split('-');
console.log("dateArray", dateArray);
var timeArray = time && time.split(':');
console.log("timeArray", timeArray);
var normalDate = new Date(parseInt(dateArray[0]), parseInt(dateArray[1])-1, parseInt(dateArray[2]), parseInt(timeArray[0]), parseInt(timeArray[1]), 0, 0);
console.log("normalDate", normalDate);
return normalDate.toISOString();
}
addAttendees(){
if(this.attendees[this.attendees.length - 1].email == '') return;
var newAttendee = {email:""};
this.attendees.unshift(newAttendee);
}
removeAttendees(itemIndex){
this.attendees.splice(itemIndex, 1);
}
popLastAttendeeIfEmpty(itemsList){
if(!!itemsList.length){
return itemsList[0]["email"] == "" ? itemsList.shift(itemsList[0]) :
itemsList;
}
return [];
}
validate() {
return this.isStringValid(this.calendarEvent.name) &&
this.isStringValid(this.calendarEvent.name) &&
this.isStringValid(this.calendarEvent.location) &&
this.isStringValid(this.calendarEvent.description) &&
this.isStringValid(this.calendarEvent.startDate) &&
this.isStringValid(this.calendarEvent.startTime) &&
this.isStringValid(this.calendarEvent.endDate) &&
this.isStringValid(this.calendarEvent.endTime) &&
this.areAttendeesValid(this.attendees);
}
isStringValid(str){
if (typeof str != 'undefined' && str) {
return true;
};
return false;
}
areAttendeesValid(attendees){
if(attendees.length == 1 && !this.isStringValid(attendees[0]["email"])){
return false;
}
return true;
}
.html файл:
<ion-navbar *navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Ionic2 + Google Calendar</ion-title>
</ion-navbar>
<ion-content padding class="getting-started">
<ion-list>
<ion-item-group>
<ion-item-divider light>Event Details</ion-item-divider>
<ion-item>
<ion-label>Name</ion-label>
<ion-input type="text" [(ngModel)]="calendarEvent.name"></ion-input>
</ion-item>
<ion-item>
<ion-label>Location</ion-label>
<ion-input type="text" [(ngModel)]="calendarEvent.location"></ion-input>
</ion-item>
<ion-item>
<ion-label>Description</ion-label>
<ion-input type="text" [(ngModel)]="calendarEvent.description"></ion-input>
</ion-item>
<ion-item>
<ion-label>Start Date</ion-label>
<ion-datetime displayFormat="DD MMM YYYY" pickerFormat="DD MMM YYYY" [(ngModel)]="calendarEvent.startDate"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Start Time</ion-label>
<ion-datetime displayFormat="hh:mm:a" pickerFormat="hh:mm:a" [(ngModel)]="calendarEvent.startTime"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>End Date</ion-label>
<ion-datetime displayFormat="DD MMM YYYY" pickerFormat="DD MMM YYYY" [(ngModel)]="calendarEvent.endDate"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>End Time</ion-label>
<ion-datetime displayFormat="hh:mm:a" pickerFormat="hh:mm:a" [(ngModel)]="calendarEvent.endTime"></ion-datetime>
</ion-item>
<ion-item-group>
<ion-item-divider light>Attendees</ion-item-divider>
<ion-list>
<ion-item *ngFor="let attendee of attendees;let i = index" inset>
<ion-label>Attendee {{attendees.length - i}}</ion-label>
<ion-input [(ngModel)]="attendee.email"></ion-input>
<ion-icon name="md-remove-circle" item-right class="addRemoveBtn" (click)="removeAttendees(i)" *ngIf="attendees.length - i < attendees.length"></ion-icon>
<ion-icon name="md-add-circle" item-right class="addRemoveBtn" (click)="addAttendees()" *ngIf="attendees.length - i == attendees.length"></ion-icon>
</ion-item>
</ion-list>
</ion-item-group>
</ion-item-group>
</ion-list>
<button primary (click)="sendInvite()">Send Google Calendar Invite</button>
</ion-content>