It's About Time!

TiddlyTools: "Small Tools for Big Ideas!" (tm)

TiddlyTools/Time/Info

14th August 2022 at 2:52pm

authorEric Shulman
sourcehttps://TiddlyTools.com/timer.html
updatedSunday, August 14th 2022 at 02:52:20pm

Drag this link to
Drag this link to

TiddlyTools/Time/Clocks, TiddlyTools/Time/SidebarClocks

Displays analog and digital clocks with automatic update.
Requires: TiddlyTools/Time/Ticker, TiddlyTools/Time/action-timeout.js
Optional: TiddlyTools/Time/SidebarClocks, TiddlyTools/Time/Setup, $:/config/TiddlyTools/Time

  • To display both clocks, use {{TiddlyTools/Time/Clocks}}.
  • To display either clock separately, use <<clock type:"analog">> or <<clock type:"digital">>.
  • By default, the clocks show the current local time (as determined by your operating system time settings) and are updated once per second.
  • You can set the styles used by the analog clock, change the default timezone offset, or change the digital clock format (see TiddlyTools/Time/Setup).
  • You can override the default digital clock format by adding format:"..." directly in the macro parameters, where the text of the format parameter uses TiddlyWiki Date Format codes.
  • You can override the default timezone offset by adding offset:"..." directly in the macro parameters, with a value of -12:00 through +12:00, where the number is the hours and minutes timezone offset from UTC.

Install optional add-on TiddlyTools/Time/SidebarClocks to display analog and digital clocks in the SideBar.

  • You can show/hide the SideBar clocks, adjust their sizes, change the timezone offset, or change the digital clock format (see TiddlyTools/Time/Setup).
  • You can re-arrange the placement of the SideBar clocks by using drag-and-drop in this tag list:

TiddlyTools/Time/WorldClocks, TiddlyTools/Time/Places

