Hi! Im making an Event calendar for a mobile app and Im having a small problem that I don’t know how to resolve.
When I want to add an event, the popup doesn’t show, but when I want to edit an event, the popup appears. This only happens on mobile.
here is my code:
.ts
import { Component, ViewChild, OnInit } from '@angular/core';
import { DataService } from '../services/data.service';
import { FirestorageService } from '../services/firestorage.service';
import { FirestoreService } from '../services/firestore.service';
import { ModalController } from '@ionic/angular';
import { ModCalendarPage } from '../pages/mod-calendar/mod-calendar.page';
import { recordatorios } from 'src/app/interfaces/models';
import { formatDate,
MbscCalendarEvent,
MbscDatepickerOptions,
MbscEventcalendarOptions,
MbscPopup,
MbscPopupOptions,
setOptions
,localeEs,
Notifications} from '@mobiscroll/angular';
import { HttpClient } from '@angular/common/http';
import { materialize } from 'rxjs/operators';
setOptions({
locale: localeEs,
theme: 'material',
themeVariant: 'dark'
});
@Component({
selector: 'app-tab2',
templateUrl: 'tab2.page.html',
styleUrls: ['tab2.page.scss'],
providers: [Notifications]
})
export class Tab2Page{
Recordatorio: recordatorios;
today = Date.now();
constructor(public firebaseauthService: DataService,
public fireStoreService: FirestoreService,
public fireStorageService: FirestorageService,
private modalCtrl: ModalController,
private http: HttpClient,
private notify: Notifications
) {
}
@ViewChild('popup', { static: false })
popup!: MbscPopup;
@ViewChild('colorPicker', { static: false })
colorPicker: any;
popupEventTitle: string | undefined;
popupEventDescription = '';
popupEventAllDay = true;
popupEventDates: any;
popupEventStatus = 'busy';
calendarSelectedDate: any = new Date();
switchLabel: any = 'All-day';
tempColor = '';
selectedColor = '';
colorAnchor: HTMLElement | undefined;
colors = ['#ffeb3c', '#ff9900', '#f44437', '#ea1e63', '#9c26b0', '#3f51b5', '', '#009788', '#4baf4f', '#7e5d4e'];
myEvents: MbscCalendarEvent[] = [{
id: 1,
start: '2022-05-08T13:00',
end: '2022-05-08T13:45',
title: 'Lunch @ Butcher\'s',
description: '',
allDay: false,
free: true,
color: '#009788'
}, {
id: 2,
start: '2022-05-04T15:00',
end: '2022-05-04T16:00',
title: 'General orientation',
description: '',
allDay: false,
free: false,
color: '#ff9900'
}, {
id: 3,
start: '2022-05-03T18:00',
end: '2022-05-03T22:00',
title: 'Dexter BD',
description: '',
allDay: false,
free: true,
color: '#3f51b5'
}, {
id: 4,
start: '2022-05-05T10:30',
end: '2022-05-05T11:30',
title: 'Stakeholder mtg.',
description: '',
allDay: false,
free: false,
color: '#f44437'
}];
tempEvent!: MbscCalendarEvent;
calendarOptions: MbscEventcalendarOptions = {
clickToCreate: 'single',
dragToCreate: true,
dragToMove: true,
dragToResize: true,
view: {
calendar: { type: 'month', labels: true }
},
onEventClick: (args) => {
this.isEdit = true;
this.tempEvent = args.event;
// fill popup form with event data
this.loadPopupForm(args.event);
// set popup options
this.popupHeaderText = 'Editar';
this.popupButtons = this.popupEditButtons;
this.popupAnchor = args.domEvent.currentTarget;
// open the popup
this.popup.open();
},
onEventCreated: (args) => {
setTimeout(() => {
this.isEdit = false;
this.tempEvent = args.event;
// fill popup form with event data
this.loadPopupForm(args.event);
// set popup options
this.popupHeaderText = 'Nuevo evento';
this.popupButtons = this.popupAddButtons;
this.popupAnchor = args.target;
// open the popup
this.popup.open();
});
},
onEventDeleted: (args) => {
setTimeout(() => {
this.deleteEvent(args.event);
});
},
onEventUpdated: (args) => {
}
};
popupHeaderText!: string;
popupAnchor: HTMLElement | undefined;
popupAddButtons = ['cancelar', {
handler: () => {
this.saveEvent();
},
keyCode: 'enter',
text: 'Añadir',
cssClass: 'mbsc-popup-button-primary'
}];
popupEditButtons = ['cancelar', {
handler: () => {
this.saveEvent();
},
keyCode: 'enter',
text: 'Guardar',
cssClass: 'mbsc-popup-button-primary'
}];
popupButtons: any = [];
popupOptions: MbscPopupOptions = {
display: 'bottom',
contentPadding: false,
fullScreen: true,
onClose: () => {
if (!this.isEdit) {
// refresh the list, if add popup was canceled, to remove the temporary event
this.myEvents = [...this.myEvents];
}
},
responsive: {
medium: {
display: 'bottom',
width: 400,
fullScreen: false,
touchUi: false
}
}
};
datePickerControls = ['date'];
datePickerResponsive: any = {
medium: {
controls: ['calendar'],
touchUi: false
}
};
datetimePickerControls = ['datetime'];
datetimePickerResponsive = {
medium: {
controls: ['calendar', 'time'],
touchUi: false
}
};
datePickerOptions: MbscDatepickerOptions = {
select: 'range',
showRangeLabels: false,
touchUi: true
};
isEdit = false;
colorOptions: MbscPopupOptions = {
display: 'bottom',
contentPadding: false,
showArrow: false,
showOverlay: false,
buttons: [
'cancel',
{
text: 'Set',
keyCode: 'enter',
handler: (ev) => {
this.selectedColor = this.tempColor;
this.colorPicker.close();
},
cssClass: 'mbsc-popup-button-primary'
}
],
responsive: {
medium: {
display: 'bottom',
buttons: [],
}
}
};
loadPopupForm(event: MbscCalendarEvent): void {
this.popupEventTitle = event.title;
this.popupEventDescription = event.description;
this.popupEventDates = [event.start, event.end];
this.popupEventAllDay = event.allDay || false;
this.popupEventStatus = event.status || 'busy';
this.selectedColor = event.color || '';
}
saveEvent(): void {
this.tempEvent.title = this.popupEventTitle;
this.tempEvent.description = this.popupEventDescription;
this.tempEvent.start = this.popupEventDates[0];
this.tempEvent.end = this.popupEventDates[1];
this.tempEvent.allDay = this.popupEventAllDay;
this.tempEvent.status = this.popupEventStatus;
this.tempEvent.color = this.selectedColor;
if (this.isEdit) {
// update the event in the list
this.myEvents = [...this.myEvents];
// here you can update the event in your storage as well
// ...
} else {
// add the new event to the list
this.myEvents = [...this.myEvents, this.tempEvent];
// here you can add the event to your storage as well
// ...
}
// navigate the calendar
this.calendarSelectedDate = this.popupEventDates[0];
// close the popup
this.popup.close();
}
deleteEvent(event: MbscCalendarEvent): void {
this.myEvents = this.myEvents.filter(item => item.id !== event.id);
this.notify.snackbar({
button: {
action: () => {
this.myEvents = [...this.myEvents, event];
},
text: 'deshacer'
},
message: 'Evento eliminado'
});
// here you can delete the event from your storage as well
// ...
}
onDeleteClick(): void {
this.deleteEvent(this.tempEvent);
this.popup.close();
}
selectColor(color: string): void {
this.tempColor = color;
}
openColorPicker(ev: any): void {
this.selectColor(this.selectedColor || '');
this.colorAnchor = ev.currentTarget;
this.colorPicker.open();
}
changeColor(ev: any): void {
const color = ev.currentTarget.getAttribute('data-value');
this.selectColor(color);
if (!this.colorPicker.s.buttons.length) {
this.selectedColor = color;
this.colorPicker.close();
}
}
}`Preformatted text`
.html
<mbsc-eventcalendar [data]=“myEvents” [options]=“calendarOptions” [(selectedDate)]=“calendarSelectedDate”>
</mbsc-eventcalendar>
<mbsc-popup [options]="popupOptions" [anchor]="popupAnchor" [buttons]="popupButtons" [headerText]="popupHeaderText" #popup>
<div class="mbsc-form-group">
<mbsc-input label="Title" [(ngModel)]="popupEventTitle"></mbsc-input>
<mbsc-textarea label="Description" [(ngModel)]="popupEventDescription"></mbsc-textarea>
</div>
<div class="mbsc-form-group">
<mbsc-switch label="All-day" [(ngModel)]="popupEventAllDay"></mbsc-switch>
<mbsc-datepicker [(ngModel)]="popupEventDates" [options]="datePickerOptions" [controls]="popupEventAllDay ? datePickerControls : datetimePickerControls" [responsive]="popupEventAllDay ? datePickerResponsive : datetimePickerResponsive" [startInput]="startInput"
[endInput]="endInput"></mbsc-datepicker>
<mbsc-input #startInput label="Starts"></mbsc-input>
<mbsc-input #endInput label="Ends"></mbsc-input>
<div class="event-color-c" (click)="openColorPicker($event)">
<div class="event-color-label">Color</div>
<div class="event-color" [ngStyle]="{background: selectedColor}"></div>
</div>
<div *ngIf="isEdit" class="mbsc-button-group">
<mbsc-button class="mbsc-button-block" color="danger" variant="outline" (click)="onDeleteClick()">Eliminar evento
</mbsc-button>
</div>
</div>
</mbsc-popup>
<mbsc-popup [options]="colorOptions" [anchor]="colorAnchor" #colorPicker>
<div class="crud-color-row">
<div *ngFor="let color of colors;let i=index">
<div *ngIf="i<5" class="crud-color-c" [ngClass]="{'selected': tempColor === color}" [attr.data-value]="color" (click)="changeColor($event)">
<div class="crud-color mbsc-icon mbsc-font-icon mbsc-icon-material-check" [ngStyle]="{background: color}"></div>
</div>
</div>
</div>
<div class="crud-color-row">
<div *ngFor="let color of colors;let i=index">
<div *ngIf="i>=5" class="crud-color-c" [ngClass]="{'selected': tempColor === color}" [attr.data-value]="color" (click)="changeColor($event)">
<div class="crud-color mbsc-icon mbsc-font-icon mbsc-icon-material-check" [ngStyle]="{background: color}"></div>
</div>
</div>
</div>
</mbsc-popup>