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

Reactjs – Customise week numbers in react-calendar

I’m using react-calendar to create a customised calendar. Is it possible to replace default week numbers with custom week numbers?

<Calendar
       calendarType="US"
       onChange={handleDateChange}
       showWeekNumbers
       onClickWeekNumber={handleWeekClick}
       selectRange
       value={[new Date(selectedStartDate), new Date(selectedEndDate)]}
       defaultValue={[
           new Date(selectedStartDate),
           new Date(selectedEndDate),
        ]}
       formatShortWeekday={(_locale, date) => weekday[date.getDay()]}
/>

I was not able to find any documentation or examples on how this can be achieved. I could add the custom week numbers separately beside the calendar but they would not be clickable and would not highlight the dates in the calendar.

Tags:

2

Answers


  1. 0

    You visit this https://github.com/wix/react-native-calendars/issues/1072

    stylesheet.day.basic.weekNumbers ?
    stylesheet.calendar.header.weekNumber ?

    Login or Signup to reply.
  2. 0

    If you need to make the week numbers and associated start and end dates dynamic, you can fetch the data from an API and then use it to populate the custom week numbers and their corresponding dates. Here’s how you could modify the approach to make it dynamic:

    Fetching Data from API:
    Create a function that fetches the week numbers and associated dates from your API. You can use JavaScript’s fetch API or a library like axios for this purpose. Assume your API returns data in a format like:

    {
  "weeks": [
    { "number": 1, "startDate": "2023-01-01", "endDate": "2023-01-07" },
    { "number": 2, "startDate": "2023-01-08", "endDate": "2023-01-14" },
    // ...
  ]
}

    Rendering Dynamic Custom Week Numbers:
    After fetching the data, you can map over the received week data to dynamically render the custom week numbers and dates. Each custom week number can have an onClick handler to handle interactions.

    const CustomCalendar = () => {
  const [weekData, setWeekData] = useState([]); // State to hold fetched data

  useEffect(() => {
    // Fetch data from API and set it to the state
    fetchDataFromAPI().then((data) => setWeekData(data.weeks));
  }, []);

  const handleCustomWeekClick = (weekNumber) => {
    console.log(`Custom week number ${weekNumber} clicked`);
  };

  return (
    <div className="calendar-container">
      <div className="week-number-container">
        {weekData.map((week) => (
          <div
            key={week.number}
            onClick={() => handleCustomWeekClick(week.number)}
          >
            {week.number}
          </div>
        ))}
      </div>
      <Calendar
        /* Your existing Calendar props */
      />
    </div>
  );
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search