[REACT] Integrating calendar with backend api
Posted: Sun Mar 05, 2023 5:02 pm
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