Fancy new control, UDCalendar

mylabonline · January 16, 2020, 11:56pm

amazing work thanks for getting this out - and with lots of customizations!

Removed the time

kreef · January 17, 2020, 6:50am

How did you remove the time if you don’t mind me asking?

psDevUK · January 17, 2020, 7:35am

Hey @kreef just woke up having my morning Tea…
the parameter -showTimeSelect set this to $false as in
New-UDSelectDateTime -showTimeSelect $false
To remove the time select

mylabonline · January 17, 2020, 11:52am

New-UDSelectDateTime -Id "Picker" -dateFormat "MMMM d, yyyy" -WeekNumbers $false -showTimeSelect $false -Clearable $false -Locale "en-US" -OnChange {
     Show-UDToast -Message "Date Changed $eventData" -Position topLeft -Duration 3000
  }

The above code snip is what I used to generate the image I posted above. You can also change how the date/time is displayed using the -dateFormat parameter.

And the -Clearable switch allows for a X clear button to clear out the date - but the positioning and style of that button overlaps with the date (in my UD anyway)

psDevUK · January 17, 2020, 12:05pm

Hey @mylabonline for the overlapping thing, you can set the input field to be a bit wider using the following CSS:-

$theme = New-UDTheme -Name "Basic" -Definition @{
    '.react-datepicker__input-container' = @{
        'width' = "140% !important"
    }
} -Parent "Default"

This will show the full time and have the space for the clear button…
I did put some simple documentation here:-

github.com

psDevUK/UDSelectDateTime/blob/master/README.md

# UDSelectDateTime
A component to select the date and time.  It was requested on the UD forums to have a component that was like a calendar component
but would also allow you to select the time. Both things built into one component.  This folks is the answer to that request.  This component is based upon the component shown on reactdatepicker.com I tried to implement as many of the useful props and pass them as powershell parameters
* **TimeIntervals** - Will set the minutes apart on the time display so a setting of 10 will show every 10 minutes on the time select.
* **OnChange** - Allows you to add a scriptblock to do something when the value in the component changes
* **Locale** - Gives you the choice to set the defined locale, this by default is set to en-GB
* **ModalView** - Displays the component centered screen as if it were a modal referred to as portal view on website defaulted false
* **Clearable** - Boolean option allowing you to add a mini clear button to the component defaulted to true
* **WeekNumbers** - This will show the current week numbers in the calendar display defaulted to true
* **showPreviousMonths** - Is set to false by default but would allow you to open the calendar to display previous months
* **monthsShown** - Is defaulted to 1 but changing this number would display the amount of calendar months, and if you select true on **showPreviousMonths** then this will show previous months with the amount this value is set at
* **timeFormat** - This is defaulted to HH:mm please see documentation on website for more information
* **dateFormat** - Is defaulted to MMMM d, yyyy h:mm aa please see documentation on website for more informaiton

## Example Using The Component

