<script src="https://c.mql5.com/js/widgets/calendar/widget.v1.js"></script>
<script>
new economicCalendar({ width: "100%", height: "1200px", mode: 2 });
</script>
// EconomicCalendarWidget.jsx
import { useEffect, useRef, memo } from 'react';
function EconomicCalendarWidget() {
const container = useRef();
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://www.tradays.com/c/js/widgets/calendar/widget.js?v=15';
script.type = 'text/javascript';
script.async = true;
script.dataset.type = 'calendar-widget';
script.innerHTML = `{"width":"100%","height":"100%","mode":"2","fw":"react"}`;
container.current?.appendChild(script);
}, []);
return (
<div ref={container}>
<div id="economicCalendarWidget"></div>
<div className="ecw-copyright"><a href="https://www.mql5.com/?utm_source=calendar.widget&utm_medium=link&utm_term=economic.calendar&utm_content=visit.mql5.calendar&utm_campaign=202.calendar.widget" rel="noopener nofollow" target="_blank">MQL5 Algo Trading Community</a></div>
</div>
);
}
export default memo(EconomicCalendarWidget);
<!-- EconomicCalendarWidget.svelte -->
<script>
import { onMount } from 'svelte';
let container;
onMount(() => {
const script = document.createElement('script');
script.src = 'https://www.tradays.com/c/js/widgets/calendar/widget.js?v=15';
script.type = 'text/javascript';
script.async = true;
script.dataset.type = 'calendar-widget';
script.innerHTML = `{"width":"100%","height":"100%","mode":"2","fw":"svelte"}`;
container.appendChild(script);
return () => {
if (script.parentNode) {
script.remove();
}
};
});
</script>
<div bind:this={container}>
<div id="economicCalendarWidget"></div>
<div class="ecw-copyright"><a href="https://www.mql5.com/?utm_source=calendar.widget&utm_medium=link&utm_term=economic.calendar&utm_content=visit.mql5.calendar&utm_campaign=202.calendar.widget" rel="noopener nofollow" target="_blank">MQL5 Algo Trading Community</a></div>
</div>
<!-- EconomicCalendarWidget.vue -->
<script setup>
import { onMounted, ref } from 'vue';
const container = ref(null);
onMounted(() => {
if (!container.value) return;
const script = document.createElement('script');
script.src = 'https://www.tradays.com/c/js/widgets/calendar/widget.js?v=15';
script.type = 'text/javascript';
script.async = true;
script.dataset.type = 'calendar-widget';
script.innerHTML = `{"width":"100%","height":"100%","mode":"2","fw":"vue"}`;
container.value.appendChild(script);
});
</script>
<template>
<div ref="container">
<div id="economicCalendarWidget"></div>
<div class="ecw-copyright"><a href="https://www.mql5.com/?utm_source=calendar.widget&utm_medium=link&utm_term=economic.calendar&utm_content=visit.mql5.calendar&utm_campaign=202.calendar.widget" rel="noopener nofollow" target="_blank">MQL5 Algo Trading Community</a></div>
</div>
</template>
