JSFiddle - React, Tailwind, and code Playground

by pramendra

HTML

<link rel="stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css">
<script src="http://jqueryui.com/ui/i18n/jquery.ui.datepicker-ja.js"></script>
<div id="calendar-datepicker"></div>

CSS

table.ui-datepicker-calendar tbody td.highlight > a {
    background: #FFEB80;
    color: #363636;
    border: 1px solid #FFDE2E;
}

.ui-widget-header .redHoliday1 .ui-state-default {
    background-color: #FFEB80;
    color: #363636;
    border: 1px solid #FFDE2E;
    text-align:center;
}

.redHoliday .ui-state-default {
    background: #f00;
    color: #000;
    border: 1px solid #c00;
}
.test{
    border:dotted;
}

JavaScript

var eventData = null;
var eventUrl = {
    redHoliday: 'https://www.google.com/calendar/feeds/iwineevent%40gmail.com/private-a2f82a40122fe693d1df7e7287453094',
    iwineEvent: 'https://www.google.com/calendar/feeds/7l20ihd51kkhph1569pk9ebnbo%40group.calendar.google.com/private-c6552a7722285735ac14979360c91a85'
};

var getEvents = function(year, month) {
    var calendar_data = [];
    var first_date = $.datepicker.formatDate('yy-mm-dd', new Date(year, month - 3, 1)) + 'T00:00:00';
    var last_date = $.datepicker.formatDate('yy-mm-dd', new Date(year, month + 2, 0)) + 'T23:59:59';
    param = '/full?alt=json&start-min=' + first_date + '&start-max=' + last_date;
    $.each(eventUrl, function(type, url) {
        url = url + param;
        $.ajax({
            url: url,
            async: false,
            dataType: 'json',
            success: function(data) {

                $.each(data.feed.entry, function(index, event) {
                    var event_date = $.datepicker.formatDate('yy-mm-dd', new Date(event.gd$when[0].startTime));
                    if (!calendar_data[event_date]) {
                        calendar_data[event_date] = []
                    };
                    calendar_data[event_date].push({
                        type: type,
                        title: event.title.$t,
                        when: event.gd$when[0]
                    });
                });
            }
        });
    });
    return calendar_data;
}
var eventData = getEvents(new Date().getFullYear(), new Date().getMonth() + 1);
$('#calendar-datepicker').datepicker({
    onChangeMonthYear: function(year, month, inst) {
        getEvents.call(this, year, month);
    },
    beforeShowDay: function(date) {

        var highlight = 'highlight ',
            tooltip = '',
            enable = true;

        if ((event = eventData[$.datepicker.formatDate('yy-mm-dd', date)])) {
            $.each(event, function(index, obj) {
                highlight = obj.type + ' ';
    ...