# Under the Hood - Calendar object - how to use the gotoDate function?

**URL:** <https://forums.knack.com/t/under-the-hood-calendar-object-how-to-use-the-gotodate-function/13643>\
**Category:** Ask Developers\
**Created:** [January 15, 2023, 7:40pm UTC](https://forums.knack.com/t/under-the-hood-calendar-object-how-to-use-the-gotodate-function/13643 "2023-01-15T19:40:17Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![NormandDefayette\_CortexRD](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/normanddefayette_cortexrd/32/855_2.png) [@NormandDefayette\_CortexRD](https://forums.knack.com/u/NormandDefayette_CortexRD)\
**Post date:** [January 15, 2023, 7:40pm UTC](https://forums.knack.com/t/under-the-hood-calendar-object-how-to-use-the-gotodate-function/13643/1 "2023-01-15T19:40:17Z")

</div>

Hi to all,

I’m trying to understand the internal workings of the Calendar object in Knack. I want to add a input field of type calendar to allow direct jumping to a date, instead of clicking endlessly on the arrows to skip one month at a time. This will be added to the **[KTL](https://github.com/cortexrd/Knack-Toolkit-Library)**.

FYI, the Calendar object comes from here:  
[FullCalendar - JavaScript Event Calendar](https://fullcalendar.io/)

The **gotoDate** function is documented here:  
[Calendar::gotoDate - Docs | FullCalendar](https://fullcalendar.io/docs/Calendar-gotoDate)

I can see it in Knack’s code, and I can even invoke it.  
This is what it looks like:

```auto
u.gotoDate = function (e, t, n) {
    e instanceof Date ? W = I(e) : C(W, e, t, n);
    L()
}

```

If I create a breakpoint on **u.today = function()** for trigger when I click on the **Today** button, I can set the object as a global variable temp1 and can call **temp1.gotoDate(new Date(‘2018-12-31’))**;  
Tada!!! The calendar shifts to that date!

But again, it’s always the same problem. Without a breakpoint, how do I get the calendar object **“u”**?  
I’ve investigated Knack.views and Knack.router and more, but no success.

Normand

---

<div class="post-metadata">

**Author:** ![hmnd](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/hmnd/32/190_2.png) [@hmnd](https://forums.knack.com/u/hmnd)\
**Post date:** [January 15, 2023, 8:28pm UTC](https://forums.knack.com/t/under-the-hood-calendar-object-how-to-use-the-gotodate-function/13643/2 "2023-01-15T20:28:31Z")

</div>

Hi Normand,

You can use the gotoDate function like so:

```javascript
const fc = Knack.views[viewKey].$('.knack-calendar').data('fullCalendar');
// Go to Dec. 8, 2022
fc.gotoDate(new Date(2022, 11, 8));

```

---

<div class="post-metadata">

**Author:** ![NormandDefayette\_CortexRD](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/normanddefayette_cortexrd/32/855_2.png) [@NormandDefayette\_CortexRD](https://forums.knack.com/u/NormandDefayette_CortexRD)\
**Post date:** [January 15, 2023, 8:57pm UTC](https://forums.knack.com/t/under-the-hood-calendar-object-how-to-use-the-gotodate-function/13643/3 "2023-01-15T20:57:25Z")

</div>

Man - you really rock!!!

I don’t know how you can figure this out, and where you get this information, but I’d sure like to know.

Thanks a million times,  
Normand

---

<div class="post-metadata">

**Author:** ![NormandDefayette\_CortexRD](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/normanddefayette_cortexrd/32/855_2.png) [@NormandDefayette\_CortexRD](https://forums.knack.com/u/NormandDefayette_CortexRD)\
**Post date:** [January 15, 2023, 8:59pm UTC](https://forums.knack.com/t/under-the-hood-calendar-object-how-to-use-the-gotodate-function/13643/4 "2023-01-15T20:59:37Z")

</div>

While we at it, can you tell me how I can get a callback when an event is dropped (moved) in a calendar?

I can see this doc page, but not sure how to implement it.

[Event Dragging & Resizing - Docs | FullCalendar](https://fullcalendar.io/docs/event-dragging-resizing)

I must be very close, see this:

```auto
var calView = Knack.views[view.key].$('.knack-calendar').fullCalendar('getView');
console.log('calView =', calView);
$(calView).on('eventDrop', function (info) {
    console.log('eventDrop ' + info.dateStr);
});

```

But that still doesn’t work.

Norm

---

<div class="post-metadata">

**Author:** ![hmnd](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/hmnd/32/190_2.png) [@hmnd](https://forums.knack.com/u/hmnd)\
**Post date:** [January 15, 2023, 11:10pm UTC](https://forums.knack.com/t/under-the-hood-calendar-object-how-to-use-the-gotodate-function/13643/5 "2023-01-15T23:10:14Z")

</div>

Normand,

You’re looking at the docs for FullCalendar v6. Knack still uses v1.

You’ll have to intercept the existing `eventDrop` handler than Knack has set, and then re-call Knack’s handler, a bit like this:

```javascript
const fc = Knack.views[viewKey].$('.knack-calendar').data('fullCalendar');
const originalEventDropHandler = fc.options.eventDrop;
fc.options.eventDrop = function (event, dayDelta, minuteDelta, allDay, revertFunc) {
  // do your stuff here
  console.log('eventDrop', { event, dayDelta, minuteDelta, allDay, revertFunc });
  return originalEventDropHandler.call(this, ...arguments);
};

```

By the way, you can use that `fc` variable to call fullCalendar’s functions directly (ie. `fc.gotoDate(new Date(...))`), instead of calling with the function name as I did in the other reply. A little cleaner that way.

---

<div class="post-metadata">

**Author:** ![NormandDefayette\_CortexRD](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/normanddefayette_cortexrd/32/855_2.png) [@NormandDefayette\_CortexRD](https://forums.knack.com/u/NormandDefayette_CortexRD)\
**Post date:** [January 15, 2023, 11:23pm UTC](https://forums.knack.com/t/under-the-hood-calendar-object-how-to-use-the-gotodate-function/13643/6 "2023-01-15T23:23:18Z")

</div>

Wow again! You did it marvelously.

I spent way too many hours on this, but I learned a lot.  
I can now go forward with cool new features in the KTL - thank you sir!

Norm

---

<div class="post-metadata">

**Author:** ![NormandDefayette\_CortexRD](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/normanddefayette_cortexrd/32/855_2.png) [@NormandDefayette\_CortexRD](https://forums.knack.com/u/NormandDefayette_CortexRD)\
**Post date:** [January 16, 2023, 3:10am UTC](https://forums.knack.com/t/under-the-hood-calendar-object-how-to-use-the-gotodate-function/13643/7 "2023-01-16T03:10:55Z")

</div>

Hi David,

I have another question: Do you know how can I get a callback when a **view has rendered**? It’s supposed to be done with the **viewRender** event, but it’s not in Knack.

[viewRender - Docs v1 | FullCalendar](https://fullcalendar.io/docs/v1/viewRender)

The closest I can breakpoint on is **t.changeView(c)** but I can’t see how I could get my callback. For example when I change the view type or when scroll through months or weeks.

I also tried to see if viewDisplay would help, based on your code, like this:

```auto
const viewDisplay = fc.options.viewDisplay;
console.log('viewDisplay =', viewDisplay);
fc.viewDisplay = function (view, element) {
    console.log('viewDisplay: view, element', view, element);
    return viewDisplay.call(this, ...arguments);
};

```

But the log never shows up.

Any idea?  
Normand

---

<div class="post-metadata">

**Author:** ![hmnd](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/hmnd/32/190_2.png) [@hmnd](https://forums.knack.com/u/hmnd)\
**Post date:** [January 16, 2023, 11:59pm UTC](https://forums.knack.com/t/under-the-hood-calendar-object-how-to-use-the-gotodate-function/13643/8 "2023-01-16T23:59:23Z")

</div>

Hi Normand,

You should be assigning your function to `fc.options.viewDisplay`, not `fc.viewDisplay`.

Note that your handler will be fired when FullCalendar’s view has rendered, which is before the events for the given view are loaded.

---

<div class="post-metadata">

**Author:** ![NormandDefayette\_CortexRD](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/normanddefayette_cortexrd/32/855_2.png) [@NormandDefayette\_CortexRD](https://forums.knack.com/u/NormandDefayette_CortexRD)\
**Post date:** [January 17, 2023, 1:17am UTC](https://forums.knack.com/t/under-the-hood-calendar-object-how-to-use-the-gotodate-function/13643/9 "2023-01-17T01:17:06Z")

</div>

It works!!

I was so close, I can’t believe I didn’t see that one. I was getting too tired I guess.

About the callback event timing, I don’t really care since all I need to know is the new view type and visStart date like this:

```auto
//Callback when the calendar view changes type of range.
const viewDisplay = fc.options.viewDisplay;
fc.options.viewDisplay = function (view) {
    console.log('viewDisplay: view', view.name, view.visStart);
    return viewDisplay.call(this, ...arguments);
};

```

So all is perfect, thanks again 🙂  
Norm

---

<div class="post-metadata">

**Author:** ![BradStevens](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/bradstevens/32/140_2.png) [@BradStevens](https://forums.knack.com/u/BradStevens)\
**Post date:** [January 18, 2023, 9:16am UTC](https://forums.knack.com/t/under-the-hood-calendar-object-how-to-use-the-gotodate-function/13643/10 "2023-01-18T09:16:02Z")

</div>

Stupid question @hmnd - how did you know to access the .data property of Knack.views[viewKey].$(‘.knack-calendar’)?

Doesn’t appear in the console anywhere for me unless I’m not looking hard enough!

---

<div class="post-metadata">

**Author:** ![hmnd](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/hmnd/32/190_2.png) [@hmnd](https://forums.knack.com/u/hmnd)\
**Post date:** [January 18, 2023, 8:03pm UTC](https://forums.knack.com/t/under-the-hood-calendar-object-how-to-use-the-gotodate-function/13643/11 "2023-01-18T20:03:49Z")

</div>

Just by reverse-engineering Knack’s rendering code. [`.data()`](https://api.jquery.com/data/) is a jQuery function that allows you to store data associated with a given element, and later access it through a reference to the element. In this case, Knack uses it to keep a reference to the underlying FullCalendar instance; it’s used in some other places to keep track of filters, the inline table cell editor, and more.