JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<div class="mopCalendar">
    <div class="mopCalendarHeader">
        <div class="mopCalendarBtnFirst"></div>
        <div class="mopCalendarBtnPrevious"></div>
        <div class="mopCalendarMonth"></div>
        <div class="mopCalendarBtnNext"></div>
        <div class="mopCalendarBtnLast"></div>
    </div>
    <div class="mopCalendarBody">
        <table style="width:100%;">
            <thead>
                <tr>
                    <th class="mopCalendarDayRed">Sun</th>
                    <th>Mon</th>
                    <th>Tue</th>
                    <th>Wed</th>
                    <th>Thu</th>
                    <th>Fri</th>
                    <th class="mopCalendarDayRed">Sat</th>
                </tr>
            </thead>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
               ...

JavaScript

(function ($) {
            //global properties, depending on current language
            var MonthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
            var FirstDayOfWeek = 0;

            $.fn.mopCalendar = function (initialDate) {
                var $this = $(this);
                var selectedDate = initialDate || new Date();
                var selectedMonth = selectedDate.getMonth();
                var selectedYear = selectedDate.getFullYear();
                return this.each(function () {
                    var getValue = function () {
                        return selectedDate;
                    };

                    var setValue = function (date) {
                        if (date == null) {
                            selectedDate = null;
                            return;
                        }

                        selectedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
                        selectedMonth = selectedDate.getMonth();
                        selectedYear = selectedDate.getYear();
                        refreshMonthTitle();
                        var getDay = function () {
                            return selectedDate.getDate();
                        };

                        var getWeekDay = function () {
                            return selectedDate.getDay();
                        };

                        var getMonth = function () {
                            return selectedDate.getMonth();
                        };

                        var getYear = function () {
                            return selectedDate.getFullYear();
                        };

                        var setSelectedMonth = function (monthNum) {
                            if (monthNum == -1 && selectedMonth == 0) {
                                selectedYear--;
                                selectedMonth =...