Would appreciate any quick pointers on: Scheduler.

[emily.thorne91]

Is Smart Scheduler compatible with routing? How do I preserve scheduler filters and selections during navigation?

[admin]

Hi,

Please, find an example below which shows the approach with React

// React Router + Smart.Scheduler state persistence example

import { useEffect, useRef } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import "smart-webcomponents-react/source/styles/smart.default.css";
import { Scheduler } from "smart-webcomponents-react/scheduler";

export default function SchedulerPage() {
  const schedulerRef = useRef(null);
  const navigate = useNavigate();
  const location = useLocation();

  // Restore state on load
  useEffect(() => {
    const scheduler = schedulerRef.current;

    const params = new URLSearchParams(location.search);

    if (params.get("view")) {
      scheduler.view = params.get("view");
    }

    if (params.get("date")) {
      scheduler.date = new Date(params.get("date"));
    }
  }, []);

  // Save state before navigation
  const goAway = () => {
    const scheduler = schedulerRef.current;

    const params = new URLSearchParams({
      view: scheduler.view,
      date: scheduler.date.toISOString()
    });

    navigate(<code>/other-page?${params.toString()}</code>);
  };

  return (
    <>
      <Scheduler ref={schedulerRef} />
      <button onClick={goAway}>Navigate</button>
    </>
  );
}

Regards,
Peter

[Author]

Posts