New TiddlyTools time feature: **Interactive Calendar**

[Eric Shulman]

Hi all,

I'm pleased to announce a new addition to my TiddlyTools suite of time-related tiddlers: Interactive calendar display

To install, just drag-and-drop the following tiddler into your document:

http://tiddlytools.com/timer.html#TiddlyTools%2FTimer%2FCalendar

Displays a yearly or monthly calendar with popups that show links to tiddlers

• By default, the calendar displays the current year.
• Enter a year number or select a month to change the view. Press [X] to reset to the current year view.
• Click on a month title to toggle between annual and single-month view.
• Press [<<] to view the previous month. Press [>>] to view the next month.
• Dates on which tiddlers were created or modified and dates which have a Journal tiddler are colored light blue.
• Click a date to show a popup with links to tiddlers created or modified on that date.
• Press [pencil] to create or edit a Journal tiddler for that date.
• You can set the colors and font styles used by the calendar (see TiddlyTools/Timer/Setup below).

With either calendar display, you can easily see on which days you have created or modified tiddlers,

giving you a yearly or monthly view of your tiddler changes.  Then, click on any date to view a popup

that lets you view/edit a Journal tiddler for that date or quickly navigate to any tiddlers created/modified

on that date.

You can also add a monthly calendar directly in the SideBar tabs!...

To install, just drag-and-drop the following tiddler into your document:

http://tiddlytools.com/timer.html#TiddlyTools%2FTimer%2FSidebarCalendar

(note: the SidebarCalendar requires the installation of Calendar tiddler as well)

As a test, I dropped the Calendar into http://TiddlyWiki.com, and was able to instantly see

a "year-at-a-glance" overview of all the changes that Jeremy has made since January 2020.

Note: the Calendar currently excludes system tiddlers, so it doesn't show changes to $:/state, $:/temp,

and TWCore shadow tiddlers.  I will soon be adding a configuration setting to allow customization of

the Calendar filter so shadows and other system tiddlers can be included if desired.

enjoy,

-e

[Birthe C]

Eric,

That is wonderful news. When you created the timers I kind of hoped you would go ahead and create a calendar. I have long wished for a calendar like this.

Now, when clicking on a day of the month I see a text, but the text is showing the date after. Example clicking the date september 1, shows the text, 2nd September 2020.

Birthe

[Eric Shulman]

On Friday, September 4, 2020 at 9:31:36 PM UTC-7, Birthe C wrote:

Now, when clicking on a day of the month I see a text, but the text is showing the date after. Example clicking the date september 1, shows the text, 2nd September 2020.

 

Uh oh!  I think there might be a problem.  The created and modified timestamps are always stored as UTC, but the date formatting for display has to use the local timezone.

I thought I had accounted for this, but perhaps I got it wrong.   What timezone are you in now?  

-e

[Birthe C]

I am in UTC+2 CEST

Birthe

[TW Tones]

Eric,

This is really fantastic, 

This seems to have included almost every feature of every calendar solution so far, but alas the old ones are now dated. So Just in time this new solution.

I am seriously impressed again, but I expect you are not surprised I have a handful of questions/suggestions?

is it very hack-able? 

• Can we use an alternate date format or additional date fields?
• I see this uses the current Journal tiddler date format, great
• I have two new Journal buttons I created attached, which also populate the journal-date field with a tiddlyserial number date
• This is much better for later search and date comparisons than using the title
• Can I hack your calendar to add actions to the new date tiddler click?
• A common complement is a data picker see below why

Date pickers

These date pickers are available due to html

We can use 

  <$edit-text field=date type=date tag="input"/> {{!!date}}

 but it only provides YYYY-0MM-0DD formated dates, 

and

<$edit-text field=time type=time tag="input"/> {{!!time}}

time returns 0hh:0mm

<$edit-text field=datetime-local type="datetime-local" tag="input"/> {{!!datetime-local}}

Returns 2020-09-12T15:31

Issue

We need a data and date/time picker that returns the tiddlywiki date/time formats YYY0MM0DD  and 0hh0mm0ss

