Dynamic Svg Calendar

[Mohammad]

Using Tiddlywiki endless feature create a macro to make a svg calendar for you. Use the ready to use now macro to insert the today date into your svg!

To find the details look at the attached tiddler.

--Mohammad

Give a try:

1.Open https://tiddlywiki.com/

2. Drag and drop attached tiddler into it

Enjoy the lovely SVG colander!

[Mohammad]

The tiddler of above post is attached here!

It seems Google group does not allow to attached this kind of svg! So I zipped the tiddler.

Unzip and then drag into your wiki or into  https://tiddlywiki.com/  

[TW Tones]

Mohammad,

I love it. Especially in the sidebar!

Tones

[TW Tones]

Mohammad,

Inspirational. Especially the idea of dynamic svg's that respond to content that can become buttons

Inspired by your effort, I built a version that shows the year, and uses now, unless a fieldname is provided. The fieldname needs to contain a date according to the date serial number.

• It uses the new format:date operator on the pre-release.
• You can use partial serial numbers eg; 201911021200
• I am keen to pass the top fill colour as well, as one could use this to distinguish created/modified now etc...
• I plan to make this into an alternative for the new Journal button which also shows if a journal entry exists.

Regards

Tones

\define svg-date-field(width:"", height:"" fieldname)

<$set name=date-value value={{!!$fieldname$}} emptyValue=<<now "YYYY0MM0DD0hh0mm0ss0XXX">> >

<$set name=month value={{{ [<date-value>format:date[mmm]] }}}>

<$set name=day value={{{ [<date-value>format:date[DD]] }}}>

<$set name=dow value={{{ [<date-value>format:date[DDD]] }}}>

<$set name=year value={{{ [<date-value>format:date[YYYY]] }}}>

<svg xmlns="http://www.w3.org/2000/svg"

aria-label="Calendar" role="img"

viewBox="0 0 512 512" width="$width$" height="$height$">

<path d="M512 455c0 32-25 57-57 57H57c-32 0-57-25-57-57V128c0-31 25-57 57-57h398c32 0 57 26 57 57z" fill="#e0e7ec"/>

<path d="M484 0h-47c2 4 4 9 4 14a28 28 0 1 1-53-14H124c3 4 4 9 4 14A28 28 0 1 1 75 0H28C13 0 0 13 0 28v157h512V28c0-15-13-28-28-28z" fill="#dd2f45"/>

<!--g fill="#f3aab9">

  <circle cx="470" cy="142" r="14"/>

  <circle cx="470" cy="100" r="14"/>

  <circle cx="427" cy="142" r="14"/>

  <circle cx="427" cy="100" r="14"/>

  <circle cx="384" cy="142" r="14"/>

  <circle cx="384" cy="100" r="14"/>

</g-->

<text id="month"

  x="32" 

  y="164" 

  fill="#fff" 

  font-family="monospace"

  font-size="140px"

  style="text-anchor: left"><<month>></text>

<text id="year"

  x="300" 

  y="164" 

  fill="#fff" 

  font-family="monospace"

  font-size="80px"

  style="text-anchor: right"><<year>></text>

<text id="day"

  x="256" 

  y="400" 

  fill="#66757f" 

  font-family="monospace"

  font-size="256px"

  style="text-anchor: middle"><<day>></text>

<text id="weekday"

  x="256" 

  y="480" 

  fill="#66757f" 

  font-family="monospace"

  font-size="64px"

  style="text-anchor: middle"><<dow>></text>

</svg>

</$set></$set></$set></$set>

\end

<<svg-date-field 64 64>>

<<svg-date-field 64 64 test-date>>

[Atronoush]

Hi Tones,

 great idea!

Based on your suggestion I changed your code as below:

1. color of top part is sent as macro parameter: e.g: red, #f00, or rgb(128,160,256)
2. the date value is sent as a macro parameter, so a field value can be sent too

See attached a JSON containing the revised code and a test

Just drag the JSON into https://tiddlywiki.com/prerelease/ and open Test tiddler

See the results

See the content of Test tiddler

<<svg-date-field date:"20201209" width:128>><<svg-date-field date:"20200225" width:128 color:"blue">>

<<svg-date-field date:"20210418" width:128 color:"orange">>

<<svg-date-field date:"20200815" width:128 color:"purple">>

<<svg-date-field date:"20210312" width:128 color:"black">>

<$macrocall $name=svg-date-field

date={{!!mydate}} width=128 color="#f18973"/>

Best wishes

Mohammad

[TW Tones]

Mohammad,

Thanks for sharing back again. I did something similar. Including providing buttons and a tooltip with the date displayed.

One idea is to determine the days from now and have a simple line in the image that hints at how old the date is, forward or back.

In thought if a Journal tiddler existed with the matching journal-date field I could have the icon have black dots at the top to indicate its exists, other wise click to create a journal tiddler for the given date.

Also adding a viewtemplate for journal tiddlers that shows other tiddlers with a matching date field.

I included a little code to determine the color by default from the field name

Red = Now (no field)

Blue = created

Green  Modified

Black = other fieldnames

Still a work in progress, but as I have called for before I value ways to bring information forward in compact ways and within existing elements.

Regards

Tones

[TW Tones]

Example;

Tones

[Mohammad Rahmani]

Lovely!

Please share when you are finished.

Best wishes

Mohammad