Im devoloping a calendar with some events from database but dont appear any event in calendar. I follow this demo https://mattlewis92.github.io/angular-calendar/#/no-events-label
I tried to populate the events array with my database data but not appear any event on calendar.
This is my code
CalendarioComponent.ts
export class CalendarComponent implements OnInit{
view: CalendarView = CalendarView.Month;
myDate=new Date();
viewDate: Date = new Date();
data:any;
events: CalendarEvent[] = [];
period!: CalendarViewPeriod;
constructor(private cdr: ChangeDetectorRef, private _http: HttpClient,private _authService:AuthService, private _ausenciaService: AusenciaService) {}
ngOnInit(): void {
this.data = this._authService.loadCurrentUser();
this.carregarTeletrabalho();
console.log(this.events);
}
beforeViewRender(
event:
| CalendarMonthViewBeforeRenderEvent
| CalendarWeekViewBeforeRenderEvent
| CalendarDayViewBeforeRenderEvent
) {
this.period = event.period;
this.cdr.detectChanges();
}
//formatDate(event.datahorafim,'yyyy-MM-ddTHH:mm:ss.sssZ','en-US')
carregarTeletrabalho(){
if (this.data.id) {
this._ausenciaService.getTeletrabalhos(this.data.id).subscribe({
next: (res:any[]) => {
const newEvents = res.map(event=>({
title: "Teletrabalho",
start: new Date(event.datahorainicio),
end: new Date(event.datahorafim),
meta: {event}
}));
this.events = [...this.events, ...newEvents];
},
error(error) {
console.log(error);
},
});
}
}
}
CalendarioComponent.html
<div class="alert alert-warning" *ngIf="period?.events?.length === 0">
There are no events on this {{ view }}
</div>
<div [ngSwitch]="view">
<mwl-calendar-month-view
*ngSwitchCase="'month'"
[viewDate]="viewDate"
[events]="events"
[activeDayIsOpen]="true"
(beforeViewRender)="beforeViewRender($event)"
>
</mwl-calendar-month-view>
<mwl-calendar-week-view
*ngSwitchCase="'week'"
[viewDate]="viewDate"
[events]="events"
(beforeViewRender)="beforeViewRender($event)"
>
</mwl-calendar-week-view>
<mwl-calendar-day-view
*ngSwitchCase="'day'"
[viewDate]="viewDate"
[events]="events"
(beforeViewRender)="beforeViewRender($event)"
>
</mwl-calendar-day-view>
</div>
Api Method
[HttpGet("GetTeletrabalhos/{id}")]
public async Task<ActionResult<List<Ausencium>>> GetTeletrabalhos(int id)
{
try
{
var ausencia = await Context.Ausencia.Where(a => a.Utilizadorid == id && a.Tipoid==2).ToListAsync();
if (ausencia == null)
{
return NotFound();
}
return Ok(ausencia);
}
catch (Exception e)
{
return BadRequest(e);
}
}