Open Calendar is a modern web calendar frontend for CalDAV based calendars.

• Configure individual calendars or multiple CalDAV servers
• Display multiple calendars at the same time
• Hide or show calendars and copy their URLs
• Use the original calendar name and color
• Show recurring events, alarms and attendees
• Select timezones
• Easily customize and integrate forms, notifications and rendering

1. With just a few lines of code, you can get a ready-to-use CalDAV client web application
2. With a bit of development, you can integrate it into your web application by customizing the forms
3. With a bit more work, you can even customize all components like event rendering, notifications, etc

Open Calendar can deal with many CalDAV calendars at once, and also discover calendars directly from CalDAV servers.

Open Calendar supports all the features you would expect from a calendar client with little to no configuration: hide or show calendars or copy their URLs; drag, drop and resize events; show recurring events, alarms, attendees and more.

Open Calendar is built to be customizable and integrated into larger apps. Events content, forms, dropdowns and even notifications can be replaced by custom ones with ease

First, install Open Calendar with the package manager of your choice (yarn in this case):

yarn add open-dav-calendar

Once this is done, you can add Open Calendar to your application at different levels:

🚧 Bellow is a work in progress 🚧

With just a few lines of code, you can get a ready-to-use CalDAV client web application. All you need to do install open-dav-calendar and tsdav (for auth functions) and call createCalendar:

import { createCalendar } from "open-dav-calendar";
// You can install `tsdav` to access a variety of auth functions (https://tsdav.vercel.app/docs/helpers/authHelpers)
import { getBasicAuthHeaders } from "tsdav";

const serverUrl = window.prompt("server url")
const username = window.prompt("username")
const password = window.prompt("password")
createCalendar(
    [{ serverUrl: serverUrl, headers: getBasicAuthHeaders({ username, password }) }],
    document.getElementById("open-calendar"),
)

With a bit of development, you can integrate it into your web application by customizing the forms

With a bit more work, you can even customize all components like event rendering, notifications, etc

Open Calendar is a TypeScript application relying on 3 main components:

• a Calendar rendering component: EventCalendar
• a CalDAV client library: tsdav
• an ICS library: ts-ics

Contact us at contact@algoo.fr