Componente de Calendario Completo

Este es un componente Vue.js que muestra un calendario de torneos deportivos. El componente se encarga de mostrar información sobre los partidos y las rondas de un torneo, permitiendo a los usuarios ver los partidos programados por fecha o por jornada, así como filtrar por equipos.

Uso

Este componente se puede utilizar en cualquier proyecto Vue.js para mostrar un calendario de torneos deportivos. Para integrarlo en tu proyecto, sigue estos pasos:

1. Copia el código del componente en un archivo .vue en tu proyecto Vue.js.

2. Importa y registra el componente en tu archivo principal de Vue.js (por lo general, main.js).

   import Vue from 'vue';
   import TournamentCalendar from './ruta/del/componente/TournamentCalendar.vue';

   Vue.component('tournament-calendar', TournamentCalendar);

3. Luego, puedes usar el componente en tu plantilla Vue.js de la siguiente manera:

<template>
  <!-- Otras partes de tu plantilla -->
  <tournament-calendar :token="yourToken" :title="calendarTitle" :width="calendarWidth" :titleColor="calendarTitleColor" :isPaginationVisible="showPagination" :itemsToShow="itemsToShow" :itemsToScroll="itemsToScroll" :rowHeight="rowHeight"></tournament-calendar>
  <!-- Otras partes de tu plantilla -->
</template>

<script>
export default {
  data() {
    return {
      yourToken: 'tuToken',
      calendarTitle: 'Calendario',
      calendarWidth: '100%',
      calendarTitleColor: '#ffffff',
      showPagination: true,
      itemsToShow: 10,
      itemsToScroll: 10,
      rowHeight: 'fit-content'
    };
  }
}
</script>

Propiedades

El componente Tournament Calendar admite las siguientes propiedades, junto con sus valores por defecto y opciones admitidas:

| Propiedad | Valor por Defecto | Descripción | Valores Admitidos | |----------------------|--------------------|------------------------------------------------|----------------------------| | token | - | Token de autenticación para acceder a los datos del torneo. | Cadena de texto (requerida) | | title | 'Calendario' | Título del calendario. | Cadena de texto | | width | '100%' | Ancho del calendario. | Cualquier valor de ancho válido en CSS. Ejemplo: '800px' | | titleColor | '#ffffff' | Color del título. | Cualquier valor de color válido en CSS. Ejemplo: '#333333' | | isPaginationVisible| true | Visibilidad de la paginación. | true (para mostrar) o false (para ocultar) | | itemsToShow | 10 | Número de elementos para mostrar. | Número entero | | itemsToScroll | 10 | Número de elementos para desplazarse. | Número entero | | rowHeight | 'fit-content' | Altura de fila. | Cualquier valor de altura válido en CSS. Ejemplo: '50px' |

Estilos Personalizados

El componente Tournament Calendar utiliza estilos personalizados que se pueden personalizar mediante la propiedad style en el componente. Puedes definir tus estilos personalizados en tu archivo de estilos CSS o directamente en el archivo .vue del componente.

Ejemplo de Invocación del Componente

<template>
  <div>
    <FullCalendar
      :token="'tu_token_de_autenticacion'"
      :title="'Mi Calendario'"
      :width="'800px'"
      :titleColor="'#FF5733'"
      :isPaginationVisible="true"
      :itemsToShow="10"
      :itemsToScroll="10"
      :rowHeight="'50px'"
    />
  </div>
</template>

En este ejemplo, se está utilizando un componente llamado FullCalendar y se le pasan valores específicos para las propiedades que definen su comportamiento y apariencia. Asegúrate de que el componente FullCalendar esté correctamente importado en tu archivo y de que las propiedades se ajusten a tus necesidades reales.

Estilos CSS

El componente utiliza estilos CSS personalizados que se pueden ajustar según tus preferencias. Asegúrate de mantener la estructura de clases CSS del componente para que los estilos se apliquen correctamente.

Esta documentación proporciona a los usuarios información detallada sobre las propiedades del componente, sus valores por defecto y cómo usarlo en un proyecto Vue.js. Asegúrate de configurar el token de autenticación (token) para acceder a los datos del torneo y personalizar el componente según tus necesidades.