How to assosiate ICAL events with calendar app links?

đź’» Development
1

Hi,
I’m currently building a web based application, where I integrate the Nextcloud calendar using the CalDAV URL and the official calendar app: https://apps.nextcloud.com/apps/calendar .
The goal would be to add a button, which redirects to the Nextcloud Calendar directly to the event.

When opening an event in my browser myself, I see the following URL:
https://example.com/apps/calendar/timeGridWeek/2025-03-06/edit/sidebar/SOME_MAGIC_ID/ANOTHER_MAGIC_ID

The problem is that I cannot find either of those IDs in the CALDav server.
Sign in to GitHub · GitHub links me to this forum, so could you explain how to get those IDs and construct this link for an event?

Thank you :wave:

2

Hello!

The link you provided is one route from the Vue frontend. The first token is the object id and the second is the recurrence id (according to this naming).

I highly suspect (but I have not checked), that the object id is the filename of the ics file in the DAV server: https://example.com/remote.php/dav/calendars/USERNAME/CALENDARNAME/OBJECT.ics (but this is plainly guessing)

The instance id is probably related to the ICS standard where individual events in a series can be identified by some token. But here I am mostly lost and this is very guessy/unsure. I would have to dig into it myself.

I am more concerned what you intend here to achieve:
You have a web app. OK. You integrate the NC calendar. Via iframe or are you accessing the WebDAV using a JS library externally? (I suspect/assume iframe but still asking)
Adding a button would need you to modify the NC external shared calendar behavior. Or do you want to selectively redirect the URL you mentioned (the opened sidebar) to a URL of your liking in the web browser?

Christian

3

Hi Christian,

thanks for your fast and detailed reply :pray:.
I didn’t find this route definition in the code - interesting…
I guess I’ll look a bit more into what other data I can retrieve from the server, because sadly the data that I currently have access to doesn’t seem to contain the IDs I need.
I’ll update this post once I have more information.

And sorry that I didn’t explain my use case a bit more. No, I am not using iframes. I am using a combination of two different node.js libraries to retrieve the data and parse the ICS event data. The goal would be to add a button that redirects the user to the event url (what I posted in my original post). I do not wish to edit the event in any way and just want to link Nextcloud (with the event opened in the sidebar).

The code will be part of an open source project I’m maintaining.

I’ll check again this evening what data I can get a hold of.

Manuel

1 Like
4

I finally figured it out. Let me explain for all those who will stumble upon the same hurdle:

https://example.com/apps/calendar/timeGridWeek/now/edit/sidebar/SOME_MAGIC_ID/ANOTHER_MAGIC_ID

SOME_MAGIC_ID: This is a base64 url-safe encoded value of the vevent URL property, without the hostname. As an example, the URL on the ICAL event for one of my appointments is “https://example.com/remote.php/dav/calendars/admin/personal/1609CB99-C722-4DE9-93EE-9E9E0E517489.ics”. Just remove the https://example.com part, so you get “/remote.php/dav/calendars/admin/personal/1609CB99-C722-4DE9-93EE-9E9E0E517489.ics” and encode it using base64.

ANOTHER_MAGIC_ID: This is the UNIX epoch value in UTC of the start property of the ICAL event. I use the library “node-ical” which parses this property to a “DateWithTimeZone”, which has the “valueOf” function, which returns the the time in milliseconds. However, for some reason Nextcloud uses a different standard without milliseconds. Therefore you have to divide by 1000. Some pseudocode: “vevent.start.valueOf() / 1000”.

After this, I got the link to work. I’ll mark this as the solution. Thanks for the help @christianlupus

1 Like