Open Web Calendar

The Open Web Calendar uses ICS/ICal calendars online and displays them in one calendar. You can use it with Nextcloud, Outlook, Google Calendar, Meetup and other calendar systems using the ICS standard. We support the following standards: ICAL, CalDAV, webcal.

To merge several calendars, please input the URLs of the ICS calendars here:

You can make additional customizations of the calendar.

We recommend encrypting URLs if they contain sensitive data. Save the following password only if you intend to decrypt them later.

🔑

Language

English Esperanto(74%) French/Français(61%) German/Deutsch Hrvatski/Croatian(80%) Indonesian/Bahasa Indonesia(56%) Italiano/Italian(74%) Norwegian Bokmål/Norsk bokmål(59%) Slovenčina/Slovak(73%) Spanish/Español(80%) Türkçe/Turkish(71%) Welsh/Cymraeg(54%) Українська/Ukrainian தமிழ்(80%) 한국어(74%) Translate

You can set the language of the calendar.
English (en)
Translate

Title

To change the title, please input the name of the calendar here:

Starting date

To change the starting date of the calendar:

Time and Hours

First Hour

To change the first hour of the calendar view:

Last Hour

To change the last hour of the calendar view:

Time Increment

Change time increment in the day & week view:

Clock Convention

You can choose between the 24 hour clock and the 12 hour clock. More options are possible. View the specification.

Skins

You can select different skins for the calendar.

Map Links and Location

Event locations may have coordinates or text. Configure here which map service to use when clicking on an event's location.

Customize the map links Enter the URL to the map here and insert {location} where the search query goes.

Enter the URL to the map here and insert {lat} and {lon} for the coordinates.

Days of the Week

The week may start on Monday or Sunday.

Custom Style with CSS

You can change the color of your calendar and many more properties using CSS. Your customization has priority over the Skin you choose. Below, you can choose from a few customizations we prepared for you.

  • You can change the background color of the calendar.
  • You can change the color of the elements which can be clicked.
  • You can change the background color of the current date.
  • If you like to have a different color for the days, you can specify this, too.
  • Some days of the calendar have a different color if they are not within the month.

You can specify your own CSS properties if you like. These are examples of CSS classes to style events: .event {} .UID-... {} .CATEGORY-... {} .CALENDAR-INDEX-0 {} .CALENDAR-INDEX-... {} .TRANSP-OPAQUE {} .TRANSP-TRANSPARENT {} .CLASS-PRIVATE {} .CLASS-CONFIDENTIAL {} .CLASS-PUBLIC {} .STATUS-TENTATIVE {} .STATUS-CONFIRMED {} .STATUS-CANCELLED {} .PRIORITY-1 {} .PRIORITY-... {} .error {}

Event Status

Change the look of the event description depending on the status:

Loading Animation

In some cases, the server takes quite a time to load the calendar. In case the server uses a free plan on Heroku, the server needs to start first.

Calendar Tabs

The Month view is the default. However, you can choose to show a different view in the beginning. Choose one:

It might be that you do not want to show all controls for the users to see. Choose here which controls you would like to display:

Time Zone

The timezone is taken from the browser of the user. If you want your calendar to be fixed in one timezone, you have the option below. Your browser uses this time zone: UTC

Participants and Organization

You can invite others to events and people can sign up. You can enable these options to view the names and email addresses below the event description.





Use & Embed

You can view the resulting calendar below.

https://open-web-calendar.hosted.quelltext.eu/calendar.html?url=http%3A%2F%2Fapi.hms.gen.tr%2Fapi%2Fv1%2FiCal%2Ficalical%2F10111%2Fical7421.ics

To embed the calendar, use this code on your website: 

<iframe id="open-web-calendar" 
    style="background:url('https://raw.githubusercontent.com/niccokunzmann/open-web-calendar/master/static/img/loaders/circular-loader.gif') center center no-repeat;"
    src="https://open-web-calendar.hosted.quelltext.eu/calendar.html?url=http%3A%2F%2Fapi.hms.gen.tr%2Fapi%2Fv1%2FiCal%2Ficalical%2F10111%2Fical7421.ics"
    sandbox="allow-scripts allow-same-origin allow-top-navigation allow-downloads"
    allowTransparency="true" scrolling="no" 
    frameborder="0" height="600px" width="100%"></iframe>

Hosting the Specification

The calendar can be generated not only using the URL, but also through a JSON or YAML specification from a file. The customization above generates this specification: 
{
  "url": "http://api.hms.gen.tr/api/v1/iCal/icalical/10111/ical7421.ics"
}
You can download this specification and place it somewhere on the web. This way you are still in control over the customization of the calendar after you shared the link, e.g. on GitHub in a Gist. Once you have placed the specification somewhere online, you can create a link like this one: https://open-web-calendar.hosted.quelltext.eu/calendar.html?specification_url=https://raw.githubusercontent.com/niccokunzmann/open-web-calendar/master/open_web_calendar/default_specification.yml

About

This is a calendar which provides a website for many different calendars. You can also subscribe through an ICS link. The calendars are highly configurable e.g. to have several sources and fit into the embedding website. If you like this project, please consider to donate your time or money to the project to keep it free and accessible for all.
⬅ Use & Embed ➡
↔