Calendar / Time Tracker in WikiText

Tips & Tricks
#18

Hi @Yaisog

Well … the version on your site now has a typo with “mwi” instead of “plugins/yaisog” in an initial “var pikaday” line. So I got a red screen error of:

“Error executing boot module $:/plugins/yaisog/widgets/datepicker.js: “Cannot find module named ‘$:/mwi/modules/libraries/pikaday.js’ required by module ‘$:/plugins/yaisog/widgets/datepicker.js’, resolved to $:/mwi/modules/libraries/pikaday.js”
undefined”

But once I changed that back it works perfectly! Glitch gone!

Thank you for chasing this down … it was an aesthetic pet peeve for quite some time now.

Thanks,
/Mike

#19

Apologies for that. I am juggling two slightly different copies of the code, where one is for the TiddlyHost site and the other one for my personal wiki. For entirely stupid reasons, both use different namespaces. Simply copy-pasting between the two without thinking can break the whole thing.

I am glad you were able to correct the error yourself. I have also corrected the copy on TiddlyHost.

#20

Thanks for your efforts.

A clarification question about your re-implementation of the pikaday edit-date widget:

Are the three tiddlers

self-contained in that they do not need $:/core/modules/filters/format/timestamp.js ?

Is that new timestamp.js just needed for your time-tracker calendar? Or am I wrong about that?

Thanks,
/Mike

#21

Hi @mwiktowy, you are correct, timestamp.js is not needed for Pikaday.

It is needed for most date calculations, though, where I would convert a date to Unix epoch using format:date[TIMESTAMP], then do some calculations on it, e.g. subtract a number of days / microseconds, and then convert it back using format:timestamp[] to human-readable date. It is the only way to do so without having to worry about month or year boundaries and such…

I should note that I originally changed Kixam’s datepicker.js to only work with the date format TW uses for its created or modified fields, and thus was able to remove the no longer needed moment.js library. For the calendar I did add custom date formats back in by using TW-internal functions and the JavaScript Date object. This is not comprehensively tested beyond what I needed for the calendar thingy. If you find any problems I suggest you message me directly or open a new thread specifically for that.

#22

Now it fixed! It works for me both on Chrome/Edge 110 on Windows.

#23

I just updated the code to incorporate most of the features that were on the to-do-list. Barring any bugs, this is probably how far I’m going to take this project…

Have a nice day
Yaisog

4 Likes
#24

Thanks @Yaisog , I’ll try it out.

I couldn’t get the previous version to change the format in the edit-text field nor did it seem to use the “icon” option like Kixam’s original version. But I used it as a button the way that you do in your Time Tracker Calendar and that works fine for my purposes.

Thanks again for sharing this.
/Mike

#25

@Yaisog Any way to edit the entries from the timeline UI itself (to correct some errors made during entry)

#26

Hi @arunnbabu81, you can click on an entry, which should open the corresponding tiddler. You can then simply edit its project and description fields.

1 Like
#27

Thanks for sharing;

@Yaisog I am just revisiting this in light of this thread Task management schedule of @paulgilbert2000

  • It seems to me you have done a lot of the hard work on the way to an effective day planner.

However given many of us use a todo system and have tasks in tiddlers, I wonder how hard it would be to adapt this to allow a tiddler title to be dropped on a slot, and if it contains an effort field, such as total in minutes to use this to determine the beginning and ending? if not just assign it to the slot it is dropped on.

  • Fit items into slots within each Time slot set, or part there of.

At a later date a useful innovation would be dropping a list of tiddlers, which would cascade across the hours, each taking an appropriate number of time slots, yet not fixed to them, Just perhaps the top one.

  • such that if one task takes longer the balance are moved down,
  • of if a task completed before its end time then the balanced are moved up.
  • Also an indicator of the current timeslot today would be a nice touch.

One reason I am keen on enhancing your solution is because the timeslots could be separate from the task tiddlers to be actioned within the time slots. That is an attribute of a tracking entry is a related tiddler and features like returning to the same task, reoccurring tasks and flowing them down the page all become a useful abstraction.

  • Of course one day we may get them to flow around fixed timeslots, eg lunch.
1 Like
#28

Just to help I gave ChatGPT4 the content of $:/plugins/yaisog/widgets/datepicker.js and asked for syntax instructions;

  • With a bit of massaging I got this;
  • So we can now quickly document someone else’s JavaScript solutions.

