Skip to content
Compass Docs

Add a calendar

You can add calendars fetched from iCals, or webcals dynamically on your dashboard.

Instructions

We’re using this webcal link as the example: webcal://www.school.ac.uk/CalendarSync.ashx

  1. Go to this link, and configure your settings as needed. When configuring, ignore starting date.

  2. Copy the large blue link containing your preferences which you can find at the top of the page.

  3. Go to the Calendar component:

    • Directoryapp
      • Directorysrc
        • Directorycomponents
          • Calendar.astro
        • config
        • layouts
        • pages
      • public
    • docs

  4. Paste the copied link into the source tag for the Desktop view.

    It should look something like this now:

    app/src/components/Calendar.astro
    <div class="desktop-view w-full">
       <iframe class="open-web-calendar w-full"
       style="background:url('/assets/loader.gif') center center no-repeat; border-radius: 10px;"
       src="https://open-web-calendar.hosted.quelltext.eu/calendar.html?YOUR_LINK"
       sandbox="allow-scripts allow-same-origin allow-top-navigation"
       allowtransparency="true" scrolling="no"
       frameborder="0" height="600px">
       </iframe>
    </div>

  5. Find the &date= segment of the URL.

  6. Replace the value with this:

    ${new Date().toISOString().split('T')[0]}

  7. Enclose the src string in backticks (`) instead of quotation marks ”.

  8. View the result in your browser!