|
|
|
# `gradio_calendar` |
|
<a href="https://pypi.org/project/gradio_calendar/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_calendar"></a> <a href="https://github.com/freddyaboulton/gradio-calendar/issues" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Issues-white?logo=github&logoColor=black"></a> <a href="https://huggingface.co/spaces/freddyaboulton/gradio_calendar/discussions" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/%F0%9F%A4%97%20Discuss-%23097EFF?style=flat&logoColor=black"></a> |
|
|
|
Gradio component for selecting dates with a calendar 📆 |
|
|
|
## Installation |
|
|
|
```bash |
|
pip install gradio_calendar |
|
``` |
|
|
|
## Usage |
|
|
|
```python |
|
import gradio as gr |
|
from gradio_calendar import Calendar |
|
import datetime |
|
|
|
def is_weekday(date: datetime.datetime): |
|
return date.weekday() < 5 |
|
|
|
demo = gr.Interface(is_weekday, |
|
[Calendar(type="datetime", label="Select a date", info="Click the calendar icon to bring up the calendar.")], |
|
gr.Label(label="Is it a weekday?"), |
|
examples=["2023-01-01", "2023-12-11"], |
|
cache_examples=True, |
|
title="Is it a weekday?") |
|
|
|
if __name__ == "__main__": |
|
demo.launch() |
|
|
|
``` |
|
|
|
## `Calendar` |
|
|
|
### Initialization |
|
|
|
<table> |
|
<thead> |
|
<tr> |
|
<th align="left">name</th> |
|
<th align="left" style="width: 25%;">type</th> |
|
<th align="left">default</th> |
|
<th align="left">description</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
<tr> |
|
<td align="left"><code>value</code></td> |
|
<td align="left" style="width: 25%;"> |
|
|
|
```python |
|
str | datetime.datetime |
|
``` |
|
|
|
</td> |
|
<td align="left"><code>None</code></td> |
|
<td align="left">None</td> |
|
</tr> |
|
|
|
<tr> |
|
<td align="left"><code>type</code></td> |
|
<td align="left" style="width: 25%;"> |
|
|
|
```python |
|
"string" | "datetime" |
|
``` |
|
|
|
</td> |
|
<td align="left"><code>"datetime"</code></td> |
|
<td align="left">None</td> |
|
</tr> |
|
|
|
<tr> |
|
<td align="left"><code>label</code></td> |
|
<td align="left" style="width: 25%;"> |
|
|
|
```python |
|
str | None |
|
``` |
|
|
|
</td> |
|
<td align="left"><code>None</code></td> |
|
<td align="left">None</td> |
|
</tr> |
|
|
|
<tr> |
|
<td align="left"><code>info</code></td> |
|
<td align="left" style="width: 25%;"> |
|
|
|
```python |
|
str | None |
|
``` |
|
|
|
</td> |
|
<td align="left"><code>None</code></td> |
|
<td align="left">None</td> |
|
</tr> |
|
|
|
<tr> |
|
<td align="left"><code>show_label</code></td> |
|
<td align="left" style="width: 25%;"> |
|
|
|
```python |
|
bool | None |
|
``` |
|
|
|
</td> |
|
<td align="left"><code>None</code></td> |
|
<td align="left">None</td> |
|
</tr> |
|
|
|
<tr> |
|
<td align="left"><code>container</code></td> |
|
<td align="left" style="width: 25%;"> |
|
|
|
```python |
|
bool |
|
``` |
|
|
|
</td> |
|
<td align="left"><code>True</code></td> |
|
<td align="left">None</td> |
|
</tr> |
|
|
|
<tr> |
|
<td align="left"><code>scale</code></td> |
|
<td align="left" style="width: 25%;"> |
|
|
|
```python |
|
int | None |
|
``` |
|
|
|
</td> |
|
<td align="left"><code>None</code></td> |
|
<td align="left">None</td> |
|
</tr> |
|
|
|
<tr> |
|
<td align="left"><code>min_width</code></td> |
|
<td align="left" style="width: 25%;"> |
|
|
|
```python |
|
int | None |
|
``` |
|
|
|
</td> |
|
<td align="left"><code>None</code></td> |
|
<td align="left">None</td> |
|
</tr> |
|
|
|
<tr> |
|
<td align="left"><code>interactive</code></td> |
|
<td align="left" style="width: 25%;"> |
|
|
|
```python |
|
bool | None |
|
``` |
|
|
|
</td> |
|
<td align="left"><code>None</code></td> |
|
<td align="left">None</td> |
|
</tr> |
|
|
|
<tr> |
|
<td align="left"><code>visible</code></td> |
|
<td align="left" style="width: 25%;"> |
|
|
|
```python |
|
bool |
|
``` |
|
|
|
</td> |
|
<td align="left"><code>True</code></td> |
|
<td align="left">None</td> |
|
</tr> |
|
|
|
<tr> |
|
<td align="left"><code>elem_id</code></td> |
|
<td align="left" style="width: 25%;"> |
|
|
|
```python |
|
str | None |
|
``` |
|
|
|
</td> |
|
<td align="left"><code>None</code></td> |
|
<td align="left">None</td> |
|
</tr> |
|
|
|
<tr> |
|
<td align="left"><code>elem_classes</code></td> |
|
<td align="left" style="width: 25%;"> |
|
|
|
```python |
|
list[str] | str | None |
|
``` |
|
|
|
</td> |
|
<td align="left"><code>None</code></td> |
|
<td align="left">None</td> |
|
</tr> |
|
|
|
<tr> |
|
<td align="left"><code>render</code></td> |
|
<td align="left" style="width: 25%;"> |
|
|
|
```python |
|
bool |
|
``` |
|
|
|
</td> |
|
<td align="left"><code>True</code></td> |
|
<td align="left">None</td> |
|
</tr> |
|
|
|
<tr> |
|
<td align="left"><code>load_fn</code></td> |
|
<td align="left" style="width: 25%;"> |
|
|
|
```python |
|
Callable[Ellipsis, Any] | None |
|
``` |
|
|
|
</td> |
|
<td align="left"><code>None</code></td> |
|
<td align="left">None</td> |
|
</tr> |
|
|
|
<tr> |
|
<td align="left"><code>every</code></td> |
|
<td align="left" style="width: 25%;"> |
|
|
|
```python |
|
float | None |
|
``` |
|
|
|
</td> |
|
<td align="left"><code>None</code></td> |
|
<td align="left">None</td> |
|
</tr> |
|
</tbody></table> |
|
|
|
|
|
### Events |
|
|
|
| name | description | |
|
|:-----|:------------| |
|
| `change` | | |
|
| `input` | | |
|
| `submit` | | |
|
|
|
|
|
|
|
### User function |
|
|
|
The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both). |
|
|
|
- When used as an Input, the component only impacts the input signature of the user function. |
|
- When used as an output, the component only impacts the return signature of the user function. |
|
|
|
The code snippet below is accurate in cases where the component is used as both an input and an output. |
|
|
|
|
|
|
|
```python |
|
def predict( |
|
value: str | datetime.datetime | None |
|
) -> str | datetime.datetime | None: |
|
return value |
|
``` |
|
|
|
|