JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<div id="main_div">
<div class="date_dis_week"><a href="javascrtip://" onclick="cal.makeCalendarForMonth(cal.prevMonth,'','back');">&lt;</a><div id="date_dis"></div><a href="javascript://" onclick="cal.makeCalendarForMonth(cal.nextMonth,'','next');">&gt;</a></div>
<div id="calendar" class="calendar"></div>
</div>

CSS

#main_div{overflow: hidden;width: 370px;float: left;height:290px;}
#main_div > div{display:block;clear:both;}
.date_dis_week{text-align:center;text-decoration:none;float:left;width:370px;height:30px;font-size:20px;}
.date_dis_week a{text-decoration: none;float: left;width: 20%;position: relative;display: inline-block;}
.date_dis_week a:last-child{float:right;}
#date_dis{width: 60%;position: relative;left: 0px;float:left;}
#calendar, #calendar div{float:left}
#calendar{
    margin: 0px;
    width:740px;
}
.calendar_container{
    width:370px;
    -webkit-transform:translate3d(0px,0px,0px);
     border-bottom: solid 1px #222;
}
.toPrev{
    -webkit-transition-duration: .25s;
    -webkit-transform:translate3d(-370px,0px,0px);
}
.fromNext{
    -webkit-transition-duration: .25s;
  /*    -webkit-transform:translate3d(0px,0px,0px); */
   -webkit-transform:translate3d(370px,0px,0px);
}
.calendar_container div{
    font-size: 25px;
    box-sizing:border-box; -webkit-box-sizing:border-box;
    width: 14.37%; 
    /* width: 44.6px; */
    height: 42px;
    line-height:44px;
    text-align:center;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(56,56,56,1)), color-stop(2%,rgba(63,63,63,1)), color-stop(5%,rgba(62,62,62,1)), color-stop(12%,rgba(53,53,53,1)), color-stop(23%,rgba(33,33,33,1)), color-stop(28%,rgba(29,29,29,1)), color-stop(44%,rgba(6,6,6,1)), color-stop(58%,rgba(5,5,5,1)), color-stop(70%,rgba(7,7,7,1)), color-stop(77%,rgba(0,0,0,1)), color-stop(100%,rgba(1,1,1,1)));
background: -webkit-linear-gradient(top, rgba(56,56,56,1) 0%,rgba(63,63,63,1) 2%,rgba(62,62,62,1) 5%,rgba(53,53,53,1) 12%,rgba(33,33,33,1) 23%,rgba(29,29,29,1) 28%,rgba(6,6,6,1) 44%,rgba(5,5,5,1) 58%,rgba(7,7,7,1) 70%,rgba(0,0,0,1) 77%,rgba(1,1,1,1) 100%);
background: -o-linear-gradient(top, rgba(56,56,56,1) 0%,rgba(63,63,63,1) 2%,rgba(62,62,62,1) 5%,rgba(53,53,53,1) 12%,rgba(33,33,33,1) 23%,rgba(29,29,29,1) 28%,rgba(6,6,6,1) 44%,rgba(5,5,5,1) 58%,rgba(7,7,7,1)...

JavaScript

var Project = {}
Project.isIOSDevice = true;
var day_light_saving = "Yes";
adjustCalendarElementForOS = function(){};
translateMonth = function(){return arguments[0]};
(function ($) {
    $.format = (function () {
        function strMonth(value) {
            switch (value) {
                case 1:
                    return "January";
                case 2:
                    return "February";
                case 3:
                    return "March";
                case 4:
                    return "April";
                case 5:
                    return "May";
                case 6:
                    return "June";
                case 7:
                    return "July";
                case 8:
                    return "August";
                case 9:
                    return "September";
                case 10:
                    return "October";
                case 11:
                    return "November";
                case 12:
                    return "Decemeber";
                default:
                    return value;
            }
        }
    
        var parseMonth = function (value) {
            switch (value) {
                case "Jan":
                    return "01";
                case "Feb":
                    return "02";
                case "Mar":
                    return "03";
                case "Apr":
                    return "04";
                case "May":
                    return "05";
                case "Jun":
                    return "06";
                case "Jul":
                    return "07";
                case "Aug":
                    return "08";
                case "Sep":
                    return "09";
                case "Oct":
                    return "10";
                case "Nov":
                    return "11";
                case "Dec":
                    return "12";
                default:
                    return value;
            }
        };

   ...