Q: Widget shows "Terms must be accepted" error

Add data-terms="accepted" to your container element. This attribute is required and confirms you've read our Terms of Use .

Q: Widget displays wrong week standard (ISO vs US)

Use the data-logic attribute to set the correct week numbering: data-logic="iso" - ISO 8601 (Monday start, EU standard) data-logic="us" - US standard (Sunday start)

Q: Widget language doesn't match my site

Set data-lang="de" for German or data-lang="en" for English. This affects labels like "Week" / "Woche" and day names.

Q: Widget not loading at all

Check your Content Security Policy (CSP): Ensure your CSP allows scripts from thecalendarweek.com . Verify script placement: The script should load after the DOM container exists, or use the async attribute. Check browser console: Look for network errors or blocked requests.

Q: Widget works locally but not in production

HTTPS required: The widget fetches data from our API which requires HTTPS in production. CORS: Our API allows all origins, but ensure your hosting doesn't block external scripts. Cache issues: Clear your CDN/browser cache after deployment.

Q: Widget shows a loading spinner indefinitely

Check API connectivity: Ensure your network allows requests to thecalendarweek.com/api/week.json . Firewall/proxy: Corporate networks may block unknown domains. Contact your IT team if needed.

Q: Widget appears too small or too large

For Minimal design: Use data-size="large" for a larger variant with an icon. For all designs: The widget scales with font-size . Set a font size on the container to control overall scale.

Question 1

Widget shows "Terms must be accepted" error

Accepted Answer

Add data-terms="accepted" to your container element. This attribute is required and confirms you've read our Terms of Use.

Question 2

Widget displays wrong week standard (ISO vs US)

Accepted Answer

Use the data-logic attribute to set the correct week numbering:

data-logic="iso" - ISO 8601 (Monday start, EU standard)
data-logic="us" - US standard (Sunday start)

Question 3

Widget language doesn't match my site

Accepted Answer

Set data-lang="de" for German or data-lang="en" for English. This affects labels like "Week" / "Woche" and day names.

Question 4

Widget not loading at all

Accepted Answer

Check your Content Security Policy (CSP): Ensure your CSP allows scripts from thecalendarweek.com.

Verify script placement: The script should load after the DOM container exists, or use the async attribute.

Check browser console: Look for network errors or blocked requests.

Question 5

Widget scripts are blocked in SharePoint or Intranet

Accepted Answer

For environments that restrict external JavaScript, use our iFrame Embed method instead. It runs safely in a sandboxed context without requiring any script approvals.

Question 6

Widget works locally but not in production

Accepted Answer

HTTPS required: The widget fetches data from our API which requires HTTPS in production.

CORS: Our API allows all origins, but ensure your hosting doesn't block external scripts.

Cache issues: Clear your CDN/browser cache after deployment.

Question 7

Widget shows wrong week number after Sunday transition

Accepted Answer

Our API caches data for performance. On rare occasions, the cache may show the previous week briefly after midnight. This resolves automatically within a few minutes. If the issue persists, try a hard refresh (Ctrl+Shift+R).

Question 8

Widget shows a loading spinner indefinitely

Accepted Answer

Check API connectivity: Ensure your network allows requests to thecalendarweek.com/api/week.json.

Firewall/proxy: Corporate networks may block unknown domains. Contact your IT team if needed.

Question 9

Widget doesn't match my website's font

Accepted Answer

The widget uses Shadow DOM for style isolation and inherits font-family from the parent element. Ensure your container element has the desired font applied, or that your body/html has a font-family set. Note: Some designs (Classic, Analog) use specific fonts for aesthetic purposes.

Question 10

Widget appears too small or too large

Accepted Answer

For Minimal design: Use data-size="large" for a larger variant with an icon.

For all designs: The widget scales with font-size. Set a font size on the container to control overall scale.

Question 11

Colors don't match my site design

Accepted Answer

Use the color override attributes: data-bg for background, data-text for text color, data-primary for accent color, and data-hover for hover effects.

Question 12

Widget has unwanted padding or margins

Accepted Answer

The widget container (div.tcw-embed) has no inherent padding. Any spacing comes from your parent container. You can apply CSS directly to the container element to control layout.

Question 13

React: Widget re-renders or disappears

Accepted Answer

Avoid key changes: Ensure your widget container doesn't have a changing key prop.

Script loading: Use the useEffect pattern from our React Guide to properly load the script once.

Question 14

Vue: Widget doesn't hydrate in SSR/Nuxt

Accepted Answer

Wrap the widget in a client-only component using in Nuxt, or use onMounted for script loading in Vue 3. See our Vue Guide.

Question 15

Mobile app (iOS/Android): WebView not rendering

Accepted Answer

Enable JavaScript: Ensure JavaScript is enabled in your WebView configuration.

Allow mixed content: For Android, you may need to enable mixed content mode if testing on HTTP.

See our Swift or Kotlin guides for complete setup.

Question 16

Console shows "[TCW Embed] Init" message

Accepted Answer

This is an informational log, not an error. It confirms the widget script loaded successfully and shows the API endpoint being used. You can safely ignore this message in production.

Question 17

Console shows "[TCW Widget] API Warning" error

Accepted Answer

This warning appears when the widget cannot fetch data from our API. Common causes:

Network issues: Check your internet connection or firewall settings.
CSP blocking: Your Content-Security-Policy may block requests to thecalendarweek.com.
CORS: If using a custom endpoint, ensure it returns proper CORS headers.

The widget will display "N/A" when this occurs.

Question 18

Console shows "[TCW Embed] Blocked unsafe CSS value"

Accepted Answer

This security warning appears when you've passed a potentially dangerous value to a color or style attribute. The widget blocks:

javascript: protocol strings
url() CSS functions
Characters like ;, {}, <>

Use simple color values like #FF5733 or rgb(255, 87, 51) instead.

Question 19

Console shows "Design 'X' is not yet implemented. Falling back to classic."

Accepted Answer

You've specified a data-design value that doesn't exist. Available designs are: minimal, classic, card, calendar, dashboard, analog. Check for typos in your design attribute.

Question 20

Console shows "Refused to load script" or CSP error

Accepted Answer

Your Content Security Policy is blocking our embed script. Add the following to your CSP header:

script-src 'self' https://thecalendarweek.com;
connect-src 'self' https://thecalendarweek.com;

If you're using a meta tag, update it to include our domain in both script-src and connect-src directives.

Overview

Integration Guides

Mobile & Native

Troubleshooting