```
Import-Module -Name UniversalDashboard
Import-Module -Name UniversalDashboard.UDSelectDateTime
Get-UDDashboard | Stop-UDDashboard

This file has been truncated. show original

McAndersDK · February 14, 2020, 11:08am

Hey @BoSen29
are you sure that the endpoint you make in the code is uniq for that user?

$OnChange = New-UDEndpoint -Endpoint $OnChange -Id ($Id + “onChange”)

are we sure that the “new-udcalendar” are uniq for each user? (https://github.com/BoSen29/UD-Calendar/blob/master/src/Scripts/New-UDCalendar.ps1)
if not they will be making changes for each other if they use it as the same time ?

edit: hmm I can see that it’s the same pattern in Standard UD components, so I guess they are

BoSen29 · February 14, 2020, 12:11pm

Hi @McAndersDK!

I did kinda just copy from UD’s code, so yeah should be fine!

Are you having issues with the component, or are you using it as a reference for a new component?

McAndersDK · February 14, 2020, 3:44pm

hey @BoSen29, ah yeah sorry, no issue with your component
yeah I were looking into you module for the actions/events.

I better not highjack this thread with component questions/wondering

BoSen29 · February 14, 2020, 4:16pm

@McAndersDK
Feel free to post in the UD Development topic, and i’ll happy to give you guidance man!

cadayton · April 19, 2020, 3:34am

Should this control have text attribute so the field can be seen on the page? The demo works but the field appears transparent once cleared. Very nice job. Thanks!!!

psDevUK · April 19, 2020, 8:13am

Hi @cadayton this clears the input when the item is cleared. Not seen this transparent issue yet? Have you tried this in a different browser? This is one of the few components I am not actually using myself, so will have to look into this. I know sometimes when I use FireFox certain input fields like the date selection component I did does not look that visible, as opposed to IE…are you able to post a before and after screenshot? I am guessing this will most likely need some CSS setting tweaked to see the input field as a different colour.

cadayton · April 19, 2020, 2:28pm

Behavior is the same in FireFox and Chrome.

tom.obrien · June 30, 2020, 9:24am

Out of interest is there a way to disable the calendar? I’m looking to include the calendar in a form but the user filling the form in should only be able to select anything if a certain checkbox is checked. I can do this with other fields like text boxes etc but I couldn’t see a way to do it for the calendar.

BoSen29 · June 30, 2020, 10:10am

Hi @tom.obrien,

Disable - no, hide out of sight from the user? Yes!
Note: remove-udelement does the same thing as “Set-UDELEMENT -attributed @{hidden = $true}”

New-UDButton -Text "RemoveMe" -OnClick {
                    Remove-UDElement -id "Picker"
                }
                New-UDButton -text "ShowME" -OnClick {
                    Set-UDElement -id "Picker" -Attributes @{
                        hidden = $false
                    }

tom.obrien · January 28, 2021, 5:54pm

Really liking the new version of this component, some nice new features. I think I might have found a bug though. I wanted to apply some css with New-UDStyle however if I put the picker inside a new-udstyle element then I get this:

Adding CSS at the theme level does work but there are a couple of bits of CSS that I want to only add to one date picker so ideally I wanted to use new-udstyle.

psDevUK · January 28, 2021, 9:04pm

You cool to post the udstyle bit of code, just going from the screenshot you provided it looks unhappy about the timevalue being entered. Just thought if I could use your example to try and replicate the issue. Thanks

tom.obrien · January 29, 2021, 9:20am

Yeah absolutely. I had a bit of a play around and it seems to do the same regardless of what is in the style however here’s an example dashboard that you should be able to run which shows it in action:

$init = New-UDEndpointInitialization -Module @(‘UniversalDashboard.UDSelectDateTime’)
Get-UDDashboard | Stop-UDDashboard
Start-UDDashboard -Port 10005 -Dashboard (
New-UDDashboard -Title “Powershell UniversalDashboard” -Content {
New-UdColumn -Size 3 -Endpoint {
New-UDParagraph -Text “This date picker works”
New-UDSelectDateTime -Id “Picker1” -TimeIntervals 30 -WeekNumbers $true -Clearable $false -OnChange {
$Session:Picker1Value=$EventData
} -inline $true -showYearDropdown $true -showMonthDropdown $true -fixedHeight $true -showTimeSelect $true -showPreviousMonths $false -CloseOnSelect $true
New-UDParagraph -Text “This date picker doesn’t :(”
New-UDStyle -Style ’
.react-datepicker__time-container–with-today-button {
right:-90px!important
}’ -Content {
New-UDSelectDateTime -Id “Picker2” -TimeIntervals 30 -WeekNumbers $true -Clearable $false -OnChange {
$Session:Picker2Value=$EventData
} -inline $true -showYearDropdown $true -showMonthDropdown $true -fixedHeight $true -showTimeSelect $true -showPreviousMonths $false -CloseOnSelect $true
}
} -AutoRefresh
} -EndpointInitialization $init
)

This is the result that I get:

What is really strange is that after a few seconds the whole page disappears and is replaced by this:

This only happens when the picker inside the UDStyle is on the page page though, if you comment out the second picker then the first one loads fine and stays on the page without any errors.

Strange one!

NotPaulBlart · May 15, 2024, 4:34pm

Is this only for picking dates? If so, does anyone know if something exists to allow displaying and interacting with events on a calendar ala outlook?

Topic		Replies	Views
New dynamic button for universal dashboard Universal Dashboard Show Off	17	3059	February 22, 2022
Is it possible to have a New-UDDynamic Typography update / place a datetime on dashboard header? PowerShell Universal	1	191	August 9, 2022
Using New-UDChartJS in PS Universal PowerShell Universal	5	1303	November 30, 2021
Code to use for included themes issue Universal Dashboard Help	5	668	March 8, 2019
Datepicker with empty default Universal Dashboard	0	86	January 9, 2024

Fancy new control, UDCalendar

Related Topics