Basic Timetable

This script is used to display a weekly timetable. It is intended to be an easier alternative to making a table in Trilium yourself. It has no interaction with day notes, and any changes to the displayed events must be done manually. Therefore, this is better suited for displaying static events (such as a school schedule) rather than one-time occurrences (such as meetings).

This script will be re-written in the future to take advantage of JSON notes instead of placing data directly in the script.

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. Make a new Render Note for the timetable. Give it the ~renderNote relation pointing to the imported HTML note.

Adding Events

Events are stored in an array in the Javascript note (line 20). Here are the sample events:

const eventArray = [
    [ "Example event", 1, "11:00", "14:00", "#3366AA" ],
    [ "Thursday 1", 3, "9:30", "12:00", "#668811" ],
    [ "Thursday 2", 3, "12:00", "13:30", "#668811" ]
];

Events are stored in the format [ name, day of the week, start time, end time, color ]. Day of the week starts at zero, which is Monday by default (see below for changing weekdays). Start and end time must be written in 24 hour time. There is no data checking, so make sure no events overlap.

Customization

Modifying Displayed Days

If you'd like to add Saturday and Sunday, change the headersArray on line 9 to include those days:

const headersArray = [
    "SUN",
    "MON",
    "TUE",
    "WED",
    "THU",
    "FRI",
    "SAT"
];

You'll have to edit the event array in order for days to line up again.

Start/End Time

By default, the timetable starts at 7:00 and ends at 19:00. Change this on line 4 of the script note.

const startTime = "7:00";
const endTime = "19:00";

12 or 24 Hour Time

The time column shows 12-hour time by default, but you can change that by modifying the time labels on line 28:

const timesArray = [
    "12:00", "",
    "1:00",  "",
    "2:00",  "",
    "3:00",  "",
    "4:00",  "",
    "5:00",  "",
    ...
];

Changing Colors/Fonts

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