FullCalendar listview is list in calendar view

i'm new to FullCalendar. i'm using React and i want to render listDay and listWeek but they come out as "list" in the calendar view on the web.

import React, { useState } from "react";
import FullCalendar from "@fullcalendar/react";
import daygridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import listPlugin from "@fullcalendar/list";

export default function Calendar() {
return (
    <div>
      <FullCalendar
        editable
        selectable
        events={events}
        headerToolbar={{
          start: "today prev next",
          center: "title",
          end: "dayGridMonth timeGridWeek timeGridDay listWeek listDay",
        }}
        plugins={[listPlugin, daygridPlugin, timeGridPlugin, interactionPlugin]}
        views={[
          "dayGridMonth",
          "timeGridWeek",
          "timeGridDay",
          "listDay",
          "listWeek",
        ]}
        validRange={[
          {
            start: "2023-05-11",
            end: "2023-06-11",
          },
        ]}
      />
    </div>
  );
}

I have tried the following:

views={[
          "dayGridMonth",
          "timeGridWeek",
          "timeGridDay",
          "listDay",
          "listWeek",
        ]}
        buttonText={[
          {
            listWeek: "List Week",
            listDay: "List Day",
          },
        ]}

And something starting with:

var calendar = new Calendar(calendarEl, {})

but it seems as though the calendarEl is not for React.

Is there a React alternative to calendarEl as it is referenced quite alot in the documentation?

I encountered similar problem (but not quite the same) the first time I run the example project from FullCalendar repo

This is the code I tried:

import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
import listPlugin from "@fullcalendar/list";

  return (
    <FullCalendar
      editable
      selectable
      headerToolbar={{
        start: "today prev next",
        center: "title",
        end: "dayGridMonth timeGridWeek timeGridDay listWeek listDay",
      }}
      events="https://fullcalendar.io/api/demo-feeds/events.json"
      plugins={[
        dayGridPlugin,
        timeGridPlugin,
        interactionPlugin,
        listPlugin,
      ]}
      buttonText= {{
        listWeek: 'List Week',
        listDay: 'List Day'
      }}
    />
  )

Below was the result. Both listWeek and listDay button appeared without label/text.

Turned out, It was because I did not install the @fullcalendar/list on my project. On their readme here, they don't instruct to install the list package to begin with. So then, I manually installed it using command npm i @fullcalendar/list

After that, the button label/text appeared.

Without putting the buttonText prop, the button labels will be just "list" like on the screenshot you posted.

You're right that buttonText can be used to achieve what you want.

In regular JS, this would be written as:

buttonText: {
  "listWeek": "List Week",
  "listDay": "List Day"
}

I'm not a React user, but inferring from the examples in the documentation and elsewhere, since the buttonText data is an object rather than an array, I think the syntax you need to use should be as follows:

buttonText={{
  "listWeek": "List Week",
  "listDay": "List Day"
}}

Demo showing buttonText in action (using vanilla JS, since, again, I'm not a React user): https://codepen.io/ADyson82/pen/XWxqOdv

P.S. There is no views option in the fullCalendar documentation so I'm not sure where the idea for using that in your code came from, or what you think it does.

P.P.S. You also asked

> Is there a React alternative to calendarEl

No, and there needn't be, because calendarEl is a native DOM object which you pass into the calendar, so it knows where to render the calendar on the page. Whereas in React, as a I understand it, you declare the <FullCalendar component and use that in a suitable place in your page, without needing to directly refer to the native DOM.

If however, you wanted to get an equivalent for the calendar variable, this is documented in the guidance for the Fullcalendar React component - read the section entitled "Calendar API" to find out how to retrieve an object which then gives you access to all of fullCalendar's functions. However for the task in your question, you should not need it.