add-cronograma-acti.component.html

<div class="contenedorP">
  <div>
    <form [formGroup]="myForm" (ngSubmit)="onUpdate()">
      <mat-label *ngIf="ocultar"><strong>Seleccione una Actividad</strong></mat-label>
      <mat-form-field class="form-field" *ngIf="ocultar">
        <mat-label>Seleccione un Item</mat-label>
        <mat-select formControlName="Actividades">
          <mat-option *ngFor="let item of actividadesE"
            [value]="item.uzytavobjetivo_programa_id">
            {{ item. uzytavobjetivo_programaobjetivo_proy }}
          </mat-option>
        </mat-select>
      </mat-form-field>

      <!--boton para agregar las fechas-->
      <div class="save-button">
        <button mat-raised-button color="primary" *ngIf="ocultar"
          (click)="AgregarF()" [disabled]="myForm.get('Actividades').invalid">Agregar
          Fecha</button>
        <button mat-raised-button color="primary" *ngIf="showDataAdd">Guardar</button>
        <span class="separator"></span>
        <button mat-raised-button color="warn" *ngIf="showDataAdd"
          (click)="cancelarF()">Cancelar</button>
      </div>
      <div class="separator2"></div>
      <!--fecha de inicio-->
      <div *ngIf="showDataAdd">
        <mat-label><strong>Fecha de Fin:</strong></mat-label>
        <mat-form-field class="form-field">
          <mat-label>Fecha de inicio</mat-label>
          <input matInput [matDatepicker]="pickerInicio" formControlName="fechaIni">
          <mat-datepicker-toggle matSuffix [for]="pickerInicio"></mat-datepicker-toggle>
          <mat-datepicker #pickerInicio></mat-datepicker>
        </mat-form-field>

        <mat-form-field class="form-field">
          <mat-label>Hora de inicio</mat-label>
          <input matInput type="time" formControlName="horaIni">
        </mat-form-field>



        <!--fecha de fin-->
        <mat-label><strong>Fecha de Fin:</strong></mat-label>
        <mat-form-field class="form-field">
          <mat-label>Fecha Fin:</mat-label>
          <input matInput [matDatepicker]="pickerFin" formControlName="fechaFin">
          <mat-datepicker-toggle matSuffix [for]="pickerFin"></mat-datepicker-toggle>
          <mat-datepicker #pickerFin></mat-datepicker>
        </mat-form-field>
        <mat-form-field class="form-field">
          <mat-label>Hora de Fin</mat-label>
          <input matInput type="time" formControlName="horaFin">
        </mat-form-field>
      </div>
    </form>
  </div>
</div>

<div class="container">
  <div class="contenedor-dos">
    <full-calendar [options]="calendarOptions"></full-calendar>
  </div>
</div>