1

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);
            }
        }

0 Answers0