non-JS Calendar

@hoopyfrood

Regarding your basic calendar:

  1. Is it possible to make the basic calendar not use a tag like “20240306” for the date, but instead get the date from a field? I would like to tell it to look at the field “journal-date” (which is formatted in the normal Tiddlywiki way just like “created”).

  2. What do I add to the code to tell it to only consider tiddlers tagged “Journal”?

  3. What part of the code do I have to change to tell it to display not the title field of the tiddler as a link, but the contents of a field named “synopsis”?

Thank you in advance for any help.

A bit of a tangent, but since you commented on the slide for sidebar, you might also be interested in this one, now one of my “must-installs” for any new project. I think it’s very intuitive for visitors, because the whole vertical sidebar-boundary is hover-responsive:

I have uploaded an updated version on Tiddlyhost!

  • integrated Monday start as a paramteter
  • added StartupActions to set the calendar to today’s month/year at startup
  • moved some stuff around so you can access the parts to customize it easier as well as including some documentation for building your own calendar tools

I hope the documentation helps with some of your almost year old questions about how to customize it, like @Sapphireslinger and using the default Journal’s date format

1 Like

@hoopyfrood I am still in the process of modifying your calendar for my needs. What I want is a single day view like in Google calendar that fill the entire calendar space while hiding the rest of the days of that month. Any suggestions on how to achieve that?

I went ahead and added that as a feature, check it out on the Tiddlyhost site. Basically I added a button that writes the date’s information into fields so that specific date’s cell’s contents can be referenced and transcluded using those variable values, and used some $list widgets to hide/reveal the full month/single day contents. (it’s the “full screen” icon that is next to the MM/DD/YYYY date on the popup that appears when you click on a date)

The button is on a tiddler called " $:/plugins/EventCal/cell/solo-btn" and I transcluded it into “$:/plugins/EventCal/popup/contents” but you might want to move it to somewhere on “$:/plugins/EventCal/popup” or “$:/plugins/EventCal/cell/contents” depending on your UI preferences.

You can also customize what exactly you want shown in single day mode by changing what is going on inside the $list widget in “$:/plugins/EventCal” that calls on the procedure <<cell>>, just be mindful of the $let variable definitions needed to transclude a specific date/cell, and add any of your own variables if they are required for any customizations you have made to the cell contents.

2 Likes

Thank you @hoopyfrood for that update. I will test and give feedback when I am back on my desktop

Can the date format for cal-date be made in ISO format as discussed in the above linked post

Or can the date format be made configurable by using a config tiddler. Instead of hardcoding the date format, transclude the config tiddler in the places where date format is set within the code, so that users can select the date format they prefer to use

@hoopyfrood I want to make the contents of the cells different in day view and month view. How to do that ? I tried some experimenting with $:/plugins/EventCal/cell/contents, but couldn’t succeed. Can you guide me on how to do it

@hoopyfrood can you help me to solve this

You can add additional date formats in the tiddler $:/plugins/EventCal/cell/contents by adding [contains:cal-date<my-format>] to the <$list> filter (before the +[sort[]]) and defining my-format in a <$let> outside of the <$list>. You can use variables to put together your format as described in the ReadMe in the 3rd tab.

So, for ISO format, try putting [contains:cal-date<iso-date>] in the <$list> filter and then define iso-date like:

<$let iso-date={{{ [{!!cal-yy}][{!!cal-mm}][<date>]+[join[-]] }}} >
<$list of [contains:[]]...
...>
</$let>

and that should give you YYYY-MM-DD as the format. If you need times too you’ll need to define more variables and maybe join it in a different way.

1 Like

The tiddler $:/plugins/EventCal has \procedure cell(), you can tweak the cell contents there as well as the tiddler $:/plugins/EventCal/cell/contents.

The day view is activated by the presence of the field date with the value date in DD format. You can make conditions like:

<$list filter="[<parentTid>has[date]]">
stuff you want displayed in date view
</$list>

<$list filter="[<parentTid>!has[date]]">
stuff you want displayed in month view
</$list>
1 Like

very thanks @hoopyfrood. That was perfect for my usecase. In my current version, I can press the date in month view to open the single day view with new additional cell contents. Thanks for all your help.

Your calendar is really well set. I’m french and I wanted to translate the name of days and month.
First I translated the $:/plugins/EventCal/data/week replacing Sun with Dim and so on.
Then I thought those days names were part of the TW core. So I tried to replace Sun by {{$:/language/Date/Short/Day/0}} and it worked!

So here is the adaptation of $:/plugins/EventCal/data/week :

0: {{$:/language/Date/Short/Day/6}}
1: {{$:/language/Date/Short/Day/0}}
2: {{$:/language/Date/Short/Day/1}}
3: {{$:/language/Date/Short/Day/2}}
4: {{$:/language/Date/Short/Day/3}}
5: {{$:/language/Date/Short/Day/4}}
6: {{$:/language/Date/Short/Day/5}}
7: {{$:/language/Date/Short/Day/6}}
8: {{$:/language/Date/Short/Day/0}}

This let your calendar to be translatable via language plugins !

But I didn’t find the way to modify the months names. It is inserted in $:/plugins/EventCal in a $select option and I don’t know how to modify the enlist refer to the $:/language/Date/Short/Month tiddlers’ content.

<$select field="cal-mm"
actions=<<createMonth>>>
<$list filter="[enlist[01 02 03 04 05 06 07 08 09 10 11 12]]" variable="m">
<$let x={{{ [enlist[Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec]nth<m>] }}}>
<option value=<<m>>><<x>></option>
</$let>
</$list>
</$select><$edit-text 

To get the “short month name” for the current language, use:

<$let x={{{ [[$:/language/Date/Short/Month/]] [<m>trim[0]] +[join[]get[text]] }}}>

-e

4 Likes

Hello @arunnbabu81
if you have a moment, could you please post an example of your case here or online at tiddlyhost
I would like to see what you have done

I will share a rough demo in some time soon

Thank you, I am very interested in seeing individually dated tiddlers with varied contents.

@Sunny This is a rough version. I removed the pop up and plan to add the tiddler creation buttons in the single day view. But for that I need to decide on the UI and my usecases. Still haven’t go time to do it.

1 Like

Thanks @arunnbabu81
I’m sure your busy and I appreciate you taking the time to show me your example.
I’ll have a look and figure out how to add more content etc
Thanks again.