app.py

#!/usr/bin/env python

import datetime

import gradio as gr
import numpy as np
import pandas as pd
import plotly.express as px
import plotly.graph_objs as go

from gradio_calendar import Calendar

DESCRIPTION = """
- [GitHub](https://github.com/freddyaboulton/gradio-calendar)
- [PyPI](https://pypi.org/project/gradio-calendar/)
"""

np.random.seed(1)
data = np.random.normal(size=(500, 5)).cumsum(axis=0)
df = pd.DataFrame(data, columns=["A", "B", "C", "D", "E"])
df.index = pd.to_datetime(pd.date_range("2024-01-01", periods=500))


def update(start_date: datetime.datetime, end_date: datetime.datetime) -> go.Figure:
    fig = px.line(df)
    fig.update_layout(xaxis_range=[start_date, end_date], xaxis_rangeslider_visible=True)
    return fig


with gr.Blocks(css="style.css") as demo:
    with gr.Row():
        start_date = Calendar(
            label="Start date",
            type="datetime",
            value=datetime.datetime(2024, 1, 1),
        )
        end_date = Calendar(
            label="End date",
            type="datetime",
            value=datetime.datetime(2024, 3, 31),
        )
    plot = gr.Plot()

    gr.on(
        triggers=[start_date.change, end_date.change],
        fn=update,
        inputs=[start_date, end_date],
        outputs=plot,
    )
    demo.load(fn=update, inputs=[start_date, end_date], outputs=plot)

    gr.Markdown(DESCRIPTION)


if __name__ == "__main__":
    demo.queue().launch()