Sharing calendar snippet - need help finishing it

i recently found https://github.com/ahmontero/bootstrap-calendar. It's a simple calendar that uses twitter-bootstrap template. I want to use it for rehearsal room reservations. So far I managed to implement bootstrap's modal view for group selection (ewample here:http://agenda.studiowan.fr/agenda).

Here's my sitemap: Capture d e cran 2012-12-20 a 08 58 43

My index:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{ site.name }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=0.9">
    <meta name="description" content="">
    <meta name="author" content="">

    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    {{ 'bootstrap.css' | stylesheet_tag }}
    {{ 'bootstrap.calendar.css' | stylesheet_tag }}
    <style>
      body {
        padding-top: 60px;
        padding-bottom: 30px;
      }
    </style>
    {{ 'responsive.css' | stylesheet_tag }}

    <link rel="shortcut icon" href="../images/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../images/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../images/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../images/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="../images/ico/apple-touch-icon-57-precomposed.png">
    {{ 'jquery.js' | javascript_tag }}
    {% inline_editor %}
  </head>
  <body>
      {% include 'navbar' %}
       <div class="hero-unit">        
       {% block 'main' %}
        {% editable_long_text "Hello", hint: "L'accroche du site", priority: 2 %}
          <h1>Hello, world!</h1>
          <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
        {% endeditable_long_text %}
        {% include 'news' %}    
       {% endblock %}
       {% include 'footer' %}        
      </div>
    {{ 'bootstrap.js' | javascript_tag }}
    {{ 'bootstrap.calendar.js' | javascript_tag }}
    </body>

My calendar page:

{% extends 'parent' %}
{% block 'main' %}
  <div class="row">
    <div class="span4" id="calendar">
      <script>
        $(document).ready(function(){
          var evnts = function(){
          return {
                  "event":
                      [
                           {"date":"01/01/2012","title":"1"}
                          ,{"date":"02/02/2012","title":"2"}
                          ,{"date":"03/03/2012","title":"34"}
                          ,{"date":"04/04/2012","title":"123"}
                          ,{"date":"05/05/2012","title":"223"}
                          ,{"date":"06/06/2012","title":"4"}
                          ,{"date":"07/07/2012","title":"5"}
                          ,{"date":"08/08/2012","title":"14"}
                          ,{"date":"09/09/2012","title":"10"}
                          ,{"date":"10/10/2012","title":"10"}
                          ,{"date":"11/11/2012","title":"10"}
                          ,{"date":"12/12/2012","title":"10"}
                      ]
                  }
      };

     $('#calendar').Calendar({ 'events': evnts, 'weekStart': 1 })
     .on('changeDay', function(event){ $('#myResa').modal() })
     .on('onEvent', function(event){ alert("Déjà pris!"); })
     .on('onNext', function(event){ })
     .on('onPrev', function(event){ })
     .on('onCurrent', function(event){ });
  });
      </script>
    </div>
  </div>
{% include 'modalresa' %}
{% endblock %}

My modalResa snippet:

<div id="myResa" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Réservations</h3>
  </div>
  <div class="modal-body">
    <select multiple="multiple">
        {% for groupe in contents.groupes %}
        <option>{{ groupe.nom }}</option>
        {% endfor %}
    </select>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Sauvegarder</button>
  </div>
</div>

My resa model: Capture d e cran 2012-12-20 a 09 04 04

As you can see, the dates are hardcoded in the calendar script. I'd like to replace this array with binds to my resa model. I don't know if I can do liquid logic inside javascipt. Any help welcome.

Bonus: This is my site's news snippet the home page actually). It uses bootstrap's carrousel feature and links to a news model.

Snippet:

<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="item active">
      {{ contents.news.first.photo | image_tag }}
        <div class="carousel-caption">
          <p>{{ contents.news.first.texte }}</p>
        </div>
    </div>
    {% for new in contents.news %}
    {% if new.next.photo %}
    <div class="item">
      {{ new.next.photo | image_tag }}
        <div class="carousel-caption">
          <p>{{ new.next.texte }}</p>
        </div>
    </div>
    {% endif %}
    {% endfor %}
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

Model: Capture d e cran 2012-12-20 a 09 10 31

locomotivecms / engine

Sharing calendar snippet - need help finishing it #573