twinssbc
commented
3 years ago @elhyrojas When you add the event in another page, where do you actually store the event? When you go back to the calendar, do you actually query events from that place? Also it seems the main logic to fill the eventSource is in getAppointments method. You first create an empty events array, then assign to the this.eventSource. Note that, this.appointmentService.getByExpedientId(this.expedientId).subscribe is actually an async operation. When you assign this.eventSource, it is still empty. I suggest you put the eventSource operation in your async callback logic. Either you move this.eventSource=events into the callback method, or call this.myCalendar.loadEvents() after you push to the events array.
Hello! I have already read several questions about this, but I cannot find what my problem may be. When adding a new event from another page and returning to the calendar page, it does not show me the event. I put code snippets related to the problem.
My ts.
` @Component({ selector: 'page-contact', templateUrl: 'contact.html', styleUrls: ['./contact.scss'] }) export class ContactPage {
@ViewChild('calendar', { read: CalendarComponent, static: false }) myCalendar: CalendarComponent; applicantName: string; eventSource; viewTitle; reason: string; isToday: boolean; dateS: Date; appointment: AppointmentRequest[]; isEvent: boolean; appointmentSelected: AppointmentRequest; typeDate: number; appointmentReason: string; expedientCode: string; appointmentCanceled: AppointmentRequest; typeAppointment: string; calendar = { mode: 'month', currentDate: new Date(), };
constructor( ..... ) { this.expedientId = parseInt(localStorage.getItem('expedientId')); this.appointment = []; this.isEvent = false; this.expedientCode = localStorage.getItem('expedientCode'); }
ionViewWillEnter() { this.loadEvents(); }
loadEvents() { this.getAppointment(); }
onTimeSelected(ev) { this.dateS = ev.selectedTime; if (ev.events !== undefined && ev.events.length !== 0) { this.appointmentService.getByExpedientId(this.expedientId).subscribe(appointment => { if (appointment) { this.appointment = appointment; for (let appointmentDetail of appointment) { if (dayjs(appointmentDetail.day).format('YYYY-MM-DD') === dayjs(ev.selectedTime).format('YYYY-MM-DD')) { this.isEvent = true; this.appointmentSelected = appointmentDetail; break; } else { this.isEvent = false; } } } }); } else { this.isEvent = false; } console.log('Hora seleccionada: ' + ev.selectedTime + ', tiene eventos: ' + (ev.events !== undefined && ev.events.length !== 0) + ', deshabilitado: ' + ev.events[0]); }
getAppointment() { this.eventSource = []; var events = []; var startTime, endTime; this.appointmentService.getByExpedientId(this.expedientId).subscribe(appointment => { if (appointment) { this.loading.dismiss(); this.appointment = appointment; for (let appointmentDetail of appointment) { if (appointmentDetail.status === "rechazada") { const array = this.eventSource; const index = array.indexOf(events[0]); array.splice(index, 1); // this.myCalendar.loadEvents(); } else { if (appointmentDetail.type === "telefonica") { this.typeDate = 1; } else { this.typeDate = 2; } startTime = new Date(appointmentDetail.day); startTime.setHours((appointmentDetail.startHour.toString().substr(0, 2)), (appointmentDetail.startHour.toString().substr(-5, 2)), 0); endTime = new Date(appointmentDetail.day); endTime.setHours((appointmentDetail.endHour.toString().substr(0, 2)), (appointmentDetail.endHour.toString().substr(-5, 2)), 0); events.push({ title: 'Día: ' + dayjs(appointmentDetail.day).format('YYYY-MM-DD'), startTime: startTime, endTime: endTime, allDay: false, status: appointmentDetail.status, }); } } } }); this.eventSource = events; this.myCalendar.loadEvents(); } `
My html.
<calendar [eventSource]="eventSource" [calendarMode]="calendar.mode" [currentDate]="calendar.currentDate" (onCurrentDateChanged)="onCurrentDateChanged($event)" (onRangeChanged)="reloadSource(startTime, endTime)" (onEventSelected)="onEventSelected($event)" (onTitleChanged)="onViewTitleChanged($event)" (onTimeSelected)="onTimeSelected($event)" step="30" startingDayMonth="1" [showEventDetail]="true"> </calendar>@twinssbc