Date control in Konfabulator, need to make a calendar appear Options

[axe]

I have a menu list in my widget where the user has to select a date. So for selecting the date, I want to make a calendar appear so that the user can easily click on the date, month and year. Is there a functionality for this in Konfab?

Thanks for your help.

[CSM]

Nope. You have to build one yourself. However, I shouldn't think that too hard. Making stuff is all in the fun of writing a Widget, especially if it's cool and worth sharing. gl.

[axe]

Ok. I guess I can build it.

Is there a way to multi select from a dropdown menu in Konfab?

[CSM]

Is there a way to multi select from a dropdown menu in Konfab?

"Multi-Select"? And "dropdown"? If you mean the Popup's provided by the Konfabulator preference window, or in Forms, then no.

[CSM]

I didn't want to post until I was done and sure I liked it (so as not to get your hopes up) but I have a pretty decent looking "calendar popup" widget coming along (the idea intrigued me). So if and when I finish it, I'll post it here and you can use it.

It comes attached with a license, but with my views on licenses and the fact that the only author-imposed requirement is easy, you shouldn't have any problems whatsoever (and it allows others to use the code too! OpenSource is nice like that).

[CSM]

Okay, done. However, I can't supply support for it until after some sleep. So you're on your own until then.

I didn't generate the JsDoc documentation for the class, but here are the main features:

• Popup or static calendar. (use show and hide functions, hide returns the currently selected date)
• Large or small date text. (calendar.largeText = true|false;)
• Show/hide the buttons to change the month. (calendar.buttons = true|false;)
• Get/set the currently selected date. (calendar.date)
• Get/set the currently visible month, as a date obj. (calendar.month)

You can read the comments at the top of the class for constructor parameters.

Current requirements:

• Filesystem access, sandbox (should warn you if you don't have it).
• Time, it takes a slight bit of time to set up a new calendar.

The reason it takes a while is because saveImageToFile isn't instantaneous, and the fix (sleep(1)), doesn't really take 1 millisecond. So it all adds up. If Konfabulator had a way to save the text to an Image object this would be much faster. However, it doesn't, so I have to save it to a file and wait for the image to update. This is also why you get to watch it redraw the dates when you change the month (clicking a date while it is still redrawing might cause Calendar to crash).

I hope this suits your needs. If you want to change the color, or the total (relative) size,* those are defined at the top just inside the class for easy access. The Widget provides a test example to make the calendar "popup" like I think you wanted** ... The calendar should be good across years, leap days, and (of course) month changes. I don't guarantee it working before 1970, but then again, JavaScript doesn't guarantee that either!

* The previous/next buttons get very large relative to the calendar when the size is increased. This is because The button size shouldn't be linear (it should get smaller as the calendar gets larger, to a point) but I designed this to look good at a small size first. So the fact that it scales very, very well is just a cool side effect. Plus, I was too lazy to work out a good asymptotic equation for the button size.

** The residual shadow is Konfabulator's fault, you have to call window.recalcShadow() if you use a shadow and find the shadow is consistently staying on screen.

Have fun!

Download: CalendarPopup.widget

// Edit:
Just updated it to fix one bug that could arise when selecting a date and switching to a new month with less days. Other than that, it works very well.

[CSM]

Okay, I've updated it to be much faster based on a suggestion from BOINCer. It now creates one image per item type (so one image for all previous month dates, one image for all current month dates, etc). This allows it to instantaneously change months, and to quickly build new Calendars. The images (once created) are cached for the life of the Calendar, so having multiple calendars with different text settings (large or small) won't bleed over. At BOINCer's pseudo-complaint, I added window.recalcShadow() to the code to take care of Konfabulator's inability to update the shadow fast enough.

So all in all, the Calendar loads in 157 milliseconds (on this PC) on average, and works much nicer. I updated the link in the previous post.

[bjbk]

pretty damn slick! small bug though mate: TypeError: calDates[ybox] has no properties (Calendar.js: Line 103)

[CSM]

pretty damn slick! small bug though mate: TypeError: calDates[ybox] has no properties (Calendar.js: Line 103)

Oof! Any idea what caused it? (how to reproduce it?) ... hm actually, line 103 is where I detect mouse clicks ... that might actually require testing to make sure you can't click outside the box (I love it when I figure it out as I type it). I'll get right on it.

[bjbk]

sorry, forgot to mention *how* it happens! It occurs when I click on the year in the calender popup

[CSM]

Okay, I updated it. The version number should be 1.1.4 now (same link). I also mucked with the button code and it should look much better with larger size calendars. What I think I forgot to do was exclude the bottom year area from mouse clicks (and so clicking the very bottom area, even by accident) would cause it to try to find a date there. Now it shouldn't do anything if you click there. Let me know if that fixes it.

Somewhere in these updates I snuck in the calendar.allowDateSelection = true|false; This allows you to disable the box-highlight when you select a date. This should make it more suitable towards making a "static" desk-calendar.

Other than that, I know it's only been a day, but at least someone noticed ... I was kinda hoping the original author might return ...

// Edit:
@bjbk
Yeah, , I figured that out rather quickly (as I said in my previous post) ... I added the year kinda after everything was done because someone suggested that it might be useful to see what year you were in.

// Edit Again:
For those that know the JwL, since the licenses of this is the same as (save for the attribution) the JwL, this would make a great addition. Depending on, it would go in the xwidgets directory, because I don't think I designed it to be immediately reconcilable with the JwL class-hierarchy (because it's size is text based). Part of the reason for this is "why not", and also because it was suggested that I should (or if not, commit it to the Ukki so it isn't lost).

I also searched the official gallery earlier and found that this is 1 of the only Widgets that actually looks like a wall calendar! All are either visual rip-offs of Y! Calendar Widget (and code probably too), all text, or some weird display format (such as bars, etc). Am I the only one who likes that look? (hmm. There was Pinup Calendar, but I don't quite remember what that looked like) ... I'll think I'll go find it again.

[bjbk]

that works now, just to check though, is it meant to go to next/previous month when you click on the sides of the bottom panel where the year is listed? If it is, would it be worth adding the arrows down there too?

Also, a feature request if I may, having some way to return to the current month would be cool.

[CSM]

that works now

Great!

just to check though is it meant to go to next/previous month when you click on the sides of the bottom panel where the year is listed? If it is, would it be worth adding the arrows down there too?

Ooooops! That's probably a side effect of me not checking the height for those buttons ... I'll do that. I don't think it'd look good with the arrows, especially not worth the time to make them look good down there.

Also, a feature request if I may, having some way to return to the current month would be cool.

Certainly. Where do you want it? That's the hard part. I could make it insert a context menu item to "Reset Month" ... otherwise, I don't know where to put it ...

// Edit:
Return to the current month (based on today's date), or the month-date supplied when the Calendar was created or set via calendar.month?
I think the latter would be more useful when used as a popup, but the former more useful when used as a static calendar ... allowDateSelection could control when to do which one. Also, I could provide a reset() function to fire that event programatically.

[CSM]

Okay, updated. Link is the same, version number 1.1.5 ... I found a spot for the button: in the lower right of the Calendar. The arc is the reset "button". Currently you can't disable it (like you'd want to). The whole corner is a hotspot, not just the tiny arc. It follows the rules I laid out above: if allowDateSelection is true, it resets to the last set date. If it is false, it resets to the current month. Neither option affects the currently selected date.*

* Noting that allowDateSelection doesn't turn off changing calendar.date when you click, just the visual notification.

After all this work, I really do hope that axe returns to claim his calendar (or at the very least someone finds use for this in a Widget). It'd be a great way to get database formatted dates, because you could display the text-result in a non-editable TextArea so you don't have to parse any text to figure out if it's a valid date or not. You have the date object!

[Hunter890]

It's great, I could probably turn it into a nice desktop calendar widget. The only thing I noticed with the latest version is that the letter for thursday is R, not T.

[CSM]

It's great, I could probably turn it into a nice desktop calendar widget. The only thing I noticed with the latest version is that the letter for Thursday is R, not T.

You can configure that,* however using R was intentional. The reason is that because Tuesday and Thursday start with T, and Thursday is usually abbreviated "R" (probably because Tuesday doesn't have that letter).

* There is an array in the script where I put the letters of the week. You could make them two characters wide, but I think I rely on them being one (offsets).

[CSM]

Okay, version 1.1.6 is up. I changed the days of the week to 2-character names and added a variable to change the hOffset of those dates, so that if someone were to change it back (for whatever reason) they could realign it as needed. Same download link.

-- New Post --

Closely followed by version 1.1.7 ...
Change "log":

- const on internal size variable.
+ external read/write access to size variable.
+ Calendar size dynamically updates to new relative size.
+ read access to absolute width and height.

I don't recommend using relative sizes other than .5 increments (1, 1.5, 2 ...) because the text gets very fuzzy at other sizes and may result in headaches. I do not recommend any relative size below 1, and a relative size of 0 does not mean the calendar will disappear (it'll just be very, very tiny). The absolute sizes are read only, designed to be used to figure out the ideal relative size (when programming) or to position other elements relative to the size of the Calendar.

-- New Post --

Version 1.1.8 change log:

+ Relative sizes less than 0 or greater than 70 are now ignored to prevent Widget crashes.

Note that if you set a very large relative size twice in a row, the Widget may still crash. Also note I do mean Widget and not widget.

-- New Post --

No new version, however, for those that see this as an excellent static desk calendar, I created a very simple Widget called (not surprisingly) DesktopCalendar.

Basically if it offers three relative sizes, small (1), medium (1.5), and large (2), and options to turn on or off the large text option and scroller buttons. It should update the calendar every half hour, so when it changes dates the calendar should update. It will update the calendar's "today", but it will not update the visible month if the user has scrolled to a different month (or so I hope).

DesktopCalendar.widget

[Hunter890]

Hey, I like the static calendar widget. Once I hack the colors , it will find a permanent spot on my computer. The only thing I noticed wrong was that when you switch to the small dates, you can faintly see the big letters. Is that intentional?

// Edit:

- My color scheme -

Perhaps you could include some preferences to allow for the non-programmers to change the colors easily, as well as anything else that you can customize to show off your calendar class.

[BOINCer]

The only thing I noticed wrong was that when you switch to the small dates, you can faintly see the big letters. Is that intentional?

Sounds like the window shadow causing trouble again.

[CSM]

Same links as above.
Changelog:

-- CalendarPopup[Test] --

+ Week days now properly use weekDaysColor instead of monthTitleColor
+ Added redraw function to completely redraw the Calendar.

-- DesktopCalendar --

+ Added recalcShadow after setting Widget preferences.
+ Added theming

To "enable" theming, you can drag any file onto the Widget and it will copy it to the Widget data folder and update the context-menu theme list. You can then select it from the list. Bad theme files are deleted from the theme folder, so I recommend storing a copy of your theme elsewhere (just in case you cause a parse error). If a theme that was being used is deleted, it will revert to default theme.

There are two themes included: Default and Opaque. Opaque is just Default without any transparency and a small tweak to the previous-month-color. Themes are easy to wite, they're in JSON, and all property are pretty descriptive of what they do. So just visit the Widget data folder or open up the Widget to get a good idea how themes work. Themes can set relative size, button state, and large-text. The Widget provides an override in the main preferences so you aren't stuck with a theme's settings if you don't want to edit it.

I hope this all works. I tried to make it so that Calendar is used as is, so that I can drop in the latest version without having to edit back in all the theme stuff. We'll just have to see how it goes.

-- New Post --

Hunter890 posted a bug. It's now fixed. The Widget would crash because the themes directory wasn't created. Should be okay now. It should be noted that if you loaded the previous version, you should go to the Widget data folder and delete any file there called "themes" or "theme". That will interfere with the creation of the necessary folder. If you are starting with the latest version, you don't have to worry.