We can convert the above date formats but to do this we need to trigger actions on selection, and I do not yet know how.

For example this does not work!

\define myactions()
<$action-sendmessage $message="tm-notify" $param="SampleNotification"/>
\end
<$button tag=div actions=myactions>
<$edit-text field=time type=time tag="input"/>
</$button>

Where myactions would reformat and set a tiddlywiki format time/date field. 

Example of current timezone related issue.

I see this date issue as well see the image, I went to add a note for Christmas day, I live at +10 GMT/UTC, I selected 24th in this snapshot.

I hope this helps

Regards

Tones

[TW Tones]

Post Script

A few more ideas

• One final way I have customised existing calendar systems is to find a way to place reoccurring event on the calendar. In a way they are partial dates
• For example if you clicked on month name you could enter something for every month name, or simple open a tiddler by the name of the month
• Or on a birthday or anniversary create a tiddler that appears on every year on that date.
• A tiddler called the 15th would appear on every 15th of the month
• Another customisation is to make week numbers visible such as w33 and clicking it open the tiddler w33
• An alternative to the year view that shows N months such as last this and next, rather than hard coded provide the month numbers
• <<calendar-months 04 04 05>>  
• <<calendar-months 04-2020 04-2021>>  this April and next year.

Perhaps you plan so but It would be nice to remove the left and right arrows from the year view?

By the way I edited TiddlyTools/Timer/Calendar and see it is eminently hack able, Beautiful.

Love your work

Tones

[Eric Shulman]

On Friday, September 4, 2020 at 10:49:46 PM UTC-7, TW Tones wrote:

Example of current timezone related issue.

I see this date issue as well see the image, I went to add a note for Christmas day, I live at +10 GMT/UTC, I selected 24th in this snapshot.

I *think* I fixed the timezone issue.  If I'm right, it was related the parameter used in the sameday[D] filter:

The documentation at https://tiddlywiki.com/#sameday%20Operator says:

parameter D = a date, in the format YYYYMMDD
D may include a time of day, but this is ignored.

However, if you don't provide a time of day (or use all zeros), then the filter seems sensitive to timezone offset.

I suspect that Jeremy didn't notice a problem since he is located in London, which is naturally UTC+0

Here's my OLD code that went wrong:

   <$vars  month={{{ [[$mm$]addprefix[0]split[]last[2]join[]] }}}>
   <$vars    day={{{ [<dd>add[1]addprefix[0]split[]last[2]join[]]   }}}>
   <$vars  today={{{ [[$yyyy$]addsuffix<month>addsuffix<day>] }}}>

Note the "add[1]" in the day calculation.  This was a "magical mystery hack" that seemed to work for UTC-7 (my current timezone in California), but apparently not for other timezones such as UTC+2 (Birthe) or UTC+10 (Tony)

and here's the NEW code:

   <$vars  month={{{ [[$mm$]addprefix[0]split[]last[2]join[]] }}}>
   <$vars    day={{{ [<dd>addprefix[0]split[]last[2]join[]]   }}}>
   <$vars  today={{{ [[$yyyy$]addsuffix<month>addsuffix<day>addsuffix[120000000]] }}}>

Note the removal of the "add[1]" in the "day" calculation, and the addition of addsuffix[120000000] (i.e., "noon" for UTC+0) in the "today"

This change still gives the correct results for my timezone (YAY!) and, I hope, will now also be correct for all other timezones (i.e., everything from UTC-12 through UTC+12)

However, I can't really be sure until you both (Birthe and Tony) test it!

Please download the update from

http://tiddlytools.com/timer.html#TiddlyTools%2FTimer%2FCalendar

and let me know if it actually does fix the problem.

Awaiting your response with bated breath...

-e

[Saq Imtiaz]

@Eric not seeing any time zone issues. Timezone: CET (UTC +2)

[TW Tones]

Eric,

Fine in 10+ time zone now thanks

Tony

[Eric Shulman]

