How can Journal Book be modified to show a Calendar if a Month is clicked

#1

@Mohammad

Thank you for this code. It finally dawned on me, the convenience of your 3D structure.

At present when I click on the month it shows a string of entries.

May I ask how do I modify this code so that when I click on the month, it first shows a (month) calendar at the top of the string of entries, but inside each calendar square (in addition to the day number) is a phrase for that day (the contents of a field named “synopsis” in any tiddler dated that day) (two phrases would show in the square if there were two tiddlers dated that day) and the phrase itself turned into a link which pulls up the tiddler the phrase was retrieved from.

This way I could see at a glance an outline of everything that happened that month before choosing to read more in-depth.

The calendar acting as a sort of TOC for the month but with a summary phrase(s) to jog the memory instead of just a numeral in the square.

Is this possible?

A Journal Book: Display Journal Tiddlers on a Monthly Basis
#2

@Sapphireslinger,

All things are possible!

I worry that asking this question to @Mohammad might feel a bit like “No good deed goes unpunished” :rofl:

It’s true that Mohammad may have some relevant design work already invested in the pikaday interface (and maybe other things I’m not aware of), but that’s a simple box-per-date interface…

The layout work required for a custom monthly calendar view is its own thing. See, for example:
BJ Tools — a collection of TW related projects (and relatedly 2019 Calendar — a tabbed picture calendar) Something close to showing links for each entry within a day is here (though it’s not a preview — just one horizontal line per entry, each offering a popup): TW Calendar — Tiddlywiki Calendar Widget and Page Layout displaying tiddlers on calendar and agenda, based on created, modified, startDate and endDate fields on tiddlers. (in calendar area choose 月 at upper right to see month-view, navigate back to 12th of March 2024 ( 2024年3月) to see lines for entries on that day, which open in pop-up).

And there’s lots of great calendar-layout stuff by @EricShulman here: TiddlyTools for TW5 v5.3.3 — Small Tools for Big Ideas!™

After seeing what you like, if nothing is exactly what you need, this might be a good moment for developing a “roll-your-own” variation, and asking for help from folks here to fill in where you get stumped…

Only you will know how much screen real-estate your summary phrases tend to need, how much you want to abbreviate them or whether to let the date-boxes expand vertically to show them at full length, whether you want tiddler previews to display more on hover, whether you want to color-code days like a heat-map, or have a badge showing how many tiddlers there are, whether you want the month in a sidebar (so entries would open in the main storyriver without scrolling away from calendar), or some other way of navigating, whether you need a mobile-responsive (or otherwise screen-size respnosive) layout…

It sounds exciting, and maybe others will chime in.

#3

And by coincidence, just today another neat calendar interface that you may be able to adapt: https://eventcalendar.tiddlyhost.com/

#4

@Springer

I worry that asking this question to @Mohammad might feel a bit like “No good deed goes unpunished”

I understand and agree. Thank you so much for the leads and ideas!

I will try to get a calendar working before considering how to make it appear in the journal automatically.

#5

I hope my reply wasn’t discouraging! Everyone has the first bump-in-the-road moment where the problem “nothing I’ve seen is exactly what I want…” becomes the opportunity “I can tinker with this thing!” :smiley: As someone who learned from the ground up, bit by bit, I’m happy to help solve problems along the way if I can.

#6

@Mohammad I found the calendar I want to use and I even found how to get it to appear in the journal-book. I hope this is the right place to add it in the journal-book/macros tiddler. The positioning looks all right:

\define vertical-tab()
<div class="kk-jb-container">
<$vars currentMonth={{{[<stateTid>get[month]] :else[subfilter<monthFilter>first[]] }}} >
<aside><<monthList>></aside>
<article>
<<newdiary "2024" "5" >><<journal-list-monthly>>
</article>
</$vars>
</div>
\end

However that macro <<newdiary "2024" "5" >> will not change according to whichever month the calendar appears in so I changed it to <$macrocall $name="newdiary" year=<<year>> month=<<month>> /> But that is not responsive either. It still shows May 2024 no matter what month or year. Not sure what to do. I know you are very busy with Shiraz. If you don’t have time, don’t worry about it.

Also is this thread the correct place to post this? Or should I delete it and put it in a new thread titled “Putting a calendar in Mohammad’s journal-book”?

#7

