JSFiddle - React, Tailwind, and code Playground

by KgomDr

JavaScript

var DataString = [{
        "Year": "2019",
        "Months": [{
            "January": [{ "Name": "Dance", "From": "1-1-2019", "To": "1-1-2019" }
            ],
            "February": [],
            "March": [],
            "April": [],
            "May": [],
            "June": [],
            "July": [],
            "August": [],
            "September": [],
            "October": [],
            "November": [],
            "December": []
        }]
    },
    {
        "Year": "2018",
        "Months": [{
            "January": [{ "Name": "Dance-2018", "From": "9-1-2018", "To": "9-1-2018" }
                //,{ "Name": "Sing-2018", "From": "19-1-2018", "To": "29-1-2018" }
            ],
            "February": [],
            "March": [],
            "April": [],
            "May": [],
            "June": [],
            "July": [],
            "August": [],
            "September": [],
            "October": [],
            "November": [],
            "December": []
        }]
    }];
    
    
    var monthData = [
        { month: "January", year: "a", startDateID: 1, endDateID: 31 },
        { month: "February", year: "b", startDateID: 1, endDateID: 28 },
        { month: "March", year: "c", startDateID: 1, endDateID: 31 },
        { month: "April", year: "d", startDateID: 1, endDateID: 30 },
        { month: "May", year: "e", startDateID: 1, endDateID: 31 },
        { month: "June", year: "f", startDateID: 1, endDateID: 30 },
        { month: "July", year: "g", startDateID: 1, endDateID: 31 },
        { month: "August", year: "h", startDateID: 1, endDateID: 31 },
        { month: "September", year: "i", startDateID: 1, endDateID: 30 },
        { month: "October", year: "j", startDateID: 1, endDateID: 31 },
        { month: "November", year: "k", startDateID: 1, endDateID: 30 },
        { month: "December", year: "l", startDateID: 1, endDateID: 31 }
    ];