JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.0/mithril.min.js"></script>
<script src="https://rawgit.com/j2css/j2c/master/dist/j2c.global.js"></script>
JavaScript
Calendar = function() {
var months = [
'January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'
]
var date = new Date(),
days = []
var seedCalendar = function() {
for (var i = 0; i < 6*7; i++) {
days[i] = null
}
}
var isToday = function(date) {
var today = new Date()
return JSON.stringify(date) ===
JSON.stringify(new Date(today.getFullYear(), today.getMonth(), today.getDate()))
}
var generateCalendar = function() {
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1),
lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0),
offset = firstDay.getDay() - 1
for (var i = offset, j = 0; j <= lastDay.getDate(); i++ && j++) {
days[i] = {
day: j,
today: isToday(new Date(date.getFullYear(), date.getMonth(), j))
}
}
}
var setDate = function(year, month, day) {
date = new Date(year, month, day)
seedCalendar()
generateCalendar()
}
setDate(date.getFullYear(), date.getMonth(), 1)
var incrementMonth = function() {
setDate(date.getFullYear(), date.getMonth() + 1, 1)
}
var decrementMonth = function() {
setDate(date.getFullYear(), date.getMonth() - 1, 1)
}
return {
days: days,
incrementMonth: incrementMonth,
decrementMonth: decrementMonth,
date: function() { return date },
month: function() { return months[date.getMonth()] },
year: function() { return date.getFullYear() },
weekDays: ['Sun', 'Mon', 'Tues', 'Wed', 'Thu', 'Fri', 'Sat']
}
}
Component = {
sheet: j2c.sheet({
'@global': {
' *': {
boxSizing: 'border-box',
},
},
'.calendar': {
width: '100%',
display: 'block',
background: 'white',
border: '1px solid #ddd',
},
'.spacer': {
background: '#eee',
},
'.month': {
fontSize: '1.4em',
textAlign:...