OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

FullCalendar not rerendering

  • Thread starter Thread starter Aurumen
  • Start date Start date
A

Aurumen

Guest
I am trying to make it so that when a date is clicked, it goes to the day view of that day.

Here is my code:

Code:
import dayGridPlugin from "@fullcalendar/daygrid";
import FullCalendar from "@fullcalendar/react";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import { useState, useEffect } from "react";

export default function Calendar(props) {
  const [selectedDate, setSelectedDate] = useState(null);
  const [view, setView] = useState("dayGridMonth");

  

  const handleDateClick = (info) => {
    //window.location.href = route("activity.create", { date: info.dateStr });
    setSelectedDate(info.dateStr);
    setView("timeGridDay");
  };

  useEffect(() => {
    console.log("Selected Date:", selectedDate);
    console.log("View:", view);
  }, [selectedDate, view]);

  return (
    <FullCalendar
      plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
      initialView={view}
      selectable="true"
      selectOverlap="false"
      height="80vh"
      initialDate={selectedDate}
      themeSystem="standard"
      headerToolbar={{
        start: "today prev,next",
        center: "title",
        end: "dayGridMonth, timeGridWeek, timeGridDay",
      }}
      dateClick={handleDateClick}
    />
  );
}

I know the date selection works as I have used alert to verify this, I also logged in the console the change and the date and view variables are being set correctly. It just seems to me that fullCalendar is just not rerendering.

<p>I am trying to make it so that when a date is clicked, it goes to the day view of that day.</p>
<p>Here is my code:</p>
<pre><code>import dayGridPlugin from "@fullcalendar/daygrid";
import FullCalendar from "@fullcalendar/react";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import { useState, useEffect } from "react";

export default function Calendar(props) {
const [selectedDate, setSelectedDate] = useState(null);
const [view, setView] = useState("dayGridMonth");



const handleDateClick = (info) => {
//window.location.href = route("activity.create", { date: info.dateStr });
setSelectedDate(info.dateStr);
setView("timeGridDay");
};

useEffect(() => {
console.log("Selected Date:", selectedDate);
console.log("View:", view);
}, [selectedDate, view]);

return (
<FullCalendar
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
initialView={view}
selectable="true"
selectOverlap="false"
height="80vh"
initialDate={selectedDate}
themeSystem="standard"
headerToolbar={{
start: "today prev,next",
center: "title",
end: "dayGridMonth, timeGridWeek, timeGridDay",
}}
dateClick={handleDateClick}
/>
);
}
</code></pre>
<p>I know the date selection works as I have used alert to verify this, I also logged in the console the change and the date and view variables are being set correctly. It just seems to me that fullCalendar is just not rerendering.</p>
 
Top