Calendar Page

This script creates calendar view that dynamically shows events from upcoming day notes. Clicking a day number will bring you to the day note.

There are seven default event types, each with its own color and CSS class:

• Birthday
• Deadline
• Meeting
• Test
• Holiday
• Note
• Event

Setup

1. Download the zip from the releases page (don't extract).
2. Right-click a note in Trilium and select import. Point to the zip.
3. If you don't already have one, create a note with the #calendarRoot label.
4. Make the calendar root a Render Note. Give it the ~renderNote relation, pointing to the calendar page HTML note.
5. The calendar should now be displayed. Any day notes with the necessary label will show up here.

You can either add the labels to a day note when needed (#Holiday=Christmas) or you can make a day note template with label definitions for each event:

#label:Event=promoted,multi,text 
#label:Test=promoted,multi,text 
#label:Deadline=promoted,multi,text 
#label:Meeting=promoted,multi,text 
#label:Holiday=promoted,multi,text 
#label:Birthday=promoted,multi,text 
#label:Note=promoted,multi,text 

Customization

Changing Colors/Fonts

I've included various CSS variables for easy styling of the calendar. They're found at the top of the HTML note. By default, it uses fonts and colors from the current active Trilium theme.

Modifying Event Types

Event names, icons, and icon colors can be set by the array in the Javascript note (line 15). You are free to delete any of the existing ones.

const events = [
    ["Test", "bxs-pencil", "#ff4c4c"],
    ["Deadline", "bxs-time", "#ff7b42"],
    ["Meeting", "bxs-briefcase-alt-2", "#dbc745"],
    ["Holiday", "bxs-flag-alt", "#57c94f"],
    ["Birthday", "bxs-cake", "#dd5594"],
    ["Event", "bxs-calendar-alt", "#4bb4cd"],
    ["Note", "bxs-info-circle", "#888"]
]

As an example, adding a "Party" event type with a pink star icon would look like ["Party", "bxs-star", "#dd5594"]. To use it, you'd make a day note that has the label, like #Party="Halloween Bash".

Double Month View

You can toggle the option to have two months displayed at once rather than one; just change the boolean variable in the script note (line 12). I personally prefer this option; if it's the end of January and I have a super important job interview on February 1st, I'd like to see it without changing the page.

Changing Language

There are two arrays in the script note (lines 5 and 9) containing months and days of the week. Simply change the strings.