JSFiddle - React, Tailwind, and code Playground

by Ryan Duffy

CSS

.extras-calendar {
    margin:5px;
}

.week {
    width:100%;
    height:16.66666666666667%;
    white-space:nowrap;
}

.week.labels {
    height:25px;
}

.week.labels .day {
    text-align:center;
    background-color:#aaa;
    color:#fff;
}

.week.labels .day.weekend {
    display: none;
}

.extras-calendar.weekends .week.labels .day.weekend {
    display:inline-block;
}

.day {
    border:1px dashed #e7e7e7;
    width:20%;
    height:100%;
    display:inline-block;
    box-sizing:border-box;
    vertical-align: top;
    padding:5px;
}

.extras-calendar.weekends .day {
    width:14.28571428571429%;
}

.day.selected {
    background-color:#eee;
}

.day.other-month {
    background-color:#bbb;
    color:#e7e7e7;
}

JavaScript

enyo.kind({
	name: "enyo.OwnerProxy",
	tag: null,
	decorateEvent: function(inEventName, inEvent, inSender) {
        //if (inEvent) { // this is the broken line
        if (inEvent && !("index" in inEvent)) {
			inEvent.index = this.index;
		}
		this.inherited(arguments);
	},
	delegateEvent: function(inDelegate, inName, inEventName, inEvent, inSender) {
		if (inDelegate == this) {
			inDelegate = this.owner.owner;
		}
		return this.inherited(arguments, [inDelegate, inName, inEventName, inEvent, inSender]);
	}
});

enyo.kind({
    name:"extras.Calendar",
    kind: "FittableRows",
    classes: "extras-calendar",
    published: {
        startDate: "",
        endDate: "",
        month: new Date().getMonth(),
        year: new Date().getFullYear(),
        weekends: true,
        range: true
    },
    events: {
        onSetupDate: ""
    },
    handlers: {
        ondragfinish: "stopDragging"
    },
    components:[
        {classes:"week labels", components:[
            {content:$L("Sun"), classes:"day weekend"},
            {content:$L("Mon"), classes:"day"},
            {content:$L("Tue"), classes:"day"},
            {content:$L("Wed"), classes:"day"},
            {content:$L("Thu"), classes:"day"},
            {content:$L("Fri"), classes:"day"},
            {content:$L("Sat"), classes:"day weekend"}
        ]},
        {name:"weeks", kind:"Repeater", classes:"weeks", onSetupItem:"setupWeeks", fit:true, components:[
            {name:"days", kind:"Repeater", classes:"week", onSetupItem:"setupDays", components:[
                {name:"day", classes:"day", ondown:"dayTapped", onenter:"dayEntered", ondragstart:"dayDrag"}
            ]}
        ]},
        {name:"selection", kind:"Selection", onSelect: "daySelected", onDeselect: "dayDeselected"}
    ],
    create: function() {
        this.inherited(arguments);
        this.rangeChanged();
        this.weekendsChanged();

        this.dayOffset = new Date(this.year, this.month, 1).getDay()*-1+1;
       ...