DatePickerWidget Syntax Instructions

1. Basic Usage

To include the date picker widget in your TiddlyWiki, use the following syntax:

<$edit-date/>

2. Customizing Attributes

The widget supports various attributes that allow customization. Here's a description of each attribute and how to use them:

  • format: The date format displayed in the input field (default: "YYYY-MM-DD").
<$edit-date format="YYYY-MM-DD"/>
  • firstDay: The first day of the week, 0 for Sunday, 1 for Monday, etc. (default: 0).
<$edit-date firstDay="1"/>
  • fieldFormat: The format used to save the date in the specified field (default: "[UTC]YYYY0MM0DD0hh0mm0ss0XXX").
<$edit-date fieldFormat="[UTC]YYYY0MM0DD"/>
  • tiddler: The title of the tiddler where the selected date will be saved (default: the current tiddler).
<$edit-date tiddler="MyTiddler"/>
  • field: The field in the tiddler where the date will be saved (default: "created").
<$edit-date field="duedate"/>
  • index: The index in the tiddler where the date will be saved.
<$edit-date index="myIndex"/>
  • class: The CSS class to apply to the input field.
<$edit-date class="my-custom-class"/>
  • placeholder: The placeholder text for the input field.
<$edit-date placeholder="Select a date"/>
  • tag: The HTML tag used for the input field (default: "input").
<$edit-date tag="input"/>
  • attributes: The tiddler containing a JSON object with additional HTML attributes for the input field.
<$edit-date attributes="MyAttributesTiddler"/>
#29

Hi @TW_Tones, I think this might be done with $droppable widgets that wrap each time slot. The actions defined in these widgets would then need to do the filling of appropriate slots.

But, like I wrote, I’ll not take the functionality further at this point. There are just too many items on my to-do list at the moment, not least of all filling my wikis with actual knowledge. I’d have no problem with someone else picking up where I left off and using my code as a basis for further exploration, though.

Have a nice day
Yaisog

#30

Hi tones,

This is exactly what i hope we can have someday

1 Like
#31

As I indicated, this option doesn’t seem to be functional (at least in Firefox). I know that @Yaisog doesn’t have the bandwidth to push this further, does anyone who knows JS know what is going on that is disabling this functionality that used to work in the original? Is this some deep browser-hacking functionality that moment.js provided that would be hard to replicate?

Right now, no matter what I set my format parameter to, I get the date showing in NN MMM DD YYYY format.

image

Thanks,
/Mike

#32

Mike, @mwiktowy this comes from the ChatGPT generated documentation. More for illustration it does not show each parameter as it relates to others.

  • Can you describe you issue a little further, or do I leave it to others who you were previously chatting with?
#33

Hi @mwiktowy, from the Pikaday documentation:

By default, dates are formatted and parsed using standard JavaScript Date object. If Moment.js is available in scope, it will be used to format and parse input values.

Looks like this is a side effect of removing moment.js. Also:

For more advanced and flexible formatting you can pass your own toString function to the configuration which will be used to format the date object. This function has the following signature:
toString(date, format = 'YYYY-MM-DD')
You should return a string from it.
Be careful, though. If the formatted string that you return cannot be correctly parsed by the Date.parse method (or by moment if it is available), then you must provide your own parse function in the config.

So, in principle we could define an appropriate toString (and ‘parse’) method in $:/plugins/yaisog/widgets/datepicker.js (which ideally used the TiddlyWiki date utility methods to parse TW DateFormat strings), to replace missing moment.js functionality. This way we won’t even need to touch the Pikaday code. But this would be a fair bit of work – at least for the occasional JavaScripter – and thus not very likely to be implemented by me in the near future.

#34

Nice work.

I think full-calendar library’s 1.5M includes handling touch screen and some TS helper, and also moment.js . And it save my dev time, I didn’t really know how FullCalendar works, I just put it together with TW…

#35

@Yaisog why is the duration field showing wrong time. Does this value include the YYYY MM DD also ?

image
image1080×878 44.8 KB

Implementing a contextmenu with wikitext
#36

The duration field is a list of two Unix timestamps, the beginning and end of the activity. It is not really “human readable”. What exactly do you mean by “wrong”? When you convert it to local time, it is not correct?
If there is some constant offset of a fixed number of hours, I might have messed up the timezone handling…

#37

I tested this time-tracker sometime back…I was trying to incorporate it into a wikitext calendar …I will try it again and reply back in detail.