🔥(front) remove open-calendar package
Remove deprecated open-calendar package. Functionality has been migrated to src/features/calendar/services/dav with improved architecture and TypeScript support. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Nathan Panchout
@@ -1,25 +0,0 @@
|
|||||||
# EditorConfig: http://EditorConfig.org
|
|
||||||
|
|
||||||
# top-most EditorConfig file
|
|
||||||
root = true
|
|
||||||
|
|
||||||
# Unix-style newlines with a newline ending every file
|
|
||||||
[*]
|
|
||||||
end_of_line = lf
|
|
||||||
insert_final_newline = true
|
|
||||||
trim_trailing_whitespace = true
|
|
||||||
charset = utf-8
|
|
||||||
indent_style = space
|
|
||||||
indent_size = 2
|
|
||||||
tab_width = 2
|
|
||||||
|
|
||||||
[*.sh]
|
|
||||||
indent_style = space
|
|
||||||
indent_size = 4
|
|
||||||
tab_width = 4
|
|
||||||
|
|
||||||
[*.md]
|
|
||||||
trim_trailing_whitespace = false
|
|
||||||
|
|
||||||
[*.{jsx,js,ts,tsx}]
|
|
||||||
max_line_length = 120
|
|
||||||
26
src/frontend/packages/open-calendar/.gitignore
vendored
26
src/frontend/packages/open-calendar/.gitignore
vendored
@@ -1,26 +0,0 @@
|
|||||||
# Logs
|
|
||||||
logs
|
|
||||||
*.log
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
pnpm-debug.log*
|
|
||||||
lerna-debug.log*
|
|
||||||
|
|
||||||
.yarn
|
|
||||||
node_modules
|
|
||||||
build
|
|
||||||
dist
|
|
||||||
dist-ssr
|
|
||||||
*.local
|
|
||||||
|
|
||||||
# Editor directories and files
|
|
||||||
.vscode/*
|
|
||||||
!.vscode/extensions.json
|
|
||||||
.idea
|
|
||||||
.DS_Store
|
|
||||||
*.suo
|
|
||||||
*.ntvs*
|
|
||||||
*.njsproj
|
|
||||||
*.sln
|
|
||||||
*.sw?
|
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
MIT License
|
|
||||||
|
|
||||||
Copyright (c) 2025 algoo
|
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
of this software and associated documentation files (the "Software"), to deal
|
|
||||||
in the Software without restriction, including without limitation the rights
|
|
||||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
||||||
copies of the Software, and to permit persons to whom the Software is
|
|
||||||
furnished to do so, subject to the following conditions:
|
|
||||||
|
|
||||||
The above copyright notice and this permission notice shall be included in all
|
|
||||||
copies or substantial portions of the Software.
|
|
||||||
|
|
||||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
||||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
||||||
SOFTWARE.
|
|
||||||
@@ -1,97 +0,0 @@
|
|||||||
# Open Calendar
|
|
||||||
|
|
||||||
Open Calendar is a modern web calendar frontend for CalDAV based calendars.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Key features
|
|
||||||
- [x] Configure individual calendars or multiple CalDAV servers
|
|
||||||
- [x] Display multiple calendars at the same time
|
|
||||||
- [x] Hide or show calendars and copy their URLs
|
|
||||||
- [x] Use the original calendar name and color
|
|
||||||
- [x] Show recurring events, alarms and attendees
|
|
||||||
- [x] Select timezones
|
|
||||||
- [x] Easily customize and integrate forms, notifications and rendering
|
|
||||||
|
|
||||||
### There are 3 ways to use it
|
|
||||||
1. [With just a few lines of code](#minimal-setup), you can get a ready-to-use CalDAV client web application
|
|
||||||
2. [With a bit of development](#customized-forms), you can integrate it into your web application by customizing the forms
|
|
||||||
3. [With a bit more work](#complete-integration), you can even customize all components like event rendering, notifications, etc
|
|
||||||
|
|
||||||
## Features
|
|
||||||
|
|
||||||
### Supports multiple calendars at the same time
|
|
||||||
Open Calendar can deal with many CalDAV calendars at once, and also discover calendars directly from CalDAV servers.
|
|
||||||
|
|
||||||
### Functional out of the box
|
|
||||||
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.
|
|
||||||
|
|
||||||
### Easily customizable
|
|
||||||
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
|
|
||||||
|
|
||||||
<!-- TODO - CJ - 2025-07-09
|
|
||||||
### Well documented
|
|
||||||
Documentation for the API as well as examples can be found **Insert documentation link**
|
|
||||||
-->
|
|
||||||
|
|
||||||
|
|
||||||
## Quick start
|
|
||||||
|
|
||||||
First, install Open Calendar with the package manager of your choice (`yarn` in this case):
|
|
||||||
```bash
|
|
||||||
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 🚧
|
|
||||||
|
|
||||||
### Minimal setup
|
|
||||||
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](https://tsdav.vercel.app/docs/helpers/authHelpers)) and call `createCalendar`:
|
|
||||||
```ts
|
|
||||||
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"),
|
|
||||||
)
|
|
||||||
```
|
|
||||||
<!-- TODO - CJ - 2025-07-09
|
|
||||||
The full example is available **Insert demo module link**
|
|
||||||
-->
|
|
||||||
|
|
||||||
### Customized forms
|
|
||||||
With a bit of development, you can integrate it into your web application by customizing the forms
|
|
||||||
<!-- TODO - CJ - 2025-07-09
|
|
||||||
```ts
|
|
||||||
// Insert form ts code
|
|
||||||
```
|
|
||||||
The full example is available **Insert demo module link**
|
|
||||||
-->
|
|
||||||
|
|
||||||
### Complete integration
|
|
||||||
With a bit more work, you can even customize all components like event rendering, notifications, etc
|
|
||||||
<!-- TODO - CJ - 2025-07-09
|
|
||||||
```ts
|
|
||||||
// Insert eventBody ts code
|
|
||||||
```
|
|
||||||
The full example is available **Insert demo module link**
|
|
||||||
-->
|
|
||||||
|
|
||||||
## Architecture & development
|
|
||||||
|
|
||||||
Open Calendar is a TypeScript application relying on 3 main components:
|
|
||||||
- a Calendar rendering component: [EventCalendar](https://github.com/vkurko/calendar)
|
|
||||||
- a CalDAV client library: [tsdav](https://github.com/natelindev/tsdav)
|
|
||||||
- an ICS library: [ts-ics](https://github.com/Neuvernetzung/ts-ics)
|
|
||||||
|
|
||||||
|
|
||||||
## Need support, maintenance or features development?
|
|
||||||
|
|
||||||
Contact us at contact@algoo.fr
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
# Open Calendar's API
|
|
||||||
|
|
||||||
You can access Open Calendar by importing the function `createCalendar` from the module `open-dav-calendar`:
|
|
||||||
```ts
|
|
||||||
import { createCalendar } from 'open-dav-calendar'
|
|
||||||
```
|
|
||||||
|
|
||||||
### `createCalendar(calendarSources, addressBookSources, target, options?, translation?)`
|
|
||||||
- `calendarSources` (list of [ServerSource]() or [CalendarSource]()): The sources to fetch the calendars from
|
|
||||||
- `addressBookSources` (list of [ServerSource](), [AddressBookSource]() or [VCardProvider]()): The sources to fetch the contacts from
|
|
||||||
- `target` ([Element](https://developer.mozilla.org/docs/Web/API/Element)): An html element that will be the parent of the calendar
|
|
||||||
- `options` ([CalendarOptions](), optional): Options for available view, custom components, ...
|
|
||||||
- `translations` (Recursive partial of [ResourceBundle](), optional): Overrides of the translation values of Open Calendar
|
|
||||||
- return value ([CalendarElement](./Interface.md#calendarelement)): The calendar object
|
|
||||||
|
|
||||||
Creates a calendar under the node `target`
|
|
||||||
@@ -1,82 +0,0 @@
|
|||||||
# Interfacing with CalDAV calendars
|
|
||||||
|
|
||||||
CalDAV is a protocole used to exchange scheduling and event informations. It,s a extension to the WebDAV protocole.
|
|
||||||
The specs for CalDAV, iCalendar (the format of `.ics` files), and vcard (`.vcf`) are defined in [RFC 4791](http://www.webdav.org/specs/rfc4791.html), [RFC 5545](https://www.rfc-editor.org/rfc/rfc5545.html#section-8.3), [RFC 6350](https://datatracker.ietf.org/doc/html/rfc6350) respectively.
|
|
||||||
|
|
||||||
This file does not describe the entire CalDAV or CardDAV details, only what used in Open Calendar
|
|
||||||
|
|
||||||
## The structure of Calendars and AddressBooks
|
|
||||||
|
|
||||||
They are a collection of dav objects, usually represented as of directory on disk. They have common set of properties, such as `D:displayname`, `tag` (`VCALENDAR` or `VADDRESSBOOK`). Calendars may defined additional properties such as `ICAL:calendar-color`.
|
|
||||||
|
|
||||||
DAV requests in XML can be made to request the content of these collections.
|
|
||||||
|
|
||||||
Each item of the collection is identified by its URL and an `etag` or `ctag` indicating the revision. The tag changes every time the object is updated.
|
|
||||||
|
|
||||||
> On its own, a dav object is not associated with a collection (calendar or address book), this link needs to be preserved by the caller.
|
|
||||||
|
|
||||||
## The structure of `.ics` and `.vcf` files.
|
|
||||||
|
|
||||||
ics and vcf files are written in raw text an consists of components.
|
|
||||||
|
|
||||||
A components starts with a `BEGIN:<compname>` tag and ends with a `END:<compname>` tag. Components can be nested.
|
|
||||||
|
|
||||||
### `VCALENDAR` component
|
|
||||||
|
|
||||||
This components is only present in ics files and contains multiple sub-components:
|
|
||||||
- `VTIMEZONE`: Represents a timezone (e.g. `Europe/Paris`). This will allow the use of this timezone in the other components
|
|
||||||
- `VEVENT`: Represents a single calendar event. Contains all the properties of the event (title, description, ...)
|
|
||||||
|
|
||||||
#### Recurring events
|
|
||||||
|
|
||||||
Events with an `RRULE` property or a `RDATE` property are recurring events, and they occur at specific occurrences.
|
|
||||||
|
|
||||||
In this case, the events can be represented in two different ways:
|
|
||||||
1. If the occurrence has not been modified, by the 'template' `VEVENT` with the `RRULE` property.
|
|
||||||
2. Otherwise, by a different `VEVENT` component that must have the `RECURRENCE-ID` property, the original date of the occurrence
|
|
||||||
|
|
||||||
> All those components must be listed in the same ics file
|
|
||||||
|
|
||||||
> If the `DSTART` of the original event is modified, all `RECURRENCE-ID`s must be synched to this new date
|
|
||||||
|
|
||||||
#### Expanding recurrent events
|
|
||||||
|
|
||||||
As not all occurrences of a recurring event are saved (only the template one and the modified ones are), they need to be expanded to find all the occurrences to display.
|
|
||||||
|
|
||||||
This can be done by the client or by the server if the property `expand` is set in the request.
|
|
||||||
|
|
||||||
When this is done on the server, it will return a fake ics file containing all the occurrences inside a time range **WITHOUT** the template instance.
|
|
||||||
|
|
||||||
### `VCARD` component
|
|
||||||
|
|
||||||
This components is only present in vcf files and contains multiple various properties
|
|
||||||
|
|
||||||
## DAV in Open Calendar
|
|
||||||
|
|
||||||
As we've seen, this is not as simple task, and as such this not all done at once, but in two step.
|
|
||||||
|
|
||||||
1. Retrieve CalendarObjects / VCardObjects
|
|
||||||
2. Extract the events and vcards
|
|
||||||
|
|
||||||
The representation of those object evolve as they approach the interface:
|
|
||||||
- At the beginning of step 1.,we have `DAVObjects` with raw text content
|
|
||||||
- They are converted to `CalendarObject` or `VCardObject` with the raw content parsed just before step 2.
|
|
||||||
- From this we extract the `IcsEvent` and `VCardComponent`
|
|
||||||
- At the end of step 2., we have `CalendarEvent` and `AddressBookVCard` objects
|
|
||||||
|
|
||||||
|
|
||||||
## 1. Retrieve CalendarObjects / VCardObjects
|
|
||||||
|
|
||||||
> This is done in `helpers/dav-helper.ts` with [tsdav](https://github.com/natelindev/tsdav/) and [ts-ics](https://github.com/Neuvernetzung/ts-ics)
|
|
||||||
|
|
||||||
This file is used to handle requesting events, calendars, address books and vcard objects from the DAV sources.
|
|
||||||
|
|
||||||
tsdav executes the DAV queries and returns the ics and vcf files. ts-ics parses them into js objects.
|
|
||||||
|
|
||||||
> In `helpers/dav-helper.ts`, all the function starting with `dav`, from tsdav or defined in the file are the one doing the CalDAV requests. The others are a wrapper around them to parse `DAVObjects` to `CalendarObject`
|
|
||||||
|
|
||||||
## 2. Extract the events and vcards
|
|
||||||
|
|
||||||
> This is done in `calendarClient.ts`
|
|
||||||
|
|
||||||
At the end of step one, we have a list of objects containing events and vcards. The role of calendarClient is to store them and allow [CalendarElement](./User-Interface.md#calendarelement) to easily get the event and vcards inside those objects without having to think about WebDAV or storing the events, vcards, calendars itself.
|
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
# User interface
|
|
||||||
|
|
||||||
Open calendar's interface is centered around [EventCalendar](https://github.com/vkurko/calendar).
|
|
||||||
|
|
||||||
|
|
||||||
## Components
|
|
||||||
|
|
||||||
As we want Open Calendar to be as customizable as possible, every component is independent and has its own designated folder.
|
|
||||||
|
|
||||||
A component is composed of a `ts` file and a `css` file.
|
|
||||||
|
|
||||||
Inside the ts file, the component is represent by a class of the same name and chunks of html as string. If it need to received arguments, the custom method `create` is used over the constructor as it can be made async.
|
|
||||||
|
|
||||||
The "management" of the DOM is done with [`Mustache`](https://github.com/janl/mustache.js) in `helpers/dom-helper.ts`.
|
|
||||||
|
|
||||||
|
|
||||||
## CalendarElement
|
|
||||||
This is the main component of Open Calendar and server as a bridge between custom components, EventCalendars and [CalendarClient](./Interfacing-with-CalDAV-and-CardDAV.md#2-extract-the-events-and-vcards).
|
|
||||||
|
|
||||||
The component will add event listeners to EventCalendars (e.g. `eventClick`), gather data from CalendarClient (e.g. `getCalendarEvent`) and call methods on custom components (e.g. `onUpdateEvent`).
|
|
||||||
|
|
||||||
It contains an instance of an EventCalendar, as well as of CalendarClient to get events and calendars. It also stores the callback, or `Handlers`, necessary to handle custom Components.
|
|
||||||
If no custom Components is specified, it will replace it with a predefined component (e.g `EventEditPopup`).
|
|
||||||
|
|
||||||
|
|
||||||
## Generic Components and css
|
|
||||||
|
|
||||||
The generic component `Popup` display as popup on the screen.
|
|
||||||
|
|
||||||
`index.css` contains generic css classes, mostly for forms
|
|
||||||
@@ -1,33 +0,0 @@
|
|||||||
import js from '@eslint/js'
|
|
||||||
import globals from 'globals'
|
|
||||||
import tseslint from 'typescript-eslint'
|
|
||||||
import json from '@eslint/json'
|
|
||||||
import css from '@eslint/css'
|
|
||||||
import stylistic from '@stylistic/eslint-plugin'
|
|
||||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
|
||||||
|
|
||||||
export default defineConfig([
|
|
||||||
{
|
|
||||||
files: ['**/*.{js,mjs,cjs,ts,mts,cts}'],
|
|
||||||
plugins: { js, '@stylistic': stylistic },
|
|
||||||
rules: {
|
|
||||||
'@stylistic/indent': ['error', 2],
|
|
||||||
'@stylistic/quotes': ['error', 'single'],
|
|
||||||
'@stylistic/semi': ['error', 'never'],
|
|
||||||
'@stylistic/max-len': ['error', {
|
|
||||||
code: 120,
|
|
||||||
ignorePattern: '^import\\s.+\\sfrom\\s.+;?$',
|
|
||||||
ignoreUrls: true,
|
|
||||||
}],
|
|
||||||
'@stylistic/no-trailing-spaces': 'error',
|
|
||||||
'@stylistic/eol-last': ['error', 'always'],
|
|
||||||
'@stylistic/comma-dangle': ['error', 'always-multiline'],
|
|
||||||
},
|
|
||||||
extends: ['js/recommended'],
|
|
||||||
},
|
|
||||||
{ files: ['**/*.{js,mjs,cjs,ts,mts,cts}'], languageOptions: { globals: globals.browser } },
|
|
||||||
{ files: ['src/**/*.css'], plugins: { css }, language: 'css/css', extends: ['css/recommended'] },
|
|
||||||
{ files: ['locales/*/*.json'], plugins: { json }, language: 'json/json', extends: ['json/recommended'] },
|
|
||||||
tseslint.configs.recommended,
|
|
||||||
globalIgnores(['dist', 'build', 'webpack.config.js']),
|
|
||||||
])
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 114 KiB |
@@ -1,91 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8"/>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
||||||
<title>Algoo - Calendar</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body style="height: 100vh; margin:0; padding: 5px; box-sizing: border-box;">
|
|
||||||
<div id="open-calendar"></div>
|
|
||||||
<script type="module">
|
|
||||||
import {getBasicAuthHeaders} from 'tsdav'
|
|
||||||
import {createCalendar} from './src'
|
|
||||||
|
|
||||||
const onEventCreated = ({event, ical}) => {
|
|
||||||
console.log(ical)
|
|
||||||
}
|
|
||||||
const onEventUpdated = ({event, ical}) => {
|
|
||||||
console.log(ical)
|
|
||||||
}
|
|
||||||
const onEventDeleted = ({event, ical}) => {
|
|
||||||
console.log(ical)
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO - CJ - 2025--03-07 - Add a proper login form and ask for the server path
|
|
||||||
const username = 'user1@algoo.fr' // window.prompt('username')
|
|
||||||
const password = 'user1@algoo.fr' // window.prompt('password')
|
|
||||||
createCalendar(
|
|
||||||
[
|
|
||||||
// { serverUrl: 'http://localhost:5232', headers: getBasicAuthHeaders({ username, password }) },
|
|
||||||
// { serverUrl: 'http://localhost:7999/dav/', headers: getBasicAuthHeaders({ username, password }) },
|
|
||||||
{
|
|
||||||
calendarUrl: 'http://localhost:7999/dav/agenda/workspace/3/',
|
|
||||||
headers: getBasicAuthHeaders({username, password})
|
|
||||||
},
|
|
||||||
{
|
|
||||||
calendarUrl: 'http://localhost:7999/dav/agenda/workspace/1/',
|
|
||||||
headers: getBasicAuthHeaders({username, password})
|
|
||||||
},
|
|
||||||
// {
|
|
||||||
// calendarUrl: 'http://localhost:7999/dav/agenda/workspace/2/',
|
|
||||||
// headers: getBasicAuthHeaders({username, password})
|
|
||||||
// },
|
|
||||||
],
|
|
||||||
[
|
|
||||||
// { serverUrl: 'http://localhost:5232', headers: getBasicAuthHeaders({ username, password }) },
|
|
||||||
// { serverUrl: 'http://localhost:7999/dav/', headers: getBasicAuthHeaders({ username, password }) },
|
|
||||||
{
|
|
||||||
addressBookUrl: 'http://localhost:7999/dav/addressbook/workspace/3/',
|
|
||||||
headers: getBasicAuthHeaders({username, password})
|
|
||||||
// }, {
|
|
||||||
// addressBookUrl: 'http://localhost:7999/dav/addressbook/workspace/1/',
|
|
||||||
// headers: getBasicAuthHeaders({username, password})
|
|
||||||
// }, {
|
|
||||||
// addressBookUrl: 'http://localhost:7999/dav/addressbook/user/3/',
|
|
||||||
// headers: getBasicAuthHeaders({username, password})
|
|
||||||
}
|
|
||||||
// {
|
|
||||||
// addressBookUrl: 'http://localhost:7999/dav/addressbook/workspace/2/',
|
|
||||||
// headers: getBasicAuthHeaders({username, password})
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// addressBookUrl: 'http://localhost:7999/dav/addressbook/workspace/3/',
|
|
||||||
// headers: getBasicAuthHeaders({username, password})
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// fetchContacts: () => Promise.resolve([{
|
|
||||||
// name: 'zoro',
|
|
||||||
// email: 'z@z.z',
|
|
||||||
// }, {
|
|
||||||
// name: 'ant',
|
|
||||||
// email: 'ant@a.nt',
|
|
||||||
// }])
|
|
||||||
// }
|
|
||||||
],
|
|
||||||
document.getElementById('open-calendar'),
|
|
||||||
{
|
|
||||||
onEventCreated,
|
|
||||||
onEventUpdated,
|
|
||||||
onEventDeleted,
|
|
||||||
// hideVCardEmails: true,
|
|
||||||
userContact: {
|
|
||||||
email: username
|
|
||||||
},
|
|
||||||
}
|
|
||||||
)
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,69 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "open-dav-calendar",
|
|
||||||
"version": "0.9.5",
|
|
||||||
"description": "A modern web calendar frontend for CalDAV based calendars",
|
|
||||||
"homepage": "https://github.com/algoo/open-calendar",
|
|
||||||
"bugs": {
|
|
||||||
"url": "https://github.com/algoo/open-calendar/issues"
|
|
||||||
},
|
|
||||||
"license": "MIT",
|
|
||||||
"files": [
|
|
||||||
"./dist/*"
|
|
||||||
],
|
|
||||||
"exports": {
|
|
||||||
".": "./dist/index.js"
|
|
||||||
},
|
|
||||||
"author": {
|
|
||||||
"name": "Algoo"
|
|
||||||
},
|
|
||||||
"browser": "./dist/index.js",
|
|
||||||
"types": "./dist/index.d.ts",
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "git+https://github.com/algoo/open-calendar.git"
|
|
||||||
},
|
|
||||||
"scripts": {
|
|
||||||
"dev": "vite",
|
|
||||||
"build": "yarn clean && tsc --emitDeclarationOnly && webpack --progress",
|
|
||||||
"preview": "vite preview",
|
|
||||||
"clean": "rimraf build dist",
|
|
||||||
"lint": "eslint"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@event-calendar/core": "^4.4.0",
|
|
||||||
"@fortawesome/fontawesome-svg-core": "^6.7.2",
|
|
||||||
"@fortawesome/free-solid-svg-icons": "^6.7.2",
|
|
||||||
"@fortawesome/free-regular-svg-icons": "^6.7.2",
|
|
||||||
"autolinker": "^4.1.5",
|
|
||||||
"email-addresses": "^5.0.0",
|
|
||||||
"ical.js": "^2.2.0",
|
|
||||||
"mustache": "^4.2.0",
|
|
||||||
"timezones-ical-library": "^1.10.0",
|
|
||||||
"ts-ics": "^2.1.8",
|
|
||||||
"tsdav": "^2.1.4"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@eslint/css": "^0.9.0",
|
|
||||||
"@eslint/js": "^9.29.0",
|
|
||||||
"@eslint/json": "^0.12.0",
|
|
||||||
"@stylistic/eslint-plugin": "^5.0.0",
|
|
||||||
"@types/event-calendar__core": "^4.4.0",
|
|
||||||
"@types/mustache": "^4.2.6",
|
|
||||||
"@types/node": "^24.0.3",
|
|
||||||
"css-loader": "^7.1.2",
|
|
||||||
"dts-bundle-webpack": "^1.0.2",
|
|
||||||
"eslint": "^9.29.0",
|
|
||||||
"globals": "^16.2.0",
|
|
||||||
"node-polyfill-webpack-plugin": "^4.1.0",
|
|
||||||
"rimraf": "^6.0.1",
|
|
||||||
"style-loader": "^4.0.0",
|
|
||||||
"ts-loader": "^9.5.2",
|
|
||||||
"typescript": "^5.8.3",
|
|
||||||
"typescript-eslint": "^8.35.0",
|
|
||||||
"vite": "^6.3.5",
|
|
||||||
"vite-plugin-checker": "^0.9.3",
|
|
||||||
"vite-plugin-node-polyfills": "^0.23.0",
|
|
||||||
"webpack": "^5.99.9",
|
|
||||||
"webpack-cli": "^6.0.1"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,43 +0,0 @@
|
|||||||
import ICAL from 'ical.js'
|
|
||||||
|
|
||||||
export class VCardComponent {
|
|
||||||
|
|
||||||
public component: ICAL.Component
|
|
||||||
|
|
||||||
public constructor(component: ICAL.Component) {
|
|
||||||
if (component) this.component = component
|
|
||||||
else this.component = new ICAL.Component('vcard')
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
get version() { return this._getProp('version') as string }
|
|
||||||
set version(value: string) { this._setProp('version', value) }
|
|
||||||
|
|
||||||
get uid() { return this._getProp('uid') as string }
|
|
||||||
set uid(value: string) { this._setProp('uid', value) }
|
|
||||||
|
|
||||||
get email() { return this._getProp('email') as (string | null) }
|
|
||||||
set email(value: string | null) { this._setProp('email', value) }
|
|
||||||
|
|
||||||
get name() {
|
|
||||||
return this.version.startsWith('2')
|
|
||||||
? (this._getProp('n') as string[]).filter(n => !!n).reverse().join(' ')
|
|
||||||
: this._getProp('fn') as string
|
|
||||||
}
|
|
||||||
set name(value: string) {
|
|
||||||
if (this.version.startsWith('2')) {
|
|
||||||
const [name, family] = value.split(' ', 1)
|
|
||||||
this._setProp('n', [family ?? '', name, '', '', ''])
|
|
||||||
} else {
|
|
||||||
this._setProp('fn', value)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private _setProp(name: string, value: unknown) {
|
|
||||||
this.component.updatePropertyWithValue(name, value)
|
|
||||||
}
|
|
||||||
|
|
||||||
private _getProp(name: string): unknown {
|
|
||||||
return this.component.getFirstPropertyValue(name)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,282 +0,0 @@
|
|||||||
import { type IcsCalendar, type IcsEvent } from 'ts-ics'
|
|
||||||
import { createCalendarObject,
|
|
||||||
deleteCalendarObject,
|
|
||||||
fetchAddressBookObjects,
|
|
||||||
fetchAddressBooks,
|
|
||||||
fetchCalendarObjects,
|
|
||||||
fetchCalendars,
|
|
||||||
updateCalendarObject,
|
|
||||||
getEventObjectString,
|
|
||||||
} from './helpers/dav-helper'
|
|
||||||
import { isRRuleSourceEvent, isSameEvent, offsetDate } from './helpers/ics-helper'
|
|
||||||
import type { CalendarSource, ServerSource, AddressBookSource, VCardProvider, CalendarResponse } from './types/options'
|
|
||||||
import type { Calendar, CalendarEvent, CalendarObject, DisplayedCalendarEvent, EventUid } from './types/calendar'
|
|
||||||
import type { AddressBook, AddressBookVCard, AddressBookObject, VCard } from './types/addressbook'
|
|
||||||
import { VCardComponent } from './VCardComponent'
|
|
||||||
import { isServerSource, isVCardProvider } from './helpers/types-helper'
|
|
||||||
|
|
||||||
export class CalendarClient {
|
|
||||||
|
|
||||||
private _calendars: Calendar[] = []
|
|
||||||
|
|
||||||
// INFO - CJ - 2025-07-16 - Contains:
|
|
||||||
// objects from an ics WITHOUT an rrule
|
|
||||||
// objects with a recurrenceId generated by radicale because of `expand`
|
|
||||||
private _calendarObjects: CalendarObject[] = []
|
|
||||||
// INFO - CJ - 2025-07-16 - Contains objects from an ics WITH an rrule
|
|
||||||
private _recurringObjects: CalendarObject[] = []
|
|
||||||
private _lastFetchNumber = 0
|
|
||||||
|
|
||||||
private _addressBooks: AddressBook[] = []
|
|
||||||
private _addressBookObjects: AddressBookObject[] = []
|
|
||||||
private _vCardProviders: VCardProvider[] = []
|
|
||||||
private _providedVCards: VCard[] = []
|
|
||||||
|
|
||||||
public loadCalendars = async (sources: (ServerSource | CalendarSource)[]) => {
|
|
||||||
const calendarsPerSource = await Promise.all(sources.map(async source => {
|
|
||||||
try {
|
|
||||||
return await fetchCalendars(source)
|
|
||||||
} catch (error) {
|
|
||||||
const url = isServerSource(source) ? source.serverUrl : source.calendarUrl
|
|
||||||
console.error(`Could not fetch calendars from ${url}. ${error}`)
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
}))
|
|
||||||
this._calendars = calendarsPerSource.flat()
|
|
||||||
}
|
|
||||||
|
|
||||||
public getCalendars = () => this._calendars
|
|
||||||
|
|
||||||
public getCalendarByUrl = (url: string): Calendar | undefined => {
|
|
||||||
return this._calendars.find(c => c.url === url)
|
|
||||||
}
|
|
||||||
|
|
||||||
public fetchAndLoadEvents = async (start: string, end: string): Promise<CalendarEvent[]> => {
|
|
||||||
this._lastFetchNumber++
|
|
||||||
const currentFetchNumber = this._lastFetchNumber
|
|
||||||
const allObjects = await Promise.all(
|
|
||||||
this._calendars.map(async calendar => {
|
|
||||||
try {
|
|
||||||
return await fetchCalendarObjects(calendar, { start, end }, true)
|
|
||||||
} catch (error) {
|
|
||||||
console.error(`Could not fetch events from ${calendar.url}. ${error}`)
|
|
||||||
return { calendarObjects: [], recurringObjects: [] }
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
// NOTE - CJ - 2025-07-15 - only update the objects if this is the latest fetch
|
|
||||||
// This can happen if this fetch took more time than the last one
|
|
||||||
if (this._lastFetchNumber === currentFetchNumber) {
|
|
||||||
this._calendarObjects = allObjects.flatMap(objs => objs.calendarObjects)
|
|
||||||
this._recurringObjects = allObjects.flatMap(objs => objs.recurringObjects)
|
|
||||||
}
|
|
||||||
return this.getCalendarEvents()
|
|
||||||
}
|
|
||||||
|
|
||||||
public getCalendarEvents = (): CalendarEvent[] => {
|
|
||||||
return this.getCalendarEventsFromCalendarObjects(this._calendarObjects)
|
|
||||||
}
|
|
||||||
|
|
||||||
private getCalendarEventsFromCalendarObjects = (calendarObjects: CalendarObject[]): CalendarEvent[] => {
|
|
||||||
return calendarObjects.flatMap(co => {
|
|
||||||
const events = co.data.events ?? []
|
|
||||||
return events.map(event => ({ event, calendarUrl: co.calendarUrl }))
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
public getCalendarEvent = (uid: EventUid): DisplayedCalendarEvent | undefined => {
|
|
||||||
for (const calendarObject of this._calendarObjects) {
|
|
||||||
for (const event of calendarObject.data.events ?? []) {
|
|
||||||
if (!isSameEvent(event, uid)) continue
|
|
||||||
const recurringEvent = event.recurrenceId
|
|
||||||
? this.getCalendarObject(event)!.data.events!.find(e => isRRuleSourceEvent(event, e))
|
|
||||||
: undefined
|
|
||||||
return { calendarUrl: calendarObject.calendarUrl, event, recurringEvent }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return undefined
|
|
||||||
}
|
|
||||||
|
|
||||||
private getCalendarObject = (uid: IcsEvent): CalendarObject | undefined => {
|
|
||||||
for (const calendarObject of this._calendarObjects) {
|
|
||||||
for (const event of calendarObject.data.events ?? []) {
|
|
||||||
// NOTE - CJ - 2025-07-03 - Since we look are just looking for the CalendarObject and not the event,
|
|
||||||
// we just need to check the uid of any event, and not the recurrenceID
|
|
||||||
if (event.uid !== uid.uid) continue
|
|
||||||
if (!event.recurrenceId) return calendarObject
|
|
||||||
for (const recurringObject of this._recurringObjects) {
|
|
||||||
for (const event of recurringObject.data.events ?? []) {
|
|
||||||
if (event.uid === uid.uid) return recurringObject
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return undefined
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return undefined
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
public createEvent = async ({ calendarUrl, event }: CalendarEvent): Promise<CalendarResponse> => {
|
|
||||||
const calendar = this.getCalendarByUrl(calendarUrl)
|
|
||||||
|
|
||||||
if (!calendar) {
|
|
||||||
return {
|
|
||||||
response: new Response(null, { status: 404 }),
|
|
||||||
ical: '',
|
|
||||||
} as CalendarResponse
|
|
||||||
}
|
|
||||||
|
|
||||||
const calendarObject: IcsCalendar = {
|
|
||||||
// INFO - CJ - 2025-07-03 - prodId is a FPI (https://en.wikipedia.org/wiki/Formal_Public_Identifier)
|
|
||||||
// '+//IDN algoo.fr//NONSGML Open Calendar v0.9//EN' would also be possible
|
|
||||||
prodId: '-//algoo.fr//NONSGML Open Calendar v0.9//EN',
|
|
||||||
version: '2.0',
|
|
||||||
events: [event],
|
|
||||||
}
|
|
||||||
const response = await createCalendarObject(calendar, calendarObject)
|
|
||||||
return response
|
|
||||||
}
|
|
||||||
|
|
||||||
// FIXME - CJ - 2025/06/03 - changing an object of calendar is not supported;
|
|
||||||
public updateEvent = async ({ event }: CalendarEvent): Promise<CalendarResponse> => {
|
|
||||||
const calendarObject = this.getCalendarObject(event)
|
|
||||||
|
|
||||||
if (!calendarObject) {
|
|
||||||
return {
|
|
||||||
response: new Response(null, { status: 404 }),
|
|
||||||
ical: '',
|
|
||||||
} as CalendarResponse
|
|
||||||
}
|
|
||||||
const calendar = this.getCalendarByUrl(calendarObject.calendarUrl)!
|
|
||||||
|
|
||||||
// FIXME - CJ - 2025-07-03 - Doing a deep copy probably be a better idea and avoid further issues
|
|
||||||
const oldEvents = calendarObject.data.events ? [...calendarObject.data.events] : []
|
|
||||||
|
|
||||||
const index = calendarObject.data.events!.findIndex(e => isSameEvent(e, event))
|
|
||||||
|
|
||||||
// NOTE - CJ - 2025-07-03 - When an recurring event instance is modified for the 1st time,
|
|
||||||
// it's not present in the `events` list and needs to be added
|
|
||||||
if (event.recurrenceId && index === -1) {
|
|
||||||
calendarObject.data.events!.push(event)
|
|
||||||
} else {
|
|
||||||
event.sequence = (event.sequence ?? 0) + 1
|
|
||||||
calendarObject.data.events![index] = event
|
|
||||||
}
|
|
||||||
|
|
||||||
if (event.recurrenceRule) {
|
|
||||||
// INFO - CJ - 2025-07-03 - `recurrenceId` of modified events needs to be synced with `start` of the root event
|
|
||||||
calendarObject.data.events = calendarObject.data.events!.map(element => {
|
|
||||||
if (element === event || !isRRuleSourceEvent(element, event)) return element
|
|
||||||
|
|
||||||
const recurrenceOffset = element.recurrenceId!.value.date.getTime() - oldEvents[index].start.date.getTime()
|
|
||||||
|
|
||||||
return {
|
|
||||||
...element,
|
|
||||||
recurrenceId: { value: offsetDate(event.start, recurrenceOffset) },
|
|
||||||
} as IcsEvent
|
|
||||||
})
|
|
||||||
// INFO - CJ - 2025-07-03 - `exceptionDates` needs to be synced with `start`
|
|
||||||
event.exceptionDates = event.exceptionDates?.map(value => {
|
|
||||||
const recurrenceOffset = value.date.getTime() - oldEvents[index].start.date.getTime()
|
|
||||||
return offsetDate(event.start, recurrenceOffset)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const {response, ical } = await updateCalendarObject(calendar, calendarObject)
|
|
||||||
if (!response.ok) calendarObject.data.events = oldEvents
|
|
||||||
return {
|
|
||||||
response,
|
|
||||||
ical: event.recurrenceId
|
|
||||||
? getEventObjectString({...calendarObject!.data, events: [event]})
|
|
||||||
: ical,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
public deleteEvent = async ({ event }: CalendarEvent): Promise<CalendarResponse> => {
|
|
||||||
const calendarObject = this.getCalendarObject(event)
|
|
||||||
|
|
||||||
if (!calendarObject) {
|
|
||||||
return {
|
|
||||||
response: new Response(null, { status: 404 }),
|
|
||||||
ical: '',
|
|
||||||
} as CalendarResponse
|
|
||||||
}
|
|
||||||
const calendar = this.getCalendarByUrl(calendarObject.calendarUrl)!
|
|
||||||
|
|
||||||
// FIXME - CJ - 2025-07-03 - Doing a deep copy probably be a better idea and avoid further issues
|
|
||||||
const oldEvents = calendarObject.data.events ? [...calendarObject.data.events] : undefined
|
|
||||||
// NOTE - CJ - 2025-07-18 - The ical we need when deleting an event is the one before deletion
|
|
||||||
const ical = event.recurrenceId
|
|
||||||
? getEventObjectString({...calendarObject!.data, events: [event]})
|
|
||||||
: getEventObjectString(calendarObject!.data)
|
|
||||||
|
|
||||||
// NOTE - CJ - 2025-07-03 - When removing a recurring event instance, add it to exceptionDates
|
|
||||||
if (event.recurrenceId) {
|
|
||||||
const rruleEvent = calendarObject.data.events!.find(e => isRRuleSourceEvent(event, e))!
|
|
||||||
rruleEvent.exceptionDates ??= []
|
|
||||||
rruleEvent.exceptionDates?.push(event.recurrenceId.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
const index = calendarObject.data.events!.findIndex(e => isSameEvent(e, event))
|
|
||||||
|
|
||||||
if (index !== -1) {
|
|
||||||
event.sequence = (event.sequence ?? 0) + 1
|
|
||||||
calendarObject.data.events!.splice(index, 1)
|
|
||||||
}
|
|
||||||
if (event.recurrenceRule) {
|
|
||||||
calendarObject.data.events = calendarObject.data.events!.filter(e => !isRRuleSourceEvent(e, event))
|
|
||||||
}
|
|
||||||
|
|
||||||
const action = calendarObject.data.events!.length === 0 ? deleteCalendarObject : updateCalendarObject
|
|
||||||
const { response } = await action(calendar, calendarObject)
|
|
||||||
|
|
||||||
if (!response.ok) calendarObject.data.events = oldEvents
|
|
||||||
return { response, ical }
|
|
||||||
}
|
|
||||||
|
|
||||||
public loadAddressBooks = async (sources: (ServerSource | AddressBookSource | VCardProvider)[]) => {
|
|
||||||
this._vCardProviders = sources.filter(s => isVCardProvider(s))
|
|
||||||
const davSources = sources.filter(s => !isVCardProvider(s)) as (ServerSource | AddressBookSource)[]
|
|
||||||
|
|
||||||
const addressBooksPerSources = await Promise.all(davSources.map(async source => {
|
|
||||||
try {
|
|
||||||
return await fetchAddressBooks(source)
|
|
||||||
} catch (error) {
|
|
||||||
const url = isServerSource(source) ? source.serverUrl : source.addressBookUrl
|
|
||||||
console.error(`Could not fetch address books from ${url}. ${error}`)
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
}))
|
|
||||||
this._addressBooks = addressBooksPerSources.flat()
|
|
||||||
}
|
|
||||||
|
|
||||||
public fetchAndLoadVCards = async (): Promise<AddressBookVCard[]> => {
|
|
||||||
const vCards = await Promise.all(
|
|
||||||
this._addressBooks.map(async book => {
|
|
||||||
try {
|
|
||||||
return await fetchAddressBookObjects(book)
|
|
||||||
} catch (error) {
|
|
||||||
console.error(`Could not fetch vcards objects from ${book.url}. ${error}`)
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
this._addressBookObjects = vCards.flat()
|
|
||||||
this._providedVCards = (await Promise.all(this._vCardProviders.flatMap(p => p.fetchContacts()))).flat()
|
|
||||||
return this.getAddressBookVCards()
|
|
||||||
}
|
|
||||||
|
|
||||||
public getAddressBookVCards = (): AddressBookVCard[] => {
|
|
||||||
return [
|
|
||||||
...this.getAddressBookVCardsFromObjects(this._addressBookObjects),
|
|
||||||
...this.getAddressBookVCardsFromProvidedContacts(this._providedVCards),
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
private getAddressBookVCardsFromObjects = (addressBookObjects: AddressBookObject[]): AddressBookVCard[] => {
|
|
||||||
// NOTE - CJ - 2025-07-16 - radicale does not accepts vcf files with more than one vcard component
|
|
||||||
return addressBookObjects.map(ao => ({ vCard: new VCardComponent(ao.data), addressBookUrl: ao.addressBookUrl }))
|
|
||||||
}
|
|
||||||
private getAddressBookVCardsFromProvidedContacts = (vCards: VCard[]): AddressBookVCard[] => {
|
|
||||||
return vCards.map(c => ({addressBookUrl: undefined, vCard: c}))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
.open-calendar__overlay {
|
|
||||||
overflow: auto;
|
|
||||||
position: fixed;
|
|
||||||
width: max-content;
|
|
||||||
z-index : 9999;
|
|
||||||
box-shadow : 0 2px 8px rgba(0,0,0,0.2);
|
|
||||||
}
|
|
||||||
@@ -1,535 +0,0 @@
|
|||||||
import { createCalendar as createEventCalendar,
|
|
||||||
DayGrid,
|
|
||||||
TimeGrid,
|
|
||||||
List,
|
|
||||||
Interaction,
|
|
||||||
destroyCalendar as destroyEventCalendar,
|
|
||||||
} from '@event-calendar/core'
|
|
||||||
import type { Calendar as EventCalendar } from '@event-calendar/core'
|
|
||||||
import '@event-calendar/core/index.css'
|
|
||||||
import {
|
|
||||||
getEventEnd,
|
|
||||||
type IcsEvent,
|
|
||||||
type IcsAttendee,
|
|
||||||
type IcsAttendeePartStatusType,
|
|
||||||
type IcsDateObject,
|
|
||||||
} from 'ts-ics'
|
|
||||||
import { EventEditPopup } from '../eventeditpopup/eventEditPopup'
|
|
||||||
import { hasCalendarHandlers, hasEventHandlers } from '../helpers/types-helper'
|
|
||||||
import { isEventAllDay, offsetDate } from '../helpers/ics-helper'
|
|
||||||
import './calendarElement.css'
|
|
||||||
import { CalendarSelectDropdown } from '../calendarselectdropdown/calendarSelectDropdown'
|
|
||||||
import { icon, library } from '@fortawesome/fontawesome-svg-core'
|
|
||||||
import { faRefresh } from '@fortawesome/free-solid-svg-icons'
|
|
||||||
import { CalendarClient } from '../calendarClient'
|
|
||||||
import { getTranslations } from '../translations'
|
|
||||||
import { EventBody } from '../eventBody/eventBody'
|
|
||||||
import { TIME_MINUTE, TIME_DAY } from '../constants'
|
|
||||||
import type { AddressBookSource,
|
|
||||||
BodyHandlers,
|
|
||||||
CalendarOptions,
|
|
||||||
CalendarSource,
|
|
||||||
VCardProvider,
|
|
||||||
DefaultComponentsOptions,
|
|
||||||
DomEvent,
|
|
||||||
EventBodyInfo,
|
|
||||||
EventChangeHandlers,
|
|
||||||
EventEditHandlers,
|
|
||||||
SelectCalendarHandlers,
|
|
||||||
SelectedCalendar,
|
|
||||||
ServerSource,
|
|
||||||
View,
|
|
||||||
} from '../types/options'
|
|
||||||
import type { CalendarEvent, EventUid } from '../types/calendar'
|
|
||||||
import type { Contact } from '../types/addressbook'
|
|
||||||
|
|
||||||
library.add(faRefresh)
|
|
||||||
|
|
||||||
const THIRTY_MINUTE = 30 * 60 * 1000
|
|
||||||
|
|
||||||
// HACK - CJ - 2025-07-03 - When an event is the whole day, the date returned by caldav is in UTC (20250627)
|
|
||||||
// but since we display the local date, it's interpreted in our timezone (20250627T000200)
|
|
||||||
// and for all day events, EC round up to the nearest day (20250628)
|
|
||||||
// In the end the event is displayed for one extra day
|
|
||||||
// Those functions correct this by "un-applying" the timezone offset
|
|
||||||
function dateToECDate(date: Date, allDay: boolean) {
|
|
||||||
if (!allDay) return date
|
|
||||||
return new Date(date.getTime() + date.getTimezoneOffset() * TIME_MINUTE)
|
|
||||||
}
|
|
||||||
function ecDateToDate(date: Date, allDay: boolean) {
|
|
||||||
if (!allDay) return date
|
|
||||||
return new Date(date.getTime() - date.getTimezoneOffset() * TIME_MINUTE)
|
|
||||||
}
|
|
||||||
|
|
||||||
export class CalendarElement {
|
|
||||||
private _client: CalendarClient
|
|
||||||
private _selectedCalendars: Set<string>
|
|
||||||
|
|
||||||
private _target: Element | null = null
|
|
||||||
private _calendar: EventCalendar | null = null
|
|
||||||
private _eventBody: EventBody | null = null
|
|
||||||
private _eventEdit: EventEditPopup | null = null
|
|
||||||
private _calendarSelect: CalendarSelectDropdown | null = null
|
|
||||||
|
|
||||||
private _calendarSelectHandlers?: SelectCalendarHandlers
|
|
||||||
private _eventEditHandlers?: EventEditHandlers
|
|
||||||
private _eventChangeHandlers?: EventChangeHandlers
|
|
||||||
private _bodyHandlers?: BodyHandlers
|
|
||||||
private _userContact?: Contact
|
|
||||||
|
|
||||||
public constructor() {
|
|
||||||
this._client = new CalendarClient()
|
|
||||||
this._selectedCalendars = new Set()
|
|
||||||
}
|
|
||||||
|
|
||||||
public create = async (
|
|
||||||
calendarSources: (ServerSource | CalendarSource)[],
|
|
||||||
addressBookSources: (ServerSource | AddressBookSource | VCardProvider)[],
|
|
||||||
target: Element,
|
|
||||||
options?: CalendarOptions,
|
|
||||||
) => {
|
|
||||||
if (this._calendar) return
|
|
||||||
await Promise.all([
|
|
||||||
this._client.loadCalendars(calendarSources),
|
|
||||||
this._client.loadAddressBooks(addressBookSources),
|
|
||||||
])
|
|
||||||
this._selectedCalendars = new Set(this._client.getCalendars().map(c => c.url))
|
|
||||||
|
|
||||||
this._eventEditHandlers = options && hasEventHandlers(options)
|
|
||||||
? {
|
|
||||||
onCreateEvent: options.onCreateEvent,
|
|
||||||
onSelectEvent: options.onSelectEvent,
|
|
||||||
onMoveResizeEvent: options.onMoveResizeEvent,
|
|
||||||
onDeleteEvent: options.onDeleteEvent,
|
|
||||||
}
|
|
||||||
: this.createDefaultEventEdit(target, options ?? {})
|
|
||||||
|
|
||||||
this._calendarSelectHandlers = options && hasCalendarHandlers(options)
|
|
||||||
? {
|
|
||||||
onClickSelectCalendars: options.onClickSelectCalendars,
|
|
||||||
}
|
|
||||||
: this.createDefaultCalendarSelectElement()
|
|
||||||
|
|
||||||
this._eventChangeHandlers = {
|
|
||||||
onEventCreated: options?.onEventCreated,
|
|
||||||
onEventUpdated: options?.onEventUpdated,
|
|
||||||
onEventDeleted: options?.onEventDeleted,
|
|
||||||
}
|
|
||||||
|
|
||||||
this.createCalendar(target, options)
|
|
||||||
|
|
||||||
this._bodyHandlers = {
|
|
||||||
getEventBody: options?.getEventBody ?? this.createDefaultEventBody(options ?? {}),
|
|
||||||
}
|
|
||||||
|
|
||||||
this._userContact = options?.userContact
|
|
||||||
}
|
|
||||||
|
|
||||||
public destroy = () => {
|
|
||||||
this.destroyCalendar()
|
|
||||||
this.destroyDefaultEventEdit()
|
|
||||||
this.destroyDefaultCalendarSelectElement()
|
|
||||||
this.destroyDefaultEventBody()
|
|
||||||
}
|
|
||||||
|
|
||||||
private createCalendar = (target: Element, options?: CalendarOptions) => {
|
|
||||||
if (this._calendar) return
|
|
||||||
|
|
||||||
target.classList.add('open-calendar')
|
|
||||||
this._target = target
|
|
||||||
this._calendar = createEventCalendar(
|
|
||||||
target,
|
|
||||||
[DayGrid, TimeGrid, List, Interaction],
|
|
||||||
{
|
|
||||||
date: options?.date,
|
|
||||||
view: options?.view ?? 'timeGridWeek',
|
|
||||||
customButtons: {
|
|
||||||
refresh: {
|
|
||||||
text: { domNodes: Array.from(icon({ prefix: 'fas', iconName: 'refresh' }).node) },
|
|
||||||
click: this.refreshEvents,
|
|
||||||
},
|
|
||||||
calendars: {
|
|
||||||
text: getTranslations().calendarElement.calendars,
|
|
||||||
click: this.onClickCalendars,
|
|
||||||
},
|
|
||||||
newEvent: {
|
|
||||||
text: getTranslations().calendarElement.newEvent,
|
|
||||||
click: this.onClickNewEvent,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
slotEventOverlap: false,
|
|
||||||
headerToolbar: {
|
|
||||||
start: 'calendars,refresh newEvent prev,today,next',
|
|
||||||
center: 'title',
|
|
||||||
end: (options?.views ?? ['timeGridDay', 'timeGridWeek', 'dayGridMonth', 'listWeek']).join(','),
|
|
||||||
},
|
|
||||||
buttonText: getTranslations().calendarElement,
|
|
||||||
allDayContent: getTranslations().calendarElement.allDay,
|
|
||||||
dayMaxEvents: true,
|
|
||||||
nowIndicator: true,
|
|
||||||
|
|
||||||
firstDay: 1,
|
|
||||||
|
|
||||||
// INFO - CJ - 2025-07-03
|
|
||||||
// This member is not present in "@types/event-calendar__core"
|
|
||||||
eventResizableFromStart: options?.editable ?? true,
|
|
||||||
selectable: options?.editable ?? true,
|
|
||||||
editable: options?.editable ?? true,
|
|
||||||
|
|
||||||
eventContent: this.getEventContent,
|
|
||||||
eventClick: this.onEventClicked,
|
|
||||||
select: this.onSelectTimeRange,
|
|
||||||
eventResize: this.onChangeEventDates,
|
|
||||||
eventDrop: this.onChangeEventDates,
|
|
||||||
eventSources: [{ events: this.fetchAndLoadEvents }],
|
|
||||||
eventFilter: this.isEventVisible,
|
|
||||||
dateClick: this.onSelectDate,
|
|
||||||
},
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
private destroyCalendar = () => {
|
|
||||||
if (this._calendar) {
|
|
||||||
this._target!.classList.remove('open-calendar')
|
|
||||||
destroyEventCalendar(this._calendar)
|
|
||||||
}
|
|
||||||
this._calendar = null
|
|
||||||
this._target = null
|
|
||||||
}
|
|
||||||
|
|
||||||
private createDefaultEventEdit = (target: Node, options: DefaultComponentsOptions): EventEditHandlers => {
|
|
||||||
this._eventEdit ??= new EventEditPopup(target, options)
|
|
||||||
return {
|
|
||||||
onCreateEvent: this._eventEdit.onCreate,
|
|
||||||
onSelectEvent: this._eventEdit.onSelect,
|
|
||||||
onMoveResizeEvent: this._eventEdit.onMoveResize,
|
|
||||||
onDeleteEvent: this._eventEdit.onDelete,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private destroyDefaultEventEdit = () => {
|
|
||||||
this._eventEdit?.destroy()
|
|
||||||
this._eventEdit = null
|
|
||||||
}
|
|
||||||
|
|
||||||
private createDefaultCalendarSelectElement = (): SelectCalendarHandlers => {
|
|
||||||
this._calendarSelect ??= new CalendarSelectDropdown()
|
|
||||||
return {
|
|
||||||
onClickSelectCalendars: this._calendarSelect.onSelect,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private destroyDefaultCalendarSelectElement = () => {
|
|
||||||
this._calendarSelect?.destroy()
|
|
||||||
this._calendarSelect = null
|
|
||||||
}
|
|
||||||
|
|
||||||
private createDefaultEventBody = (options: DefaultComponentsOptions): (info: EventBodyInfo) => Node[] => {
|
|
||||||
this._eventBody ??= new EventBody(options)
|
|
||||||
return this._eventBody.getBody
|
|
||||||
}
|
|
||||||
|
|
||||||
private destroyDefaultEventBody = () => {
|
|
||||||
this._eventBody = null
|
|
||||||
}
|
|
||||||
|
|
||||||
private fetchAndLoadEvents = async (info: EventCalendar.FetchInfo): Promise<EventCalendar.EventInput[]> => {
|
|
||||||
const [calendarEvents] = await Promise.all([
|
|
||||||
this._client.fetchAndLoadEvents(info.startStr, info.endStr),
|
|
||||||
this._client.fetchAndLoadVCards(), // INFO - PG - 2025-09-24 - no return value
|
|
||||||
])
|
|
||||||
|
|
||||||
return calendarEvents.map(({ event, calendarUrl }) => {
|
|
||||||
const allDay = isEventAllDay(event)
|
|
||||||
return {
|
|
||||||
title: event.summary,
|
|
||||||
allDay: allDay,
|
|
||||||
start: dateToECDate(event.start.date, allDay),
|
|
||||||
end: dateToECDate(getEventEnd(event), allDay),
|
|
||||||
backgroundColor: this._client.getCalendarByUrl(calendarUrl)!.calendarColor,
|
|
||||||
extendedProps: { uid: event.uid, recurrenceId: event.recurrenceId } as EventUid,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
private isEventVisible = (info: EventCalendar.EventFilterInfo) => {
|
|
||||||
const eventData = this._client.getCalendarEvent(info.event.extendedProps as EventUid)
|
|
||||||
if (!eventData) return false
|
|
||||||
return this._selectedCalendars.has(eventData.calendarUrl)
|
|
||||||
}
|
|
||||||
|
|
||||||
private onClickCalendars = (jsEvent: MouseEvent) => {
|
|
||||||
this._calendarSelectHandlers!.onClickSelectCalendars({
|
|
||||||
jsEvent,
|
|
||||||
selectedCalendars: this._selectedCalendars,
|
|
||||||
calendars: this._client.getCalendars(),
|
|
||||||
handleSelect: this.setCalendarVisibility,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
private getEventContent = ({ event, view }: EventCalendar.EventContentInfo): EventCalendar.Content => {
|
|
||||||
const calendarEvent = this._client.getCalendarEvent(event.extendedProps as EventUid)
|
|
||||||
// NOTE - CJ - 2025-11-07 - calendarEvent can be undefined when creating events
|
|
||||||
if (calendarEvent === undefined) return {html: ''}
|
|
||||||
const calendar = this._client.getCalendarByUrl(calendarEvent.calendarUrl)!
|
|
||||||
const events = this._bodyHandlers!.getEventBody({
|
|
||||||
event: calendarEvent.event,
|
|
||||||
vCards: this._client.getAddressBookVCards(),
|
|
||||||
calendar,
|
|
||||||
view: view.type as View,
|
|
||||||
userContact: this._userContact,
|
|
||||||
})
|
|
||||||
events.forEach(n => {
|
|
||||||
if (!(n instanceof HTMLElement)) return
|
|
||||||
const ev = calendarEvent.event
|
|
||||||
const isShort = Boolean(
|
|
||||||
ev.start && ev.end && ev.start.date && ev.end.date &&
|
|
||||||
(ev.end.date.getTime() - ev.start.date.getTime()) <= THIRTY_MINUTE)
|
|
||||||
if (isShort) n.classList.add('open-calendar__event-body--small')
|
|
||||||
const ro = new ResizeObserver(() => {
|
|
||||||
if (n.scrollHeight > n.clientHeight) n.classList.add('open-calendar__event-body--small')
|
|
||||||
else if (!isShort) n.classList.remove('open-calendar__event-body--small')
|
|
||||||
})
|
|
||||||
ro.observe(n)
|
|
||||||
n.addEventListener('participation-icon-click', async (e: Event) => {
|
|
||||||
const custom = e as CustomEvent
|
|
||||||
const email: string | undefined = custom.detail?.email
|
|
||||||
if (!email || email !== this._userContact?.email) return
|
|
||||||
const ev = this._client.getCalendarEvent(event.extendedProps as EventUid)
|
|
||||||
if (!ev) return
|
|
||||||
const oldEvent = ev.event
|
|
||||||
const newEvent: IcsEvent = {
|
|
||||||
...oldEvent,
|
|
||||||
attendees: oldEvent.attendees
|
|
||||||
? oldEvent.attendees.map(a => {
|
|
||||||
if (a.email !== email) return a
|
|
||||||
const current = (a.partstat ?? 'NEEDS-ACTION') as IcsAttendeePartStatusType
|
|
||||||
const next: IcsAttendeePartStatusType =
|
|
||||||
current === 'NEEDS-ACTION' ? 'ACCEPTED'
|
|
||||||
: current === 'ACCEPTED' ? 'DECLINED'
|
|
||||||
: 'NEEDS-ACTION'
|
|
||||||
return { ...a, partstat: next } as IcsAttendee
|
|
||||||
})
|
|
||||||
: oldEvent.attendees,
|
|
||||||
} as IcsEvent
|
|
||||||
await this.handleUpdateEvent({ calendarUrl: ev.calendarUrl, event: newEvent })
|
|
||||||
})
|
|
||||||
n.addEventListener('event-edit', (jsEvent: Event) => {
|
|
||||||
const ev = this._client.getCalendarEvent(event.extendedProps as EventUid)
|
|
||||||
if (!ev) return
|
|
||||||
this._eventEditHandlers!.onSelectEvent({
|
|
||||||
jsEvent,
|
|
||||||
userContact: this._userContact,
|
|
||||||
calendars: this._client.getCalendars(),
|
|
||||||
vCards: this._client.getAddressBookVCards(),
|
|
||||||
...ev,
|
|
||||||
handleUpdate: this.handleUpdateEvent,
|
|
||||||
handleDelete: this.handleDeleteEvent,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
return { domNodes: events }
|
|
||||||
}
|
|
||||||
|
|
||||||
private onClickNewEvent = (jsEvent: MouseEvent) => this.createEvent(jsEvent)
|
|
||||||
|
|
||||||
private onSelectDate = ({ allDay, date, jsEvent}: EventCalendar.DateClickInfo) => {
|
|
||||||
this.createEvent(jsEvent, {
|
|
||||||
start: {
|
|
||||||
date: ecDateToDate(date, allDay),
|
|
||||||
type: allDay ? 'DATE' : 'DATE-TIME',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
private onSelectTimeRange = ({ allDay, start, end, jsEvent}: EventCalendar.SelectInfo) => {
|
|
||||||
const type = allDay ? 'DATE' : 'DATE-TIME'
|
|
||||||
this.createEvent(jsEvent, {
|
|
||||||
start: {
|
|
||||||
date: ecDateToDate(start, allDay),
|
|
||||||
type,
|
|
||||||
},
|
|
||||||
end: {
|
|
||||||
date: ecDateToDate(end, allDay),
|
|
||||||
type,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
private createEvent = (jsEvent: DomEvent, event?: Partial<IcsEvent>) => {
|
|
||||||
const start = event?.start ?? {
|
|
||||||
date: new Date(),
|
|
||||||
type: 'DATE-TIME',
|
|
||||||
} as IcsDateObject
|
|
||||||
|
|
||||||
const newEvent = {
|
|
||||||
summary: '',
|
|
||||||
uid: '',
|
|
||||||
stamp: { date: new Date() },
|
|
||||||
start,
|
|
||||||
end: offsetDate(start, start.type == 'DATE' ? (1 * TIME_DAY) : (30 * TIME_MINUTE)),
|
|
||||||
...event,
|
|
||||||
|
|
||||||
// NOTE - CJ - 2025-07-03 - Since we specify end, duration should be undefined
|
|
||||||
duration: undefined,
|
|
||||||
}
|
|
||||||
this._eventEditHandlers!.onCreateEvent({
|
|
||||||
jsEvent,
|
|
||||||
userContact: this._userContact,
|
|
||||||
calendars: this._client.getCalendars(),
|
|
||||||
event: newEvent,
|
|
||||||
vCards: this._client.getAddressBookVCards(),
|
|
||||||
handleCreate: this.handleCreateEvent,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
private onChangeEventDates = async (info: EventCalendar.EventDropInfo | EventCalendar.EventResizeInfo) => {
|
|
||||||
const uid = info.oldEvent.extendedProps as EventUid
|
|
||||||
const calendarEvent = this._client.getCalendarEvent(uid)
|
|
||||||
if (!calendarEvent) return
|
|
||||||
|
|
||||||
info.revert()
|
|
||||||
this._eventEditHandlers!.onMoveResizeEvent({
|
|
||||||
userContact: this._userContact,
|
|
||||||
jsEvent: info.jsEvent,
|
|
||||||
...calendarEvent,
|
|
||||||
start: info.event.start,
|
|
||||||
end: info.event.end,
|
|
||||||
handleUpdate: this.handleUpdateEvent,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
private onEventClicked = ({ event, jsEvent}: EventCalendar.EventClickInfo) => {
|
|
||||||
const mouse = jsEvent as MouseEvent
|
|
||||||
const targetEl = jsEvent.target as HTMLElement
|
|
||||||
// Ignore clicks on status icon (handled separately)
|
|
||||||
if (targetEl?.closest('.open-calendar__event-body__status-clickable')) return
|
|
||||||
const container = targetEl?.closest('.ec-event') as HTMLElement | null
|
|
||||||
const bodyEl = container?.querySelector('.open-calendar__event-body') as HTMLElement | null
|
|
||||||
const isSmall = !!container?.querySelector('.open-calendar__event-body--small')
|
|
||||||
// For small events: first click shows overlay, click inside overlay opens edit
|
|
||||||
if (isSmall) {
|
|
||||||
const rect = container!.getBoundingClientRect()
|
|
||||||
const overlay = document.createElement('div')
|
|
||||||
overlay.className = 'open-calendar__overlay'
|
|
||||||
overlay.style.left = `${rect.left}px`
|
|
||||||
overlay.style.top = `${rect.top}px`
|
|
||||||
overlay.style.minWidth = `${rect.width}px`
|
|
||||||
const cs = getComputedStyle(container!)
|
|
||||||
overlay.style.borderRadius = cs.borderRadius
|
|
||||||
overlay.style.backgroundColor = cs.backgroundColor
|
|
||||||
overlay.style.color = cs.color
|
|
||||||
overlay.style.padding = cs.padding
|
|
||||||
// Clone body for full content
|
|
||||||
const clone = bodyEl!.cloneNode(true) as HTMLElement
|
|
||||||
clone.classList.remove('open-calendar__event-body--small')
|
|
||||||
clone.classList.add('open-calendar__event-body--expanded')
|
|
||||||
overlay.appendChild(clone)
|
|
||||||
document.body.appendChild(overlay)
|
|
||||||
// Reposition if overflowing viewport
|
|
||||||
const orect = overlay.getBoundingClientRect()
|
|
||||||
const newLeft = Math.max(8, Math.min(rect.left, window.innerWidth - orect.width - 8))
|
|
||||||
const newTop = Math.max(8, Math.min(rect.top, window.innerHeight - orect.height - 8))
|
|
||||||
overlay.style.left = `${newLeft}px`
|
|
||||||
overlay.style.top = `${newTop}px`
|
|
||||||
const onDocPointer = (ev: Event) => {
|
|
||||||
const target = ev.target as Node
|
|
||||||
if (!overlay.contains(target)) {
|
|
||||||
removeOverlay()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const removeOverlay = () => {
|
|
||||||
document.removeEventListener('click', onDocPointer)
|
|
||||||
document.removeEventListener('touchstart', onDocPointer)
|
|
||||||
overlay.remove()
|
|
||||||
}
|
|
||||||
document.addEventListener('click', onDocPointer, true)
|
|
||||||
document.addEventListener('touchstart', onDocPointer, true)
|
|
||||||
overlay.addEventListener('mouseleave', removeOverlay)
|
|
||||||
// Clicking inside overlay opens edit
|
|
||||||
overlay.addEventListener('click', () => {
|
|
||||||
removeOverlay()
|
|
||||||
const uid = event.extendedProps as EventUid
|
|
||||||
const calendarEvent = this._client.getCalendarEvent(uid)
|
|
||||||
if (!calendarEvent) return
|
|
||||||
this._eventEditHandlers!.onSelectEvent({
|
|
||||||
jsEvent,
|
|
||||||
userContact: this._userContact,
|
|
||||||
calendars: this._client.getCalendars(),
|
|
||||||
vCards: this._client.getAddressBookVCards(),
|
|
||||||
...calendarEvent,
|
|
||||||
handleUpdate: this.handleUpdateEvent,
|
|
||||||
handleDelete: this.handleDeleteEvent,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// For non-small: open edit on single click
|
|
||||||
if (mouse && mouse.detail >= 1) {
|
|
||||||
const uid = event.extendedProps as EventUid
|
|
||||||
const calendarEvent = this._client.getCalendarEvent(uid)
|
|
||||||
if (!calendarEvent) return
|
|
||||||
this._eventEditHandlers!.onSelectEvent({
|
|
||||||
jsEvent,
|
|
||||||
userContact: this._userContact,
|
|
||||||
calendars: this._client.getCalendars(),
|
|
||||||
vCards: this._client.getAddressBookVCards(),
|
|
||||||
...calendarEvent,
|
|
||||||
handleUpdate: this.handleUpdateEvent,
|
|
||||||
handleDelete: this.handleDeleteEvent,
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const uid = event.extendedProps as EventUid
|
|
||||||
const calendarEvent = this._client.getCalendarEvent(uid)
|
|
||||||
if (!calendarEvent) return
|
|
||||||
this._eventEditHandlers!.onSelectEvent({
|
|
||||||
jsEvent,
|
|
||||||
userContact: this._userContact,
|
|
||||||
calendars: this._client.getCalendars(),
|
|
||||||
vCards: this._client.getAddressBookVCards(),
|
|
||||||
...calendarEvent,
|
|
||||||
handleUpdate: this.handleUpdateEvent,
|
|
||||||
handleDelete: this.handleDeleteEvent,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
private refreshEvents = () => {
|
|
||||||
this._calendar!.refetchEvents()
|
|
||||||
}
|
|
||||||
|
|
||||||
private setCalendarVisibility = ({url: calendarUrl, selected}: SelectedCalendar) => {
|
|
||||||
const calendar = this._client.getCalendarByUrl(calendarUrl)
|
|
||||||
if (!calendar) return
|
|
||||||
if (selected) this._selectedCalendars.add(calendarUrl)
|
|
||||||
else this._selectedCalendars.delete(calendarUrl)
|
|
||||||
this.refreshEvents()
|
|
||||||
}
|
|
||||||
|
|
||||||
private handleCreateEvent = async (calendarEvent: CalendarEvent) => {
|
|
||||||
const { response, ical } = await this._client.createEvent(calendarEvent)
|
|
||||||
if (response.ok) {
|
|
||||||
this._eventChangeHandlers!.onEventCreated?.({...calendarEvent, ical})
|
|
||||||
this.refreshEvents()
|
|
||||||
}
|
|
||||||
return response
|
|
||||||
}
|
|
||||||
|
|
||||||
private handleUpdateEvent = async (calendarEvent: CalendarEvent) => {
|
|
||||||
const { response, ical } = await this._client.updateEvent(calendarEvent)
|
|
||||||
if (response.ok) {
|
|
||||||
this._eventChangeHandlers!.onEventUpdated?.({...calendarEvent, ical})
|
|
||||||
this.refreshEvents()
|
|
||||||
}
|
|
||||||
return response
|
|
||||||
}
|
|
||||||
|
|
||||||
private handleDeleteEvent = async (calendarEvent: CalendarEvent) => {
|
|
||||||
const { response, ical } = await this._client.deleteEvent(calendarEvent)
|
|
||||||
if (response.ok) {
|
|
||||||
this._eventChangeHandlers!.onEventDeleted?.({...calendarEvent, ical})
|
|
||||||
this.refreshEvents()
|
|
||||||
}
|
|
||||||
return response
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,39 +0,0 @@
|
|||||||
.open-calendar__calendar-select__container {
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
width: max-content;
|
|
||||||
z-index: 1500;
|
|
||||||
|
|
||||||
background-color: white;
|
|
||||||
/* CJ - 2025-07-03 - '--ec-button-border-color' is defined by EventCalendar */
|
|
||||||
/* FIXME - CJ - 2025-07-03 - I tried set the rule option 'allowUnknownVariables' to in 'eslint.config.mjs' but this made the config fail*/
|
|
||||||
/* eslint-disable-next-line css/no-invalid-properties */
|
|
||||||
border: 1px solid var(--ec-button-border-color);
|
|
||||||
padding: 0.375rem 0.75rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__calendar-select__label {
|
|
||||||
display: flex;
|
|
||||||
align-items: baseline;
|
|
||||||
gap: 5px
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__calendar-select__color {
|
|
||||||
border-radius: 50%;
|
|
||||||
height: 0.75rem;
|
|
||||||
width: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* HACK - CJ - 2025-07-03 - Added in order to make the `top: 100%` use the heigh of the parent and not of the window */
|
|
||||||
.open-calendar__calendar-select__parent {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* HACK - CJ - 2025-07-03 - Prevents the addition of the popup to affect the style of the button (as it is not the first child anymore */
|
|
||||||
.ec-button-group .ec-calendars:not(:first-child) {
|
|
||||||
margin-left: 0;
|
|
||||||
border-top-left-radius: 0.25rem;
|
|
||||||
border-bottom-left-radius: 0.25rem;
|
|
||||||
}
|
|
||||||
@@ -1,51 +0,0 @@
|
|||||||
import { parseHtml } from '../helpers/dom-helper'
|
|
||||||
import './calendarSelectDropdown.css'
|
|
||||||
import type { SelectCalendarsClickInfo } from '../types/options'
|
|
||||||
|
|
||||||
const html = /* html */`
|
|
||||||
<div class="open-calendar__calendar-select__container open-calendar__form">
|
|
||||||
<div class="open-calendar__form__content" >
|
|
||||||
{{#calendars}}
|
|
||||||
<label class="open-calendar__calendar-select__label" for="open-calendar__calendar-select__{{index}}">
|
|
||||||
<span class="open-calendar__calendar-select__color" style="background-color:{{calendarColor}}"> </span>
|
|
||||||
{{displayName}}
|
|
||||||
</label>
|
|
||||||
<input type="checkbox" id="open-calendar__calendar-select__{{index}}"/>
|
|
||||||
{{/calendars}}
|
|
||||||
</div>
|
|
||||||
</div>`
|
|
||||||
|
|
||||||
export class CalendarSelectDropdown {
|
|
||||||
private _container: HTMLDivElement | null = null
|
|
||||||
|
|
||||||
public constructor() {}
|
|
||||||
public destroy = () => {}
|
|
||||||
|
|
||||||
public onSelect = ({jsEvent, calendars, handleSelect, selectedCalendars }: SelectCalendarsClickInfo) => {
|
|
||||||
const target = jsEvent.target as Element
|
|
||||||
const parent = target.parentElement as Element
|
|
||||||
|
|
||||||
if (this._container) {
|
|
||||||
parent.removeChild(this._container)
|
|
||||||
parent.classList.remove('open-calendar__calendar-select__parent')
|
|
||||||
this._container = null
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this._container = parseHtml<HTMLDivElement>(html, {
|
|
||||||
calendars: calendars.map((calendar, index) => ({ ...calendar, index })),
|
|
||||||
})[0]
|
|
||||||
parent.insertBefore(this._container, target)
|
|
||||||
parent.classList.add('open-calendar__calendar-select__parent')
|
|
||||||
|
|
||||||
const inputs = this._container.querySelectorAll<HTMLInputElement>('input')
|
|
||||||
for (let i = 0; i < inputs.length; i++) {
|
|
||||||
const input = inputs[i]
|
|
||||||
const calendar = calendars[i]
|
|
||||||
input.checked = selectedCalendars.has(calendar.url)
|
|
||||||
input.addEventListener('change', e => handleSelect({
|
|
||||||
url: calendar.url,
|
|
||||||
selected: (e.target as HTMLInputElement).checked,
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
export const TIME_MILLISECOND = 1
|
|
||||||
export const TIME_SECOND = 1000 * TIME_MILLISECOND
|
|
||||||
export const TIME_MINUTE = 60 * TIME_SECOND
|
|
||||||
export const TIME_HOUR = 60 * TIME_MINUTE
|
|
||||||
export const TIME_DAY = 24 * TIME_HOUR
|
|
||||||
|
|
||||||
export const attendeeUserParticipationStatusTypes = ['NEEDS-ACTION', 'ACCEPTED', 'DECLINED', 'TENTATIVE'] as const
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
export const attendeeRoleTypes = [
|
|
||||||
'CHAIR',
|
|
||||||
'REQ-PARTICIPANT',
|
|
||||||
'OPT-PARTICIPANT',
|
|
||||||
'NON-PARTICIPANT',
|
|
||||||
] as const
|
|
||||||
|
|
||||||
export const namedRRules = [
|
|
||||||
'FREQ=DAILY',
|
|
||||||
'FREQ=WEEKLY',
|
|
||||||
'BYDAY=MO,TU,WE,TH,FR;FREQ=DAILY',
|
|
||||||
'INTERVAL=2;FREQ=WEEKLY',
|
|
||||||
'FREQ=MONTHLY',
|
|
||||||
'FREQ=YEARLY',
|
|
||||||
] as const
|
|
||||||
|
|
||||||
export const availableViews = [
|
|
||||||
'timeGridDay',
|
|
||||||
'timeGridWeek',
|
|
||||||
'dayGridMonth',
|
|
||||||
'listDay',
|
|
||||||
'listWeek',
|
|
||||||
'listMonth',
|
|
||||||
'listYear',
|
|
||||||
] as const
|
|
||||||
@@ -1,143 +0,0 @@
|
|||||||
.ec-event {
|
|
||||||
/* NOTE - CJ - 2025-07-03 - Overrides the min heigh of the event to be one line. !important is needed as this is set manually on the element */
|
|
||||||
/* eslint-disable-next-line css/no-important */
|
|
||||||
min-height: 1.5rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__event-body {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
--open-calendar__event-body__gap: 2px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__event-body__time {
|
|
||||||
float: left;
|
|
||||||
display: flex;
|
|
||||||
margin-right: var(--open-calendar__event-body__gap);
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__event-body__icons {
|
|
||||||
float: right;
|
|
||||||
display: flex;
|
|
||||||
gap: var(--open-calendar__event-body__gap);
|
|
||||||
margin-left: var(--open-calendar__event-body__gap);
|
|
||||||
align-items: center;
|
|
||||||
height: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__event-body__organizer {
|
|
||||||
font-weight: bold;
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__event-body__attendee--chair {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__event-body__attendee--req-participant {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__event-body__attendee--non-participant {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__event-body__attendee--accepted {
|
|
||||||
color: green;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__event-body__attendee--declined {
|
|
||||||
color: gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ec-day-grid .open-calendar__event-body__header {
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ec-day-grid :is(.open-calendar__event-body__location) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__event-body__attendees {
|
|
||||||
font-size: 0.8em;
|
|
||||||
margin: 0.75em 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__event-body__attendee-line {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__event-body__attendee-status-icon {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__event-body__attendee-role-icon {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__event-body__attendee-name.organizer,
|
|
||||||
.open-calendar__event-body__attendee-name.required {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__event-body__attendee-name.optional {
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__event-body__attendee-name.non-participant {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__event-body__attendee-line.declined {
|
|
||||||
color: gray;
|
|
||||||
text-decoration: line-through;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__event-body__attendee-status-icon__pending {
|
|
||||||
color: orange;
|
|
||||||
}
|
|
||||||
.open-calendar__event-body__attendee-status-icon__tentative {
|
|
||||||
color: orange;
|
|
||||||
}
|
|
||||||
.open-calendar__event-body__attendee-status-icon__confirmed {
|
|
||||||
color: blue;
|
|
||||||
}
|
|
||||||
.open-calendar__event-body__attendee-status-icon__declined {
|
|
||||||
color: gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__event-body__status-clickable {
|
|
||||||
cursor: pointer;
|
|
||||||
transition: filter 0.2s;
|
|
||||||
}
|
|
||||||
.open-calendar__event-body__status-clickable:hover {
|
|
||||||
filter: brightness(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__event-body--expanded {
|
|
||||||
max-height: none;
|
|
||||||
max-width: none;
|
|
||||||
overflow: visible;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__event-body--small {
|
|
||||||
cursor: zoom-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__event-body__description {
|
|
||||||
margin-top: 0.5em;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
@@ -1,203 +0,0 @@
|
|||||||
import { escapeHtml, parseHtml } from '../helpers/dom-helper'
|
|
||||||
import Autolinker from 'autolinker'
|
|
||||||
import { icon, library } from '@fortawesome/fontawesome-svg-core'
|
|
||||||
import { faRepeat, faBell, faChalkboardUser, faUserGraduate, faUser, faUserSlash, faCircleQuestion, faSquareCheck, faXmark, faLocationDot } from '@fortawesome/free-solid-svg-icons'
|
|
||||||
import { far } from '@fortawesome/free-regular-svg-icons'
|
|
||||||
import './eventBody.css'
|
|
||||||
import { contactToMailbox, isEventAllDay, isSameContact } from '../helpers/ics-helper'
|
|
||||||
import type { IcsAttendee, IcsAttendeePartStatusType, IcsOrganizer } from 'ts-ics'
|
|
||||||
import type { DefaultComponentsOptions, EventBodyInfo, IcsAttendeeRoleType } from '../types/options'
|
|
||||||
import type { AddressBookVCard } from '../types/addressbook'
|
|
||||||
import { getTranslations } from '../translations'
|
|
||||||
|
|
||||||
library.add(
|
|
||||||
faRepeat,
|
|
||||||
faBell,
|
|
||||||
faChalkboardUser,
|
|
||||||
faUserGraduate,
|
|
||||||
faUser,
|
|
||||||
faUserSlash,
|
|
||||||
faCircleQuestion,
|
|
||||||
faSquareCheck,
|
|
||||||
faXmark,
|
|
||||||
far,
|
|
||||||
faLocationDot,
|
|
||||||
)
|
|
||||||
|
|
||||||
const addFaFw = (html: string) => html.replace('class="', 'class="fa-fw ')
|
|
||||||
|
|
||||||
const html = /*html*/`
|
|
||||||
<div class="open-calendar__event-body">
|
|
||||||
<div class="open-calendar__event-body__header">
|
|
||||||
<div class="open-calendar__event-body__time">
|
|
||||||
<b>{{time}}</b>
|
|
||||||
</div>
|
|
||||||
<div class="open-calendar__event-body__icons">
|
|
||||||
{{#icons}}{{&.}}{{/icons}}
|
|
||||||
</div>
|
|
||||||
<b>{{summary}}</b>
|
|
||||||
</div>
|
|
||||||
{{#location}}
|
|
||||||
<!-- NOTE - CJ - 2025-07-07 - location is escaped in the js as we wan to display a link -->
|
|
||||||
<div class="open-calendar__event-body__location">{{&location}}</div>
|
|
||||||
{{/location}}
|
|
||||||
<div class="open-calendar__event-body__attendees">
|
|
||||||
{{#organizer}}
|
|
||||||
<div class="open-calendar__event-body__attendee-line organizer">
|
|
||||||
<span class="open-calendar__event-body__attendee-status-icon__confirmed" title="{{t.participation_confirmed}}">
|
|
||||||
{{&organizerStatusIcon}}
|
|
||||||
</span>
|
|
||||||
<span class="open-calendar__event-body__attendee-role-icon" title="{{t.organizer}}">{{&organizerRoleIcon}}</span>
|
|
||||||
<span class="open-calendar__event-body__attendee-name organizer">{{name}}</span>
|
|
||||||
</div>
|
|
||||||
{{/organizer}}
|
|
||||||
{{#attendees}}
|
|
||||||
<div class="open-calendar__event-body__attendee-line {{declinedClass}}">
|
|
||||||
<span class="open-calendar__event-body__attendee-status-icon__{{statusClass}}" title="{{statusTitle}}">
|
|
||||||
{{&statusIcon}}
|
|
||||||
</span>
|
|
||||||
<span class="open-calendar__event-body__attendee-role-icon" title="{{roleTitle}}">{{&roleIcon}}</span>
|
|
||||||
<span class="open-calendar__event-body__attendee-name {{roleClass}}">{{name}}</span>
|
|
||||||
</div>
|
|
||||||
{{/attendees}}
|
|
||||||
</div>
|
|
||||||
{{#description}}
|
|
||||||
<div class="open-calendar__event-body__description">{{&description}}</div>
|
|
||||||
{{/description}}
|
|
||||||
</div>`
|
|
||||||
|
|
||||||
export class EventBody {
|
|
||||||
|
|
||||||
private _hideVCardEmails?: boolean
|
|
||||||
|
|
||||||
public constructor(options: DefaultComponentsOptions) {
|
|
||||||
this._hideVCardEmails = options.hideVCardEmails
|
|
||||||
}
|
|
||||||
|
|
||||||
public getBody = ({ event, vCards, userContact }: EventBodyInfo) => {
|
|
||||||
const time = event.start.date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
|
|
||||||
const attendees = event.attendees ? event.attendees.map(a => this.mapAttendee(a, vCards, userContact?.email)) : []
|
|
||||||
const organizer = event.organizer ? {
|
|
||||||
mailbox: this.getAttendeeValue(vCards, event.organizer),
|
|
||||||
name: event.organizer.name ?? event.organizer.email,
|
|
||||||
organizerStatusIcon: addFaFw(icon({ prefix: 'fas', iconName: 'square-check' }).html.join('')),
|
|
||||||
organizerRoleIcon: addFaFw(icon({ prefix: 'fas', iconName: 'user-graduate' }).html.join('')),
|
|
||||||
} : undefined
|
|
||||||
|
|
||||||
const events = Array.from(parseHtml(html, {
|
|
||||||
time: isEventAllDay(event) ? undefined : time,
|
|
||||||
summary: event.summary,
|
|
||||||
icons: [
|
|
||||||
event.recurrenceId ? addFaFw(icon({ prefix: 'fas', iconName: 'repeat' }).html.join('')) : undefined,
|
|
||||||
event.alarms ? addFaFw(icon({ prefix: 'fas', iconName: 'bell' }).html.join('')) : undefined,
|
|
||||||
],
|
|
||||||
location: event.location
|
|
||||||
? [
|
|
||||||
addFaFw(icon({ prefix: 'fas', iconName: 'location-dot' }).html.join('')),
|
|
||||||
Autolinker.link(escapeHtml(event.location)),
|
|
||||||
].join(' ')
|
|
||||||
: undefined,
|
|
||||||
description: event.description || undefined,
|
|
||||||
attendees: attendees.map(att => ({
|
|
||||||
...att,
|
|
||||||
statusIcon: att.isCurrentUser
|
|
||||||
? `<span
|
|
||||||
class='open-calendar__event-body__status-clickable'
|
|
||||||
data-email='${att.email}'
|
|
||||||
title='${att.statusTitle}'
|
|
||||||
>
|
|
||||||
${att.statusIcon}
|
|
||||||
</span>`
|
|
||||||
: att.statusIcon,
|
|
||||||
})),
|
|
||||||
organizer,
|
|
||||||
t: getTranslations().eventBody,
|
|
||||||
}))
|
|
||||||
// Add click handler for current user status icon
|
|
||||||
events.forEach(event => {
|
|
||||||
if (!(event instanceof HTMLElement)) return
|
|
||||||
event.querySelectorAll('.open-calendar__event-body__status-clickable').forEach(el => {
|
|
||||||
el.addEventListener('click', (e) => {
|
|
||||||
e.stopPropagation()
|
|
||||||
const email = (el as HTMLElement).getAttribute('data-email')
|
|
||||||
event.dispatchEvent(new CustomEvent('participation-icon-click', {
|
|
||||||
bubbles: true,
|
|
||||||
detail: { email },
|
|
||||||
}))
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
return events
|
|
||||||
}
|
|
||||||
|
|
||||||
public getAttendeeValue(vCards: AddressBookVCard[], attendee: IcsAttendee | IcsOrganizer) {
|
|
||||||
const vCard = vCards.find(c => isSameContact(c.vCard, attendee))?.vCard
|
|
||||||
return (this._hideVCardEmails && vCard?.name) || contactToMailbox(attendee)
|
|
||||||
}
|
|
||||||
|
|
||||||
public mapAttendee = (a: IcsAttendee, vCards: AddressBookVCard[], userEmail?: string) => {
|
|
||||||
const role = ((a.role as IcsAttendeeRoleType) ?? 'NON-PARTICIPANT').toUpperCase()
|
|
||||||
const partstat = ((a.partstat as IcsAttendeePartStatusType) ?? 'NEEDS-ACTION').toUpperCase()
|
|
||||||
const t = getTranslations().eventBody
|
|
||||||
let roleIcon = ''
|
|
||||||
let roleTitle = ''
|
|
||||||
let roleClass = ''
|
|
||||||
if (role === 'CHAIR') {
|
|
||||||
roleIcon = addFaFw(icon({ prefix: 'fas', iconName: 'user-graduate' }).html.join(''))
|
|
||||||
roleTitle = t.organizer
|
|
||||||
roleClass = 'organizer'
|
|
||||||
} else if (role === 'REQ-PARTICIPANT') {
|
|
||||||
roleIcon = addFaFw(icon({ prefix: 'fas', iconName: 'user' }).html.join(''))
|
|
||||||
roleTitle = t.participation_require
|
|
||||||
roleClass = 'required'
|
|
||||||
} else if (role === 'OPT-PARTICIPANT') {
|
|
||||||
roleIcon = addFaFw(icon({ prefix: 'far', iconName: 'user' }).html.join(''))
|
|
||||||
roleTitle = t.participation_optional
|
|
||||||
roleClass = 'optional'
|
|
||||||
} else if (role === 'NON-PARTICIPANT') {
|
|
||||||
roleIcon = addFaFw(icon({ prefix: 'fas', iconName: 'user-slash' }).html.join(''))
|
|
||||||
roleTitle = t.non_participant
|
|
||||||
roleClass = 'non-participant'
|
|
||||||
}
|
|
||||||
// Status icon, color, and title
|
|
||||||
let statusIcon = ''
|
|
||||||
let statusTitle = ''
|
|
||||||
let statusClass = ''
|
|
||||||
let declinedClass = ''
|
|
||||||
const isCurrentUser = Boolean(userEmail && a.email && a.email === userEmail)
|
|
||||||
if (partstat === 'NEEDS-ACTION') {
|
|
||||||
statusIcon = addFaFw(icon({ prefix: 'fas', iconName: 'circle-question' }).html.join(''))
|
|
||||||
statusClass = 'pending'
|
|
||||||
statusTitle = t.participation_pending
|
|
||||||
} else if (partstat === 'ACCEPTED') {
|
|
||||||
statusIcon = addFaFw(icon({ prefix: 'fas', iconName: 'square-check' }).html.join(''))
|
|
||||||
statusClass = 'confirmed'
|
|
||||||
statusTitle = t.participation_confirmed
|
|
||||||
} else if (partstat === 'TENTATIVE') {
|
|
||||||
statusIcon = addFaFw(icon({ prefix: 'fas', iconName: 'square-check' }).html.join(''))
|
|
||||||
statusClass = 'tentative'
|
|
||||||
statusTitle = t.participation_confirmed_tentative
|
|
||||||
} else if (partstat === 'DECLINED') {
|
|
||||||
statusIcon = addFaFw(icon({ prefix: 'fas', iconName: 'xmark' }).html.join(''))
|
|
||||||
statusClass = 'declined'
|
|
||||||
statusTitle = t.participation_declined
|
|
||||||
declinedClass = 'declined'
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
mailbox: this.getAttendeeValue(vCards, a),
|
|
||||||
name: a.name ?? a.email,
|
|
||||||
role,
|
|
||||||
partstat,
|
|
||||||
roleIcon,
|
|
||||||
roleTitle,
|
|
||||||
roleClass,
|
|
||||||
statusIcon,
|
|
||||||
statusClass,
|
|
||||||
statusTitle,
|
|
||||||
declinedClass,
|
|
||||||
isCurrentUser,
|
|
||||||
email: a.email,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
.open-calendar__event-edit__attendee {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__event-edit__attendee>:first-child {
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__event-edit__datetime {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__event-edit--is-allday :is([name="start-time"],
|
|
||||||
[name="start-timezone"],
|
|
||||||
[name="end-time"],
|
|
||||||
[name="end-timezone"]) {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* NOTE - CJ - 2025-07-03 - Hide the `Delete` button we are creating an event */
|
|
||||||
.open-calendar__event-edit--create [name="delete"] {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__event-edit--without-invite .open-calendar__event-edit__invite {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
@@ -1,464 +0,0 @@
|
|||||||
import {
|
|
||||||
attendeePartStatusTypes,
|
|
||||||
convertIcsRecurrenceRule,
|
|
||||||
getEventEndFromDuration,
|
|
||||||
type IcsAttendee,
|
|
||||||
type IcsAttendeePartStatusType,
|
|
||||||
type IcsDateObject,
|
|
||||||
type IcsEvent,
|
|
||||||
type IcsOrganizer,
|
|
||||||
} from 'ts-ics'
|
|
||||||
import './eventEditPopup.css'
|
|
||||||
import { Popup } from '../popup/popup'
|
|
||||||
import { parseHtml } from '../helpers/dom-helper'
|
|
||||||
import { contactToMailbox,
|
|
||||||
getRRuleString,
|
|
||||||
isEventAllDay,
|
|
||||||
isSameContact,
|
|
||||||
mailboxToContact,
|
|
||||||
offsetDate,
|
|
||||||
} from '../helpers/ics-helper'
|
|
||||||
import { tzlib_get_ical_block, tzlib_get_offset, tzlib_get_timezones } from 'timezones-ical-library'
|
|
||||||
import { getTranslations } from '../translations'
|
|
||||||
import { RecurringEventPopup } from './recurringEventPopup'
|
|
||||||
import { attendeeUserParticipationStatusTypes, TIME_MINUTE } from '../constants'
|
|
||||||
import type { AddressBookVCard, Contact, VCard } from '../types/addressbook'
|
|
||||||
import type { DefaultComponentsOptions,
|
|
||||||
DomEvent,
|
|
||||||
EventEditCallback,
|
|
||||||
EventEditCreateInfo,
|
|
||||||
EventEditDeleteInfo,
|
|
||||||
EventEditMoveResizeInfo,
|
|
||||||
EventEditSelectInfo,
|
|
||||||
} from '../types/options'
|
|
||||||
import type {Calendar, CalendarEvent} from '../types/calendar'
|
|
||||||
import { attendeeRoleTypes, namedRRules } from '../contants'
|
|
||||||
|
|
||||||
const html = /*html*/`
|
|
||||||
<form name="event" class="open-calendar__event-edit open-calendar__form">
|
|
||||||
<datalist id="open-calendar__event-edit__mailboxes">
|
|
||||||
</datalist>
|
|
||||||
<div class="open-calendar__form__content open-calendar__event-edit__event">
|
|
||||||
<label for="open-calendar__event-edit__calendar">{{t.calendar}}</label>
|
|
||||||
<select id="open-calendar__event-edit__calendar" name="calendar" required="">
|
|
||||||
|
|
||||||
</select>
|
|
||||||
<label for="open-calendar__event-edit__summary">{{t.title}}</label>
|
|
||||||
<input type="text" id="open-calendar__event-edit__summary" name="summary" required="" />
|
|
||||||
<label for="open-calendar__event-edit__location">{{t.location}}</label>
|
|
||||||
<input type="text" id="open-calendar__event-edit__location" name="location" />
|
|
||||||
<label for="open-calendar__event-edit__allday">{{t.allDay}}</label>
|
|
||||||
<input type="checkbox" id="open-calendar__event-edit__allday" name="allday" />
|
|
||||||
<label for="open-calendar__event-edit__start">{{t.start}}</label>
|
|
||||||
<div id="open-calendar__event-edit__start" class="open-calendar__event-edit__datetime">
|
|
||||||
<input type="date" name="start-date" required="" />
|
|
||||||
<input type="time" name="start-time" required="" />
|
|
||||||
<select name="start-timezone" required="">
|
|
||||||
{{#timezones}}
|
|
||||||
<option value="{{.}}">{{.}}</option>
|
|
||||||
{{/timezones}}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<label for="open-calendar__event-edit__end">{{t.end}}</label>
|
|
||||||
<div id="open-calendar__event-edit__end" class="open-calendar__event-edit__datetime">
|
|
||||||
<input type="date" name="end-date" required="" />
|
|
||||||
<input type="time" name="end-time" required="" />
|
|
||||||
<select name="end-timezone" required="">
|
|
||||||
{{#timezones}}
|
|
||||||
<option value="{{.}}">{{.}}</option>
|
|
||||||
{{/timezones}}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<label for="open-calendar__event-edit__organizer">{{t.organizer}}</label>
|
|
||||||
<div id="open-calendar__event-edit__organizer" class="open-calendar__event-edit__attendee">
|
|
||||||
<input type="text" name="organizer-mailbox" list="open-calendar__event-edit__mailboxes" />
|
|
||||||
</div>
|
|
||||||
<label for="open-calendar__event-edit__attendees">{{t.attendees}}</label>
|
|
||||||
<div id="open-calendar__event-edit__attendees" class="open-calendar__event-edit__attendees" >
|
|
||||||
<div class="open-calendar__form__list"> </div>
|
|
||||||
<button type="button">{{t.addAttendee}}</button>
|
|
||||||
</div>
|
|
||||||
<label for="open-calendar__event-edit__rrule">{{t.rrule}}</label>
|
|
||||||
<select id="open-calendar__event-edit__rrule" name="rrule">
|
|
||||||
<option value="">{{trrules.none}}</option>
|
|
||||||
{{#rrules}}
|
|
||||||
<option value="{{rule}}">{{label}}</option>
|
|
||||||
{{/rrules}}
|
|
||||||
<option class="open-calendar__event-edit__rrule__unchanged" value="">{{trrules.unchanged}}</option>
|
|
||||||
</select>
|
|
||||||
<label for="open-calendar__event-edit__description">{{t.description}}</label>
|
|
||||||
<textarea id="open-calendar__event-edit__description" name="description"> </textarea>
|
|
||||||
</div>
|
|
||||||
<div class="open-calendar__form__content open-calendar__event-edit__invite">
|
|
||||||
<label for="open-calendar__event-edit__user-participation-status">{{t.userInvite}}</label>
|
|
||||||
<select id="open-calendar__event-edit__user-participation-status" name="user-participation-status">
|
|
||||||
{{#userParticipationStatuses}}
|
|
||||||
<option value="{{key}}">{{translation}}</option>
|
|
||||||
{{/userParticipationStatuses}}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="open-calendar__form__buttons">
|
|
||||||
<button name="delete" type="button">{{t.delete}}</button>
|
|
||||||
<button name="cancel" type="button">{{t.cancel}}</button>
|
|
||||||
<button name="submit" type="submit">{{t.save}}</button>
|
|
||||||
</div>
|
|
||||||
</form>`
|
|
||||||
|
|
||||||
const calendarsHtml = /*html*/`
|
|
||||||
<option value="" selected disabled hidden>{{t.chooseACalendar}}</option>
|
|
||||||
{{#calendars}}
|
|
||||||
<option value="{{url}}">{{displayName}}</option>
|
|
||||||
{{/calendars}}`
|
|
||||||
|
|
||||||
const mailboxesHtml = /*html*/`
|
|
||||||
{{#mailboxes}}
|
|
||||||
<option value="{{.}}">{{.}}</option>
|
|
||||||
{{/mailboxes}}`
|
|
||||||
|
|
||||||
const attendeeHtml = /*html*/`
|
|
||||||
<div class="open-calendar__event-edit__attendee">
|
|
||||||
<input type="text" name="attendee-mailbox" value="{{mailbox}}" list="open-calendar__event-edit__mailboxes" />
|
|
||||||
<select name="attendee-role" value="{{role}}" required>
|
|
||||||
{{#roles}}
|
|
||||||
<option value="{{key}}">{{translation}}</option>
|
|
||||||
{{/roles}}
|
|
||||||
</select>
|
|
||||||
<select name="participation-status" value="{{participationStatus}}" required disabled>
|
|
||||||
{{#participationStatuses}}
|
|
||||||
<option value="{{key}}">{{translation}}</option>
|
|
||||||
{{/participationStatuses}}
|
|
||||||
</select>
|
|
||||||
<button type="button" name="remove">X</button>
|
|
||||||
</div>`
|
|
||||||
|
|
||||||
export class EventEditPopup {
|
|
||||||
|
|
||||||
private _recurringPopup: RecurringEventPopup
|
|
||||||
private _popup: Popup
|
|
||||||
private _form: HTMLFormElement
|
|
||||||
private _calendar: HTMLSelectElement
|
|
||||||
private _mailboxes: HTMLDataListElement
|
|
||||||
private _attendees: HTMLDivElement
|
|
||||||
private _rruleUnchanged: HTMLOptionElement
|
|
||||||
|
|
||||||
private _hideVCardEmails?: boolean
|
|
||||||
private _vCardContacts: VCard[] = []
|
|
||||||
private _eventContacts: Contact[] = []
|
|
||||||
|
|
||||||
private _event?: IcsEvent
|
|
||||||
private _userContact?: Contact
|
|
||||||
private _calendarUrl?: string
|
|
||||||
private _handleSave: EventEditCallback | null = null
|
|
||||||
private _handleDelete: EventEditCallback | null = null
|
|
||||||
|
|
||||||
public constructor(target: Node, options: DefaultComponentsOptions) {
|
|
||||||
this._hideVCardEmails = options.hideVCardEmails
|
|
||||||
const timezones = tzlib_get_timezones() as string[]
|
|
||||||
|
|
||||||
this._recurringPopup = new RecurringEventPopup(target)
|
|
||||||
|
|
||||||
this._popup = new Popup(target)
|
|
||||||
this._form = parseHtml<HTMLFormElement>(html, {
|
|
||||||
t: getTranslations().eventForm,
|
|
||||||
trrules: getTranslations().rrules,
|
|
||||||
timezones: timezones,
|
|
||||||
rrules: namedRRules.map(rule => ({ rule, label: getTranslations().rrules[rule] })),
|
|
||||||
userParticipationStatuses: attendeeUserParticipationStatusTypes.map(stat => ({
|
|
||||||
key: stat,
|
|
||||||
translation: getTranslations().userParticipationStatus[stat],
|
|
||||||
})),
|
|
||||||
})[0]
|
|
||||||
this._popup.content.appendChild(this._form)
|
|
||||||
|
|
||||||
this._calendar = this._form.querySelector<HTMLSelectElement>('.open-calendar__form__content [name="calendar"]')!
|
|
||||||
this._mailboxes = this._form.querySelector<HTMLSelectElement>('#open-calendar__event-edit__mailboxes')!
|
|
||||||
this._attendees = this._form.querySelector<HTMLDivElement>(
|
|
||||||
'.open-calendar__event-edit__attendees > .open-calendar__form__list',
|
|
||||||
)!
|
|
||||||
const allday = this._form.querySelector<HTMLButtonElement>('.open-calendar__event-edit [name="allday"]')!
|
|
||||||
const addAttendee = this._form.querySelector<HTMLDivElement>('.open-calendar__event-edit__attendees > button')!
|
|
||||||
this._rruleUnchanged = this._form.querySelector<HTMLOptionElement>('.open-calendar__event-edit__rrule__unchanged')!
|
|
||||||
const cancel = this._form.querySelector<HTMLButtonElement>('.open-calendar__form__buttons [name="cancel"]')!
|
|
||||||
const remove = this._form.querySelector<HTMLButtonElement>('.open-calendar__form__buttons [name="delete"]')!
|
|
||||||
|
|
||||||
this._form.addEventListener('submit', async (e) => { e.preventDefault(); await this.save() })
|
|
||||||
allday.addEventListener('click', this.updateAllday)
|
|
||||||
addAttendee.addEventListener('click', () => this.addAttendee({ email: '' }))
|
|
||||||
cancel.addEventListener('click', this.cancel)
|
|
||||||
remove.addEventListener('click', this.delete)
|
|
||||||
}
|
|
||||||
|
|
||||||
public destroy = () => {
|
|
||||||
this._form.remove()
|
|
||||||
}
|
|
||||||
|
|
||||||
private setCalendars = (calendars: Calendar[]) => {
|
|
||||||
const calendarElements = parseHtml<HTMLOptionElement>(calendarsHtml, {
|
|
||||||
calendars,
|
|
||||||
t: getTranslations().eventForm,
|
|
||||||
})
|
|
||||||
this._calendar.innerHTML = ''
|
|
||||||
this._calendar.append(...Array.from(calendarElements))
|
|
||||||
}
|
|
||||||
|
|
||||||
private setContacts = (vCardContacts: VCard[], eventContacts: Contact[]) => {
|
|
||||||
this._vCardContacts = []
|
|
||||||
for (const contact of vCardContacts) {
|
|
||||||
if (this._vCardContacts.find(c => isSameContact(c, contact))) continue
|
|
||||||
this._vCardContacts.push(contact)
|
|
||||||
}
|
|
||||||
for (const contact of eventContacts) {
|
|
||||||
if (this._vCardContacts.find(c => isSameContact(c, contact))) continue
|
|
||||||
if (this._eventContacts.find(c => isSameContact(c, contact))) continue
|
|
||||||
this._eventContacts.push(contact)
|
|
||||||
}
|
|
||||||
const mailboxesElement = parseHtml<HTMLOptionElement>(mailboxesHtml, {
|
|
||||||
mailboxes: [
|
|
||||||
...this._vCardContacts.map(c => this.getValueFromVCard(c)),
|
|
||||||
...this._eventContacts.map(c => this.getValueFromContact(c)),
|
|
||||||
],
|
|
||||||
})
|
|
||||||
this._mailboxes.innerHTML = ''
|
|
||||||
this._mailboxes.append(...Array.from(mailboxesElement))
|
|
||||||
}
|
|
||||||
|
|
||||||
private updateAllday = (e: DomEvent) => {
|
|
||||||
this._form.classList.toggle('open-calendar__event-edit--is-allday', (e.target as HTMLInputElement).checked)
|
|
||||||
}
|
|
||||||
|
|
||||||
private addAttendee = (attendee: IcsAttendee) => {
|
|
||||||
const element = parseHtml<HTMLDivElement>(attendeeHtml, {
|
|
||||||
mailbox: this.getValueFromAttendee(attendee),
|
|
||||||
role: attendee.role || 'REQ-PARTICIPANT',
|
|
||||||
roles: attendeeRoleTypes.map(role => ({ key: role, translation: getTranslations().attendeeRoles[role] })),
|
|
||||||
participationStatus: attendee.partstat || 'NEEDS-ACTION',
|
|
||||||
participationStatuses: attendeePartStatusTypes.map(status => ({
|
|
||||||
key: status,
|
|
||||||
translation: getTranslations().participationStatus[status],
|
|
||||||
})),
|
|
||||||
t: getTranslations().eventForm,
|
|
||||||
})[0]
|
|
||||||
this._attendees.appendChild(element)
|
|
||||||
|
|
||||||
const remove = element.querySelector<HTMLButtonElement>('button')!
|
|
||||||
const role = element.querySelector<HTMLSelectElement>('select[name="attendee-role"]')!
|
|
||||||
const participationStatus = element.querySelector<HTMLSelectElement>('select[name="participation-status"]')!
|
|
||||||
|
|
||||||
remove.addEventListener('click', () => element.remove())
|
|
||||||
role.value = attendee.role || 'REQ-PARTICIPANT'
|
|
||||||
participationStatus.value = attendee.partstat || 'NEEDS-ACTION'
|
|
||||||
}
|
|
||||||
|
|
||||||
public onCreate = ({calendars, vCards, event, handleCreate, userContact}: EventEditCreateInfo) => {
|
|
||||||
this._form.classList.toggle('open-calendar__event-edit--create', true)
|
|
||||||
this._handleSave = handleCreate
|
|
||||||
this._handleDelete = null
|
|
||||||
this.open('', event, calendars, vCards, userContact)
|
|
||||||
}
|
|
||||||
public onSelect = ({
|
|
||||||
calendarUrl,
|
|
||||||
calendars,
|
|
||||||
vCards,
|
|
||||||
event,
|
|
||||||
recurringEvent,
|
|
||||||
handleDelete,
|
|
||||||
handleUpdate,
|
|
||||||
userContact,
|
|
||||||
}: EventEditSelectInfo) => {
|
|
||||||
this._form.classList.toggle('open-calendar__event-edit--create', false)
|
|
||||||
this._handleSave = handleUpdate
|
|
||||||
this._handleDelete = handleDelete
|
|
||||||
if (!recurringEvent) this.open(calendarUrl, event, calendars, vCards, userContact)
|
|
||||||
else this._recurringPopup.open(editAll => {
|
|
||||||
return this.open(
|
|
||||||
calendarUrl, editAll ? recurringEvent : event, calendars, vCards, userContact)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
public onMoveResize = ({ calendarUrl, event, start, end, handleUpdate }: EventEditMoveResizeInfo) => {
|
|
||||||
const newEvent = { ...event }
|
|
||||||
const startDelta = start.getTime() - event.start.date.getTime()
|
|
||||||
newEvent.start = offsetDate(newEvent.start, startDelta)
|
|
||||||
if (event.end) {
|
|
||||||
const endDelta = end.getTime() - event.end.date.getTime()
|
|
||||||
newEvent.end = offsetDate(event.end, endDelta)
|
|
||||||
}
|
|
||||||
handleUpdate(
|
|
||||||
{ calendarUrl, event: newEvent } as CalendarEvent,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
public onDelete = ({ calendarUrl, event, handleDelete}: EventEditDeleteInfo) => {
|
|
||||||
handleDelete({calendarUrl, event})
|
|
||||||
}
|
|
||||||
|
|
||||||
public open = (
|
|
||||||
calendarUrl: string,
|
|
||||||
event: IcsEvent,
|
|
||||||
calendars: Calendar[],
|
|
||||||
vCards: AddressBookVCard[],
|
|
||||||
userContact?: Contact,
|
|
||||||
) => {
|
|
||||||
this._userContact = userContact
|
|
||||||
this.setContacts(
|
|
||||||
vCards.filter(c => c.vCard.email !== null).map(c => c.vCard),
|
|
||||||
[...event.attendees ?? [], event.organizer].filter(a => a !== undefined),
|
|
||||||
)
|
|
||||||
this.setCalendars(calendars)
|
|
||||||
|
|
||||||
this._calendarUrl = calendarUrl
|
|
||||||
this._event = event
|
|
||||||
const localTzId = Intl.DateTimeFormat().resolvedOptions().timeZone
|
|
||||||
const localTzOffset = new Date().getTimezoneOffset() * TIME_MINUTE
|
|
||||||
const localStart = event.start.local ?? {
|
|
||||||
date: new Date(event.start.date.getTime() - localTzOffset),
|
|
||||||
timezone: localTzId,
|
|
||||||
}
|
|
||||||
const end = event.end ??
|
|
||||||
offsetDate(
|
|
||||||
localStart,
|
|
||||||
getEventEndFromDuration(event.start.date, event.duration).getTime() - event.start.date.getTime(),
|
|
||||||
)
|
|
||||||
const localEnd = end.local ?? {
|
|
||||||
date: new Date(end.date.getTime() - localTzOffset),
|
|
||||||
timezone: localTzId,
|
|
||||||
}
|
|
||||||
|
|
||||||
const inputs = this._form.elements;
|
|
||||||
(inputs.namedItem('calendar') as HTMLInputElement).value = calendarUrl;
|
|
||||||
(inputs.namedItem('calendar') as HTMLInputElement).disabled = event.recurrenceId !== undefined;
|
|
||||||
// FIXME - CJ - 2025/06/03 - changing an object of calendar is not supported;
|
|
||||||
(inputs.namedItem('calendar') as HTMLInputElement).disabled ||=
|
|
||||||
!this._form.classList.contains('open-calendar__event-edit--create');
|
|
||||||
(inputs.namedItem('summary') as HTMLInputElement).value = event.summary ?? '';
|
|
||||||
(inputs.namedItem('location') as HTMLInputElement).value = event.location ?? '';
|
|
||||||
(inputs.namedItem('allday') as HTMLInputElement).checked = isEventAllDay(event)
|
|
||||||
this._form.classList.toggle('open-calendar__event-edit--is-allday', isEventAllDay(event))
|
|
||||||
const startDateTime = localStart.date.toISOString().split('T');
|
|
||||||
(inputs.namedItem('start-date') as HTMLInputElement).value = startDateTime[0];
|
|
||||||
(inputs.namedItem('start-time') as HTMLInputElement).value = startDateTime[1].slice(0, 5);
|
|
||||||
(inputs.namedItem('start-timezone') as HTMLInputElement).value = localStart.timezone
|
|
||||||
const endDateTime = localEnd.date.toISOString().split('T');
|
|
||||||
(inputs.namedItem('end-date') as HTMLInputElement).value = endDateTime[0];
|
|
||||||
(inputs.namedItem('end-time') as HTMLInputElement).value = endDateTime[1].slice(0, 5);
|
|
||||||
(inputs.namedItem('end-timezone') as HTMLInputElement).value = localEnd.timezone;
|
|
||||||
// TODO - CJ - 2025-07-03 - Add rich text support
|
|
||||||
(inputs.namedItem('description') as HTMLInputElement).value = event.description ?? '';
|
|
||||||
|
|
||||||
// TODO - CJ - 2025-07-03 - Check if needs to be hidden or done differently,
|
|
||||||
// as I believe Thunderbird also adds the organizer to the attendee list;
|
|
||||||
(inputs.namedItem('organizer-mailbox') as HTMLInputElement).value = event.organizer
|
|
||||||
? this.getValueFromAttendee(event.organizer)
|
|
||||||
: ''
|
|
||||||
|
|
||||||
const rrule = getRRuleString(event.recurrenceRule)
|
|
||||||
this._rruleUnchanged.value = rrule;
|
|
||||||
(inputs.namedItem('rrule') as HTMLInputElement).value = rrule;
|
|
||||||
(inputs.namedItem('rrule') as HTMLInputElement).disabled = event.recurrenceId !== undefined
|
|
||||||
|
|
||||||
const userAttendeeInEvent = userContact !== undefined
|
|
||||||
? event.attendees?.find(a => a.email === userContact.email)
|
|
||||||
: undefined
|
|
||||||
|
|
||||||
if (userAttendeeInEvent !== undefined) {
|
|
||||||
this._form.classList.remove('open-calendar__event-edit--without-invite');
|
|
||||||
(inputs.namedItem('user-participation-status') as HTMLSelectElement).value =
|
|
||||||
userAttendeeInEvent.partstat
|
|
||||||
?? attendeeUserParticipationStatusTypes[0]
|
|
||||||
} else {
|
|
||||||
this._form.classList.add('open-calendar__event-edit--without-invite')
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
this._attendees.innerHTML = ''
|
|
||||||
for (const attendee of event.attendees ?? []) this.addAttendee(attendee)
|
|
||||||
|
|
||||||
this._popup.setVisible(true)
|
|
||||||
}
|
|
||||||
|
|
||||||
public save = async () => {
|
|
||||||
const data = new FormData(this._form)
|
|
||||||
const allDay = !!data.get('allday')
|
|
||||||
|
|
||||||
const getTimeObject = (name: string): IcsDateObject => {
|
|
||||||
const date = data.get(`${name}-date`) as string
|
|
||||||
const time = data.get(`${name}-time`) as string
|
|
||||||
const timezone = data.get(`${name}-timezone`) as string
|
|
||||||
const offset = tzlib_get_offset(timezone, date, time)
|
|
||||||
return {
|
|
||||||
date: new Date(date + (allDay ? '' : `T${time}${offset}`)),
|
|
||||||
type: allDay ? 'DATE' : 'DATE-TIME',
|
|
||||||
local: timezone === 'UTC' ? undefined : {
|
|
||||||
date: new Date(date + (allDay ? '' : `T${time}Z`)),
|
|
||||||
timezone: tzlib_get_ical_block(timezone)[1].slice(5),
|
|
||||||
tzoffset: offset,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const mailboxes = data.getAll('attendee-mailbox') as string[]
|
|
||||||
const roles = data.getAll('attendee-role') as string[]
|
|
||||||
const participationStatuses = data.getAll('participation-status') as string[]
|
|
||||||
const rrule = data.get('rrule') as string
|
|
||||||
const description = data.get('description') as string
|
|
||||||
|
|
||||||
const event: IcsEvent = {
|
|
||||||
...this._event!,
|
|
||||||
summary: data.get('summary') as string,
|
|
||||||
location: data.get('location') as string || undefined,
|
|
||||||
start: getTimeObject('start'),
|
|
||||||
end: getTimeObject('end'),
|
|
||||||
description: description || undefined,
|
|
||||||
descriptionAltRep: description === this._event!.description ? this._event!.descriptionAltRep : undefined,
|
|
||||||
organizer: data.get('organizer-mailbox')
|
|
||||||
? {
|
|
||||||
...this._event!.organizer,
|
|
||||||
...this.getContactFromValue(data.get('organizer-mailbox') as string),
|
|
||||||
}
|
|
||||||
: undefined,
|
|
||||||
attendees: mailboxes.map((mailbox, i) => {
|
|
||||||
const contact = this.getContactFromValue(mailbox)
|
|
||||||
return ({
|
|
||||||
...contact,
|
|
||||||
role: roles[i],
|
|
||||||
partstat: (contact.email === this._userContact?.email
|
|
||||||
? data.get('user-participation-status')
|
|
||||||
: participationStatuses[i]
|
|
||||||
) as IcsAttendeePartStatusType,
|
|
||||||
})
|
|
||||||
}) || undefined,
|
|
||||||
recurrenceRule: rrule ? convertIcsRecurrenceRule(undefined, {value: rrule}) : undefined,
|
|
||||||
|
|
||||||
// NOTE - CJ - 2025-07-03 - explicitly set `duration` to undefined as we set `end`
|
|
||||||
duration: undefined,
|
|
||||||
}
|
|
||||||
const response = await this._handleSave!({ calendarUrl: data.get('calendar') as string, event })
|
|
||||||
if (response.ok) this._popup.setVisible(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
public cancel = () => {
|
|
||||||
this._popup.setVisible(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
public delete = async () => {
|
|
||||||
await this._handleDelete!({ calendarUrl: this._calendarUrl!, event: this._event!})
|
|
||||||
this._popup.setVisible(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
public getContactFromValue = (value: string) => {
|
|
||||||
const contact = this._vCardContacts.find(c => this.getValueFromVCard(c) === value)
|
|
||||||
return contact
|
|
||||||
// NOTE - CJ - 2025-07-17 - we need to reconstruct an object as the spread syntax does not work for properties
|
|
||||||
? { name: contact.name!, email: contact.email!}
|
|
||||||
: this._eventContacts.find(c => this.getValueFromContact(c) === value)
|
|
||||||
?? mailboxToContact(value)
|
|
||||||
}
|
|
||||||
|
|
||||||
public getValueFromAttendee = (attendee: IcsAttendee | IcsOrganizer): string => {
|
|
||||||
const vCard = this._vCardContacts.find(c => isSameContact(c, attendee))
|
|
||||||
return vCard ? this.getValueFromVCard(vCard) : this.getValueFromContact(attendee)
|
|
||||||
}
|
|
||||||
|
|
||||||
public getValueFromVCard = (contact: VCard) => (this._hideVCardEmails && contact.name) || contactToMailbox(contact)
|
|
||||||
public getValueFromContact = (contact: Contact) => contactToMailbox(contact)
|
|
||||||
}
|
|
||||||
@@ -1,49 +0,0 @@
|
|||||||
import { Popup } from '../popup/popup'
|
|
||||||
import { parseHtml } from '../helpers/dom-helper'
|
|
||||||
import { getTranslations } from '../translations'
|
|
||||||
|
|
||||||
const html = /*html*/`
|
|
||||||
<div class="open-calendar__form">
|
|
||||||
{{t.editRecurring}}
|
|
||||||
<div class="open-calendar__form__buttons">
|
|
||||||
<button name="edit-all" type="button">{{t.editAll}}</button>
|
|
||||||
<button name="edit-single" type="button">{{t.editSingle}}</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
|
|
||||||
export class RecurringEventPopup {
|
|
||||||
|
|
||||||
public _handleSelect?: (editAll: boolean) => void
|
|
||||||
|
|
||||||
private _element: HTMLDivElement
|
|
||||||
private _popup: Popup
|
|
||||||
|
|
||||||
public constructor(target: Node) {
|
|
||||||
this._popup = new Popup(target)
|
|
||||||
this._element = parseHtml<HTMLDivElement>(html, { t: getTranslations().recurringForm })[0]
|
|
||||||
this._popup.content.appendChild(this._element)
|
|
||||||
|
|
||||||
const editAll = this._element.querySelector<HTMLButtonElement>('.open-calendar__form__buttons [name="edit-all"]')!
|
|
||||||
const editSingle = this._element.querySelector<HTMLButtonElement>(
|
|
||||||
'.open-calendar__form__buttons [name="edit-single"]',
|
|
||||||
)!
|
|
||||||
|
|
||||||
editAll.addEventListener('click', () => this.close(true))
|
|
||||||
editSingle.addEventListener('click', () => this.close(false))
|
|
||||||
}
|
|
||||||
|
|
||||||
public destroy = () => {
|
|
||||||
this._element.remove()
|
|
||||||
this._popup.destroy()
|
|
||||||
}
|
|
||||||
|
|
||||||
public open = (handleSelect: (editAll: boolean) => void) => {
|
|
||||||
this._handleSelect = handleSelect
|
|
||||||
this._popup.setVisible(true)
|
|
||||||
}
|
|
||||||
private close = (editAll: boolean) => {
|
|
||||||
this._popup.setVisible(false)
|
|
||||||
this._handleSelect?.(editAll)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,273 +0,0 @@
|
|||||||
import { tzlib_get_ical_block } from 'timezones-ical-library'
|
|
||||||
import { convertIcsCalendar, convertIcsTimezone, generateIcsCalendar, type IcsCalendar } from 'ts-ics'
|
|
||||||
import { createAccount,
|
|
||||||
fetchCalendars as davFetchCalendars,
|
|
||||||
fetchCalendarObjects as davFetchCalendarObjects,
|
|
||||||
createCalendarObject as davCreateCalendarObject,
|
|
||||||
updateCalendarObject as davUpdateCalendarObject,
|
|
||||||
deleteCalendarObject as davDeleteCalendarObject,
|
|
||||||
DAVNamespaceShort,
|
|
||||||
propfind,
|
|
||||||
type DAVCalendar,
|
|
||||||
type DAVCalendarObject,
|
|
||||||
type DAVAddressBook,
|
|
||||||
fetchAddressBooks as davFetchAddressBooks,
|
|
||||||
fetchVCards as davFetchVCards,
|
|
||||||
} from 'tsdav'
|
|
||||||
import { isServerSource } from './types-helper'
|
|
||||||
import type { Calendar, CalendarObject } from '../types/calendar'
|
|
||||||
import type { CalendarSource, ServerSource, CalendarResponse, AddressBookSource } from '../types/options'
|
|
||||||
import type { AddressBook, AddressBookObject } from '../types/addressbook'
|
|
||||||
import ICAL from 'ical.js'
|
|
||||||
|
|
||||||
export function getEventObjectString(event: IcsCalendar) {
|
|
||||||
return generateIcsCalendar(event)
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function fetchCalendars(source: ServerSource | CalendarSource): Promise<Calendar[]> {
|
|
||||||
if (isServerSource(source)) {
|
|
||||||
const account = await createAccount({
|
|
||||||
account: { serverUrl: source.serverUrl, accountType: 'caldav' },
|
|
||||||
headers: source.headers,
|
|
||||||
fetchOptions: source.fetchOptions,
|
|
||||||
})
|
|
||||||
const calendars = await davFetchCalendars({ account, headers: source.headers, fetchOptions: source.fetchOptions })
|
|
||||||
return calendars.map(calendar => ({ ...calendar, headers: source.headers, fetchOptions: source.fetchOptions }))
|
|
||||||
} else {
|
|
||||||
const calendar = await davFetchCalendar({
|
|
||||||
url: source.calendarUrl,
|
|
||||||
headers: source.headers,
|
|
||||||
fetchOptions: source.fetchOptions,
|
|
||||||
})
|
|
||||||
return [{ ...calendar, headers: source.headers, fetchOptions: source.fetchOptions, uid: source.calendarUid }]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function fetchCalendarObjects(
|
|
||||||
calendar: Calendar,
|
|
||||||
timeRange?: { start: string; end: string; },
|
|
||||||
expand?: boolean,
|
|
||||||
): Promise<{ calendarObjects: CalendarObject[], recurringObjects: CalendarObject[] }> {
|
|
||||||
const davCalendarObjects = await davFetchCalendarObjects({
|
|
||||||
calendar: calendar,
|
|
||||||
timeRange, expand,
|
|
||||||
headers: calendar.headers,
|
|
||||||
fetchOptions: calendar.fetchOptions,
|
|
||||||
})
|
|
||||||
const calendarObjects = davCalendarObjects.map(o => ({
|
|
||||||
url: o.url,
|
|
||||||
etag: o.etag,
|
|
||||||
data: convertIcsCalendar(undefined, o.data),
|
|
||||||
calendarUrl: calendar.url,
|
|
||||||
}))
|
|
||||||
const recurringObjectsUrls = new Set(
|
|
||||||
calendarObjects
|
|
||||||
.filter(c => c.data.events?.find(e => e.recurrenceId))
|
|
||||||
.map(c => c.url),
|
|
||||||
)
|
|
||||||
const davRecurringObjects = recurringObjectsUrls.size == 0
|
|
||||||
? []
|
|
||||||
: await davFetchCalendarObjects({
|
|
||||||
calendar: calendar,
|
|
||||||
objectUrls: Array.from(recurringObjectsUrls),
|
|
||||||
headers: calendar.headers,
|
|
||||||
fetchOptions: calendar.fetchOptions,
|
|
||||||
})
|
|
||||||
const recurringObjects = davRecurringObjects.map(o => ({
|
|
||||||
url: o.url,
|
|
||||||
etag: o.etag,
|
|
||||||
data: convertIcsCalendar(undefined, o.data),
|
|
||||||
calendarUrl: calendar.url,
|
|
||||||
}))
|
|
||||||
return { calendarObjects, recurringObjects }
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function createCalendarObject(
|
|
||||||
calendar: Calendar,
|
|
||||||
calendarObjectData: IcsCalendar,
|
|
||||||
): Promise<CalendarResponse> {
|
|
||||||
validateTimezones(calendarObjectData)
|
|
||||||
for (const event of calendarObjectData.events ?? []) event.uid = crypto.randomUUID()
|
|
||||||
const uid = calendarObjectData.events?.[0].uid ?? crypto.randomUUID()
|
|
||||||
const iCalString = getEventObjectString(calendarObjectData)
|
|
||||||
const response = await davCreateCalendarObject({
|
|
||||||
calendar,
|
|
||||||
iCalString,
|
|
||||||
filename: `${uid}.ics`,
|
|
||||||
headers: calendar.headers,
|
|
||||||
fetchOptions: calendar.fetchOptions,
|
|
||||||
})
|
|
||||||
return { response, ical: iCalString }
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function updateCalendarObject(
|
|
||||||
calendar: Calendar,
|
|
||||||
calendarObject: CalendarObject,
|
|
||||||
): Promise<CalendarResponse> {
|
|
||||||
validateTimezones(calendarObject.data)
|
|
||||||
const davCalendarObject: DAVCalendarObject = {
|
|
||||||
url: calendarObject.url,
|
|
||||||
etag: calendarObject.etag,
|
|
||||||
data: getEventObjectString(calendarObject.data),
|
|
||||||
}
|
|
||||||
const response = await davUpdateCalendarObject({
|
|
||||||
calendarObject: davCalendarObject,
|
|
||||||
headers: calendar.headers,
|
|
||||||
fetchOptions: calendar.fetchOptions,
|
|
||||||
})
|
|
||||||
return { response, ical: davCalendarObject.data }
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function deleteCalendarObject(
|
|
||||||
calendar: Calendar,
|
|
||||||
calendarObject: CalendarObject,
|
|
||||||
): Promise<CalendarResponse> {
|
|
||||||
validateTimezones(calendarObject.data)
|
|
||||||
const davCalendarObject: DAVCalendarObject = {
|
|
||||||
url: calendarObject.url,
|
|
||||||
etag: calendarObject.etag,
|
|
||||||
data: getEventObjectString(calendarObject.data),
|
|
||||||
}
|
|
||||||
const response = await davDeleteCalendarObject({
|
|
||||||
calendarObject: davCalendarObject,
|
|
||||||
headers: calendar.headers,
|
|
||||||
fetchOptions: calendar.fetchOptions,
|
|
||||||
})
|
|
||||||
return { response, ical: davCalendarObject.data }
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function validateTimezones(calendarObjectData: IcsCalendar) {
|
|
||||||
const calendar = calendarObjectData
|
|
||||||
const usedTimezones = calendar.events?.flatMap(e => [e.start.local?.timezone, e.end?.local?.timezone])
|
|
||||||
const wantedTzIds = new Set(usedTimezones?.filter(s => s !== undefined))
|
|
||||||
calendar.timezones ??= []
|
|
||||||
|
|
||||||
// Remove extra timezones
|
|
||||||
calendar.timezones = calendar.timezones.filter(tz => wantedTzIds.has(tz.id))
|
|
||||||
|
|
||||||
// Add missing timezones
|
|
||||||
wantedTzIds.forEach(tzid => {
|
|
||||||
if (calendar.timezones!.findIndex(t => t.id === tzid) === -1) {
|
|
||||||
calendar.timezones!.push(convertIcsTimezone(undefined, tzlib_get_ical_block(tzid)[0]))
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// NOTE - CJ - 2025/07/03 - Inspired from https://github.com/natelindev/tsdav/blob/master/src/calendar.ts, fetchCalendars
|
|
||||||
async function davFetchCalendar(params: {
|
|
||||||
url: string,
|
|
||||||
headers?: Record<string, string>,
|
|
||||||
fetchOptions?: RequestInit
|
|
||||||
}): Promise<DAVCalendar> {
|
|
||||||
const { url, headers, fetchOptions } = params
|
|
||||||
const response = await propfind({
|
|
||||||
url,
|
|
||||||
props: {
|
|
||||||
[`${DAVNamespaceShort.CALDAV}:calendar-description`]: {},
|
|
||||||
[`${DAVNamespaceShort.CALDAV}:calendar-timezone`]: {},
|
|
||||||
[`${DAVNamespaceShort.DAV}:displayname`]: {},
|
|
||||||
[`${DAVNamespaceShort.CALDAV_APPLE}:calendar-color`]: {},
|
|
||||||
[`${DAVNamespaceShort.CALENDAR_SERVER}:getctag`]: {},
|
|
||||||
[`${DAVNamespaceShort.DAV}:resourcetype`]: {},
|
|
||||||
[`${DAVNamespaceShort.CALDAV}:supported-calendar-component-set`]: {},
|
|
||||||
[`${DAVNamespaceShort.DAV}:sync-token`]: {},
|
|
||||||
},
|
|
||||||
headers,
|
|
||||||
fetchOptions,
|
|
||||||
})
|
|
||||||
const rs = response[0]
|
|
||||||
if (!rs.ok) {
|
|
||||||
throw new Error(`Calendar ${url} does not exists. ${rs.status} ${rs.statusText}`)
|
|
||||||
}
|
|
||||||
if (Object.keys(rs.props?.resourceType ?? {}).includes('calendar')) {
|
|
||||||
throw new Error(`${url} is not a ${rs.props?.resourceType} and not a calendar`)
|
|
||||||
}
|
|
||||||
const description = rs.props?.calendarDescription
|
|
||||||
const timezone = rs.props?.calendarTimezone
|
|
||||||
return {
|
|
||||||
description: typeof description === 'string' ? description : '',
|
|
||||||
timezone: typeof timezone === 'string' ? timezone : '',
|
|
||||||
url: params.url,
|
|
||||||
ctag: rs.props?.getctag,
|
|
||||||
calendarColor: rs.props?.calendarColor,
|
|
||||||
displayName: rs.props?.displayname._cdata ?? rs.props?.displayname,
|
|
||||||
components: Array.isArray(rs.props?.supportedCalendarComponentSet.comp)
|
|
||||||
// NOTE - CJ - 2025-07-03 - comp represents an list of XML nodes in the DAVResponse format
|
|
||||||
// sc could be `<C:comp name="VEVENT" />`
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
||||||
? rs.props?.supportedCalendarComponentSet.comp.map((sc: any) => sc._attributes.name)
|
|
||||||
: [rs.props?.supportedCalendarComponentSet.comp?._attributes.name],
|
|
||||||
resourcetype: Object.keys(rs.props?.resourcetype),
|
|
||||||
syncToken: rs.props?.syncToken,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function fetchAddressBooks(source: ServerSource | AddressBookSource): Promise<AddressBook[]> {
|
|
||||||
if (isServerSource(source)) {
|
|
||||||
const account = await createAccount({
|
|
||||||
account: { serverUrl: source.serverUrl, accountType: 'caldav' },
|
|
||||||
headers: source.headers,
|
|
||||||
fetchOptions: source.fetchOptions,
|
|
||||||
})
|
|
||||||
const books = await davFetchAddressBooks({ account, headers: source.headers, fetchOptions: source.fetchOptions })
|
|
||||||
return books.map(book => ({ ...book, headers: source.headers, fetchOptions: source.fetchOptions }))
|
|
||||||
} else {
|
|
||||||
const book = await davFetchAddressBook({
|
|
||||||
url: source.addressBookUrl,
|
|
||||||
headers: source.headers,
|
|
||||||
fetchOptions: source.fetchOptions,
|
|
||||||
})
|
|
||||||
return [{ ...book, headers: source.headers, fetchOptions: source.fetchOptions, uid: source.addressBookUid }]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// NOTE - CJ - 2025/07/03 - Inspired from https://github.com/natelindev/tsdav/blob/master/src/addressBook.ts#L73
|
|
||||||
async function davFetchAddressBook(params: {
|
|
||||||
url: string,
|
|
||||||
headers?: Record<string, string>,
|
|
||||||
fetchOptions?: RequestInit
|
|
||||||
}): Promise<DAVAddressBook> {
|
|
||||||
const { url, headers, fetchOptions } = params
|
|
||||||
const response = await propfind({
|
|
||||||
url,
|
|
||||||
props: {
|
|
||||||
[`${DAVNamespaceShort.DAV}:displayname`]: {},
|
|
||||||
[`${DAVNamespaceShort.CALENDAR_SERVER}:getctag`]: {},
|
|
||||||
[`${DAVNamespaceShort.DAV}:resourcetype`]: {},
|
|
||||||
[`${DAVNamespaceShort.DAV}:sync-token`]: {},
|
|
||||||
},
|
|
||||||
headers,
|
|
||||||
fetchOptions,
|
|
||||||
})
|
|
||||||
const rs = response[0]
|
|
||||||
if (!rs.ok) {
|
|
||||||
throw new Error(`Address book ${url} does not exists. ${rs.status} ${rs.statusText}`)
|
|
||||||
}
|
|
||||||
if (Object.keys(rs.props?.resourceType ?? {}).includes('addressbook')) {
|
|
||||||
throw new Error(`${url} is not a ${rs.props?.resourceType} and not an addressbook`)
|
|
||||||
}
|
|
||||||
const displayName = rs.props?.displayname?._cdata ?? rs.props?.displayname
|
|
||||||
return {
|
|
||||||
url: url,
|
|
||||||
ctag: rs.props?.getctag,
|
|
||||||
displayName: typeof displayName === 'string' ? displayName : '',
|
|
||||||
resourcetype: Object.keys(rs.props?.resourcetype),
|
|
||||||
syncToken: rs.props?.syncToken,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function fetchAddressBookObjects(addressBook: AddressBook): Promise<AddressBookObject[]> {
|
|
||||||
const davVCards = await davFetchVCards({
|
|
||||||
addressBook: addressBook,
|
|
||||||
headers: addressBook.headers,
|
|
||||||
fetchOptions: addressBook.fetchOptions,
|
|
||||||
})
|
|
||||||
return davVCards.map(o => ({
|
|
||||||
url: o.url,
|
|
||||||
etag: o.etag,
|
|
||||||
data: new ICAL.Component(ICAL.parse(o.data)),
|
|
||||||
addressBookUrl: addressBook.url,
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
import Mustache from 'mustache'
|
|
||||||
|
|
||||||
export function parseHtml<N extends ChildNode = ChildNode>(html: string, format?: unknown): NodeListOf<N> {
|
|
||||||
html = Mustache.render(html, format)
|
|
||||||
return Document.parseHTMLUnsafe(html).body.childNodes as NodeListOf<N>
|
|
||||||
}
|
|
||||||
|
|
||||||
export function escapeHtml(html: string): string {
|
|
||||||
// NOTE - CJ - 2025-07-07 - In Mustache, {{html}} escapes html whereas {{{html}}} and {{&html}} do not
|
|
||||||
return Mustache.render('{{html}}', { html })
|
|
||||||
}
|
|
||||||
@@ -1,56 +0,0 @@
|
|||||||
import { generateIcsRecurrenceRule, type IcsDateObject, type IcsEvent, type IcsRecurrenceRule } from 'ts-ics'
|
|
||||||
import { parseOneAddress } from 'email-addresses'
|
|
||||||
import type { EventUid } from '../types/calendar'
|
|
||||||
import type { Contact, VCard } from '../types/addressbook'
|
|
||||||
|
|
||||||
export function isEventAllDay(event: IcsEvent) {
|
|
||||||
return event.start.type === 'DATE' || event.end?.type === 'DATE'
|
|
||||||
}
|
|
||||||
|
|
||||||
export function offsetDate(date: IcsDateObject, offset: number): IcsDateObject {
|
|
||||||
return {
|
|
||||||
type: date.type,
|
|
||||||
date: new Date(date.date.getTime() + offset),
|
|
||||||
local: date.local && {
|
|
||||||
date: new Date(date.local.date.getTime() + offset),
|
|
||||||
timezone: date.local.timezone,
|
|
||||||
tzoffset: date.local.tzoffset,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function isSameEvent(a: EventUid, b: EventUid) {
|
|
||||||
return a.uid === b.uid && a.recurrenceId?.value.date.getTime() === b.recurrenceId?.value.date.getTime()
|
|
||||||
}
|
|
||||||
|
|
||||||
export function isRRuleSourceEvent(eventInstance: EventUid, event: EventUid) {
|
|
||||||
return eventInstance.uid === event.uid && event.recurrenceId === undefined
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getRRuleString(recurrenceRule?: IcsRecurrenceRule) {
|
|
||||||
if (!recurrenceRule) return ''
|
|
||||||
return generateIcsRecurrenceRule(recurrenceRule).trim().slice(6)
|
|
||||||
}
|
|
||||||
|
|
||||||
// FIXME - CJ - 2025-07-11 - This function should only be used for display purposes
|
|
||||||
// It does not handle escape characters properly (quotes, comments)
|
|
||||||
// and parsing the result back to a contact with `mailboxToContact` may fail
|
|
||||||
// See https://datatracker.ietf.org/doc/html/rfc5322#section-3.4 the specs
|
|
||||||
export function contactToMailbox(contact: Contact | VCard): string {
|
|
||||||
return contact.name
|
|
||||||
? `${contact.name} <${contact.email}>`
|
|
||||||
: contact.email!
|
|
||||||
}
|
|
||||||
|
|
||||||
export function mailboxToContact(mailbox: string): Contact {
|
|
||||||
const parsed = parseOneAddress(mailbox)
|
|
||||||
if (parsed?.type !== 'mailbox') throw new Error(`Failed to parse mailbox '${mailbox}' `)
|
|
||||||
return {
|
|
||||||
name: parsed.name ?? undefined,
|
|
||||||
email: parsed.address,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function isSameContact(a: Contact | VCard, b: Contact | VCard) {
|
|
||||||
return a.name === b.name && a.email === b.email
|
|
||||||
}
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
import type { CalendarOptions,
|
|
||||||
SelectCalendarHandlers,
|
|
||||||
EventEditHandlers,
|
|
||||||
ServerSource,
|
|
||||||
VCardProvider,
|
|
||||||
} from '../types/options'
|
|
||||||
|
|
||||||
export function isServerSource(source: ServerSource | unknown): source is ServerSource {
|
|
||||||
return (source as ServerSource).serverUrl !== undefined
|
|
||||||
}
|
|
||||||
|
|
||||||
export function isVCardProvider(source: VCardProvider | unknown): source is VCardProvider {
|
|
||||||
return (source as VCardProvider).fetchContacts !== undefined
|
|
||||||
}
|
|
||||||
|
|
||||||
export function hasEventHandlers(options: CalendarOptions): options is EventEditHandlers {
|
|
||||||
return (options as EventEditHandlers).onCreateEvent !== undefined
|
|
||||||
}
|
|
||||||
|
|
||||||
export function hasCalendarHandlers(options: CalendarOptions): options is SelectCalendarHandlers {
|
|
||||||
return (options as SelectCalendarHandlers).onClickSelectCalendars !== undefined
|
|
||||||
}
|
|
||||||
@@ -1,50 +0,0 @@
|
|||||||
.open-calendar__form {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__form__content {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: max-content max-content;
|
|
||||||
grid-gap: 5px;
|
|
||||||
align-items: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__form__content label {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* FIXME - CJ - 2025-07-03 - replace by something else that supports localization */
|
|
||||||
.open-calendar__form__content label::after {
|
|
||||||
content: ":";
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__form__content input[type=checkbox] {
|
|
||||||
justify-self: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__form__list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
grid-gap: 0.25rem;
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__form__buttons {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__form__buttons>* {
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar {
|
|
||||||
font-family: sans-serif;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ec {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
import { CalendarElement } from './calendarelement/calendarElement'
|
|
||||||
import './index.css'
|
|
||||||
import { setTranslations, type ResourceBundle} from './translations'
|
|
||||||
import type { AddressBookSource,
|
|
||||||
CalendarOptions,
|
|
||||||
CalendarSource,
|
|
||||||
VCardProvider,
|
|
||||||
RecursivePartial,
|
|
||||||
ServerSource,
|
|
||||||
} from './types/options'
|
|
||||||
|
|
||||||
export async function createCalendar(
|
|
||||||
calendarSources: (ServerSource | CalendarSource)[],
|
|
||||||
addressBookSources: (ServerSource | AddressBookSource | VCardProvider)[],
|
|
||||||
target: Element,
|
|
||||||
options?: CalendarOptions,
|
|
||||||
translations?: RecursivePartial<ResourceBundle>,
|
|
||||||
) {
|
|
||||||
if (translations) setTranslations(translations)
|
|
||||||
const calendar = new CalendarElement()
|
|
||||||
await calendar.create(calendarSources, addressBookSources, target, options)
|
|
||||||
return calendar
|
|
||||||
}
|
|
||||||
@@ -1,24 +0,0 @@
|
|||||||
.open-calendar__popup__overlay {
|
|
||||||
position: fixed;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
left: 0px;
|
|
||||||
top: 0px;
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 2000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__popup--hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-calendar__popup__frame {
|
|
||||||
width: fit-content;
|
|
||||||
height: fit-content;
|
|
||||||
background-color: white;
|
|
||||||
padding: 0.5rem;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
import './popup.css'
|
|
||||||
import { parseHtml } from '../helpers/dom-helper'
|
|
||||||
|
|
||||||
const html = /*html*/`
|
|
||||||
<div class="open-calendar__popup__overlay open-calendar__popup--hidden">
|
|
||||||
<div class="open-calendar__popup__frame"></div>
|
|
||||||
</div>`
|
|
||||||
|
|
||||||
export class Popup {
|
|
||||||
|
|
||||||
private _node: HTMLDivElement
|
|
||||||
public content: HTMLDivElement
|
|
||||||
|
|
||||||
constructor(target: Node) {
|
|
||||||
this._node = parseHtml<HTMLDivElement>(html)[0]
|
|
||||||
target.appendChild(this._node)
|
|
||||||
|
|
||||||
this.content = this._node.firstElementChild as HTMLDivElement
|
|
||||||
|
|
||||||
window.addEventListener('mousedown', e => {
|
|
||||||
if (this._node.classList.contains('open-calendar__popup--hidden')) return
|
|
||||||
if (e.target instanceof Element && (e.target === this.content || e.target.contains(this.content))) {
|
|
||||||
this.setVisible(false)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
public destroy = () => {
|
|
||||||
this._node.remove()
|
|
||||||
}
|
|
||||||
|
|
||||||
setVisible = (visible: boolean) => {
|
|
||||||
this._node.classList.toggle('open-calendar__popup--hidden', !visible)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,123 +0,0 @@
|
|||||||
import type { RecursivePartial } from './types/options'
|
|
||||||
|
|
||||||
// HACK - CJ - 2025-07-03 - Ideally, this object would have been a json file and imported with:
|
|
||||||
// `import en from 'locale/en/translation.json'`
|
|
||||||
// However, the lib used to create the declarations file `index.d.ts` thinks this is ts import
|
|
||||||
// and looks for the file `locale/en/translation.json.d.ts` which doesn't exists.
|
|
||||||
const en = {
|
|
||||||
'calendarElement': {
|
|
||||||
'timeGridDay': 'Day',
|
|
||||||
'timeGridWeek': 'Week',
|
|
||||||
'dayGridMonth': 'Month',
|
|
||||||
'listDay': 'List',
|
|
||||||
'listWeek': 'List Week',
|
|
||||||
'listMonth': 'List Month',
|
|
||||||
'listYear': 'List Year',
|
|
||||||
'today': 'Today',
|
|
||||||
'allDay': 'Daily',
|
|
||||||
'calendars': 'Calendars',
|
|
||||||
'newEvent': 'New Event',
|
|
||||||
},
|
|
||||||
'eventForm': {
|
|
||||||
'allDay': 'Daily',
|
|
||||||
'calendar': 'Calendar',
|
|
||||||
'title': 'Title',
|
|
||||||
'location': 'Location',
|
|
||||||
'start': 'Start',
|
|
||||||
'end': 'End',
|
|
||||||
'organizer': 'Organizer',
|
|
||||||
'attendees': 'Attendees',
|
|
||||||
'addAttendee': 'Add attendee',
|
|
||||||
'description': 'Description',
|
|
||||||
'delete': 'Delete',
|
|
||||||
'cancel': 'Cancel',
|
|
||||||
'save': 'Save',
|
|
||||||
'chooseACalendar': '-- Choose a calendar --',
|
|
||||||
'rrule': 'Frequency',
|
|
||||||
'userInvite': 'You were invited to this event',
|
|
||||||
},
|
|
||||||
'eventBody': {
|
|
||||||
'organizer': 'Organizer',
|
|
||||||
'participation_require': 'Required participant',
|
|
||||||
'participation_optional': 'Optional participant',
|
|
||||||
'non_participant': 'Non participant',
|
|
||||||
'participation_confirmed': 'Participation confirmed',
|
|
||||||
'participation_pending': 'Participation pending',
|
|
||||||
'participation_confirmed_tentative': 'Participation confirmed tentative',
|
|
||||||
'participation_declined': 'Participation declined',
|
|
||||||
},
|
|
||||||
'recurringForm': {
|
|
||||||
'editRecurring': 'This is a recurring event',
|
|
||||||
'editAll': 'Edit all occurrences',
|
|
||||||
'editSingle': 'Edit this occurrence only',
|
|
||||||
},
|
|
||||||
'participationStatus': {
|
|
||||||
'NEEDS-ACTION': 'Needs to answer',
|
|
||||||
'ACCEPTED': 'Accepted',
|
|
||||||
'DECLINED': 'Declined',
|
|
||||||
'TENTATIVE': 'Tentatively accepted',
|
|
||||||
'DELEGATED': 'Delegated',
|
|
||||||
},
|
|
||||||
'userParticipationStatus': {
|
|
||||||
'NEEDS-ACTION': 'Not answered',
|
|
||||||
'ACCEPTED': 'Accept',
|
|
||||||
'DECLINED': 'Decline',
|
|
||||||
'TENTATIVE': 'Accept tentatively',
|
|
||||||
},
|
|
||||||
'attendeeRoles': {
|
|
||||||
'CHAIR': 'Chair',
|
|
||||||
'REQ-PARTICIPANT': 'Required participant',
|
|
||||||
'OPT-PARTICIPANT': 'Optional participant',
|
|
||||||
'NON-PARTICIPANT': 'Non participant',
|
|
||||||
},
|
|
||||||
'rrules': {
|
|
||||||
'none': 'Never',
|
|
||||||
'unchanged': 'Keep existing',
|
|
||||||
'FREQ=DAILY': 'Daily',
|
|
||||||
'FREQ=WEEKLY': 'Weekly',
|
|
||||||
'BYDAY=MO,TU,WE,TH,FR;FREQ=DAILY': 'Workdays',
|
|
||||||
'INTERVAL=2;FREQ=WEEKLY': 'Every two week',
|
|
||||||
'FREQ=MONTHLY': 'Monthly',
|
|
||||||
'FREQ=YEARLY': 'Yearly',
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
export type ResourceBundle = typeof en
|
|
||||||
|
|
||||||
let translations = en
|
|
||||||
|
|
||||||
export const setTranslations = (bundle: RecursivePartial<ResourceBundle>) => translations = {
|
|
||||||
calendarElement: {
|
|
||||||
...en.calendarElement,
|
|
||||||
...bundle.calendarElement,
|
|
||||||
},
|
|
||||||
eventForm: {
|
|
||||||
...en.eventForm,
|
|
||||||
...bundle.eventForm,
|
|
||||||
},
|
|
||||||
eventBody: {
|
|
||||||
...en.eventBody,
|
|
||||||
...bundle.eventBody,
|
|
||||||
},
|
|
||||||
recurringForm: {
|
|
||||||
...en.recurringForm,
|
|
||||||
...bundle.recurringForm,
|
|
||||||
},
|
|
||||||
userParticipationStatus: {
|
|
||||||
...en.userParticipationStatus,
|
|
||||||
...bundle.userParticipationStatus,
|
|
||||||
},
|
|
||||||
participationStatus: {
|
|
||||||
...en.participationStatus,
|
|
||||||
...bundle.participationStatus,
|
|
||||||
},
|
|
||||||
attendeeRoles: {
|
|
||||||
...en.attendeeRoles,
|
|
||||||
...bundle.attendeeRoles,
|
|
||||||
},
|
|
||||||
rrules: {
|
|
||||||
...en.rrules,
|
|
||||||
...bundle.rrules,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
export const getTranslations = () => translations
|
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
import type { DAVAddressBook } from 'tsdav'
|
|
||||||
import ICAL from 'ical.js'
|
|
||||||
|
|
||||||
export type AddressBook = DAVAddressBook & {
|
|
||||||
headers?: Record<string, string>
|
|
||||||
uid?: unknown
|
|
||||||
}
|
|
||||||
|
|
||||||
export type AddressBookObject = {
|
|
||||||
data: ICAL.Component
|
|
||||||
etag?: string
|
|
||||||
url: string
|
|
||||||
addressBookUrl: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export type VCard = {
|
|
||||||
name: string
|
|
||||||
email: string | null
|
|
||||||
}
|
|
||||||
|
|
||||||
export type AddressBookVCard = {
|
|
||||||
// INFO - 2025-07-24 - addressBookUrl is undefined when the contact is from a VCardProvider
|
|
||||||
addressBookUrl?: string
|
|
||||||
vCard: VCard
|
|
||||||
}
|
|
||||||
|
|
||||||
export type Contact = {
|
|
||||||
name?: string
|
|
||||||
email: string
|
|
||||||
}
|
|
||||||
@@ -1,39 +0,0 @@
|
|||||||
import type { IcsCalendar, IcsEvent, IcsRecurrenceId } from 'ts-ics'
|
|
||||||
import type { DAVCalendar } from 'tsdav'
|
|
||||||
|
|
||||||
// TODO - CJ - 2025-07-03 - add <TCalendarUid = any> generic
|
|
||||||
// TODO - CJ - 2025-07-03 - add options to support IcsEvent custom props
|
|
||||||
export type Calendar = DAVCalendar & {
|
|
||||||
// INFO - CJ - 2025-07-03 - Useful fields from 'DAVCalendar'
|
|
||||||
// ctag?: string
|
|
||||||
// description?: string;
|
|
||||||
// displayName?: string | Record<string, unknown>;
|
|
||||||
// calendarColor?: string
|
|
||||||
// url: string
|
|
||||||
// fetchOptions?: RequestInit
|
|
||||||
headers?: Record<string, string>
|
|
||||||
uid?: unknown
|
|
||||||
}
|
|
||||||
|
|
||||||
export type CalendarObject = {
|
|
||||||
data: IcsCalendar
|
|
||||||
etag?: string
|
|
||||||
url: string
|
|
||||||
calendarUrl: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export type CalendarEvent = {
|
|
||||||
calendarUrl: string
|
|
||||||
event: IcsEvent
|
|
||||||
}
|
|
||||||
|
|
||||||
export type EventUid = {
|
|
||||||
uid: string
|
|
||||||
recurrenceId?: IcsRecurrenceId
|
|
||||||
}
|
|
||||||
|
|
||||||
export type DisplayedCalendarEvent = {
|
|
||||||
calendarUrl: string
|
|
||||||
event: IcsEvent
|
|
||||||
recurringEvent?: IcsEvent
|
|
||||||
}
|
|
||||||
@@ -1,160 +0,0 @@
|
|||||||
import type { IcsEvent } from 'ts-ics'
|
|
||||||
import type { Calendar, CalendarEvent } from './calendar'
|
|
||||||
import type { AddressBookVCard, Contact, VCard } from './addressbook'
|
|
||||||
import type { attendeeRoleTypes, availableViews } from '../contants'
|
|
||||||
|
|
||||||
export type RecursivePartial<T> = {
|
|
||||||
[P in keyof T]?: RecursivePartial<T[P]>
|
|
||||||
}
|
|
||||||
|
|
||||||
export type DomEvent = GlobalEventHandlersEventMap[keyof GlobalEventHandlersEventMap]
|
|
||||||
|
|
||||||
export type ServerSource = {
|
|
||||||
serverUrl: string
|
|
||||||
headers?: Record<string, string>
|
|
||||||
fetchOptions?: RequestInit
|
|
||||||
}
|
|
||||||
|
|
||||||
export type CalendarSource = {
|
|
||||||
calendarUrl: string
|
|
||||||
calendarUid?: unknown
|
|
||||||
headers?: Record<string, string>
|
|
||||||
fetchOptions?: RequestInit
|
|
||||||
}
|
|
||||||
|
|
||||||
export type AddressBookSource = {
|
|
||||||
addressBookUrl: string
|
|
||||||
addressBookUid?: unknown
|
|
||||||
headers?: Record<string, string>
|
|
||||||
fetchOptions?: RequestInit
|
|
||||||
}
|
|
||||||
|
|
||||||
export type VCardProvider = {
|
|
||||||
fetchContacts: () => Promise<VCard[]>
|
|
||||||
}
|
|
||||||
|
|
||||||
export type View = typeof availableViews[number]
|
|
||||||
export type IcsAttendeeRoleType = typeof attendeeRoleTypes[number]
|
|
||||||
|
|
||||||
|
|
||||||
export type SelectedCalendar = {
|
|
||||||
url: string
|
|
||||||
selected: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
export type SelectCalendarCallback = (calendar: SelectedCalendar) => void
|
|
||||||
export type SelectCalendarsClickInfo = {
|
|
||||||
jsEvent: DomEvent
|
|
||||||
calendars: Calendar[]
|
|
||||||
selectedCalendars: Set<string>
|
|
||||||
handleSelect: SelectCalendarCallback
|
|
||||||
}
|
|
||||||
export type SelectCalendarHandlers = {
|
|
||||||
onClickSelectCalendars: (info: SelectCalendarsClickInfo) => void,
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export type EventBodyInfo = {
|
|
||||||
calendar: Calendar
|
|
||||||
vCards: AddressBookVCard[]
|
|
||||||
event: IcsEvent
|
|
||||||
view: View
|
|
||||||
userContact?: Contact
|
|
||||||
}
|
|
||||||
export type BodyHandlers = {
|
|
||||||
getEventBody: (info: EventBodyInfo) => Node[]
|
|
||||||
}
|
|
||||||
|
|
||||||
export type EventEditCallback = (event: CalendarEvent) => Promise<Response>
|
|
||||||
export type EventEditCreateInfo = {
|
|
||||||
jsEvent: DomEvent
|
|
||||||
userContact?: Contact,
|
|
||||||
event: IcsEvent
|
|
||||||
calendars: Calendar[]
|
|
||||||
vCards: AddressBookVCard[]
|
|
||||||
handleCreate: EventEditCallback
|
|
||||||
}
|
|
||||||
export type EventEditSelectInfo = {
|
|
||||||
jsEvent: DomEvent
|
|
||||||
userContact?: Contact,
|
|
||||||
calendarUrl: string
|
|
||||||
event: IcsEvent
|
|
||||||
recurringEvent?: IcsEvent
|
|
||||||
calendars: Calendar[]
|
|
||||||
vCards: AddressBookVCard[]
|
|
||||||
handleUpdate: EventEditCallback
|
|
||||||
handleDelete: EventEditCallback
|
|
||||||
}
|
|
||||||
export type EventEditMoveResizeInfo = {
|
|
||||||
jsEvent: DomEvent
|
|
||||||
calendarUrl: string
|
|
||||||
userContact?: Contact,
|
|
||||||
event: IcsEvent
|
|
||||||
recurringEvent?: IcsEvent,
|
|
||||||
start: Date,
|
|
||||||
end: Date,
|
|
||||||
handleUpdate: EventEditCallback
|
|
||||||
}
|
|
||||||
export type EventEditDeleteInfo = {
|
|
||||||
jsEvent: DomEvent
|
|
||||||
userContact?: Contact,
|
|
||||||
calendarUrl: string
|
|
||||||
event: IcsEvent
|
|
||||||
recurringEvent?: IcsEvent
|
|
||||||
handleDelete: EventEditCallback
|
|
||||||
}
|
|
||||||
export type EventEditHandlers = {
|
|
||||||
onCreateEvent: (info: EventEditCreateInfo) => void,
|
|
||||||
onSelectEvent: (info: EventEditSelectInfo) => void,
|
|
||||||
onMoveResizeEvent: (info: EventEditMoveResizeInfo) => void,
|
|
||||||
onDeleteEvent: (info: EventEditDeleteInfo) => void,
|
|
||||||
}
|
|
||||||
|
|
||||||
export type EventChangeInfo = {
|
|
||||||
calendarUrl: string
|
|
||||||
event: IcsEvent
|
|
||||||
ical: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export type EventChangeHandlers = {
|
|
||||||
onEventCreated?: (info: EventChangeInfo) => void
|
|
||||||
onEventUpdated?: (info: EventChangeInfo) => void
|
|
||||||
onEventDeleted?: (info: EventChangeInfo) => void
|
|
||||||
}
|
|
||||||
|
|
||||||
export type CalendarElementOptions = {
|
|
||||||
view?: View
|
|
||||||
views?: View[]
|
|
||||||
locale?: string
|
|
||||||
date?: Date
|
|
||||||
editable?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
export type CalendarClientOptions = {
|
|
||||||
userContact?: Contact
|
|
||||||
}
|
|
||||||
|
|
||||||
export type DefaultComponentsOptions = {
|
|
||||||
hideVCardEmails?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
export type CalendarOptions =
|
|
||||||
// NOTE - CJ - 2025-07-03
|
|
||||||
// May define individual options or not
|
|
||||||
CalendarElementOptions
|
|
||||||
// May define individual options or not
|
|
||||||
& CalendarClientOptions
|
|
||||||
// Must define all handlers or none
|
|
||||||
& (SelectCalendarHandlers | Record<never, never>)
|
|
||||||
// Must define all handlers or none
|
|
||||||
& (EventEditHandlers | Record<never, never>)
|
|
||||||
// May define individual handlers or not
|
|
||||||
& EventChangeHandlers
|
|
||||||
// May define handlers or not, but they will be assigned a default value if they are not
|
|
||||||
& Partial<BodyHandlers>
|
|
||||||
& DefaultComponentsOptions
|
|
||||||
|
|
||||||
export type CalendarResponse = {
|
|
||||||
response: Response
|
|
||||||
ical: string
|
|
||||||
}
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
/// <reference types="vite/client" />
|
|
||||||
@@ -1,36 +0,0 @@
|
|||||||
{
|
|
||||||
"include": ["src/**/*"],
|
|
||||||
"exclude": ["node_modules", "vite.config.ts"],
|
|
||||||
"compilerOptions": {
|
|
||||||
"outDir": "./dist/",
|
|
||||||
"module": "esnext",
|
|
||||||
"target": "es2020",
|
|
||||||
"lib": ["ES2020", "DOM"],
|
|
||||||
"useDefineForClassFields": true,
|
|
||||||
"skipLibCheck": true,
|
|
||||||
"types": [],
|
|
||||||
"declaration": true,
|
|
||||||
"declarationDir": "./build/",
|
|
||||||
"esModuleInterop": true,
|
|
||||||
/* Bundler mode */
|
|
||||||
"moduleResolution": "node",
|
|
||||||
"resolveJsonModule": true,
|
|
||||||
"verbatimModuleSyntax": true,
|
|
||||||
"moduleDetection": "force",
|
|
||||||
/* Linting */
|
|
||||||
"strict": true,
|
|
||||||
"noUnusedLocals": true,
|
|
||||||
"noUnusedParameters": true,
|
|
||||||
"noImplicitAny": true,
|
|
||||||
"erasableSyntaxOnly": true,
|
|
||||||
"noFallthroughCasesInSwitch": true,
|
|
||||||
"noUncheckedSideEffectImports": true,
|
|
||||||
"allowSyntheticDefaultImports": true,
|
|
||||||
/* FIXME - CJ - 2025-07-03 - Compilation worked file when I added `tsconfig-paths-webpack-plugin` but I could not find a working plugin for the .d.ts files */
|
|
||||||
// "baseUrl": "./src",
|
|
||||||
// "paths": {
|
|
||||||
// "@helpers/*": ["./helpers/*"],
|
|
||||||
// "@calendar-types": ["./types.ts"]
|
|
||||||
// },
|
|
||||||
},
|
|
||||||
}
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
import { defineConfig } from 'vite'
|
|
||||||
import { nodePolyfills } from 'vite-plugin-node-polyfills'
|
|
||||||
// INFO - CJ - 2025-07-03 - This plugin show tsc errors on vite dev
|
|
||||||
import pluginChecker from 'vite-plugin-checker'
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [
|
|
||||||
nodePolyfills(),
|
|
||||||
pluginChecker({ typescript: true }),
|
|
||||||
],
|
|
||||||
build: {
|
|
||||||
lib: {
|
|
||||||
entry: './src/index.ts',
|
|
||||||
name: 'CalendarClient',
|
|
||||||
fileName: 'index',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
resolve: {
|
|
||||||
alias: {
|
|
||||||
'node-fetch': 'axios',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
@@ -1,43 +0,0 @@
|
|||||||
const path = require('path')
|
|
||||||
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
|
|
||||||
const DtsBundleWebpack = require('dts-bundle-webpack')
|
|
||||||
const isProduction = process.env.NODE_ENV === 'production' || true
|
|
||||||
const name = 'open-dav-calendar'
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
mode: isProduction ? 'production' : 'development',
|
|
||||||
entry: {
|
|
||||||
index: "./src/index.ts",
|
|
||||||
},
|
|
||||||
target: 'web',
|
|
||||||
plugins: [
|
|
||||||
new NodePolyfillPlugin(),
|
|
||||||
new DtsBundleWebpack({
|
|
||||||
name: name,
|
|
||||||
main: path.resolve(__dirname, "build/index.d.ts"),
|
|
||||||
out: path.resolve(__dirname, "dist/index.d.ts"),
|
|
||||||
})
|
|
||||||
],
|
|
||||||
module: {
|
|
||||||
rules: [{
|
|
||||||
test: /\.ts$/,
|
|
||||||
use: 'ts-loader',
|
|
||||||
exclude: /node_modules/,
|
|
||||||
}, {
|
|
||||||
test: /\.css$/,
|
|
||||||
use: ['style-loader', 'css-loader']
|
|
||||||
}],
|
|
||||||
},
|
|
||||||
resolve: {
|
|
||||||
extensions: ['.ts', '.js'],
|
|
||||||
},
|
|
||||||
output: {
|
|
||||||
path: path.resolve(__dirname, 'dist'),
|
|
||||||
filename: '[name].js',
|
|
||||||
library: {
|
|
||||||
type: 'umd',
|
|
||||||
name: name,
|
|
||||||
umdNamedDefine: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user