The contents of this section are not yet complete and will be updated over time.

Here I want to write a brief description of how to build a plugin.

Examples of plugins that I thought I needed are currently available on the site, but they certainly will not meet the needs of the majority, because everyone in different working conditions may need a plugin that I did not put by default. So it is necessary to give a brief tutorial on this, so that you do not need to read the source code of previous plugins.

Plugins are actually the usual React component that are placed in the position specified by the user, except that a series of properties are sent to them by default.

A description of these properties will be provided in a table in the future.

For now, we want to write a simple React component and introduce it as a plugin to the Calendar:

import React from "react";
import { Calendar } from "react-multi-date-picker";

function MyPlugin() {
  return "my first plugin !";
}

export default function Example() {
  return (
    <Calendar 
      plugins={[<MyPlugin />]} 
    />
  )
}

<Calendar 
  plugins={[
    <MyPlugin position="bottom"/>
  ]} 
/>

The position of the plugin varies depending on whether the day picker is enabled or not.

For example, if plugins with different positions are entered into the calendar but the user activates the disableDayPicker property, the position of all plugins changes to the bottom.

In this example we modify the above component to write its position and test it in both default and disableDayPicker modes:

import React from "react";
import { Calendar } from "react-multi-date-picker";

function MyPlugin({ position }) {
  return <div>My plugin is in the {position}!</div>;
}

export default function Example() {
  return (
    <>
      <Calendar 
        plugins={[<MyPlugin />, <MyPlugin position="left"/>]} 
      />
      <br/>
      <Calendar 
        disableDayPicker
        plugins={[<MyPlugin />, <MyPlugin position="left"/>]} 
      />
    </>
  )
}

import React from "react";
import { Calendar } from "react-multi-date-picker";

function MyPlugin({ nodes }) {
  const className = [];

  if (nodes.left) className.push("rmdp-border-left");
  if (nodes.right) className.push("rmdp-border-right");

  return (
    <div 
      className={className.join(" ")} 
      style={{ padding: "0 5px" }}
    >
      {Object.keys(nodes).join(" and ")}
    </div>
  );
}

export default function Example() {
  return (
    <Calendar 
      plugins={[
        <MyPlugin />, 
        <MyPlugin />, 
        <MyPlugin />
      ]} 
    />
  )
}