On Saturday, September 5, 2020 at 1:05:12 AM UTC-7, TW Tones wrote:

Fine in 10+ time zone now thanks

Saq and Tony:  YAY! 

I think I should open a ticket re: sameday[...] needing a full 17-digit time value if not in UTC+0 zone.

Note: sameday[...] works OK in the <<timeline>> macro because it gets a complete 17-digit date param from an existing tiddler:

<$list filter="[!is[system]$subfilter$has[$dateField$]!sort[$dateField$]limit[$limit$]eachday[$dateField$]]">

and then uses sameday:$dateField${!!$dateField$} to find all the other tiddlers for that date.

-e

[Eric Shulman]

On Friday, September 4, 2020 at 11:01:23 PM UTC-7, TW Tones wrote:

Perhaps you plan so but It would be nice to remove the left and right arrows from the year view?

Done.  Arrows omitted for year view, still present for month view.

By the way I edited TiddlyTools/Timer/Calendar and see it is eminently hack able, Beautiful.

Good modularity of macros makes it easier to read (and thus, easier to hack).

Please let me know what specific changes you make, so I can consider rolling them back into the official version.

 

Love your work

Thanks.

-e

[Birthe C]

Time zone correct here too.

Birthe

[Xavier Cazin]

Hi Eric,

Another wonderful iteration, thank you! Not only useful as a tool, but also a great TW5 programming lesson for us to study. May I humbly suggest the addition of
   <$transclude tiddler=<<journalTitle>> mode=block/>

in the showday() macro, just after the call to <<editjournal>>, so that the popup also displays any additional text the user might have added for that day?

Cheers!

-- Xavier Cazin

On Sat, Sep 5, 2020 at 4:49 AM Eric Shulman <elsd...@gmail.com> wrote:

Hi all,

I'm pleased to announce two new additions to my TiddlyTools suite of time-related tiddlers: Interactive calendar display

To install, just drag-and-drop the following tiddler into your document:

http://tiddlytools.com/timer.html#TiddlyTools%2FTimer%2FCalendar

Displays a yearly or monthly calendar with popups that show links to tiddlers

• By default, the calendar displays the current year.
• Enter a year number or select a month to change the view. Press [X] to reset to the current year view.
• Click on a month title to toggle between annual and single-month view.
• Press [<<] to view the previous month. Press [>>] to view the next month.
• Dates on which tiddlers were created or modified and dates which have a Journal tiddler are colored light blue.
• Click a date to show a popup with links to tiddlers created or modified on that date.
• Press [pencil] to create or edit a Journal tiddler for that date.
• You can set the colors and font styles used by the calendar (see TiddlyTools/Timer/Setup below).

With either calendar display, you can easily see on which days you have created or modified tiddlers,

giving you a yearly or monthly view of your tiddler changes.  Then, click on any date to view a popup

that lets you view/edit a Journal tiddler for that date or quickly navigate to any tiddlers created/modified

on that date.

You can also add a monthly calendar directly in the SideBar tabs!...

To install, just drag-and-drop the following tiddler into your document:

http://tiddlytools.com/timer.html#TiddlyTools%2FTimer%2FSidebarCalendar

As a test, I dropped the Calendar into http://TiddlyWiki.com, and was able to instantly see

a "year-at-a-glance" overview of all the changes that Jeremy has made since January 2020.

Note: the Calendar currently excludes system tiddlers, so it doesn't show changes to $:/state, $:/temp,

and TWCore shadow tiddlers.  I will soon be adding a configuration setting to allow customization of

the Calendar filter so shadows and other system tiddlesr can be included if desired.

enjoy,

-e

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/4ab62b70-e074-4679-8035-8ce17c1ede7bo%40googlegroups.com.

[Eric Shulman]

On Saturday, September 5, 2020 at 7:05:18 AM UTC-7, Xavier wrote:

Another wonderful iteration, thank you! Not only useful as a tool, but also a great TW5 programming lesson for us to study. May I humbly suggest the addition of 

   <$transclude tiddler=<<journalTitle>> mode=block/>

