How to pass and enable only selected dates inside datePicker widget in ThingWorx 9.4

[PB_12020637]

Hello everyone,

I need to create a datePicker where:

1. I want to send multiple dates (like 28, 30, 2) to the datePicker Widget. These dates are stored in a database, so can I pass them using the service?
2. Only the dates provided to the datePicker should be enabled, while all other dates should be disabled. Can this be done in ThingWorx 9.4?

If this isn't feasible with the datePicker, is there an alternative solution? Please see the attached screenshot for reference.

[Rocko]

I don't think it can be done with a datepicker as the calendar has no state for the individual days.

You maybe could use this widget, https://github.com/thingworx-field-work/CalendarWidgetTWX/releases/tag/2.0.1

[PB_12020637]

I appreciate you sharing your insights! I have a question regarding the calendar widget you mentioned. Is it a custom-made widget? Also, could you provide the guidelines for its usage? I'm eager to know if I can integrate it into my project and what steps I should take, especially since I'm still learning the ropes.

[Rocko]

It's a custom-made widget by one of PTC's field engineers. As such, it is not directly supported and comes as it is, but you're free to change and/or extend it to your needs. I don't have a lot of experience with it but basically you would have a service returning an infotable of dates and status, which you bind the the calendar widget. Then you would use the "EventStates" property to configure the look and feel depending on the state (which could be "allowed" and "not allowed"). There is also a clickevent to see which date was clicked.

Maybe with CSS you can also make the "not allowed" not only gray, but also unclickable. You have to play around a bit to see what is possible.

[PB_12020637]

I have a question. Do I only need the "Calender-min-2.0.1" file to get the calendar widget? I imported the Calender-min-2.0.1 file as an extension, but I can't use the widget. When I try to drag and drop the widget, I get an error that says, "ERROR [widget] An error occurred while calling CalendarWidget::afterRender ['CalendarWidget-5',{}]."

I also noticed the "source code" file on Git, but I'm not sure how to use it. Do I need to extract that source code in Eclipse, create an extension from it, and then use that extension in my project? If so, could you please provide the steps to do that?

Additionally, what is the purpose of the "tar.gz" file available on Git? Do I need that for the configuration as well?

[Rocko]

Perfect questions to ask the developer on github

2.0.1 looks like the latest release, but it's from 2021 so might be incompatible with your TWX version.

You would import Calendar-min-2.0.1.zip as extension into TWX.

The zip is the source, you only need this when you want to update and build the software yourself. Since this is not an java extension you don't need eclipse, but probably something that works with typescript. 

tar.gz is the same just an alternate compression format more common in unix/linux systems.

[PB_12020637]

Thank you for your support so far. I am currently unable to use the custom Calendar widget due to the issues I mentioned earlier. Therefore, I am considering a different approach to achieve the desired functionality. Please let me know if this will work and provide guidance on my questions.

I plan to use a pop-up for my calendar frame, and within that pop-up, I want to include a collection widget.

The pop-up will have four main components: two dropdown widgets for selecting the year and month, one collection widget for displaying available dates, and two buttons for "cancel" and "confirm."

I will create a service to populate the collection widget. This service will return "dates" as strings and "status" as a Boolean value. The "state" will indicate whether a "date" should be enabled or disabled.

For the collection widget design:
1. The collection widget will have only one button.
2. The button's "label" property will be linked to the service's "date" value, and the "disable" property will be linked to the service's "state."

I believe this will populate the collection widget with the dates. However, I have a question about how to register multiple selected dates (for example: 2, 5, 10 from the available enabled dates) for the current month and return all these dates when the "confirm" button in the pop-up is clicked.

[Rocko]

The selected dates would be the Selected Rows on the Data source you connected to the collection.

You can try either to bind that infotable to a mashup parameter (see in the community how to pass values back from a sub-mashup),

or you can set it as a session value.

[nmutter]

Another idea would be to use a Dropdown widget and add the dates there. This is for sure not very comfortable - depending on the amount of dates.