organizee-front/src/app/pages/page-agenda/page-agenda.component.html

<app-header></app-header>
<app-side-bar></app-side-bar>

<div
  class="alert alert-{{ alert.type }}"
  role="alert"
  style="position: absolute; z-index: 999; top: 50%; left: 40%; width: 500px"
  *ngIf="isShow"
  id="showAlert"
>
  {{ alert.content }}
  <button
    type="button"
    class="close"
    data-dismiss="alert"
    aria-label="Close"
    (click)="onClickCloseAlert()"
  >
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<div style="display: flex">
  <div style="width: 150px">
    <app-side-bar></app-side-bar>
  </div>

  <div style="width: 100%">
    <div class="wrap">
      <div class="left">
        <daypilot-navigator
          [config]="navigatorConfig"
          [(date)]="date"
          #navigator
        ></daypilot-navigator>
      </div>
      <div class="main">
        <div style="width: 100%; margin: 10px">
          <a
            href="#"
            class="btn btn-sm btn-primary"
            style="margin-right: 5px"
            (click)="navigatePrevious($event)"
            >Previous</a
          >
          <a
            href="#"
            class="btn btn-sm btn-primary"
            style="margin-right: 5px"
            (click)="navigateToday($event)"
            >Today</a
          >
          <a
            href="#"
            class="btn btn-sm btn-primary"
            style="margin-right: 5px"
            (click)="navigateNext($event)"
            >Next</a
          >
          team : {{ teamId }} - user: {{ userId }} - role: {{ role }}
          <span style="float: right"
            ><a
              href="#"
              class="btn btn-sm btn-primary"
              style="margin-right: 5px"
              >Ajouter un évènement</a
            ></span
          >
        </div>

        <daypilot-calendar
          [config]="config"
          [events]="events"
          #calendar
          (viewChange)="viewChange()"
        ></daypilot-calendar>
      </div>
    </div>
  </div>
</div>