0

Tengo una aplicación con Angular donde uso primeNg, en una vista tengo esta estructura y quiero mostrar un calendario con la libreria fullcalendar

<p-card>
  <p-tabView>

    <p-tabPanel header="Header I">
      <ng-template pTemplate="header">
        <i class="fas fa-folder-open"></i>
        <span>Calendario</span>
       </ng-template>
       <app-calendar></app-calendar>
    </p-tabPanel>

    <p-tabPanel header="Header II">
     <ng-template pTemplate="header">
       <span>{{ titleAntecedentes }}</span>
     </ng-template>
       <p>lorem ipsum</p>
    </p-tabPanel>

  </p-tabView>
</p-card>

Si no utilizo p-tabView el calendario se muestra correctamente, pero al ponerlo dentro de una pestaña se muestra asi

introducir la descripción de la imagen aquí

1 respuesta 1

0

Para darle solución al problema que me lo generaba el <p-tabView> hice lo siguiente

En el archivo principal.component.html cree una estructura parecida a esta

    <p-card>
        <div class="card_acciones">
          <div class="button_group">
            <button
              #buttonUno
              pButton
              pRipple
              type="button"
              label="Uno"
              class="button_active"
              (click)="selectOption(0)"
            ></button>
            <button
              #buttonDos
              pButton
              pRipple
              type="button"
              label="Dos"
              (click)="selectOption(1)"
            ></button>
            <button
              #buttonTres
              pButton
              pRipple
              type="button"
              label="Tres"
              (click)="selectOption(2)"
            ></button>
            <button
              #buttonCuatro
              pButton
              pRipple
              type="button"
              label="Cuatro"
              (click)="selectOption(3)"
            ></button>
          </div>
        </div>

        <div></div>
      </p-card>

      <p-card>
        
          
          @if(activeIndex==0){
            <componente-hijo-uno></componente-hijo-uno>
          }

          @if(activeIndex == 1){
            <componente-hijo-dos></componente-hijo-dos>
          }
          
          @if(activeIndex ==2){
            <componente-hijo-tres></componente-hijo-tres>
          }
          

          @if(activeIndex ==3){
             <app-calendar></app-calendar>
          }
          
      </p-card>

En uno de los activeIndex uso el componente hijo calendar

en el archivo principal.component.css use:

button.button_active {
  border-bottom: 1px solid var(--surface-500) !important;
}

para simular que estaba activa esa pestaña como en el <p-tabView>

En el archivo principal.component.ts declaré

@ViewChild('buttonUno') buttonAntecedentes!: ElementRef
@ViewChild('buttonDos') buttonHistorial!: ElementRef
@ViewChild('buttonTres') buttonRegisterDate!: ElementRef
@ViewChild('buttonCuatro') buttonEvolucion!: ElementRef

activeIndex!: number

//hice este metodo

 selectOption(option: number) {
    this.activeIndex = option


    this.buttonUno.nativeElement.classList.remove('button_active')
    this.buttonDos.nativeElement.classList.remove('button_active')
    this.buttonTres.nativeElement.classList.remove('button_active')
    this.buttonCuatro.nativeElement.classList.remove('button_active')

    if (option === 0) {
      this.buttonUno.nativeElement.classList.add('button_active')
      return
    }
    if (option === 1) {
      this.buttonDos.nativeElement.classList.add('button_active')
      return
    }
    if (option === 2) {
      this.buttonTres.nativeElement.classList.add('button_active')
      return
    }
    if (option === 3) {
      this.buttonCuatro.nativeElement.classList.add('button_active')
      return
    }


}

Con esta lógica logré simular el comportamiento del TabView.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.