Update

app.py

@@ -1,9 +1,56 @@
 #!/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)
 
-with gr.Blocks() as demo:
-    pass
 
 if __name__ == "__main__":
     demo.queue().launch()

requirements.txt

@@ -0,0 +1,3 @@
+gradio==4.13.0
+gradio_calendar==0.0.2
+plotly==5.18.0

style.css

@@ -9,3 +9,19 @@ h1 {
   background: #1565c0;
   border-radius: 100vh;
 }
+
+.js-plotly-plot .plotly {
+  padding-top: 30px !important;
+  background-color: white;
+}
+
+.js-plotly-plot .plotly .modebar {
+  top: -30px !important;
+  right: 10px !important;
+}
+
+.modebar-group {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}