Hi! Im new with app development, ionic and Morbiscroll and im trying to do a calendar app for a class.
I tried the Morbiscroll calendar function and it works perfectly! but I need the events to store locally or with firebase so they don’t dissapear everytime I reload, and i dont know how to do it :c.
Thanks in advance!
Here is my code:
.html
<ion-content [fullscreen]=“true”>
Recordatorios
<h1>Recordatorios</h1>
<!-- <ion-datetime (click)="presentModal()" locale="en-US"></ion-datetime> -->
<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>
<app-explore-container name="Tab 2 page"></app-explore-container>
.ts
@Component({
selector: 'app-tab2',
templateUrl: 'tab2.page.html',
styleUrls: ['tab2.page.scss'],
providers: [Notifications]
})
export class Tab2Page{
today = Date.now();
recordatorio: recordatorios;
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[] = [{
}];
tempEvent!: MbscCalendarEvent;
calendarOptions: MbscEventcalendarOptions = {
clickToCreate: 'single',
dragToCreate: true,
dragToMove: true,
dragToResize: true,
view: {
calendar: { type: 'month', labels: true },
agenda: { type: 'month'}
},
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, inst) => {
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 = ['cancel', {
handler: () => {
this.saveEvent();
},
keyCode: 'enter',
text: 'Añadir',
cssClass: 'mbsc-popup-button-primary'
}];
popupEditButtons = ['cancel', {
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: 'Cambiar',
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();
}
}
}