How to resolve "failed to decode: schema: error converting value for end_time" in Scheduler

Answer:

This error occurs when users interact with the Scheduler (specifically clicking the "Next Month" button) before the page has fully loaded, particularly on slow internet connections.

Root Cause

The error happens when:

• Users click navigation buttons (like "Next Month") too quickly after the page loads
• The internet connection is slow or throttled
• The scheduler hasn't finished loading the initial availability data
  
  

Solution

Wait for Full Load: Allow the scheduler page to completely load before clicking any navigation buttons. This typically takes just a few seconds.

For Developers: Implement a workaround that disables month navigation buttons until the availability API call completes:

App.tsx:

import { BrowserRouter, Route, Routes } from "react-router-dom";
import { NylasSchedulerEditor, NylasScheduling } from "@nylas/react";
import { useState, useEffect } from "react";
import "./App.css";

function App() {
  const [isSchedulingEnabled, setIsSchedulingEnabled] = useState(false);
  const [isMonthButtonHidden, setIsMonthButtonHidden] = useState(false);
  
  // Get the configuration ID from the URL query string
  const urlParams = new URLSearchParams(window.location.search);
  const configId = urlParams.get("config_id") || "";

  // Monitor network requests for availability API calls
  useEffect(() => {
    const originalFetch = window.fetch;
    
    window.fetch = async (...args) => {
      const response = await originalFetch(...args);
      
      // Check if this is the availability request
      if (args[0] && typeof args[0] === 'string' && args[0].includes('/scheduling/availability')) {
        setIsSchedulingEnabled(true); // Enable scheduling when availability is loaded
        setIsMonthButtonHidden(false); // Show month button when availability is loaded
      }
      
      return response;
    };
    
    return () => {
      window.fetch = originalFetch;
    };
  }, []);

  const handleMonthChanged = async () => {
    setIsMonthButtonHidden(true);
    
    // The month button will be shown again when the new availability API call completes
  };

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={
          <div className={`${isSchedulingEnabled ? "nylas-scheduling-enabled" : ""} ${isMonthButtonHidden ? "month-button-hidden" : ""}`}>
            <a href="/scheduler-editor" className="button">View Scheduler Editor</a>
            <NylasScheduling
              configurationId={configId}
              schedulerApiUrl="https://api.us.nylas.com"
              eventOverrides={{
                monthChanged: handleMonthChanged
              }}
            />
          </div>
        } />
        <Route path="/scheduler-editor" element={
          <div>
            <NylasSchedulerEditor
              schedulerPreviewLink={`${window.location.origin}/?config_id={config.id}`}
              nylasSessionsConfig={{
                clientId: "{{client_id}}", // Replace with your Nylas client ID from the previous
                redirectUri: `${window.location.origin}/scheduler-editor`,
                domain: "https://api.us.nylas.com/v3", // or 'https://api.eu.nylas.com/v3' for EU data center
                hosted: true,
                accessType: 'offline',
              }}
              defaultSchedulerConfigState={{
                  selectedConfiguration: {
                    requires_session_auth: false, // Creates a public configuration which doesn't require a session
                    scheduler: { // The callback URLs to be set in email notifications
                      rescheduling_url:`${window.location.origin}/reschedule/:booking_ref`, // The URL of the email notification includes the booking reference
                      cancellation_url:`${window.location.origin}/cancel/:booking_ref`
                    }
                  }
              }}
            />
          </div>
        } />
      </Routes>
    </BrowserRouter>
  );
}
export default App;

 
App.css:

#root {
  display: grid;
  place-items: center;
  height: 100%;
}

#root > div {
  display: grid;
  gap: 1rem;
}

.button {
  width: fit-content;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-weight: 700;
  color: rgb(59, 130, 246);
  text-decoration: inherit;
  border-width: 1px;
  border-radius: 0.25rem;
  border-color: rgb(59, 130, 246);
  border-style: solid;
}


nylas-scheduling::part(ndp__month-button) {
  display: none;
}

.nylas-scheduling-enabled nylas-scheduling::part(ndp__month-button) {
  display: block;
}

.month-button-hidden nylas-scheduling::part(ndp__month-button) {
  display: none;
}

1. Monitor the availability API requests
2. Hide or disable month navigation buttons initially
3. Re-enable them after the availability response is received

This prevents users from triggering requests before the scheduler is ready to handle them properly.

Updated June 25, 2025 20:10