Tabs not showing

[GaryGibsonTech]

When working with my data that comes from my API, and setting the scheduler resourceViewMode as tabs it does not show, for testing pupropses i coppied that data rom the example from the docs/codesandbox and it works.

`useEffect(() => {
setIsLoading(true);
const color = "#" + Math.floor(Math.random() * 16777215).toString(16);

const resources = employees.map((employee) => ({
  admin_id: employee.employeeId,
  title: employee.empFirstName,
  department: employee.department,
  avatar: employee.imageSrc,
  color: averageColor(color, "#ffffff", "#ffffff", "#ffffff"),
}));

const events = graphData.map((taskData, index) => {
  let start, end;

  if (taskData?.timerStart) {
    let timerStart = new Date(taskData?.timerStart);
    start = new Date();
    start.setHours(timerStart.getHours(), timerStart.getMinutes(), timerStart.getSeconds());
  } else if (taskData?.backTrackStart) {
    let backTrackStart = new Date(taskData?.backTrackStart);
    start = new Date();
    start.setHours(backTrackStart.getHours(), backTrackStart.getMinutes(), backTrackStart.getSeconds());
  } else {
    start = new Date();
  }

  if (taskData?.timerEnd) {
    let timerEnd = new Date(taskData?.timerEnd);
    end = new Date();
    end.setHours(timerEnd.getHours(), timerEnd.getMinutes(), timerEnd.getSeconds());
  } else if (taskData?.backTrackEnd) {
    let backTrackEnd = new Date(taskData?.backTrackEnd);
    end = new Date();
    end.setHours(backTrackEnd.getHours(), backTrackEnd.getMinutes(), backTrackEnd.getSeconds());
  } else {
    end = new Date();
  }

  console.log("s: ",format(start, 'yyyy/MM/dd HH:mm:ss'))
  console.log("e: ",format(end, 'yyyy/MM/dd HH:mm:ss'))

  if (start instanceof Date && !isNaN(start) && end instanceof Date && !isNaN(end) && start !== undefined && end !== undefined && start !== null && end !== null) {
    const employee = employees.find((emp) => emp.empFirstName === taskData.staffName);
    return {
      event_id: index + 1,
      title: `${taskData.staffName} - ${taskData.totalTimeSpentInHours} hours`,
      start: new Date(start),
      end: new Date(end),
      admin_id: employee ? employee.employeeId : null,
    };
  } else {
    console.error('Error: start or end is not a Date object');
    return null;
  }
}).filter((event) => event !== null);

console.log({resources})
console.log("ev: ", events.map((e) => e))

setResources(resources);
setEvents(events);
setIsLoading(false);

}, [employees, graphData]);`

return ( <> <div style={{ textAlign: "center" }}> <span>View Mode: </span> <Button color={mode === "default" ? "primary" : "inherit"} variant={mode === "default" ? "contained" : "text"} size="small" onClick={() => { setMode("default"); calendarRef.current?.scheduler?.handleState( "default", "resourceViewMode" ); }} > Default </Button> <Button color={mode === "tabs" ? "primary" : "inherit"} variant={mode === "tabs" ? "contained" : "text"} size="small" onClick={() => { setMode("tabs"); calendarRef.current?.scheduler?.handleState( "tabs", "resourceViewMode" ); }} > Tabs </Button> </div> <div className="relative w-[100%] h-[100vh] mt-2"> <Scheduler ref={calendarRef} //events={EVENTS} //resources={RESOURCES} events={events} resources={sources} agenda={true} disableViewNavigator={false} editable={false} deletable={false} loading={isLoading} hourFormat="24" resourceViewMode={mode} /> </div> </> );

[aldabil21]

Its kinda unclear to me, can you replicate a minimum example in a sandbox?

in general, If your data resources data are async, setting local state after the scheduler rendered will not change anything, you can use the ref to update internal resources. Or you can render the Scheduler only when all your data arrives.

[aldabil21]

feel free to reopen if you still have an issue