@Sapphireslinger
Sorry for not being of any help, as I wrote this around two years ago! I also not familiar with newdiary macro and Calendar you use. So, I cannot be of much help here!

The JSON I provided is an example of how to use a layout for displaying items versus category in a vertical tab. So, you can keep the layout and decide what you want to display!

#8

OK, that’s all right!

In case anybody else knows the answer to this I’ll post the whole contents of the journal/book macro tiddler below.

I think it’s the <<year>> and <<month>> in the <$macrocall $name="newdiary" year=<<year>> month=<<month>> /> that I’m writing wrong:

\define stateTid()    xx$:/state/thinkup/journal-book
\define yearFilter()  [tag[Journal]get[journal-date]format:date[YYYY]unique[]sort[]]
\define monthFilter() [tag[Journal]get[journal-date]prefix{$(stateTid)$!!year}format:date[YYYY0MM]unique[]sort[]]


\define monthList()
<$list filter=<<monthFilter>> variable=month>
<$button class="tc-btn-invisible tc-tiddlylink" 
         setTitle=<<stateTid>> setField="month" setTo=<<month>> 
         style={{{ [<currentMonth>match<month>then[color:red;]] }}} >
  <$text text={{{ [<month>addsuffix[151200]format:date[MMM]] }}} />
</$button><br/>
</$list>
\end

\define vertical-tab()
<div class="kk-jb-container">
<$vars currentMonth={{{[<stateTid>get[month]] :else[subfilter<monthFilter>first[]] }}} >
<aside><<monthList>></aside>
<article>
<$macrocall $name="newdiary" year=<<year>> month=<<month>> /><<journal-list-monthly>>
</article>
</$vars>
</div>
\end

\define journal-list-monthly()
<$vars month= {{{ [<stateTid>get[month]] }}} >

<b><$text text={{{ [<month>addsuffix[151200]format:date[MMM YYYY]]}}} /></b>

<$list filter="[tag[Journal]] :filter[get[journal-date]prefix<month>] :and[sort[journal-date]]" template="journal-book/template">

</$vars>
\end

<!-- Create UI -->

\define yearSelectAction() 
<$action-setfield $tiddler=<<stateTid>> $field=year  $value=<<year>> />
<$action-setfield $tiddler=<<stateTid>> $field=month $value={{{ [subfilter<monthFilter>first[]] }}}/>
\end

\define select-year()
<$vars currentYear={{{ [<stateTid>get[year]] :else[subfilter<yearFilter>first[]] }}} >
<$list filter=<<yearFilter>> variable=year>
<$button class="tc-btn-invisible tc-tiddlylink" 
         actions=<<yearSelectAction>>
         style={{{ [<year>match<currentYear>then[color:red;]] }}}
>
  <$text text=<<year>>/>
</$button>
</$list>
</$vars>

\end

\define initialize()
<$button> initialize
<$action-setfield $tiddler=<<stateTid>> $field=year  $value= {{{ [subfilter<yearFilter>first[]] }}}/>
<$action-setfield $tiddler=<<stateTid>> $field=month $value={{{ [subfilter<monthFilter>first[]] }}}/>
</$button>
\end

\define journal-book()
<$list filter="[<stateTid>get[year]]" variable=null emptyMessage=<<initialize>> >

<<select-year>><<vertical-tab>>
</$list>
\end

The macro I’m calling is:

\define diarydets(i,tiddlerDate,rawDate,tags)
$i$<br>
 <$list filter ="[tag[Journal]search:journal-date[$rawDate$]!is[system]]">{{!!journal-day-summary}}</$list>
\end
1 Like
#9

This is the change for macro, I think…

\define journal-list-monthly()
<$vars year= {{{ [<stateTid>get[year]] }}} >
<$vars month= {{{ [<stateTid>get[month]removeprefix<year>removeprefix[0]] }}} >

<$macrocall $name="newdiary" year=<<year>> month=<<month>> />

</$vars></$vars>
\end
#10

may be this

\define journal-list-monthly()
<$vars year= {{{ [<stateTid>get[year]] }}} >
<$vars month= {{{ [<stateTid>get[month]removeprefix<year>trim:prefix[0]] }}} >

<$macrocall $name="newdiary" year=<<year>> month=<<month>> />

</$vars></$vars>
\end
#11

@buggyj Thank you so much! I didn’t see this until recently but it works perfectly!