in the showday() macro, just after the call to <<editjournal>>, so that the popup also displays any additional text the user might have added for that day?

The contents of a Journal tiddler can be almost anything, and could conceivably be quite substantial. This could make the popup display excessively large and potentially exceed the available surrounding space. I will experiment with ways to mitigate this (i.e., by using a div with "max-height:...;max-width:...;overflow:auto;"), but my expectation is that for many cases, this will not produce a satisfying display experience.  In practice I think it is much simpler and more reliable to just open the Journal tiddler to view it as a regular tiddler in the Story River by clicking the popup's date heading (which is the current behavior).

-e

[Guido B]

This is brilliant and very hackable! Just one remark: there is a typo in the showmonth-macro: in the fifth line, it should be "[calendar_highlight]" and not "[calendar_highight]".

Best, Guido

[Eric Shulman]

On Saturday, September 5, 2020 at 10:31:56 AM UTC-7, Guido B wrote:

This is brilliant and very hackable! Just one remark: there is a typo in the showmonth-macro: in the fifth line, it should be "[calendar_highlight]" and not "[calendar_highight]".

OOPS!  Fixed.  Thanks. 

I also took the opportunity to do a little more code cleanup/refactoring for readability

* removed \whitespace trim where not needed

* moved <$tiddler tiddler=<<calendar_input>>> to outermost code

* moved first-of-month and days-per-month calculations to showgrid()

* refactored showday() to add showday_popup()

* refactored controls() into controls_getyear(), controls_getmonth(), controls_reset()

-e

[David Gifford]

