محتوای این بخش هنوز کامل نیست و با گذشت زمان به روز می شود.

در اینجا میخوام یک سری توضیحات مختصر در مورد نحوه ساخت یک پلاگین را بنویسم.

نمونه پلاگین هایی که خودم لازم میدونستم در حال حاضر در سایت موجود میباشد، ولی قطعا جوابگوی نیاز اکثریت را نخواهند داد، زیرا احتمال دارد هر کس در شرایط مختلف کاری خود، احتیاج به پلاگینی داشته باشد که من به صورت پیشفرض قرار ندادم. پس لازم است که یک آموزش مختصر در این مورد داده بشه تا شما نیازی به خوندن کد منبع پلاگین های قبلی نداشته باشید.

پلاگین ها در حقیقت همان کامپوننت معمولی ری اکت هستند که در موقعیتی که کاربر مشخص میکند قرار میگیرند با این تفاوت که یکسری پراپرتی هایی به صورت پیشفرض به آنها ارسال میشوند.

شرح این پراپرتی ها در آینده در یک جدول آورده خواهد شد.

در حال حاظر ما میخواهیم یک کامپوننت ساده ری اکت بنویسیم و آن را به عنوان یک پلاگین به تقویم معرفی کنیم:

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"/>
  ]} 
/>

موقعیت افزونه بسته به فعال بودن یا نبودن انتخابگر روز متفاوت است.

به عنوان مثال ، اگر افزونه هایی با موقعیت های مختلف به تقویم وارد شوند اما کاربر ویژگی disableDayPicker را فعال کند ، موقعیت همه پلاگین ها به پایین تغییر می کند.

در این مثال ما component بالا را اصلاح می کنیم تا موقعیت خود را بنویسد، سپس آن را در دو حالت پیش فرض و disableDayPicker آزمایش کنیم:

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 />
      ]} 
    />
  )
}