Calendar from Trello

Calendar from Trello.markdown

Trello-based calendar

For Political Pride 2015. Reads a Trello board and formats for reading as a list. Fairly hacky due to the way I've handled day headings.

Needs a Markdown processor adding.

A Pen by Dr Kim Foale on CodePen.

License.

index.html

<div id="calendar"></div>

script.js

var $cards = $("<div>").text("Loading Calendar...").appendTo("#calendar");
var lists = [];

// For converting messy labels
String.prototype.parameterize = function() {
  return this.trim().replace(/[^a-zA-Z0-9-\s]/g, '').replace(/[^a-zA-Z0-9-]/g, '-').toLowerCase();
};

// Get the trello info, sorted by list
Trello.get("boards/b1bJiEFd/lists", {
  cards: "all"
}, function(lists) {
  $cards.empty();
  // For each list, iterate
  $.each(lists, function(ix, list) {
    $cards.append("<h2>" + list.name + "</h2>");
    // For each card in each list, iterate
    $.each(list.cards, function(ix, card) {
      var labels = "";
      var $listParent = "";
      
      // Check each card
      card.labels.forEach(function(label) {
        labels = (label["name"].parameterize()) + " " + labels;
      });
      // Is it a day?
      if(labels == "day ") {
        // If so, make a new list
        ($cards).append("<h3 class='day'>" + card.name + "</h3>");
        listParent = $("<ol>").appendTo($cards);
        // And append the title of the card as the day
      } else {
        // Make a hyperlink
        event = $("<a>")
          .attr({
            href: card.url,
            target: "trello"
          })
          .addClass("card")
          // Wrap it in a h5
          .html("<h5>" + card.name + "</h5>")
          // Wrap it in a list element
          .wrap("<li></li>")
          // Select the parent li we just created
          .parent()
          // Add a css class so we know what it is
          .addClass(labels);
        // Add the description
        $("<p>" + card.desc + "</p>").appendTo(event);
        // Add it to the list
        $(listParent).append(event);
      };
    });
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://api.trello.com/1/client.js?key=61a2fec4814b2ca6f05bd49f5bc13159"></script>

style.sass

#calendar
  // Segment titles
  h2
    font-size: 1.5em
    border-bottom: 1px dotted black
  // Day titles
  h3
    font-size: 1.5em
    text-transform: lowercase
  h3::first-letter
    text-transform: uppercase
  // Event titles
  h5
    font-size: 1.1em
    margin-bottom: 0
  ol
    margin: 0
    padding: 0
    li
      list-style-type: none