JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calendar test</title>
</head>

<body>
  <div id="app">
    <div class="view view-main view-init">
      <div class="page">
        <div class="page-content">
          <button onclick="test();">Test</button>
        </div>
      </div>
    </div>
  </div>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/5.5.1/css/framework7.bundle.rtl.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/5.5.1/js/framework7.bundle.js">
  </script>
  <script type="text/javascript">
    app = new Framework7({
      root: '#app'
    });

    function test() {
      c = app.calendar.create({
        locale: 'fa-IR',
        on: {
          dayClick: function (calendar, dayEl, year, month, day) {
            alert('Picked ' + year + '/' + (month + 1) + '/' + day + ' :: ' + new Intl.DateTimeFormat('fa-IR')
              .format(new Date(year, month, day)));
            calendar.close();
          }
        }
      });
      c.renderYearPicker = function () {
        const calendar = this;
        const currentYear = calendar.currentYear;
        let yearMin = calendar.params.yearPickerMin || new Date().getFullYear() - 100;
        if (calendar.params.minDate) {
          yearMin = Math.max(yearMin, new Date(calendar.params.minDate).getFullYear());
        }
        let yearMax = calendar.params.yearPickerMax || new Date().getFullYear() + 100;
        if (calendar.params.maxDate) {
          yearMax = Math.min(yearMax, new Date(calendar.params.maxDate).getFullYear());
        }
        const years = [];
        for (let i = yearMin; i <= yearMax; i += 1) {
          years.push(i);
        }
        return `
                <div class="calendar-year-picker">
                    ${years.map(year => `
                    <div data-year="${year}"...