Как использовать компонент из Fluent UI вместо дефолтного в customButtons из FullCalendar?

Для начала, если вы хотите использовать компонент из Fluent UI вместо дефолтного в customButtons из FullCalendar, вам нужно подключить Fluent UI к вашему проекту.

1. Установите пакет Fluent UI в свой проект с помощью npm или yarn:

npm install @fluentui/react

2. Импортируйте компонент из Fluent UI и библиотеку стилей в ваш файл JS или JSX, где вы используете FullCalendar:

import { DefaultButton } from '@fluentui/react/lib/Button';
import '@fluentui/react/dist/css/fabric.css';

3. Создайте новый компонент, который будет представлять ваш кастомную кнопку для FullCalendar, используя компонент Fluent UI. Например:

import React from 'react';
import { DefaultButton } from '@fluentui/react/lib/Button';

const CustomButton = (props) => {
  return (
    <DefaultButton
      onClick={props.onClick}
      text={props.text}
      iconProps={props.iconProps}
    />
  );
}

export default CustomButton;

4. Используйте ваш новый компонент вместо дефолтного customButton в FullCalendar. Например:

import React from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import CustomButton from './CustomButton';

const CalendarComponent = () => {
  const handleButtonClick = () => {
    // действие при нажатии на кнопку
  };

  return (
    <FullCalendar
      plugins={[dayGridPlugin]}
      customButtons={{
        customButton: {
          text: 'My Custom Button',
          click: handleButtonClick
        }
      }}
      headerToolbar={{
        left: 'prev,next today',
        center: 'title',
        right: 'customButton'
      }}
    />
  );
}

export default CalendarComponent;

Теперь вы используете компонент из Fluent UI вместо дефолтного в customButtons из FullCalendar. Не забудьте настроить стили и обработчики событий в соответствии с вашими потребностями.