JSFiddle - React, Tailwind, and code Playground

by sonicblis

HTML

<div ng-app="cal" ng-controller="datepicker">
    <twine-datepicker ng-model="SelectedDate"></twine-datepicker><br />
    <div>{{SelectedDate | date}}</div>
</div>

CSS

body{
    font-size: 8pt;
    font-family: verdana;
}

td{
    text-align: center;
}

.calendar-passedday{
    cursor: not-allowed;
}

.calendar-today, .calendar-day{
    cursor: pointer;
}

.calendar-today{
    color: red;
}

.calendar-passedday{
    color: #ccc;
}

JavaScript

var app = angular.module("cal",[]);
app.controller('datepicker', function($scope){
    $scope.SelectedDate = new Date();
});
app.directive('twineDatepicker', function($compile){  
    var cal_days_labels = ['S','M','T','W','T','F','S'];    
    var cal_months_labels = ['January', 'February', 'March', 'April',
                         'May', 'June', 'July', 'August', 'September',
                         'October', 'November', 'December'];        
    var cal_days_in_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    var currentDate = new Date();
    var today = currentDate.getDate();
    var thisMonth = currentDate.getMonth();
    
    var getCalHMTL = function(displayMonth, displayYear)
    {                
        console.log('rendering calendar');
        var displayDate = new Date(displayYear + '/' + displayMonth + '/' + today);
        var firstDay = new Date(displayYear, displayMonth, 1);
        var startingDay = firstDay.getDay();
        var prevMonth = (displayMonth == 0) ? 12 : displayMonth - 1;
        var prevYear = (displayMonth == 0) ? displayYear - 1 : displayYear;
        var nextMonth = (displayMonth == 12) ? 0 : displayMonth + 1;
        var nextYear = (displayMonth == 12) ? displayYear + 1 : displayYear;
                
        var monthLength = cal_days_in_month[displayMonth];
        
        // compensate for leap year
        if (displayMonth == 1) { // February only!
            if((displayYear % 4 == 0 && displayYear % 100 != 0) || displayYear % 400 == 0){
                monthLength = 29;
            }
        }
        
        // do the header
        var monthName = cal_months_labels[displayMonth]
        var html = '<table class="calendar-table">';
        html += '<tr><th colspan="7">';
        html += '<span style="cursor: pointer;" ng-click="ChangeMonth(' + prevMonth + ',' + prevYear + ')"><</span>&nbsp;';
        html += monthName + '&nbsp;' + displayYear;
        html += '<span style="cursor: pointer;"...