How to embed TradingEconomics economic calendar widget with custom theme in Streamlit?

Using Streamlit
1

Hi Streamlit community :waving_hand:,

I am trying to embed the TradingEconomics Economic Calendar widget into my Streamlit app using their official JS snippet:

<div id="calendar-widget">
  <script src="https://widgets.tradingeconomics.com/cl.js" async>
  {
    "colorTheme": "Dark",
    "border": {
      "radius": 15
    }
  }
  </script>
</div>

I attempted to use it inside Streamlit with st.components.v1.html(), like this:

import streamlit as st
import streamlit.components.v1 as components
components.html(“”"

<div id="calendar-widget">
  <script src=" https://widgets.tradingeconomics.com/cl.js " async>
  {
    "colorTheme": "Dark",
    "border": {
      "radius": 15
    }
  }
  </script>
</div>
""", height=800)

…but it does not render the widget in Streamlit.

My goal:

  1. Embed the calendar widget directly in Streamlit.

  2. Be able to customize theme (Dark/Light) and border radius.