index.html

<!DOCTYPE html>
<!-- Note: Under normal circumstances, assets would be concatenated and minified
     by a build step. LESS/SASS/Styl for CSS, RequireJS/Browserify/Webpack for JS.
     This is a purely static demo app, however, using traditional Javascript
     modules, namespaces, and limited browser globals. -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Day Calendar</title>
  <link rel="stylesheet" href="calendar/vendor/css/normalize.css">
  <link rel="stylesheet" href="calendar/css/global.css">
  <link rel="stylesheet" href="calendar/css/main.css">
  <link rel="stylesheet" href="calendar/css/day.css">
  <link rel="stylesheet" href="calendar/css/event.css">
  <link rel="stylesheet" href="calendar/css/ruler.css">
  <link rel="stylesheet" href="calendar/css/form.css">
  <link rel="stylesheet" href="calendar/css/alert.css">
</head>
<body>
  <!-- Target render region for widget; see index.js -->
  <div class="main-container">
    <div id="alert-region"></div>
    <main id="calendar-region" class="clearfix"></main>
  </div>

  <!-- Prefer templates to reside in view folder, e.g., views/entry/entry.view.tpl,
       except that requires an async text loader like require.js or a build step.
       Both are too heavy for this demo; hence, templates are inlined below.
       They are, however, compiled only once - at script load time. -->

  <!-- Day template -->
  <script id="day-view" type="text/html">
    <div class="calendar-container">
      <div class="ruler-container js-ruler"></div>
      <div class="events-container js-events"></div>
    </div><div class="form-container js-form"></div>
  </script>

  <!-- Entry template -->
  <script id="event-view" type="text/html">
    <div class="event-inner">
      <a class="event-remove js-remove" tabindex="0">×</a>
      <div class="event-title"><%- title %></div>
      <div class="event-location"><%- location %></div>
    </div>
  </script>

  <!-- Ruler template -->
  <script id="ruler-view" type="text/html">
    <% _.each(times, function (time) { %>
      <div class="time <% if (time.majorTick) { %>time-major<% } else { %>time-minor<% } %>"
           style="height: <%- timeHeight %>px; line-height: <%- timeHeight %>px">
        <span class="time-hour-min"><%- time.timeStr %></span>
        <span class="time-am-pm"><%- time.amPm %></span>
      </div>
    <% }); %>
  </script>

  <!-- Form template -->
  <script id="forms-view" type="text/html">
    <form class="form-ruler">
      <fieldset>
        <legend>Ruler Increment</legend>
        <label><input type="radio" name="ruler-increment" value="15">15 Minutes</label>
        <label><input type="radio" name="ruler-increment" value="30">30 Minutes</label>
        <label><input type="radio" name="ruler-increment" value="60">60 Minutes</label>
      </fieldset>
    </form>
    <form class="form-event js-form-event">
      <fieldset>
        <legend>New Event</legend>
        <label><input type="text" name="title">Title</label>
        <label><input type="text" name="location">Location</label>
        <label><input type="text" name="start-time" placeholder="Mins from 9:00am">Start Time</label>
        <label><input type="text" name="end-time" placeholder="Mins from 9:00am">End Time</label>
        <button name="add-event">Add Event</button>
      </fieldset>
    </form>
    <form class="form-clear js-form-clear">
      <button name="clear-events">Clear Events</button>
    </form>
  </script>

  <!-- Alert template -->
  <script id="alert-view" type="text/html">
    <a class="alert-remove js-remove" tabindex="0">×</a>
    <div class="alert-message"><%- message %></div>
  </script>

  <!-- While Backbone is sufficient for this small demo, were the app to grow any
       larger an additional framework like Backbone.Marionette would be beneficial.
       In fact, this widget's view classes have a good bit of boilerplate that could
       be avoided with the addition of Backbone.Marionette. I chose pure Backbone to
       demonstrate my grasp of the issues surrounding low level view management. -->

  <!-- Libraries -->
  <script src="calendar/vendor/js/jquery.js"></script>
  <script src="calendar/vendor/js/underscore.js"></script>
  <script src="calendar/vendor/js/backbone.js"></script>
  <script src="calendar/vendor/js/backbone.radio.js"></script>

  <!-- Custom classes -->
  <script src="calendar/lib/classes/backbone.widget.js"></script>
  <script src="calendar/lib/classes/backbone.presenter.js"></script>

  <!-- Widget -->
  <script src="calendar/calendar.js"></script>
  <script src="calendar/calendar.entities.js"></script>
  <script src="calendar/presenters/day.presenter.js"></script>
  <script src="calendar/presenters/error.presenter.js"></script>
  <script src="calendar/entities/alert.model.js"></script>
  <script src="calendar/entities/ruler.model.js"></script>
  <script src="calendar/entities/event.model.js"></script>
  <script src="calendar/entities/events.collection.js"></script>
  <script src="calendar/views/day.view.js"></script>
  <script src="calendar/views/ruler.view.js"></script>
  <script src="calendar/views/form.view.js"></script>
  <script src="calendar/views/events.view.js"></script>
  <script src="calendar/views/event.view.js"></script>
  <script src="calendar/views/alert.view.js"></script>
  <script src="calendar/lib/util/time.js"></script>
  <script src="calendar/lib/sort/sorter.js"></script>
  <script src="calendar/lib/sort/group.js"></script>
  <script src="calendar/lib/sort/groups.js"></script>

  <!-- Day Calendar demo driver -->
  <script src="index.js"></script>

  <!-- Show demo events on startup -->
  <script>
    var count = 0;
    var howMany = 7;
    var events = [];
    var start;
    var end;
    var title;
    var loc;
    var height;

    while (count++ < howMany) {
      height = (Math.random() * 0.25 + 0.07) * 720;
      start = parseInt(Math.random() * (720 - height));
      end = start + height;
      title = "Title " + count;
      loc = "Location " + count;
      events.push({ 
        start: start,
        end: end,
        title: title,
        location: loc
      });
    }

    layOutDay(events);
  </script>
</body>
</html>