Our powerful JS Calendar component


Post by jeanbaptiste.minani »

Hello team,

My question is, how do i replace the load data with my backend rersponse which has a same response type as a sample json file you provide in all examples. Am able to can get the api response in one of my typescript file but i don't know how to load it on my calendar. Thanks

Here my full configuration written in .ts file:


import { DateHelper } from '@bryntum/calendar';
import { BryntumCalendarProps } from '@bryntum/calendar-react';

const calendarConfig: BryntumCalendarProps = {
    
date : new Date(2022, 2, 15), height : 700, // We have a little less width in our context, so reduce the responsive breakpoints responsive : { small : { when : 480 }, medium : { when : 640 } }, crudManager : { transport : { load : { url : 'data/calendar-data.json' } }, autoLoad : true, autoSync : true }, features : { eventTooltip : { showOn : 'hover', titleRenderer: (eventRecord: any) => eventRecord.name, renderer: ({ eventRecord }: any) => { return { children : [{ style : { display : 'grid', gridTemplateColumns : '4em 1fr' }, children : ['From:', { text : DateHelper.format(eventRecord.startDate, 'DD MMMM YYYY{ at }HH:mm') }] }, { style : { display : 'grid', gridTemplateColumns : '4em 1fr' }, children : ['To:', { text : DateHelper.format(eventRecord.endDate, 'DD MMMM YYYY{ at }HH:mm') }] }, { style : { color : '#b3b3b3', display : 'grid', gridTemplateColumns : '4em 1fr' }, children : ['Reason:', { text : `${eventRecord.reason}` }]
}] }; }, tools : { newTool : { cls : 'b-icon-add', handler : 'up.onTooltipAddClick' } } }, eventEdit : { editorConfig : { title : 'Manage Reservation' }, items : { nameField : { label : 'Titles' }, resourceField : { weight : 0, label: "Facilities" }, startDateField :{ label:"From" }, endDateField:{ label:"To" }, noteField : { type : 'textarea', label : 'Reason', name : 'reason' }, recurrenceCombo: false, editRecurrenceButton:false, } }, }, }; export { calendarConfig };

Here my another .tsx file with response from the api:

import React, { Fragment, FunctionComponent, useRef, useEffect, useState } from 'react';
import { BryntumCalendar } from '@bryntum/calendar-react';
import { Calendar } from '@bryntum/calendar';
import { calendarConfig } from './calendarConfig';
import FetchCalendarData from './hooks/reservationCalendar';
 // or `import * as fs from 'fs'` if you're using ES2015+

const CalendarApp: FunctionComponent = () => {
    const calendarRef = useRef<BryntumCalendar>(null);
    const calendarInstance = () => calendarRef.current?.instance as Calendar;

const {data:calendarData} =FetchCalendarData("FACIL_0000000000048",3);

console.log(calendarData?.data) // this is the response from the api

useEffect(() => {
    // This shows loading data
    // To load data automatically configure crudManager with `autoLoad : true`
    calendarInstance().crudManager.load();
});
return (
    <Fragment>
        <BryntumCalendar
            ref = {calendarRef}
            {...calendarConfig}
        />
    </Fragment>
);
};

Please help me to understand how i can achieve this


Post by Animal »

The format of the response which a CrudManager uses is shown here: https://www.bryntum.com/products/calendar/docs/api/Calendar/view/Calendar#loading-data

As you can see, it's a combination of the various data types, Events, Resources and (Assignments, if a multi assign is being used)


Post by jeanbaptiste.minani »

Hello Animal,

Thank you for quick response, is it possible to get a real typescript example calling an api with header, authorization, method, etc....
an example would help. Or if possible to call an existing service which return the exact response.

Thanks


Post by Animal »

You do not make any requests. The CrudManager does it for you. You just provide the back end which generates that JSON data.


Post by jeanbaptiste.minani »

Thank you again for clarification, could you give me an example on how i can pass the back end api which has path variables. thanks


Post by Animal »

I don't understand the question. Can you rephrase it?

A CrudManager just has urls to load from and sync to. Your backend just has to produce conforming JSON. It is that simple.


Post by jeanbaptiste.minani »

Okey here the error am getting:
calendar.module.js?3b35:134008 Uncaught (in promise) Error: Load failed
at CrudManager.onCrudRequestFailure

My code looks like this:

crudManager : {
        
transport : { load : { url : `${process.env.NEXT_PUBLIC_RESERVATION_API_URL}/reservation/v1/calendarEvents`, method : 'POST', params : { facilityId : 'FACIL_0000000000048', byStatus :3 }, Headers : { 'X-REALM':'risa', 'Content-Type' : 'application/json', }, credentials : 'exclude', } }, autoLoad : true, autoSync : true },

I cannot call the api and get data


Post by Animal »

So, in the network tab, what does the response payload look like?


Post by jeanbaptiste.minani »

I couldn't get any request in network so, i removed 'credentials: ''exclude' and now am getting this error

"The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '' when the request's credentials mode is 'include'."
I tried putting 'Access-Control-Allow-Origin': '
', but with no success


Post by Animal »

I can't help you with your comms between your app and your server. That is something your dev team will have to address.


Post Reply