Having calendar move to a specific date

I’m trying to add a click event to a text input box at the top of the calendar which allows the user to pick a date and then have the calendar move to that date in the month or week display instead of having to use the default arrow keys to navigate the date in the calendar. This is good for dates which are one or two years in the future to get their faster. Is that possible?

Doesn’t the Go To Date action on the calendar do that?

you would think. I did try that and it doesn’t seem to do anything. I have a text input box which is defined as a date field. I then have a button which has a gotodate with the input box as its value. Nothing happens when I click the button. I must be doing something wrong as the go to date does imply that. Any documentation on that anywhere? Can’t find it.

Thanks,
Rick

Tested it and it works for me

<input id="date" type="date" dmx-on:updated="calendar.gotoDate(value)">

not sure what I’m doing wrong, but it doesn’t work for me. I did exactly what you did. I have an on data update event which triggers the goto date for the field value which is defined as a date.

here is the link:
https://www.marsalstudios.com/admin/calendar/calendar.php

Any ideas?
Thanks,
Rick

I’m getting a lot of errors, many incorrect expressions. Also the normal navigation is not working, throwing errors.

not sure what you mean. the page works fine except for the goto date. I’m using Chrome as my browser.

i turned on developer tools in Chrome and did see a lot of errors; something having to do with bootstrap 4 and formatter for gotodate. Here is what I saw. Could something be wrong with my wappler installation? It does work for everything else.

DevTools failed to load SourceMap: Could not parse content for https://www.marsalstudios.com/bootstrap/4/js/popper.min.js.map: Unexpected token < in JSON at position 0

DevTools failed to load SourceMap: Could not parse content for https://www.marsalstudios.com/bootstrap/4/js/bootstrap.min.js.map: Unexpected token < in JSON at position 0

DevTools failed to load SourceMap: Could not parse content for https://www.marsalstudios.com/sm/8cfffdd….map: Unexpected token < in JSON at position 0

DevTools failed to load SourceMap: Could not parse content for https://www.marsalstudios.com/dmxAppConnect/maps/dmxBootbox.js.map: Unexpected token < in JSON at position 0

DevTools failed to load SourceMap: Could not parse content for https://www.marsalstudios.com/sm/fce9748….map: Unexpected token < in JSON at position 0

parser.js:762 Formatter goToDate in expression [calendar1.goToDate(value)] doesn’t exist for type object

(anonymous) @ polyfills.js:3
(anonymous) @ polyfills.js:3
(anonymous) @ polyfills.js:3
dmx.parse @ polyfills.js:3
(anonymous) @ polyfills.js:3
n @ polyfills.js:3
dispatch @ jquery-3.4.1.slim.min.js:2
v.handle @ jquery-3.4.1.slim.min.js:2
dispatchEvent @ polyfills.js:3
(anonymous) @ polyfills.js:3
(anonymous) @ polyfills.js:3
postMessage (async)
dmx.nextTick @ polyfills.js:3
updateData @ polyfills.js:3
(anonymous) @ polyfills.js:3
setTimeout (async)
(anonymous) @ polyfills.js:3

I’m getting over 1000 errors

Mostly invalid expressions, like "http://www.marsalstudios.com/admin/full_history.php?cid=""+client_id. Notice the double "", should become "http://www.marsalstudios.com/admin/full_history.php?cid="+client_id.

Colors used as expressions Unexpected token '#' at column 0 in expression [#672d02].

dmx-style:background-color="#672d02" should become dmx-style:background-color="'#672d02'".

wow, ok. I see those and got rid of all the colors, then added them back in and that got rid of most of the errors. not sure why that happened. There are now only a few errors all having to do with bootstrap. i don’t know where these are coming from. When I try to execute the gotodate function, i also get a bootstrap related error.

ERRORS:
DevTools failed to load SourceMap: Could not load content for https://www.marsalstudios.com/bootstrap/4/js/bootstrap.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for https://www.marsalstudios.com/sm/8cfffddf058dc09b67d92f8d849675e6b459dfb8ede5136cf5c98d10acf78cc3.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for https://www.marsalstudios.com/bootstrap/4/js/popper.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for https://www.marsalstudios.com/dmxAppConnect/maps/dmxBootbox.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for https://www.marsalstudios.com/sm/fce9748308f79c28aa5a62ea9d002732d8c4a1c8eaadedab834d5c92787c6fa3.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
parser.js:762 Formatter goToDate in expression [calendar1.goToDate(date_desired.value)] doesn’t exist for type object

Thanks for your help,Rick

@patrick, is it possible to use the fullcalendar getDate function (https://fullcalendar.io/docs/v4/Calendar-getDate) in a similar manner?

In other words, instead of:

calendar.gotoDate(value)

To go to an actual date, can I do some variation of:

calendar1.getDate

In order to get the calendar1’s date?

The reason I need this date is that my calendar source is a large dynamic query and I’d like to be able for the query to only return this week/month. So when looking at week 1, the query returns results for week 1 etc. Without knowing the current date I can’t think of a way to make this happen.