[VUE 3] Manage calendar data from API

[luiscloud]

I'm trying to get events from my API but i have next problems:

If i use Store. i have CORS problem (If i do this request with JS fetch i can do without any problem.
And i don't know how can i send params to that request like date selected on calendar, month that is showing or some custom params.

   

   const calendarConfig = reactive({ ...calendarConfigBase, ...calendarConfigExtend })

const calendarStore = new AjaxStore({
  readUrl: 'https://xxxx/api/events',
  autoLoad: true,
  headers: { Authorization: `Bearer ${token?.value}` },
})

const calendarGrid = new Grid({
  store: calendarStore,
})

If i don't use Store, i can get events data with JS fetch request, but i need how can inject data on VUE 3 calendar and how can get the selected date or current month on calendar. Maybe i can subscribe to some events to get that info?

Thanks in advance

[Animal]

Store uses JS fetch.

I think you need this configuration property of Store: https://www.bryntum.com/docs/calendar/api/Core/data/AjaxStore#config-fetchOptions

[luiscloud]

Thanks for answer.

And how can i get the current month or when user click on next/prev month and inject calendar data in VUE? I will handle the data on my own

Thanks!

[Animal]

You can use this event: https://www.bryntum.com/docs/calendar/api/Scheduler/data/EventStore#event-loadDateRange

[luiscloud]

Do you have a full example using that? I dont understand the full process.

If i need send extra custom prosp to API, how can i do? Thanks

[Animal]

I cannot know how you are going to send data to your backend API. All I know is that the information that you need is passed with the loadDateRange event.

It passes the old and new date ranges and it's up to you to collect the data if you're not using the CrudManager

[luiscloud]

And if i want manage all my events data.

How can i inyect the events data in calendar? I check in doc this

const grid = new Grid({
    columns : [/*...*/]
});

// Using native fetch to load data
const response = await fetch('backend/load.php');
const data = await response.json();

// Maybe do some custom processing before plugging into grids store
data.forEach((row, index) => {
    row.index = index;
    row.someValue = Math.random();
    /*...*/
});

// Plug it in as inline data
grid.store.data = data;

But "grid.store.data" is undefined on my code.
What format must have "data" there?

And how can i get current data or month is showing in this moment in calendar?

[alex.l]

Hi luiscloud,

Thank you for your questions. I see that our guides for Calendar in that section are not very informative, we will improve our docs to avoid such problems for new users, here is a ticket for that: https://github.com/bryntum/support/issues/3948

Regarding to your questions.

But "grid.store.data" is undefined on my code.
What format must have "data" there?

To apply inline data please use:

calendar.eventStore.data = data;

Data format is just an array of events, we have it in our online examples https://bryntum.com/examples/calendar/

[
            {
                "id"         : 1,
                "startDate"  : "2020-10-11T14:00:00",
                "endDate"    : "2020-10-18T12:00:00",
                "name"       : "Hackathon 2020",
                "allDay"     : true,
                "resourceId" : "bryntum",
                "eventColor" : "green"
            },
            {
                "id"         : 2,
                "startDate"  : "2020-10-11T14:00:00",
                "endDate"    : "2020-10-11T18:00:00",
                "name"       : "Check-In in Hotel",
                "resourceId" : "hotel"
            }
]

And how can i get current data or month is showing in this moment in calendar?

Current data may be found in calendar.eventStore.records. How to work with store https://bryntum.com/docs/calendar/api/Scheduler/data/EventStore

To get the data related to active view, try to use https://bryntum.com/docs/calendar/api/Calendar/view/Calendar#property-activeView
if it's MonthView, see
https://bryntum.com/docs/calendar/api/Calendar/widget/MonthView#property-startDate
https://bryntum.com/docs/calendar/api/Calendar/widget/MonthView#property-endDate

etc...

startDate = calendar.activeView.startDate;

[luiscloud]

I have next code in my setup() vue component

    const calendar = ref(null)
    

const calendarConfig = reactive({ ...calendarConfigBase, ...calendarConfigExtend })

const eventStore = new EventStore()

const calendarGrid = new Grid({
  eventStore,
})

eventStore.data = [{
  id: 1,
  startDate: '2021-12-28T14:00:00',
  endDate: '2021-12-28T16:00:00',
  name: 'Hackathon 2020',
  allDay: true,
  // resourceId: 'bryntum',
  eventColor: 'green',
}]

But calendar ref dont have eventStore inside (calendar.value.eventStore)

I set EventStore on Grid but if i do console log of eventStore const, i can check my event inside _data prop but i cant see any event on calendar view...

[luiscloud]

Same with activeView. Is for trial version?