calendar-availability-vue


Weekly calendar availability component for Nextcloud apps

Maintainers

* ChristophWurst
* st3iny

Compatibility matrix

@nextcloud/calendar-availability-vue | @nextcloud/vue | vue | Supported?
---------------------------------------|------------------| ----- |-----------
1.x.x | 6.x.x. and 7.x.x | 2 | ❌ (EOL)
2.x.x | 8.x.x | 2 | ✅
3.x.x | 9.x.x | 3 | ✅

Publishing releases

Releases are tagged, build and published via a workflow dispatch.

1. Navigate to https://github.com/nextcloud/calendar-availability-vue/actions/workflows/release.yml.
2. Run workflow and select branch main (or stableX.X).
3. Wait for a maintainer to approve (or do it yourself).

Slots data structure

The following data structure is used in the front-end. There are helpers to converts from the ical VAVAILABILITY structure to this custom structure and back.

$3

If no slots are set yet, each day must have an empty array.

``json
{
"timezoneId": "Europe/Berlin",
"slots": {
"MO": [],
"TU": [],
"WE": [],
"TH": [],
"FR": [],
"SA": [],
"SU": [],
}
}
`

$3

The following example shows a Mo-Fr schedule.

`json
{
"timezoneId": "Europe/Berlin",
"slots":{
"MO": [
{
"start": 1637568000,
"end": 1637578800,
},
{
"start": 1637582400,
"end": 1637596800,
}
],
"TU": [
{
"start": 1637568000,
"end": 1637578800,
},
{
"start": 1637582400,
"end": 1637596800,
}
],
"WE": [
{
"start": 1637568000,
"end": 1637578800,
},
{
"start": 1637582400,
"end": 1637596800,
}
],
"TH": [
{
"start": 1637568000,
"end": 1637578800,
},
{
"start": 1637582400,
"end": 1637596800,
}
],
"FR": [
{
"start": 1637568000,
"end": 1637578800,
},
{
"start": 1637582400,
"end": 1637589600,
}
],
"SA": [],
"SU": [],
}
}
`

Development setup

If you want to work on improving the components it’s best to run the latest code and link it to your local Nextcloud installation:

1. Install the dependencies with npm ci
2. Build the components every time you do changes: npm run build
3. Connect it to your local Nextcloud development setup:
- In this repository do npm link
- In the repository of an app do npm link @nextcloud/calendar-availability-vue (you need to re-link any time you do npm ci in the app)
4. Then build the app with: npm run build (or watch for changes with npm run watch`)