Displays multiple analog and digital clocks for a set of selected places.
Requires: TiddlyTools/Time/Clocks, TiddlyTools/Time/Ticker, TiddlyTools/Time/action-timeout.js
Optional: TiddlyTools/Time/Places, TiddlyTools/Time/Places/Summer, TiddlyTools/Time/Setup, $:/config/TiddlyTools/Time

  • TiddlyTools/Time/WorldClocks always shows the local time (based on your computer's system settings), plus the current time for each selected place.
  • The digital clocks also show the timezone offset, using -12:00 through +12:00, where the number is the hours and minutes offset from UTC.
  • Press to view a popup with available places to display:
    • Click on the heading list to choose one or more sets of places. Use ctrl-click or shift-click to select multiple items.
    • Set or clear checkboxes to show or hide clocks for individual places.
    • select all selects all checkboxes. clear all resets all checkboxes.
    • edits the first selected set of places:
      • Enter place names and timezone offsets, one place name and timezone offset per line.
      • Separate the place names and the timezone offsets using a colon (:). Leading and trailing "whitespace" are ignored.
      • Enter timezone offsets using -12:00 through +12:00, where the number is the hours and minutes offset from UTC.
    • copies the selected individual places to create a new set of places and timezone offsets:
      • The title of the new tiddler can be anything you want, as long as the tiddler is tagged with .
      • Edit the text field to add/remove places and timezone offsets as described above.
      • The caption field should contain a suitably distinct description for your custom set of places. If the caption field is removed or left blank, the tiddler's title will be used.
    • deletes the first selected set of places. You will be asked to confirm before deletion.
  • Press to view a popup with display options:
    • You can adjust the size of the analog and digital clocks. Choose a percentage between 50% and 200% (default is 100%).
    • You can choose to show/hide the analog or digital clocks and set the time/date format used by the digital clocks (see TiddlyWiki Date Format codes).

Install optional add-on TiddlyTools/Time/Places to define a default set of places and timezone offsets used by TiddlyTools/Time/WorldClocks.

  • Note: some places (but not all) change timezone offsets for spring/summer months (Daylight Saving Time).
  • A separate tiddler, TiddlyTools/Time/Places/Summer, contains a pre-defined set of alternative timezone offsets for spring/summer months.

TiddlyTools/Time/Calendar, TiddlyTools/Time/SidebarCalendar, TiddlyTools/Time/ToolbarCalendar

Displays a yearly or monthly calendar with popups that show links to tiddlers, journals, alarms, timers, and events.
Optional: TiddlyTools/Time/SidebarCalendar, TiddlyTools/Time/ToolbarCalendar, TiddlyTools/Time/Alarms, TiddlyTools/Time/Timers, TiddlyTools/Time/Events, TiddlyTools/Time/ParseDate, TiddlyTools/Time/Setup, $:/config/TiddlyTools/Time

  • By default, the calendar shows a year-at-a-glance "grid view" for the current year.
  • You can enter a year number, select a month, or use and buttons to change the calendar display. resets the display to show the grid view for the current year.
  • Click on any month title to switch between displaying an annual calendar and a single-month calendar.
  • While viewing a single-month calendar, you can press or in the calendar heading to display the previous or next month.
  • In calendar grid view, each day displays a "colorbar" indicating alarms
    , timers
    , journals
    , events
    , newly created tiddlers
    , and modified tiddlers
    .
  • Today's date is shown with a gold background
    . You can change the default colorbar colors by pressing or viewing TiddlyTools/Time/Setup.
  • Note: alarms that are scheduled to occur every day are automatically omitted from the calendar display.
  • Clicking on a date shows a popup with links to the individual alarms, timers, journals, events, and tiddler changes for that date. In this popup, you can:
    • Click any link to view that alarm, timer, journal, event or tiddler.
    • creates/edits a "Journal tiddler" for that date. The Journal tiddler is automatically tagged with , and will also have a journal-date field containing a 17-digit number representing the selected date and current local time, using YYYY0MM0DD0hh0mm0ss0XXX TiddlyWiki Date Format codes.
    • adds an alarm for that date. Select an existing Alarm List, or press . The selected date will be automatically entered in the alarm input form. Complete the alarm input form and press to add the alarm to the list. Note: you can edit the Alarm List tiddler to change its title or caption.
    • adds an event for that date. Select an existing Event List or Timeline, or press or . See info for TiddlyTools/Time/Events for more instructions.
  • opens a "print preview" window. Press in the preview window to print the current calendar view.
  • switches to an alternative calendar "list view" that shows all alarms, timers, journals, events and tiddler changes for each month, without using individual date popups.
    • expands the lists horizontally to fit the widest text. restores the default list widths.
    • expands the lists vertically to show an entire month. restores the default list heights.
    • The list view for each month shows a summary colorbar indicating the monthly total of alarms, timers, journals, events, and tiddler changes.
    • resumes display of the default "grid view".
  • shows a popup with the Calendar Settings. In the Settings popup, you can:
    • Press 📄 to view a date-sorted list of all selected events, or 🎨 to change the overall colors and font styles used by the calendar.
    • Use checkboxes to select the alarms, timers, journals, events and tiddler changes that will be shown in the calendar.
    • Click on color boxes to change the colors used to show alarms, timers, journals, events and tiddler changes.
    • You can press to edit , copy , or delete an individual Event List, Timeline or .ics definition.
      • Note: copying a Timeline or .ics definition also converts the copy into a simple text Event List.
  • You can also change the Calendar settings in TiddlyTools/Time/Setup or by directly editing $:/config/TiddlyTools/Time.
  • By default, weeks begin on Sunday and end on Saturday (0 1 2 3 4 5 6). You can change the week order to begin on Monday and end on Sunday (1 2 3 4 5 6 0).

Install optional add-on TiddlyTools/Time/SidebarCalendar to display a monthly calendar in the SideBar tabs.

  • The sidebar calendar always displays one month at a time. Click on the month title to display an annual calendar in the Story River.
  • You can re-arrange the placement of the Calendar in the SideBar tabs by using drag-and-drop in this tag list:

Install optional add-on TiddlyTools/Time/ToolbarCalendar to display a popup monthly calendar in the Tiddler toolbar.

  • The tiddler toolbar calendar always displays one month at a time. Click on the month title to display an annual calendar in the Story River.
  • Click on the date buttons below the calendar to show the month for the tiddler's "created" or "modified" date. resets the display to show the current month.
  • You can re-arrange the placement of the Calendar button in the Tiddler toolbar by using drag-and-drop in this tag list:

TiddlyTools/Time/Events

Define "Event Lists" and "Timelines" used by TiddlyTools/Time/Calendar and TiddlyTools/Time/SidebarCalendar.

To add event dates and descriptions to the default Event List, .

  • Enter event dates using YYYYMMDD, where YYYY is the year, MM is the month number, and DD is the day number. Include leading zeros for single-digit months and days.
  • Enter one date and description per line. Separate the date and the description using a semi-colon (;). Blank lines are ignored.
  • Use .... in place of the year for annual events that occur on the same date each year (such as birthdays and some holidays; e.g., ....0101;New Year's Day).
  • You can add an optional caption field to provide an alternative name for the Event List. If you omit this field (or leave it blank), the tiddler title will be used.
  • You can add an optional eventcolor field to override the default light green event color shown in the calendar.
  • To define multiple Event Lists, create additional tiddlers tagged with and enter dates and descriptions as outlined above.
  • You can also press in the Calendar Settings or any Calendar date popup to create/select an Event List and add/edit events.

You can define one or more "Timeline" tiddlers to manage sets of related "Timeline Events", where each Timeline Event is stored in a separate tiddler.

  • Start by creating a Timeline tiddler, tagged with . You can give this tiddler any title you like. There are several optional fields you can include in the Timeline definition:
    • caption provides an alternative name for the Timeline that will be displayed in the Calendar and Calendar Settings.
    • eventcolor overrides the default light green event color that is shown in the calendar.
    • list contains the titles of specific Timeline Event tiddlers that are associated with this Timeline.
    • filter defines a custom filter that is used to find Timeline Event tiddlers that are associated with this Timeline.
  • Next, create one or more Timeline Event tiddlers.
    • To associate a Timeline Event with a specific Timeline, you can use any of the following methods:
      • Tag the Timeline Event with the title of the Timeline to which it belongs.
      • Add the Timeline Event title to the list field in the Timeline tiddler. If the title contains spaces, be sure to enclose it in doubled square brackets when you enter it into the list field.
      • Ensure that the Timeline Event satisfies whatever criteria are specified in the Timeline's filter field.
      • Note: Using these methods, individual Timeline Event tiddlers can be associated with more than one Timeline.
    • To define a single-day event that will appear once, add a timeline.start field containing an 8-digit YYYYMMDD value. If the timeline.start field is blank or omitted, the modification date of the Timeline event tiddler will be used.
    • To define a multi-day event that will appear every day in a range of dates, add both a timeline.start and a timeline.end field, each with 8-digit YYYYMMDD values.
    • To limit a multi-day event to specific days of the week, add an optional timeline.days field containing a space-separated list of one or more day names (Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday).
    • To define an annual event that will appear on the same day each year, add an 8-digit YYYYMMDD timeline.start and a 4-digit YYYY timeline.end (i.e., omit the MMDD part of the date). Alternatively, you can define an annual event using an 8-digit YYYYMMDD timeline.end by adding an optional timeline.type field with a value of annual.
    • You can add an optional caption field to a Timeline Event tiddler to provide a short description for that event. If the caption field is blank or omitted, the tiddler title will be used.
  • Repeat the above steps to create as many individual Timeline Event tiddlers as you need.
  • You can also press in the Calendar Settings or any Calendar date popup to create/select a Timeline and add events.

You can import .ics (ICalendar) files from Google Calendar and other sources.

  • See https://en.wikipedia.org/wiki/ICalendar for more information about the .ics file format.
  • To import calendar data from Google Calendar:
    • Go to http://calendar.google.com and press the Settings button (gear icon, upper right of page).
    • Choose "Import & export" from left side menu and press the "export" button to download "yourname@gmail.com.ical.zip".
    • On your local system, unzip the downloaded file, which will contain one or more .ics (calendar data) files.
  • Other sites that have many downloadable .ics files (some free) include https://www.calendarlabs.com/ical-calendar/ and https://www.webcal.guru/
    • From their home page, navigate to a calendar of interest and press "download" to get an .ics file on your local system.
  • After you have downloaded one or more .ics files on your local system:
    • Drag-and-drop the downloaded .ics files onto your TiddlyWiki to import them as tiddlers.
    • You can rename the imported tiddlers, but they must have ".ics" as a suffix to be recognized by the TiddlyTools/Time/Calendar.
    • You can add optional caption fields to the .ics tiddlers to provide a short description for each imported list.
    • You can add optional eventcolor fields to the .ics tiddlers to override the default light green event color shown in the calendar.
    • TiddlyTools/Time/Calendar will process any "VEVENT" records contained in .ics tiddlers, using the DTSTART value as the event date and the SUMMARY text as the event description.
  • To save space in your TiddlyWiki, you can convert .ics tiddlers to Event List tiddlers:
    • Press to show a popup with the Calendar Settings.
    • In the "Event and Timelines" section of the Settings popup, press next to any listed .ics tiddler.
    • In the popout "button menu", press to convert the .ics tiddler and create an Event List tiddler.
    • The new Event List tiddler will automatically be selected for display in the calendar.
    • You can then delete the .ics tiddler from your TiddlyWiki.

TiddlyTools/Time/CountDown, TiddlyTools/Time/AutoSaver

Displays a countdown timer that triggers a message and/or custom actions.
Requires: TiddlyTools/Time/Ticker, TiddlyTools/Time/action-timeout.js
Optional: TiddlyTools/Time/AutoSaver, TiddlyTools/Time/Setup, $:/config/TiddlyTools/Time
Examples: SampleCountdown, SampleSequence

  • Enter hours, minutes, seconds, and a brief message to be displayed when the countdown is completed.
  • Press to begin the countdown. The input fields automatically update to show the time remaining.
  • Press to suspend the countdown. Press to continue the countdown.
  • While paused, you can change the time remaining. Press to apply the changes and continue the countdown.
  • Press to cancel the countdown and reset the time and message text.
  • To create a separate countdown timer in another tiddler, use transclusion {{||TiddlyTools/Time/CountDown}}
  • You can define custom actions to be performed when the countdown is completed:
    • Add a macro named done in the tiddler containing your countdown timer. This macro replaces the standard message box.
    • Enter the desired <$action-... /> widget syntax inside the macro definition.
    • Use $(here)$ to refer to the title of tiddler containing your countdown timer.
    • To display the standard message box, use <<showMessage msg:"your message here">>
    • See for an example.

Install optional add-on TiddlyTools/Time/AutoSaver to display a countdown timer in the SideBar that triggers periodic "save file", "export changes" and/or "export tiddlers" actions.

  • When the countdown reaches zero, the AutoSaver save/export actions are triggered.
  • By default, you will be asked to confirm before automatic save/export actions occur.
  • You can disable this by selecting do not ask again. You can also change this option in the settings (see below).
  • The "file save" action depends upon which saver method you are using for your TiddlyWiki.
  • The "export" actions always use the "download file" method.
  • After save/export actions are triggered, the countdown automatically resets and restarts.
  • At any time, you can press to show the settings and manually invoke the selected AutoSaver save/export actions.
  • Whenever the file is saved or tiddlers are exported, messages will appear below the AutoSaver.
    • You can click on a message to show or hide the list of tiddlers that were saved/exported.
    • Press to clear all messages.
  • Press to change the countdown duration and/or configure the desired save/export actions.
    • Enter the countdown timer duration using hours, minutes, and seconds. The default is 30 minutes.
    • Check begin countdown at startup to start the countdown whenever your TiddlyWiki is loaded into the browser.
    • Check ask before saving/exporting to request confirmation before AutoSaver save/export actions are triggered.
    • Check save the file to save a complete stand-alone TiddlyWiki HTML file.
    • Check export changes to save all changed tiddlers to a JSON, CSV, or static HTML.
      • Enter the desired filename/format for saving changed tiddlers. The default is "changes.json".
    • Check export tiddlers to save selected tiddlers to a JSON, CSV, or static HTML. A list of tiddlers is displayed:
      • You can select a filter to set the list of tiddlers to choose. The default is "All tiddlers".
        clones the selected filter, edits the selected filter, deletes the selected filter.
      • In the list of tiddlers, click to select a single tiddler; use ctrl-click or shift-click to select multiple tiddlers.
        selects all listed tiddlers. clears the selection.
      • Enter the desired filename/format for saving selected tiddlers. The default is "tiddlers.json".
    • restores the default settings and stops the countdown.
    • sets the current countdown timer and restarts the countdown.
  • You can re-arrange the position of the AutoSaver in the SideBar by using drag-and-drop in this tag list:
  • Note: if AutoSaver triggers saving of multiple files (e.g., "save the file" and "export changes"), your browser may require special permission.
    • For Chrome users, a message appears: "This file wants to Download multiple files [Allow] [Block]". Press to proceed.
      To configure this permission in advance, paste into the Chrome address bar. Then, follow these steps:
      • Set the default behavior to "Sites can ask to automatically download multiple files"
      • Under "Customized behaviors", in the "Allowed to automatically download multiple files" section, press
      • In the "Add a site" dialog, enter the URL for the site that hosts your TiddlyWiki (e.g., http://mysite.com or https://mysite.com:443)
      • Note: This setting cannot be applied to locally stored files (i.e., URLs beginning with file://). Chrome will always ask for special permission each time multiple AutoSaver actions occur.
    • For Firefox users, you can install the DownThemAll "Mass Downloader" WebExtension by Nils Maier.

TiddlyTools/Time/Alarms

Create and manage a list of one-time and/or repeating alarms.
Requires: TiddlyTools/Time/Ticker, TiddlyTools/Time/action-timeout.js
Examples: SampleAlarms

  • To add an alarm, begin by selecting Once, Daily, or a specific Day of the week.
  • Enter the desired hours, minutes and seconds using 24-hour notation. If you selected Once, also select a month, date, and year.
  • Leave hours, minutes and seconds blank to define an alarm that will be triggered upon startup on the specified date or day of the week.
  • Enter a message that will be displayed when the alarm is triggered. If no message is provided a default message will be used.
  • Press to save the alarm or to reset the inputs.
  • A list of saved alarms will be displayed below the input controls:
    • Press to change an alarm. Press to apply your changes or to cancel the changes and reset the inputs.
    • Press to delete an alarm. You will be asked to confirm before that alarm is deleted.
    • Press to pause an alarm. While paused, the alarm is grayed and will not be triggered. To resume an alarm, press .
  • Press in the "Alarms" heading to delete all alarms. You will be asked to confirm before the alarms are deleted.
  • To create a separate list of alarms in another tiddler, use transclusion {{||TiddlyTools/Time/Alarms}}.
  • Note: when the specified date/time for a Once alarm has passed, it will be grayed and marked as expired, as indicated by a .
    • You can click on an expired alarm or press to update the time/date. Press to apply your changes and reactivate the alarm.
  • You can define custom actions to be performed when an alarm is triggered:
    • Create a separate tiddler containing one or more desired <$action-... /> widgets.
    • Enter the title of the custom action tiddler as the message text for the alarm.
    • When the alarm is triggered, the <$action-... /> widgets contained in the custom action tiddler will be invoked.
    • To display an alarm message box along with the <$action-... /> widgets, you can use <<alarms_message msg:"your message here">> in the custom action tiddler.
    • Note: if the custom action tiddler does not exist when the alarm is triggered, the title of the custom action tiddler will be shown as text in a message box.

TiddlyTools/Time/Timers

Displays a list of task timers to record starting, ending, elapsed and total accumulated times.
Optional: TiddlyTools/Time/Ticker, TiddlyTools/Time/action-timeout.js, TiddlyTools/Time/Setup, $:/config/TiddlyTools/Time
Examples: SampleTimers

  • To add a timer to the list, enter a timername and optional description, and press .
  • If no timername is entered, a default name will be used (Timer, Timer 1, Timer 2, etc.)
  • starts a timer "session". The elapsed time is displayed and automatically updated in real-time.
  • stops the current timer session. The total accumulated time is displayed.
  • cancels the current timer session.
  • clears saved timer sessions. You will be asked to confirm before the data is cleared.
  • shows/hides a table with the starting, ending, elapsed and total time for each timer session.
  • deletes the timer and all associated session data. You will be asked to confirm before the tiddler is deleted.
  • adds or edits a short text comment associated with a specific timer session.
  • You can also click directly on any existing comment text to begin editing that comment.
  • While editing a comment, deletes the comment, or escape discards changes to the comment, or enter saves the comment.
  • Each timer is stored in an individual tiddler with a default prefix of $:/config/Timers/ followed by the timername.
  • To show the timer interface in another tiddler, use <<timers>>.
  • To create a separate set of timers with a different prefix (e.g., "MyTimers"), use <$vars timer_config="MyTimers"><<timers>></$vars>.
  • You can set the format used to display the starting and stopping time (see TiddlyTools/Time/Setup or $:/config/TiddlyTools/Time).
  • Note: if the Ticker or action-timeout.js are not installed, the elapsed time will not be updated in real-time, but will still be recorded correctly when is pressed.
  • You can also use the following macros to create custom output showing only specific interface elements:
    <<timer_add>>Shows timername and description inputs with button.
    <<timer_list>>Shows the list of all currently defined timers.
    <<timer timername>>Shows a single timer for a specific task.
    <<timer_buttons timername>>Shows start, stop and reset buttons.
    <<timer_elapsed timername>>Shows the elapsed time for the current timer session.
    <<timer_total timername>>Shows the total accumulated time for all timer sessions.
    <<timer_history timername>>Shows a table with the starting, ending, elapsed, and total time for each timer session.
    • If you omit the timername parameter, the timer information is stored in the current tiddler.
    • If you specify the timername parameter, the timer information is stored in a separate tiddler with that timername.

TiddlyTools/Time/EditDate

Displays a text input field with "edit-in-place" buttons and a popup monthly calendar to select a date.
Requires: TiddlyTools/Time/Calendar
Optional: TiddlyTools/Time/Setup, $:/config/TiddlyTools/Time

  • To show a date input control in tiddler content, use <<edit-date tiddler:tiddlername field:fieldname type:calendar>>.
  • See TiddlyTools/Time/EditDate for default and optional parameters.
  • Unlike the <$edit-text> widget, the <<edit-date>> macro allows you to input values that are stored in the current tiddler.
  • When the field receives the input focus, "edit-in-place" buttons are displayed. Changes to the field value are not updated until one of these buttons is pressed:
    • saves changes to the field value.
    • cancels changes to the field value.
    • deletes the field value.
  • When type:calendar is used and TiddlyTools/Time/Calendar is installed, a monthly calendar is displayed:

TiddlyTools/Time/ParseDate

Defines filter operators that convert date-formatted input values to another date format.

  • parsedate[]
    converts date-formatted input values to 17-digit TWCore UTC datetime output
  • parsedate[YYYY0MM0DD0hh0mm0ss0XXX]
    converts date-formatted input values to 17-digit TWCore local datetime output
  • parsedate[outputformat]
    converts date-formatted input values to TWCore date-formatted text output
  • unixtime[] (or parsedate[unixtime])
    converts date-formatted input values to "unix time" signed integer output.
  • unixtime[outputformat] (or parsedate:unixtime[outputformat])
    converts "unix time" signed integer input values to TWCore date-formatted text output
  • unixtime[YYYY0MM0DD0hh0mm0ss0XXX]
    converts "unix time" signed integer input values to 17-digit TWCore local datetime output
  • parsedate:unixtime[]
    converts "unix time" signed integer input values to 17-digit TWCore UTC datetime output

Input values can be:

  • Text that is recognized by the Javascript Date() object and conforms to ISO 8601 or RFC2822 date formats.
    • Commas or English day number suffixes ("st", "nd", "rd", and "th") are also permitted but are automatically removed from the input before further processing.
    • Time values (hours, minutes, seconds) are truncated to 2 digits and any excess leading zeros or fractional decimal portion are ignored (e.g., "059.123" seconds is processed as "59" seconds).
  • TWCore datetime text, using 17-digit "YYYY0MM0DD0hh0mm0ss0XXX" format. If less than 17-digits are provided, input values are implicitly padded with trailing zeros.
  • When the unixtime[outputformat] or parsedate:unixtime[outputformat] filter is used, the inputs are treated as "unix time" signed integers, representing the number of milliseconds since midnight 01 January, 1970 UTC. Negative integer numbers represent datetime values before that date.

Output formats (filter operand):

  • The output format uses TiddlyWiki Date Format codes and defaults to [UTC]YYYY0MM0DD0hh0mm0ss0XXX.
  • When the unixtime[] or parsedate[unixtime] filter is used, the output is a signed integer value representing the number of milliseconds since midnight 01 January, 1970 UTC. Negative integer numbers represent datetime values before that date.

The following timezone conversion rules are used to process input and output values:

  • 17-digit TWCore datetime input values (including abbreviated forms, which are automatically padded with trailing zeros) are always assumed to be UTC.
  • 17-digit TWCore datetime output values are either local or UTC timezone depending upon whether the [UTC] formatting prefix is specified.
  • ISO8601/RFC2822 text inputs are assumed to be local time unless a timezone is included in the input value.
  • TWCore formatted date text output is not adjusted for timezone offset unless the [UTC] prefix is included at the beginning of the filter operand. When the [UTC] prefix is present, your locale's timezone offset or the timezone included in the input value will be used to automatically convert the result to UTC standard time.

The first two rules are necessary when working with tiddler fields containing TWCore datetime values (i.e., created and modified fields), which are always stored as UTC values. The last two rules allow for use-case specific control of timezone handling when working with user-supplied inputs and displaying user-visible outputs.

  • Note that output formats containing [UTC] cannot be directly entered into TiddlyWiki filter syntax because that syntax uses [ and ] to enclose literal text operand values. To work around this limitation you can use a reference to a variable that contains the output format, like this:
    <$let format="[UTC]DDD, MMM DDth YYYY at 0hh:0mm:0ss">{{{ [[July 24 1962 02:00:00]parsedate<format>] }}}

TiddlyTools/Time/JournalListChanges

Defines a custom to automatically show a list of created/modified tiddlers in Journal tiddler output.
Requires: TiddlyTools/Time/ParseDate

  • Journal tiddlers must be tagged with and have one of the following:
    • A journal-date field containing a 17-digit local date/time value using YYYY0MM0DD0hh0mm0ss0XXX TiddlyWiki Date Format codes.
    • A title field containing date-formatted text recognized by TiddlyTools/Time/ParseDate.
    • If neither a journal-date nor a valid date-formatted title field are found, the Journal tiddler's created field value is used.

TiddlyTools/Time/Tabs

Defines a tabset and template to show TiddlyTools time and date functions as a group.
Requires: TiddlyTools/Time/Tabs/Template

  • Provides quick access to Clocks, Calendar, Alarms, Timers, Countdown, and World Clocks

TiddlyTools/Time/Setup

Displays controls for viewing/changing the current settings used by TiddlyTools time and date functions.

  • Settings are stored in $:/config/TiddlyTools/Time. To change these settings, you can use the controls shown below.
  • You can also create or update these settings by . You can get a copy of the default settings here.
  • If you clear a setting or , hard-coded default values will be used.
  • TiddlyTools/Time/Clocks:
    • clock_timezone: localtime or a UTC offset, -12:00 through +12:00
    • clock_format: TiddlyWiki Date Format codes
    • clock_size: CSS units
    • clock_background: CSS colors
    • clock_border: CSS borders
    • clock_hands: CSS colors
    • clock_ticks: CSS colors
    • clock_numbers: CSS colors, CSS fonts
  • TiddlyTools/Time/SidebarClocks and TiddlyTools/Time/WorldClocks:
    • sidebar_analog:
      sidebar_analog_size:
      sidebar_digital:
      sidebar_digital_size:
      world_digital:
      world_size:
    • sidebar_timezone: localtime or a UTC offset, -12:00 through +12:00
    • sidebar_format: TiddlyWiki Date Format codes
    • world_format: TiddlyWiki Date Format codes
  • TiddlyTools/Time/Calendar:
    • calendar_showevents:
      calendar_showalarms:
      calendar_showtimers:
      calendar_showjournals:
      calendar_showcreated:
      calendar_showmodified:
      calendar_showtiddlers:
      calendar_showsystem:
      calendar_showcustom:
    • calendar_customfilter: TiddlyWiki Filter Syntax
    • calendar_numbers: CSS colors, CSS fonts
    • calendar_dayformat: TiddlyWiki Date Format codes
    • calendar_yearsize: CSS fonts
    • calendar_monthsize: CSS fonts
    • calendar_textsize: CSS fonts
    • calendar_background: CSS colors
    • calendar_foreground: CSS colors, CSS fonts
    • calendar_today: CSS colors, CSS fonts
    • calendar_timers: CSS colors, CSS fonts
    • calendar_alarms: CSS colors, CSS fonts
    • calendar_journals: CSS colors, CSS fonts
    • calendar_events: CSS colors, CSS fonts
    • calendar_created: CSS colors, CSS fonts
    • calendar_modified: CSS colors, CSS fonts
    • calendar_order: 0=Sunday, 6=Saturday
    • calendar_popup_maxw: CSS units
    • calendar_popup_maxh: CSS units
    • calendar_popup_pos:
  • TiddlyTools/Time/SidebarCalendar and TiddlyTools/Time/ToolbarCalendar:
    • sidebar_calendar:
      sidebar_calendar_size:
      toolbar_calendar:
      toolbar_calendar_size:
  • TiddlyTools/Time/AutoSaver:
    • autosave_countdown: : : (hours, minutes, seconds)
      autosave_ask:
  • TiddlyTools/Time/Timers:

TiddlyTools/Time/Ticker

Defines a StartupAction that automatically updates a UTC date/time value.
Requires: TiddlyTools/Time/action-timeout.js

  • The Ticker uses the <$action-timeout> custom widget and is started when the TiddlyWiki is loaded into the browser.
  • The date/time value is updated once per second and is stored in $:/temp/time/ticker as a 17-digit number using TiddlyWiki Date Format codes: [UTC]YYYY0MM0DD0hh0mm0ss0XXX

TiddlyTools/Time/action-timeout.js

Defines a custom widget, <$action-timeout> that invokes actions using an interrupt-driven timer.

  • To invoke actions one time, use <$action-timeout delay=nnnn actions=... />.
  • To invoke actions repeatedly, use <$action-timeout interval=nnnn actions=... />.
  • delay and interval are specified in milliseconds (a non-zero numeric value is required).
  • actions can be specified using quoted text or a macro reference.
  • There are three different methods you can use to start interrupt-driven timer processing:
    1. Enclose the <$action-timeout> widget within a <$button> widget. Interrupt-driven timeout processing will start when you click on the button.
    2. or, place the <$action-timeout> widget in a tiddler tagged with . Interrupt-driven timeout processing will automatically start when you save-and-reload your TiddlyWiki file.
    3. or, place the <$action-timeout> widget in any tiddler and add an autostart="yes" param to the widget. Interrupt-driven timeout processing will automatically start each time the tiddler content is rendered.
  • If you add tid="tiddlername" and field="fieldname" params (defaults to text), a unique system-generated timeout/interval ID value will be stored in the specified tiddler field. Then, to cancel an active timeout/interval, you can use <$action-timeout clear={{tiddlername!!fieldname}}/>.

SampleTimers

24th September 2020 at 3:27am

Timer name:
Description:

SampleTimer: Timer Example
total: 00:00:49.557
#startedstoppedelapsedtotal
1 2020-09-20 16:04:27.090 2020-09-20 16:04:33.611 00:00:06.520 00:00:06.520
2 2020-09-20 23:01:50.602 2020-09-20 23:02:20.338 00:00:29.736 00:00:36.256
3 2020-09-22 16:51:51.899 2020-09-22 16:51:59.119 00:00:07.219 00:00:43.475
4 2020-09-23 20:28:09.259 2020-09-23 20:28:15.341 00:00:06.082 00:00:49.557

SampleAlarms

24th April 2022 at 1:24am

Saturday, March 29th 2025 05:18:34 Sample Alarms
at on the day of the month on
Time for another work week
Lunch break
Weekend starts... YAY!
Happy Birthday
Happy New Year
It's the weekend... have some fun
Welcome back
It's <<now "DDD, MMM DDth YYYY">>

SampleCountdown

24th September 2020 at 3:27am

SampleSequence

24th September 2020 at 3:27am

This CountDown sequence has alternating sessions of work time and break time.

Setup
worktime:
breaktime:
cycles:
Press apply to load setup