I added all the various timer, clock and calendar tools you have in that file, to the toolmap here (https://dynalist.io/d/zUP-nIWu2FFoXH-oM7L7d9DM#z=KD7kUsUIFmx3Us0teMLUILMI). Thanks for these great tools, Eric!

[cmari]

Hi Eric,

Perhaps your ticket could be a nudge for this one?

cmari

[Eric Shulman]

Update: http://TiddlyTools.com/timer.html

I've added a new feature to the Calendar to display dates on which "events" occur (in addition to showing dates on which there were tiddler changes).

The events are defined in a separate tiddler, "TiddlyTools/Timer/Events", which contains a simple text-based list of dates and descriptions.

TiddlyTools/Timer/Events

Defines a set of events used by: TiddlyTools/Timer/Calendar and TiddlyTools/Timer/SidebarCalendar

• List event dates and descriptions, one date and description per line.
• Separate the event date and the event description using a semi-colon (;).
• Enter event dates using YYYYMMDD, where YYYY is the year, MM is the month number, and DD is the day number. Include a leading zero for single-digit months and days.
• For events that occur on the same date each year, use .... in place of the year (e.g., ....0101;New Year's Day).
• Note: event dates use regular expression syntax, allowing complex patterns to be specified (e.g. 202104(10|11|12|13|14|15|16|17|18);Spring Break Vacation)

Here's the default example data from TiddlyTools/Timer/Events:

....0202;Groundhog Day
....0214;Valentine's Day
....0401;April Fools Day
....0505;Cinco de Mayo
....0614;Flag Day
....0619;Juneteenth
....0704;Independence Day
....0724;Eric's Birthday
....0911;Patriot Day (9/11 Rememberance)
....1031;Halloween
....1224;Christmas Eve
....1225;Christmas Day
....1226;Kwanzaa (first day)
....1231;New Year's Eve
....0101;New Year's Day

20200308;Daylight Saving Time starts
20200525;Memorial Day
20200907;Labor Day
20201101;Daylight Saving Time ends
20201103;Election Day
20201126;Thanksgiving Day
20201211;Hanukkah (first day)

20210120;Inauguration Day
20210314;Daylight Saving Time starts
202104(10|11|12|13|14|15|16|17|18);Spring Break Vacation
20210531;Memorial Day
20210906;Labor Day
20211107;Daylight Saving Time ends
20211125;Thanksgiving Day
20211129;Hanukkah (first day)

enjoy,

-e

[TW Tones]

Eric,

Thanks so much for this extensive solution. 

As a thank you please accept this unpublished solution. called "Package".

• Drop the attached JSON on your timer wiki and import, no need to save and reload to use.

Any where you wish include the following

<<package "[prefix[TiddlyTools/Timer]]" "Drag and Drop to install">>

It will take the most recent, of any of the filters tiddlers. Because you include javascript a save and reload will be needed.

Regards

Tony/Tones

On Saturday, 12 September 2020 12:13:04 UTC+10, Eric Shulman wrote:

Update: http://TiddlyTools.com/#timer.html

[TW Tones]

Eric,

You link should be http://tiddlytools.com/timer.html# not http://TiddlyTools.com/#timer.html

Regards

Tony

On Saturday, 12 September 2020 12:13:04 UTC+10, Eric Shulman wrote:

Update: http://TiddlyTools.com/#timer.html

[Eric Shulman]

On Friday, September 11, 2020 at 10:31:15 PM UTC-7, TW Tones wrote:

Thanks so much for this extensive solution. 

As a thank you please accept this unpublished solution. called "Package".

Thanks for this.  It's a nice bit of kit.

However, instead of installing your entire "Package" utility, I just used the same technique in TiddlyTools/Timer/Info, like this:

To import these tiddlers,
<$button dragFilter="[prefix[TiddlyTools/Timer]] [prefix[Sample]]" class="tc-btn-invisible tc-tiddlylink">
   drag this link
</$button>
into your own ~TiddlyWiki.

-e

[Birthe C]

I love that the calendar works so well with the language plugin.

Birthe

[danraymond]

Hi Eric,

First, thank you again for such great plugins.

One issue I am having with the Calendar and Sidebar Calendar is that they show as a single line for each month. That is not a "calendar" shape at all? (see image).

I am using the "Stories" plugin, maybe that is conflicting. Any ideas?

[Eric Shulman]

On Thursday, September 17, 2020 at 7:52:49 PM UTC-7, danraymond wrote:

One issue I am having with the Calendar and Sidebar Calendar is that they show as a single line for each month. That is not a "calendar" shape at all? (see image).

I am using the "Stories" plugin, maybe that is conflicting. Any ideas?

Wow!  That is very strange looking indeed.

The code that makes the calendar break into weekly row lines is this:

<$list filter="[<dd>add<first>divide[7]split[.]count[]match[1]]"><br></$list>

(see the "showgrid(yyyy,mm,select)" macro in http://tiddlytools.com/timer.html#TiddlyTools%2FTimer%2FCalendar)

This filter uses the "divide[...]" and "match[...]" operators, which were added in TW5.1.20, released 9th August 2019 at 07:13

(see https://tiddlywiki.com/#Release%205.1.20 and https://tiddlywiki.com/#Mathematics%20Operators)

If you are using a revision of TiddlyWiki that pre-dates 5.1.20, then those filter operators didn't exist yet.

However, because of the way filters work, those operators would not have produced an error and would have instead been interpreted as references to fields named "divide" and "match" which are not part of my calendar implementation, resulting in blank filter output, which would prevent the <br> from being output.

So, my first question to you is: what release version of TiddlyWiki are you using?  You can get the answer from the $:/ControlPanel tiddler, "Info", "Basics" tab.

If that version number is less than 5.1.20, then the fix is to upgrade your document to at least 5.1.20.  Note: the current release is 5.1.22, and I don't know if the "Stories" plugin is compatible with that version, but hopefully it is.

You can try upgrading by opening https://tiddlywiki.com/upgrade and following the instructions found there.

Let me know what you find out.

-e

[danraymond]

Eric,

I am using 5.1.22. However, I am also using the "Whitespace" theme maybe thats an issue?

Dan

[Eric Shulman]

On Thursday, September 17, 2020 at 11:24:22 PM UTC-7, danraymond wrote:

I am using 5.1.22. However, I am also using the "Whitespace" theme maybe thats an issue?

I just installed the whitespace theme into my timer.html file to test.  I don't get the same results as your snapshots show.  The calendar displays just fine.

Can you provide a link to your TW file (or send me a copy privately)?  Perhaps I can directly debug the problem rather than guessing as to what is happening.

-e

[danraymond]

Hi Eric;

Happy to send to you privately. How to do that?

Dan

[Eric Shulman]

On Friday, September 18, 2020 at 10:52:18 PM UTC-7, danraymond wrote:

Happy to send to you privately. How to do that?

Dan,

I got your file (sent privately)... and I've found (and fixed) the problem!

The problem:

As I previously suspected, this line was not working properly in your file:

<$list filter="[<dd>add<first>divide[7]split[.]count[]match[1]]"><br></$list>

This filter checks to see if the current day number <dd> (plus start of month offset <first>) is evenly divisible by 7.  It does this by splitting the number at the decimal point and then checking to see if there is only one part (i.e., an integer value with no fractional remainder).

The reason this doesn't work in your file is that your file has $:/plugins/tobibeer/split installed.  This plugin, which was published long ago (30th December 2015), defines a custom "split[...]" filter, while the TWCore added its own built-in split[...] filter in version 5.1.20 (Released 9th August 2019).  The difference between these two versions of split[...] is that if the filter operand (i.e., a decimal point "[.]") does not exist in the input, the TWCore version returns the input unchanged, while tobibeer's version returns a blank result.  Thus, when my code uses "split[.]count[]match[1]" to check for a whole number, the TWCore version yields a count of 1, while tobibeer's version yields a count of 0.

Unfortunately, tobibeer's plugin overrides the built-in version of split[...].  As a result, the calendar never detects the "end of week" condition, and no <br> is ever output and the entire month is shown in one long line, rather than weekly rows.  To correct this, you might try just removing tobibeer's plugin, but this could possibly break something else in the other custom stuff you've installed if it depends on tobibeer's split[...] filter.

In any event, I've updated my code to make it compatible with both the TWCore and tobibeer's plugin, by using the following:

<$list filter="[<dd>add<first>divide[7]split[.]count[]!match[2]]"><br></$list>

(i.e., check to see if the calculation doesn't have 2 parts, rather than checking to see if it only has 1 part)

I used this same code pattern in a few places (Calendar, Clocks, and Alarms), so I've updated all three of those tiddlers.

The latest revision is now posted at http://TiddlyTools.com/timer.html.  Please download the fixes and confirm that the calendar display in your document now works as its supposed to.

enjoy,

-e

[Eric Shulman]

On Saturday, September 19, 2020 at 1:34:09 AM UTC-7, Eric Shulman wrote:

In any event, I've updated my code to make it compatible with both the TWCore and tobibeer's plugin, by using the following:

<$list filter="[<dd>add<first>divide[7]split[.]count[]!match[2]]"><br></$list>

(i.e., check to see if the calculation doesn't have 2 parts, rather than checking to see if it only has 1 part)

 

I've changed the code again... this time, using the remainder[...] filter, like this:

<$list filter="[<dd>add<first>remainder[7]match[0]]"><br></$list>

updated: http://TiddlyTools.com/timer.html (Calendar, Alarms, Clocks)

-e

[danraymond]

Eric,

Thank you, solution works for me here also!

[Harris]

Thanks Eric and all for this thread.

This TiddlyTools suite of time-related tools is great! :-)

Is there a setting in the UI to set the start of a week shown in the calendar, to be Monday instead of Sunday? Or does one have to modify the syntax that does the relevant rendering?

I will go through the "TiddlyTools/Time/SidebarCalendar" macro and any other relevant tiddlers I might locate in the process but thought to post here in case this is a quick fix; as I gauge it might take me quite some time to figure out the solution...

Many thanks 

H.

P.s. Don't know if this is the right direction but I plan to also explore how the "end of week" condition works that Eric mentioned in this thread.

P.s.2 I could not locate a relevant setting in:

TiddlyTools/Time/Setup

$:/config/TiddlyTools/Time