Fancy new control, UDCalendar

BoSen29 · November 5, 2019, 11:05pm

Evening lads,
So for some reason i wanted to create a calendar-control for universal dashboard.
Simple enough, eh? The timezone troubleshooting was terrible, and reminded me once again why i hate dealing with time.
Anywhomst, the stuff works and is published to the powershell gallery.
Give it a go with

Install-module UniversalDashboard.UD-Calendar

See

For more info.
Examble usage:

github.com

BoSen29/UD-Calendar/blob/master/Examples/UDCalExample.ps1

$dashboard = New-UDDashboard -title "Calendar" -Content {
    New-UDCard -Id "ButtonCard" -Title "Buttons" -titlealignment "center" -Content {
        $date = get-date #initial date
        
        #Add a calendar, which starts on selected yesterday. and shows a modal on the selected day.
        New-UDCalendar -id "Calendarbois" -onChange {
            #run the eventData variable through the Out-UDCalDate to turn it into a DateTime type. 
            $date = $eventData | Out-UDCalDate
            if ($date -is [datetime]) {
                Show-UDToast $date
            }
        } -StartView $date.AddDays(-1)
    }

    New-UDButton -Text "GetDate" -OnClick {
        #Get-UDCalElement returns a preformatted DateTime object, instead of manually formatting it yourself.
        $stuff = "Calendarbois" | Get-UDCalElement

        if ($stuff -is [datetime]) {
            Show-UDToast $stuff

This file has been truncated. show original

Fancy photo:

Also added two more functions to simplify the handling of time, check the example script for usage of “Out-UDCalDate” and “Get-UDCalElement”.

PorreKaj · November 6, 2019, 8:54am

Clean, simple, easy to use, great examples… Perfect!

psDevUK · November 6, 2019, 12:30pm

Nice @BoSen29 great work…I was doing a calendar TO and FROM picker…but have issues doing the binding bit to UD to use the element result. So parked that for the moment.

BoSen29 · November 6, 2019, 1:14pm

Thanks @psDevUK,

can not recommend to go down that rabbit’s hole. I overcomplicated everything, and spent hours on the formatting in order to get the damn timezones to function correctly.
In the end, i had the events working fine, but the get-udelement functionality returned without timezones. Tried for a couple of more hours on the powershell side to force timezones etc, when it turned out to be a simple js function needed.

Anywhomst: this calendar should be able to have time-ranges, and show icons for events etc. Feel free to play with it and throw in a PR if you make anything fancy.
I’ll probably add more functionality to it, if i ever forget the pain of timezones.

psDevUK · November 6, 2019, 1:16pm

You cool to post jsx file. My problem is reading the value from the state of the control. Would like to see how you achieved this. Please and thank you

BoSen29 · November 6, 2019, 1:19pm

Bro, @psDevUK, i cheated, real bad.
Did a dirty.

The this.state.date is only the initial date. And if you want to reference the active date, you need to use this.state.value.
Changed the state-change command to also update the this.state.date thingy, in the onchange event.
this.setState( { value: e, date: e } )
worked like a charm.

github.com

BoSen29/UD-Calendar/blob/204f0b5bf96248c0e1227809df347bc8decb1ca0/src/Components/udcalendar.jsx#L38


          type: "clientEvent",
          eventId: this.props.id + "onChange",
          eventName: 'onChange',
          eventData: e.toDateString()
      });
  }
  
}


onClickDay(e) {
  this.setState( { value: e, date: e } )
  console.log(this.state.date.toDateString())
  if (this.props.activeOnClickDay) {
      UniversalDashboard.publish('element-event', {
          type: "clientEvent",
          eventId: this.props.id + "onClickDay",
          eventName: 'onClickDay',
          eventData: e.toDateString()
      });
  }
}

Not very technical on the JS lingo, but the thingy works… I’m not a fan of JS.

psDevUK · November 6, 2019, 2:41pm

Thanks @BoSen29 for sharing…I did have an attempt 11 days ago here:-
https://github.com/psDevUK/UD-DatePicker/tree/master/UniversalDashboard.DayPicker
But as mentioned cannot read the values back that have been selected…so although it looks nice, it is pretty useless at the moment until I can read the state value. Will look to see if I can fudge how you done it, or use the hook method Alon is now using. Just need to create a few more hours in the day now to make time for this

BoSen29 · November 6, 2019, 2:51pm

Dude, don’t be a tease @psDevUK
Show me the un-compiled good stuff!

I tried Alon’s solution, however it seemed overly complicated for a single component. (and i couldn’t get it working)

psDevUK · November 6, 2019, 3:44pm

Sorry @BoSen29 I do my development on my personal laptop and still stuck at work for another 1 hr and 19 minutes not that I am counting So I will upload you my JSX file, was mainly a big copy and paste of :- http://react-day-picker.js.org/examples/selected-range
Like I mentioned it works beautifully in UD, but I cannot read the selected dates…need to set some learning time aside for binding this to UD properly.

BoSen29 · November 6, 2019, 3:47pm

@psDevUK feelbadman in uk time
Hit me up

AlonGvili · November 6, 2019, 4:45pm

The hook make your component simple you dont need to deal with all the events from , get set sync add remove udelement , i try to make like a tutorial on the hook

AlonGvili · November 6, 2019, 4:47pm

You can take a look on the feedback component that @psDevUK created its used the hook

BoSen29 · November 6, 2019, 5:50pm

I’ll give it another go on my next control
@psDevUK’s github is ususally my goto for inspiration

psDevUK · November 7, 2019, 8:22pm

Boom @BoSen29 you got me inspired this time…now work settled down took some time to revisit the component I was working on as felt a bit by your comment…tried to live up to the hype

BoSen29 · November 7, 2019, 9:05pm

Lookin’ good bro!
Keep it flowing

psDevUK · November 7, 2019, 9:37pm

bit spooky

we were both doing a calendar component without actually speaking to one another

BoSen29 · November 7, 2019, 9:45pm

Lookin good, i’ll give it a go tomorrow!
Should’ave discussed this in the lounge my dude

wsl2001 · November 15, 2019, 3:49pm

Hey Guys,

this is a small favor but will be very helpful if it can be implemented with UD, will any of you be able to build the following react component

above one has a feature to select time as well which is very helpful in creating windows scheduled tasks based on date and time so it will be similar to the one you guys created but has the ability to pick a time as well.

Thanks in advance.

psDevUK · November 16, 2019, 8:47pm

Hey @wsl2001 damn there is a lot of sub-dependencies on this…but your looking for a single date picker with a time as well?
I will look into this but working on some personal development at the moment

wsl2001 · November 16, 2019, 10:50pm

@psDevUK
you are right, am looking for not only a date pick but a time as well, this way you can use UD to create a windows task schedule with date a time to run Vs. relying on default time (12.00) that currently UDCalendar has.

Topic		Replies	Views
New-UDDatePicker a new calendar component Universal Dashboard Show Off datepicker	31	4293	December 26, 2019
Requested component by UD users built for UD users Universal Dashboard Show Off datetime , select-datetime	19	1244	April 17, 2020
Some working Examples PowerShell Universal	2	428	September 29, 2021
New dynamic button for universal dashboard Universal Dashboard Show Off	17	3133	February 22, 2022
Date Time Culture Universal Dashboard Help	11	1482	August 30, 2019

Fancy new control, UDCalendar

Related topics