Our powerful JS Calendar component


Post by nayiaw »

Hi, I'm trying out Bryntum Calendar and using CRUD manager to load data from our server. However, the calendar shows loadFailedMessage on the screen but the API result is structured the same as the examples. Did I miss out on anything?

Screenshot 2020-07-17 at 2.16.38 PM.png
Screenshot 2020-07-17 at 2.16.38 PM.png (59.56 KiB) Viewed 3203 times
Screenshot 2020-07-17 at 2.16.30 PM.png
Screenshot 2020-07-17 at 2.16.30 PM.png (35.75 KiB) Viewed 3203 times

(btw the locale doesn't seem to work too? The error message seems to be a key of a locale instead of the language)

And does CRUD manager supports pagination for Calendar by passing in the params of the selected day/week/month/year?


Post by pmiklashevich »

Hello!

Translation should be fixed in 1.0.0 release which is coming out.

Data you return should not be wrapped into data param. Please refer to scheduler docs to find how to work with data: https://www.bryntum.com/docs/scheduler/#guides/data/crud_manager.md

Crud Manager doesn't support pagination at the moment. What is your usecase to have pagination in Calendar? If you need to add extra params to your request you can subscribe to beforeSend event.

Cheers!

Pavlo Miklashevych
Sr. Frontend Developer


Post by nayiaw »

Thanks for the pointer, it worked now.

We were using our own way to load data from API but we switched to use CRUD manager to get data with the thought that we only load data that are relevant to the day/week/month or year so we don't put any unnecessary load to our server to return all events data, at the very least, we would like to be able to reload the data by sending appropriate params (selected day/week/month/year) to the backend when users navigate through the calendar. Is it possible to do it either way?

Btw I've also noticed that the height is not adjusted when I switch from monthly view to yearly view - is this a bug as well?


Post by mats »

We were using our own way to load data from API but we switched to use CRUD manager to get data with the thought that we only load data that are relevant to the day/week/month or year so we don't put any unnecessary load to our server to return all events data, at the very least, we would like to be able to reload the data by sending appropriate params (selected day/week/month/year) to the backend when users navigate through the calendar. Is it possible to do it either way?

You can add param to each Crud Manager request at any time, please see https://bryntum.com/docs/scheduler/#Scheduler/data/CrudManager#event-beforeSend

Btw I've also noticed that the height is not adjusted when I switch from monthly view to yearly view - is this a bug as well?
Can you please show screenshots showing the issue?


Post by nayiaw »

May I know what are the listeners for the areas highlighted in red? I've spent some time reading the documentation but I couldn't find any listener that works.

Screenshot 2020-07-21 at 5.41.06 PM.png
Screenshot 2020-07-21 at 5.41.06 PM.png (45.22 KiB) Viewed 3167 times

Attached is the gif of switching from monthly view to yearly view:

calendar.gif
calendar.gif (868.05 KiB) Viewed 3167 times

Post by saki »

In addition to documentation https://bryntum.com/docs/calendar/#Calendar/view/Calendar#events, the way to find fired events is to go to an example, e.g. https://bryntum.com/examples/calendar/basic/ and then type in console:

calendar.on({catchAll:(ev) => {console.log(ev)}})

It will output all fired events in the console. You can also install the catchAll listener to individual widgets in calendar.widgetMap.


Post by nayiaw »

Thanks for the tips. However, I don't see any event name associated with the event, how do I override the listeners to have some custom actions? And I've tried it on the basic example page, but it seems that not all events are being captured. The red areas as highlighted on the left side are still not being captured.


Post by saki »

The small month calendar on the left is called datePicker so you can see its events by:

calendar.widgetMap.datePicker.on({catchAll:(e) => {console.log(e)}});

Buttons beside "TODAY" are prevButton and nextButton so the following will work:

calendar.widgetMap.prevButton.on({catchAll:(e) => {console.log(e)}});
calendar.widgetMap.nextButton.on({catchAll:(e) => {console.log(e)}});

Post by karg »

Hi,

I am nayiaw colleague and also facing the similar challenge. How do I get the exact name of the event to add custom handler for these events?

Reason for this question is because we have a sizable data so we want to load data based on the selected month / year.


Post by alex.l »

Hi, karg

e.type should contain the event name.
We created a feature request to add a new event for Calendar to track all changes of visible dates. https://github.com/bryntum/support/issues/1234

All best,
Alex

All the best,
Alex


Post Reply