以日历插件为例，学会Ubersicht开发

日历制作

内容

显示日历的插件，对源代码稍作修改，更加美观。

流程

[command] -- output --> [render] -- html --> [update] -- html (style) --> [desktop]

代码纲要

sundayFirstCalendar = 'cal -h && date "+%-m %-d %y"'

 # 定义命令，输出保存在变量output里
command: sundayFirstCalendar 

#设置参数，如更新频率（调用update）
otherMonths: true

refreshFrequency: 3600000

# 桌面显示样式---像网页一样显示(stylus语法)
style: """
  bottom: 10px
  right: 10px
  color: #fff
  font-family: Helvetica Neue

  ......
  .weekend
    color: yellow
"""

# output输出前进行渲染（html）
render: (output) -> """
  <table>
  <div> Control Yourself <div>
    <thead>
    </thead>
    <tbody>
    </tbody>
  </table>
"""


# 定义update命令，在渲染后调用update
updateHeader: (rows, table) ->

updateBody: (rows, table) ->
  

update: (output, domEl) ->
  rows = output.split("\n")
  table = $(domEl).find("table")

  @updateHeader rows, table
  @updateBody rows, table

源代码

sundayFirstCalendar = 'cal -h && date "+%-m %-d %y"'

mondayFirstCalendar =  'cal -h | 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 "+%-m %-d %y"'

command: sundayFirstCalendar

#Set this to true to enable previous and next month dates, or false to disable
otherMonths: true

refreshFrequency: 3600000

style: """
  bottom: 10px
  right: 10px
  color: #fff
  font-family: Helvetica Neue

  table
    border-collapse: collapse
    table-layout: fixed

  td
    text-align: center
    padding: 4px 6px
    text-shadow: 0 0 1px rgba(#000, 0.5)

  div
    text-align: center

  thead tr
    &:first-child td
      font-size: 24px
      font-weight: 100
      color: orange

    &:last-child td
      font-size: 11px
      padding-bottom: 10px
      font-weight: 500

  tbody td
    font-size: 12px

  .today
    font-weight: bold
    background: rgba(#fff, 0.2)
    border-radius: 50%
    color: red

  .grey
    color: rgba(#C0C0C0, .7)

  .weekend
    color: yellow
"""

render: (output) -> """
  <table>
  <div> Control Yourself <div>
    <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
    if dayOfWeek == "Su" or dayOfWeek == "Sa"
      weekend = $("<td>#{dayOfWeek}</td>").appendTo(tableRow)
      weekend.addClass("weekend")
    else
      tableRow.append "<td>#{dayOfWeek}</td>"

updateBody: (rows, table) ->
  #Set to 1 to enable previous and next month dates, 0 to disable
  PrevAndNext = 1

  tbody = table.find("tbody")
  tbody.empty()

  rows.splice 0, 2
  rows.pop()

  today = rows.pop().split(/\s+/)
  month = today[0]
  date = today[1]
  year = today[2]

  lengths = [31, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30]
  if year%4 == 0
    lengths[2] = 29

  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]
        if @otherMonths == true
          k = 6 - j
          cell = $("<td>#{lengths[month-1]-k}</td>").appendTo(tableRow)
          cell.addClass("grey")
        else
          cell = $("<td></td>").appendTo(tableRow)

    for day in days
      day = day.replace(/\D/g, '')
      cell = $("<td>#{day}</td>").appendTo(tableRow)
      cell.addClass("today") if day == date

    if i != 0 and 0 < days.length < 7 and @otherMonths == true
      for j in [1..7-days.length]
        cell = $("<td>#{j}</td>").appendTo(tableRow)
        cell.addClass("grey")

update: (output, domEl) ->
  rows = output.split("\n")
  table = $(domEl).find("table")

  @updateHeader rows, table
  @updateBody rows, table

个人作品

日历
个人日程
自己写的快速生成代码的小工具