Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
sundayFirstCalendar = 'cal && date'
mondayFirstCalendar = 'cal | awk \'{ print " "$0; getline; print "Mo Tu We Th Fr Sa Su"; \
getline; if (substr($0,1,2) == " 1") print " 1 "; \
do { prevline=$0; if (getline == 0) exit; print " " \
substr(prevline,4,17) " " substr($0,1,2) " "; } while (1) }\' && date'
command: sundayFirstCalendar
refreshFrequency: 3600000
style: """
bottom: 55px
right: 50px
color: #fff
background: rgba(#fff, 0.2)
font-family: Helvetica Neue
table
margin: 1.0em
border-collapse: collapse
table-layout: fixed
td
text-align: center
padding: 4px 6px
text-shadow: 0 0 1px rgba(#000, 0.5)
thead tr
&:first-child td
font-size: 28px
font-weight: 100
&:last-child td
font-size: 11px
padding-bottom: 10px
font-weight: 500
tbody td
font-size: 12px
.today
font-weight: bold
background: rgba(#000, 0.8)
border-radius: 50%
"""
render: -> """
<table>
<thead>
</thead>
<tbody>
</tbody>
</table>
"""
updateHeader: (rows, table) ->
thead = table.find("thead")
thead.empty()
thead.append "<tr><td colspan='7'>#{rows[0]}</td></tr>"
tableRow = $("<tr></tr>").appendTo(thead)
daysOfWeek = rows[1].split(/\s+/)
for dayOfWeek in daysOfWeek
tableRow.append "<td>#{dayOfWeek}</td>"
updateBody: (rows, table) ->
tbody = table.find("tbody")
tbody.empty()
rows.splice 0, 2
rows.pop()
today = rows.pop().split(/\s+/)[2]
for week, i in rows
days = week.split(/\s+/).filter (day) -> day.length > 0
tableRow = $("<tr></tr>").appendTo(tbody)
if i == 0 and days.length < 7
for j in [days.length...7]
tableRow.append "<td></td>"
for day in days
cell = $("<td>#{day}</td>").appendTo(tableRow)
cell.addClass("today") if day == today
update: (output, domEl) ->
rows = output.split("\n")
table = $(domEl).find("table")
@updateHeader rows, table
@updateBody rows, table
stylingOptions =
# background color
background: 'rgba(#fff, 0.2)'
# show fullscreen -> true
fullscreen: false
# display position 'top', 'middle', 'bottom'
vertical: 'bottom'
dateOptions =
# display not only 'time' also 'date'
showDate: true
# format of 'date'
date: '%d/%m/%Y %A'
format = (->
if dateOptions.showDate
dateOptions.date + '\n' +'%l:%M %p'
else
'%l:%M %p'
)()
command: "date +\"#{format}\""
# the refresh frequency in milliseconds
refreshFrequency: 30000
# for update function
dateOptions: dateOptions
render: (output) -> """
<div id='simpleClock'>#{output}</div>
"""
update: (output) ->
if this.dateOptions.showDate
data = output.split('\n')
html = data[1]
html += '<div class="date">'
html += data[0]
html += '</div>'
else
html = output
$(simpleClock).html(html)
style: (->
fontSize = '7em'
width = 'auto'
transform = 'auto'
bottom = '7%'
top = 'auto'
if stylingOptions.fullscreen
fontSize = '10em'
width = '94%'
if stylingOptions.vertical is 'middle'
transform = 'translateY(50%)'
bottom = '50%'
else if stylingOptions.vertical is 'top'
bottom = 'auto'
top = '3%'
return """
background: #{stylingOptions.background}
color: #fff
font-family: Helvetica Neue
left: 3%
top: #{top}
bottom: #{bottom}
transform: #{transform}
width: #{width}
#simpleClock
font-size: #{fontSize}
font-weight: 100
margin: 0
text-align: center
padding: 10px 20px
#simpleClock .date
margin-left: .5em
margin-right: .5em
font-size: .5em
"""
)()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment