Calendar / Time Tracker in WikiText

Tips & Tricks
#1

So, recently I was looking for some sort of TiddlyWiki thingy that would let me track my working time on various projects. I have to fill out forms at the end of each month. With such tracking data in TW I could easily calculate the weekly sums and such, so that the process would be a much smaller PITA.

Since I used a calender application until now for time tracking, I started looking at hourly calenders in TW. The only useful one I found was the one by @linonetwo, which worked much like e.g. Outlook basic functionality, but comes in at a whopping ≈ 1.5 MB. Then I started playing around with some building blocks in TW and gradually improved on the functionality, until I arrived at a place where this does just what I need: time tracking.

https://yaisog-calendar.tiddlyhost.com/

Right now, the code takes about 10 KB including CSS, but not counting the date picker which I adapted from Kixam’s Pickaday implementation (to get rid of the moment.js requirement). I don’t really need the date picker since I’ll be usually entering data for the current or previous day, but I have this date picker in my wikis anyway. So, why not use it?

It’s not a big step to make this into some sort of real TW calendar (basically displaying multiple days side-by-side), but I’ll stop here for now, because I don’t need another calendar.

Maybe there is some way to be able to use the mouse and $eventcatcher to drag-select multiple adjacent time slots instead of clicking each one, but I haven’t found it yet. Bonus points if you know one. That would be nice to have.

Have a nice day
Yaisog

5 Likes
#2

Take a look at TiddlyTools/Time/Timers.

It allows you to create cumulative task timers for multiple separate projects. When you begin working on a task, you press the stopwatch “start session” button, which records the start time for the task. When you stop working on a task, you press the stopwatch “stop session” button. This records the ending time for the task, as well as computing the elapsed time for that task and the total accumulated time for that project. You can also press the “add/edit comment button” to enter a brief comment/description for that task.

All tasks are also automatically displayed in the TiddlyTools/Time/Calendar

For more info, see TiddlyTools/Time/Info

1 Like
#3

While I love the idea, it’s not working for me, or I’m somehow misreading the instructions. When I click on a block, nothing happens. The same thing happened when I imported everything into tiddlywiki.com, saved and reloaded.

It’s a shame, because as a start a new project at work, this might come in handy.

#4

This worked for me once I dragged all 7 tiddlers over and reloaded. This looks really nice and would be a great addition to a lot of time tracking projects.

I am using Kixam’s pikaday $edit-date widget in other projects and see that your version suffers the same visual quirk:

Screenshot from 2023-04-09 22-46-02
Screenshot from 2023-04-09 22-46-021081×455 32.3 KB

When you pick a date and then drop down the calendar again, the visually selected date (blue box) is one day earlier even though the right date gets selected and recorded. A purely aesthetic thing but confusing to some. I have vague recollections of a bare understanding that it was due to timezone mismatches and needed some hh:mm time at the tail of some date field set to noon/1200 rather than 0000. But I can’t find the thread again and didn’t know how to implement the fix in js at the time.

(I think this was related to the issue: Pikaday Plugin: A Repack of Date Picker from Projectify - #37 by Springer )

Thanks for the interesting tool and the streamlined $edit-date widget with fewer dependencies.
/Mike

#5

For me also is not working! Select a date works but nothing happend when you select a time slot!

#6

Hi @Scott_Sauyet and @Mohammad, I can confirm that it doesn’t work in Edge (and thus probably also not in Chrome). I will take a look at what the problem is ASAP and post an update.

Hi @EricShulman, I am familiar with your great time tracker, but that one is actually too much for my needs. I don’t need to track my hours very accurately, but at the end of the month I must estimate what projects I spent how much time on. What I usually do is to fill the hourly slots of a calendar about twice a day with the projects I remember working on… :thinking: :wink: My tool is mostly designed to relieve me of the tedious task to manually add up the hours at month’s end.

#7

Hi @mwiktowy, what timezone are you in? I’m pretty close to UTC, so I would probably only notice irregularities during the wee hours. I did mangle Kixam’s code quite a bit to handle different date formats, so I might take a look at it again. The plugin is passing the date / time to the Pickaday date picker, so it might just be a matter of correcting for time zone offset…

#8

I’m in ET … so UTC-4 or 5 depending on Standard or Daylight Savings time of year. I just checked this morning at 11am and it is showing the same glitch.

Thanks,
/Mike

#9

Hi @mwiktowy, I don’t see the glitch on my system, so it might be a bit harder to figure out what’s going on, but I’ll try:
image

#10

Hi @Mohammad and @Scott_Sauyet: Turns out that it was a CSS problem. Since the clickable buttons are empty, Chromium didn’t want to honor the “100%” height directive. I’ve hardcoded the height relative to the table row height now, and it should work. I’ll maybe make another setting for row height and font-size…

1 Like
#11

I do not see the glitch on first click on the < date > label … only after clicking on a date in the popup calendar and then clicking the < date > again and subsequent clicks. Happens in both Firefox and Chrome. Odd : [

/Mike

#12

Upon first load of the wiki, on first click of the < date > or any subsequent click if I don’t choose a date in the pop up, it looks (properly) like this:

Screenshot from 2023-04-10 11-22-34
Screenshot from 2023-04-10 11-22-34806×426 26.6 KB

If I select a date in the popup … even if it is the same date that is set (April 10 in this case), it looks (glitchy) like this when I pop the calendar open again:

Screenshot from 2023-04-10 11-22-47
Screenshot from 2023-04-10 11-22-47806×426 26.6 KB

Like I said, it always properly chooses the correct date to put in the field. This seems to be just a visual issue with the highlight showing the date before the current selection.

/Mike

#13

That fixed it for me. (Sorry that I didn’t report my browser. Brave on Windows and Android, but it’s working now.)

Kudos on a very useful tool!

#14

Hi @mwiktowy, I added a shift to the local timezone to $:/plugins/yaisog/widgets/datepicker.js, which might correct the issue for you (and everyone with “UTC-minus” timezones).

When only a date is given, this date is interpreted with a time portion of midnight UTC. So, in your time zone this would be 7 or 8 pm the day before. Pikaday likely then uses that (local) date and highlights the wrong day, but upon picking a date sets the tiddler field in UTC, so that the saved date is correct.

These timezone shenanigans are always a brain-twister. Let me know if I got it right or if I made it worse.

Have a nice day
Yaisog

#15

Hi @Scott_Sauyet, great to hear. I guess it’s hard to click a button that has 0 px height. Not sure why Firefox does things different here. I was under the impression that CSS is pretty airtight these days, with little room for vendors to get creative with the specs…

#16

Hi @Yaisog ,

Thank you for looking into this. Do you have a different testing repository where you put this fix?

The one here Calendar — a time-tracker application by Yaisog seems to be the original one with the last modified date of 7th April 2023 at 12:38pm.

Thanks,
/Mike

#17

Hi @mwiktowy, sorry, forgot to save. Please try again.

1 Like
#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