How can I make a Year to a view, timeline in tiddlywiki

#1

Folks,

I am enjoying House Sitting and want to have a 6 monthly or year view calendar. If possible I would love to create a tiddler with a date range that appears on the year to a view calendar, even just with a color highlight and ideally use drag and drop to highlight a range of dates.

TiddlyTools solution comes close in its visual presentation but not sure it handles multi-day date range booking.

Any pointers to prior solutions would be appreciated.

#2

TiddlyTools/Time/Calendar does indeed handle “multi-day date range booking”, through use of the “Timeline” feature:

  • Display the year calendar (TiddlyTools/Time/Calendar)

First, you need to define a “timeline” tiddler. You will only need to do this once.

  • Click on any date in the calendar
  • In the date popup, press the [+] button and then press the “new timeline” button
  • This will start editing a “New Timeline” tiddler that is automatically tagged with “timeline”
    • You can change the title of this tiddler to whatever you like (e.g., “MyTimeline”)
    • If you want, you can set the caption field for an alternative display name
    • There are also fields to set the eventcolor, filter, and list. You can ignore these for now.
    • Press the usual tiddler toolbar “done” button (checkmark) to finish editing this tiddler
  • In the Calendar Settings popup (“gear” button above the calendar), select the checkbox next to your newly created timeline tiddler. This will enable the Calendar to display the events defined by that timeline.
    • You can also set the eventcolor for this timeline by clicking on the color square next to the timeline. This will display a popup input and list in which you can enter (or select) a color. You can use X11 color names or any valid CSS color value.

Now that a timeline tiddler exists, you can begn adding your “multi-day date range bookings”:

  • Click on the starting date for a “multi-day date range booking”
    • In the date popup, press the [+] button, and select your timeline from the “add an event to:” listbox.
    • This will start editing a new timeline event tiddler that is automatically tagged with the name of your timeline.
    • You can change the title of this tiddler to whatever you like (e.g., “SomeEvent”)
    • By default, the tiddler will have timeline.start and timeline.end fields set to the starting date (using YYYY0MM0DD format).
    • Adjust the timeline.end field to the ending date for this “multi-day date range booking”
    • Optionally, add a ‘caption’ for an alternative display name
    • There are also fields to set timeline.days and timeline.type. You can ignore these for now.
    • Press the usual tiddler toolbar “done” button (checkmark) to finish editing this tiddler
    • The Calendar will now show a “color bar” for each date included in the timeline event you just defined.
    • Repeat this sequence for each “multi-day date range booking” you want to add to the Calendar.

You can define multiple timeline tiddlers (using the first sequence described above). This will permit you to create separate sets of timeline event tiddlers that can be easily toggled via the Calendar Settings popup.

In the Calendar Date popup, each timeline event is listed. Click on the event text to view the corresponding timeline event tiddler. You can also click on the color box next to the event text to view the corresponding timeline definition tiddler.

That should be enough to get you started.

enjoy,
-e

3 Likes
#3

I’ve just updated TiddlyTools/Time/Calendar to extend the default “Event List” handler so that you can define date ranges without needing to create Timelines and individual Timeline Event tiddlers.

  • Click on the starting date for a “multi-day date range booking”
  • In the date popup, press the [+] button and press the “new eventlist” button
  • This will start editing a “New Eventlist” tiddler that is automatically tagged with “events”
    • You can change the title of this tiddler to whatever you want (e.g., “MyEvents”)
    • If you want, you can set the caption field for an alternative display name
    • In the text field, a default event entry will be automatically added for the starting date
    • You can change the YYYYMMDD date to “YYYYMMDD-YYYYMMDD” to indicate a multi-day date range
    • Enter the desired event description text
    • Press the usual tiddler toolbar “done” button (checkmark) to finish editng this tiddler
  • The newly created Event List tiddler will automatically be selected in the Calendar Settings popup, so the events listed in that tiddler will be immediately shown in the Calendar display.
  • To add more Event List items to that tiddler, press the [+] button in any Calendar date popup and select your event list tiddler from the “add an event to:” listbox
  • Note that Event List items can be specified as a single date or a date range. If you use four dots instead of a YYYY year number, the event will automatically recur each year on the specified date or date range, like this:
20250301;First day of March 2025
....0301;First day of March, every year
20250301-20250331;Entire month of March 2025
....0301-....0331;Entire month of March, every year

As with the Timeline tiddlers, you can create multiple Event List tiddlers to manage separate sets of events that can be easily toggled via the Calendar settings.

enjoy,
-e

4 Likes