JSFiddle - React, Tailwind, and code Playground

by drewP

HTML

<button class="weekly">Weekly</button>
<button class="monthly">Monthly</button>

<table class="main">
    <thead>
        <tr>
            <th>Fields</th>
            <th>Fields</th>
            <th>Fields</th>
            <th>JUN</th>
            <th>JUL</th>
            <th>AUG</th>
            <th>SEP</th>
            <th>OCT</th>
            <th>NOV</th>
            <th>DEC</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Fields</td>
            <td>Fields</td>
            <td>Fields</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
                <tr>
                    <td>Fields</td>
                    <td>Fields</td>
                    <td>Fields</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
                    <td>1</td>
                    <td>1</td>
        </tr>
                <tr>
                    <td>Fields</td>
                    <td>Fields</td>
                    <td>Fields</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
                    <td>1</td>
                    <td>1</td>
        </tr>
    </tbody>       
</table>

CSS

table.main th,
table.main tbody td {
    padding: 8px;
    border: solid 1px black;
    text-align: center;
}

table {
 cellspacing: 0;
    border-collapse: collapse;
}

table.weekView, table.weekView thead th, table.weekView tbody td {
 border: none !important;   
}

.remove-padding {
  padding: 0 !important;
}

JavaScript

$(document).ready(function () {
    var currMonth = "JUN",
        view = "monthly",
        table = $('table'),
        indexOfMonth = table.find('thead th:contains("'+ currMonth +'")').index() + 1,
        WeekView = [
            '<table class = "weekView">',
                '<thead>',
                    '<tr>',
                        '<th style="border-right:solid 1px black !important; border-bottom:solid 1px black !important">W1</th>',
                        '<th style="border-right:solid 1px black !important; border-bottom:solid 1px black !important">W2</th>',
                        '<th style="border-right:solid 1px black !important; border-bottom:solid 1px black !important">W3</th>',
                        '<th style="border-bottom:solid 1px black !important">W4</th>',
                    '</tr>',
                '</thead>',
                '<tbody>',
                    '<tr>',
                        '<td style="border-right:solid 1px black !important"><input type="text" /></td>',
                        '<td style="border-right:solid 1px black !important"><input type="text" /></td>',
                        '<td style="border-right:solid 1px black !important"><input type="text" /></td>',
                        '<td><input type="text" /></td>',
                    '</tr>',
                '</tbody>',
            '</table>'
        ],
        WeekViewSub = [
            '<table class = "weekView">',
                '<tbody>',
                    '<tr>',
                        '<td style="border-right:solid 1px black !important"><input type="text" /></td>',
                        '<td style="border-right:solid 1px black !important"><input type="text" /></td>',
                        '<td style="border-right:solid 1px black !important"><input type="text" /></td>',
                        '<td><input type="text" /></td>',
                    '</tr>',
                '</tbody>',
            '</table>'            
        ];

   ...