Our pure JavaScript Scheduler component


Post by jnarowski »

1. Cannot customize tooltips (event onclick)
I have not been able to customize or replace the tooltip when the event is clicked. I need to be able to do this for both the calendar and scheduler which I am using embedded within the calendar. I have tried everything from the examples and it just doesn't show up at all.

2. showResourceAvatars
Is this option available in calender -> schedule mode for the event cell?

3. I want to change the "day" mode title of scheduler to be the day
see https://jmp.sh/vkrxBYup and https://jmp.sh/eSOe7vvw

4. What content can I render with Vue components?
I am trying to use Vue and Vue components as much as possible. Can I use Vue components for the tooltips, for the event cells (and or) event edit for etc? Would be great to have an example of anything that can be rendered with vue components.

5. List of Vue 3 events emitted?
I looked all over the docs but I could not find a list of events that are emitted from calendar and scheduler pro. I need to hook into when the event is dragged, resized and created, but would love to know all the events emitted and what my options are with them.


Post by saki »

Re #1: Event tooltips are customizable, however Vue components are not (yet) supported for their content. We have a vanilla javascript demo that shows how to customize the tooltips here: https://bryntum.com/products/calendar/examples/tooltips/ The key is to configure eventTooltip feature.

Re #2: Yes, the example is here: https://bryntum.com/products/calendar/examples/resource-avatars/

Re #3: There are https://bryntum.com/products/calendar/docs/api/Scheduler/view/mixin/Describable#config-descriptionFormat and https://bryntum.com/products/calendar/docs/api/Scheduler/view/mixin/Describable#config-descriptionRenderer configurable options for that purpose.

Re #4: Vue components are currently supported only in Grid cells as in https://bryntum.com/products/grid/examples/frameworks/vue-3/javascript/vue-renderer/dist/

Re #5: All events available in API are passed through the Vue wrapper so all events listed in API docs can be listened to. See https://bryntum.com/products/calendar/docs/guide/Calendar/integration/vue/events for some more info.

Note: It is better to create one forum thread for one question. These questions can be answered by different team members so you could get your answers faster.


Post by jnarowski »

Thanks for all of this! I broke these out into separate posts (as per your request) since I have further questions on each.

For #5, I am having a hard time tracking down all the possible events that can be emitted. Do you have a list of all the possible events somewhere, or links to the different lists of possible events?

Here are some events I need to hook into:

  • onViewChange - like changing months, weeks, etc (need new dates to query for new events)
  • onCellClick
  • onEventClick
  • onEventDragEnd
  • onEventResizeEnd
  • onEventUpdate
  • onEventCreate

Post by Animal »

The events emitted by all classes are documented on the classes. Calendar's events are here: https://bryntum.com/products/calendar/docs/api/Calendar/view/Calendar#events

The events are not calls "on"+something. There is a viewChange event on Calendar.

There is a cellClick event on Grid (Scheduler is a Grid)

etc.


Post by jnarowski »

Thanks! It might be my newness to these docs, but I find it hard to navigate the immense number of components you have to find the information I am looking for. It feels like I need a deep understanding of your internal code in order to find the information I need.

Any tips for best digesting your docs and understanding the hierarchy?

The calendar docs you shared above are precisely what I need. Where do I find the equivalent for the scheduler view?

From what I can tell, these events are NOT emitted in the scheduler view? They are working for the calendar view though.

I need the equivalents for the scheduler:

    @beforeDragMoveEnd="handleBeforeDragMoveEnd"
    @dragMoveEnd="handleDragMoveEnd"

Post by Animal »

My best tip is start at the beginning: https://bryntum.com/products/calendar/docs/api/Calendar/view/Calendar

The Calendar class is the container for all the different calendar views.

It is configured, like all widgets by a simple Object.

All the Calendar views are mentioned there with links to their individual documentation.

The Scheduler is a whole separate product. You are embedding it inside a Calendar. The Scheduler API docs are separate here: https://www.bryntum.com/products/scheduler/docs/


Post by Animal »

Another tip is to look at all the examples and open up the code editor to see how they are configured:

Screenshot 2023-03-23 at 07.36.13.png
Screenshot 2023-03-23 at 07.36.13.png (240.07 KiB) Viewed 239 times

Post by jnarowski »

Thanks for the reply. My specific question is - where do I find the equivalent events emitted in the scheduler docs?

I looked in both of these:

But didn't see anything about event drag, resize, drop events etc. Can you point me to the specific doc I need to find these events for the scheduler?

This is my biggest blocker right now, so would really appreciate some clarity here!


Post by Animal »

I followed you link to Scheduler.view.Scheduler

Then hover the (e) for events button:

Screenshot 2023-03-23 at 15.21.01.png
Screenshot 2023-03-23 at 15.21.01.png (134.75 KiB) Viewed 217 times

Or click it to go to the "Events" section of the docs for that class.


Post Reply