Open 'Calendar' Page/Collection Note to Specific Date/Range

[mschindler504]

Is it possible to force the Calendar to a specific range... Year/Month/Week/Day/etc., depending on the Calendar type and if the selected page/note is a "Day"/"Month"/"Year" note? e.g. I click the Date note "2025/02/01" which is of '#calendar:view=timeGridWeek'. This should load that week on Feb 1st, 2025.

I'm currently able to successfully detect if it's a Day/Month/Year note, as well as correctly calculate the # of days from the current day. Now I'd like to (hopefully) call a method to Jump the Calendar view to the range of that selected Day/Month note (obviously IF its not already within the range).

[dosubot[bot]]

Yes, you can programmatically jump the Trilium Calendar view to a specific date or range using the FullCalendar API, which Trilium's CalendarView component exposes via a React ref. To do this, use calendarRef.current.gotoDate(date) to move the calendar to the desired date, and calendarRef.current.changeView(viewType) to set the calendar to the appropriate view (like timeGridWeek, dayGridMonth, etc.) based on your note type and tags. This lets you sync the calendar display with the selected Day/Month/Year note as needed. You can see how the calendarRef is used for navigation and view changes in the code here.

For example, when a user selects a note for "2025/02/01" with #calendar:view=timeGridWeek, you would:

1. Detect the note type and desired view.
2. Call calendarRef.current.changeView('timeGridWeek') if needed.
3. Call calendarRef.current.gotoDate('2025-02-01') to jump to the week containing that date.

This approach is supported by the FullCalendar API used in Trilium, even though the UI doesn't expose this directly for external triggers. You can integrate this logic wherever you handle note selection events in your code.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[eliandoran]

@rom1dep , I was thinking at some point of a adding a side calendar like some apps like Microsoft Teams do, but we need to think of the UX.

For the second option, I would prefer simply storing the currently viewed month and restore it the next time. I would avoid anymore attributes that are not directly accessible through the UI.

[rom1dep]

@rom1dep , I was thinking at some point of a adding a side calendar like some apps like Microsoft Teams do, but we need to think of the UX.

I don't think anyone would object the launchbar's calendar being re-purposed for that :-)

For the second option, I would prefer simply storing the currently viewed month and restore it the next time. I would avoid anymore attributes that are not directly accessible through the UI.

It could be both ways: the result of navigating to a certain date could be persisted and overwritten as an attribute. If the user wants to be deliberate about that and set it manually, they could as well. Moreover, making attributes more convenient/accessible should be a long-term goal. It's also not too far fetched that at that point there could be "calculated attributes" and #calendar:opensAt=min(note.children.startDate) (most of the accessors' syntax is already formalised under search).

[mschindler504]

@eliandoran, a side calendar would be a great addition.
And in response to 'use cases'... I have all my "#dateNote" pages templated/labeled with "#viewType=calendar #calendar:view=timeGridWeek" (and then "#monthNote" -> "#viewType=calendar #calendar:view=dayGridMonth" and "#yearNote" -> "#viewType=calendar #calendar:view=multiMonthYear").
BUT when you use the 'Calendar' Launcher, and select a date more than a week ago, that 'dateNote' is loaded, but to the current day/week, instead of the week/'timeGridWeek' relevant to the selected date/'dateNote'.

I have a simple script that runs when the 'dateNote' is loaded, and I successfully retrieve the Date, but now I'm just wanting to apply that date or call a method (without modifying the source and rebuilding) to load the week relevant to the selected date as opposed to the 'current date'.
Applying the date to an attribute to via the script would be great, and even easier.

There are also a number of basic JS open source Calendars that I've played around with and started integrating in as well (Calendar.js && tui.calendar

[mschindler504]

@eliandoran / @rom1dep,

Does anyone know if there is any active development for this functionality?
And is there a reference or roadmap available where I can review the features or topics currently in development?

[eliandoran]

Does anyone know if there is any active development for this functionality?

Not that I'm aware of. And since it's only in a discussion, it has less visibility for me when looking for tasks. Either way, there are 1100 other tasks to attend to so it might take a while.

And is there a reference or roadmap available where I can review the features or topics currently in development?

You can see the PRs that are being worked on and some tickets I've assigned myself on. On my side I work on a personal Kanban board that I don't share publicly (yet).

[BeatLink]

it would be great if fullcalendar could be made available in the frontend API