Question 73138 in Reactjs Question posted in
The new location for the React Documentation can be found here.

how can I change 'React Fullcalendar' date with 'drop down' filter? – Reactjs

I want to change component’s viewing date with ‘DropDown’ filter.

There are lots of anwers about ‘view changing’ but, nothing about ‘changing date’ T^T

can i get some great answers about that ?

       <div>
          <select value={year} onChange={onYearChange}>
            <option value={2023}>2023</option>
            <option value={2024}>2024</option>
            <option value={2025}>2025</option>
            <option value={2026}>2026</option>
            <option value={2027}>2027</option>
            {/* add more years if necessary */}
          </select>
          <select value={month} onChange={onMonthChange}>
            <option value={1}>January</option>
            <option value={2}>February</option>
            <option value={3}>March</option>
            <option value={4}>April</option>
            <option value={5}>May</option>
            <option value={6}>June</option>
            <option value={7}>July</option>
            <option value={8}>August</option>
            <option value={9}>September</option>
            <option value={10}>October</option>
            <option value={11}>November</option>
            <option value={12}>December</option>
          </select>
        </div>

        <FullCalendar
          plugins={[dayGridPlugin, interactionPlugin]}
          height={'70vh'}
          events={events}
          datesSet={({ start, end }) => onChangeStartEnd(start, end)}
          eventClick={onEventClick}
          dateClick={onDateClick}
          selectable="true"
        />

I want to associate select tag with Fullcalendar

Tags:

2

Answers


  1. 0

    Handle the change event of the select tags (I don’t know how that’s done in React specifically, but it looks like you do, I could only do it in vanilla JS), and then in the callback, run https://fullcalendar.io/docs/Calendar-gotoDate to tell fullCalendar to change the date.

    See the "Calendar API" section of https://fullcalendar.io/docs/react if you need to know how to get access to the fullCalendar object in order to call its functions.

    Make sure you include

    ref={this.calendarRef}

    in your <FullCalendar declaration, and then you can use the function along these lines:

    someFunction() {
    let calendarApi = this.calendarRef.current.getApi();
    calendarApi.goToDate("2018-06-01");
}
    Login or Signup to reply.
  2. 0

    I’ve made something similar, here is my code. Try to implement and let me know if you need more assisstance

    import React, { useState, useRef } from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';

function App() {
  const [year, setYear] = useState(new Date().getFullYear());
  const [month, setMonth] = useState(new Date().getMonth() + 1);
  const calendarRef = useRef(null);

  const onYearChange = (event) => {
    setYear(event.target.value);
    updateCalendarDate();
  };

  const onMonthChange = (event) => {
    setMonth(event.target.value);
    updateCalendarDate();
  };

  const updateCalendarDate = () => {
    if (calendarRef.current) {
      const calendarApi = calendarRef.current.getApi();
      calendarApi.gotoDate(`${year}-${month}-01`);
    }
  };

  return (
    <div>
      <select value={year} onChange={onYearChange}>
        {/* add more years if necessary */}
        <option value={2023}>2023</option>
        <option value={2024}>2024</option>
        <option value={2025}>2025</option>
        <option value={2026}>2026</option>
        <option value={2027}>2027</option>
      </select>
      <select value={month} onChange={onMonthChange}>
        {/* add more months if necessary */}
        <option value={1}>January</option>
        <option value={2}>February</option>
        <option value={3}>March</option>
        <option value={4}>April</option>
        <option value={5}>May</option>
        <option value={6}>June</option>
        <option value={7}>July</option>
        <option value={8}>August</option>
        <option value={9}>September</option>
        <option value={10}>October</option>
        <option value={11}>November</option>
        <option value={12}>December</option>
      </select>

      <FullCalendar
        ref={calendarRef}
        plugins={[dayGridPlugin, interactionPlugin]}
        initialView="dayGridMonth"
        height={'70vh'}
        /* Add other event handlers and props as needed */
      />
    </div>
  );
}

export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search