# ez-calendar



<!-- Auto Generated Below -->


## Properties

| Property      | Attribute      | Description                                                                             | Type      | Default      |
| ------------- | -------------- | --------------------------------------------------------------------------------------- | --------- | ------------ |
| `floating`    | `floating`     | Define se a exibição do ez-calendar será feita pelos métodos `show()` e `hide()`.       | `boolean` | `false`      |
| `showSeconds` | `show-seconds` | Se true a data considera segundos. Deve ser usado em conjunto com a propriedade `time`. | `boolean` | `false`      |
| `time`        | `time`         | Se true a data considera horas e minutos.                                               | `boolean` | `false`      |
| `value`       | --             | Define o valor do calendário.                                                           | `Date`    | `new Date()` |


## Events

| Event      | Description                                                 | Type                |
| ---------- | ----------------------------------------------------------- | ------------------- |
| `ezChange` | Emitido quando acontece a alteração de valor do calendário. | `CustomEvent<Date>` |


## Methods

### `fitHorizontal(rightOffset: number) => Promise<void>`

Ajusta o posicionamento horizontal do ez-calendar conforme a disponibilidade de espaço.

#### Returns

Type: `Promise<void>`

---

### `fitVertical(topOffset: number, bottomOffset: number) => Promise<void>`

Ajusta o posicionamento vertical do ez-calendar conforme a disponibilidade de espaço.

#### Returns

Type: `Promise<void>`

---

### `hide() => Promise<void>`

Oculta o ez-calendar.

#### Returns

Type: `Promise<void>`

---

### `show(top?: string, left?: string, bottom?: string, right?: string) => Promise<void>`

Exibe o ez-calendar em uma posição determinada.
É possível determinar o posicionamento através dos parâmetros, no formato css.

#### Returns

Type: `Promise<void>`




## Dependencies

### Used by

 - [ez-date-input](../ez-date-input)
 - [ez-date-time-input](../ez-date-time-input)

### Graph
```mermaid
graph TD;
  ez-date-input --> ez-calendar
  ez-date-time-input --> ez-calendar
  style ez-calendar fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------




## CSS Variables
| Variable  | Description | 
 |-|-|
| --ez-calendar--font-family | Define a família da fonte do componente. | 
| --ez-calendar--color | Define a cor dos textos dentro do componente. | 
| --ez-calendar--text-shadow | Define a sombra dos textos dentro do componente. | 
| --ez-calendar\_\_body--background-color | Define a cor de fundo do corpo do calendário. | 
| --ez-calendar\_\_time--background-color | Define a cor de fundo do corpo da hora do calendário. | 
| --ez-calendar\_\_body--padding | Define o espaçamento do corpo do calendário. | 
| --ez-calendar\_\_body--border-radius | Define o raio da borda do corpo do calendário. | 
| --ez-calendar\_\_body--shadow | Define a sombra do corpo do calendário. | 
| --ez-container--z-index | Define a posição do container de calendario nas camadas da página . | 
| --ez-calendar\_\_header-line--stroke | Define a espessura da borda inferior do header. | 
| --ez-calendar\_\_header-line--color | Define a cor da borda inferior do header. | 
| --ez-calendar\_\_nav-btn--fill | Define a cor do ícone de navegação. | 
| --ez-calendar\_\_nav-btn--hover--fill | Define a cor do ícone de navegação quando o cursor está sobre ele. | 
| --ez-calendar\_\_nav-btn--width | Define a largura do ícone de navegação. | 
| --ez-calendar\_\_nav-btn--height | Define a altura do ícone de navegação. | 
| --ez-calendar\_\_nav-btn--previous-image | Contém a imagem do ícone de navegação à esquerda. | 
| --ez-calendar\_\_nav-btn--next-image | Contém a imagem do ícone de navegação à direita. | 
| --ez-calendar\_\_cell--margin | Define o espaçamento vertical entre as células. | 
| --ez-calendar\_\_cell--width | Define a largura das células. | 
| --ez-calendar\_\_cell--padding | Define o espaçamento horizontal entre as células. | 
| --ez-calendar\_\_cell--border-radius | Define o raio da borda das células. | 
| --ez-calendar\_\_cell--over--background-color | Define a cor de fundo das células. | 
| --ez-calendar\_\_cell--over--color | Define a cor de do texto das células. | 
| --ez-calendar\_\_cell--outset--color | Define a cor do texto para células secundárias (fora do mês selecionado). | 
| --ez-calendar\_\_cell--selected--background-color | Define a cor de fundo das células selecionadas. | 
| --ez-calendar\_\_cell--selected--color | Define a cor do texto da célula selecionada. | 
| --ez-calendar\_\_btn-today--color | Define a cor do texto do botão "Hoje". | 
| --ez-calendar\_\_btn-today--hover--background-color | Define a cor de fundo do botão "Hoje" quando o cursor está sobre ele. | 
| --ez-calendar\_\_btn-today--border-radius | Define o raio da borda do botão "Hoje". |