Events Grid

by Oski Krawczyk

HTML

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
    FB.init({
    appId  : '223542357685558',
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml  : true, // parse XFBML
    channelURL : 'http://WWW.MYDOMAIN.COM/channel.html', // channel.html file
    oauth  : true // enable OAuth 2.0
    });
</script>

<ul id="events">
</ul>
<ul id="nav">
    <li><a href="#previous">Previous month</a></li>
    <li><a href="#next">Next month</a></li>
</ul>

JavaScript

var eventsCont = document.id('events');
var nav = document.id('nav');
var currentMonth = 'Jan, 1 2011';
var monthNames = ['Jan', 'Feb', 'Mar'];

var daysInMonth = function(m, y) {
    return 32 - new Date(y, m, 32).getDate();
};
                  
var toDate = function(stamp){
    return (new Date(stamp * 1000).format('%b %d, %Y')); 
};

var toStamp = function(date){
    return Date.parse(date) / 1000; 
};

console.log(toDate(1296514800), toStamp('Feb 01, 2011'));

var fetch = function(stamps) {
    FB.api('/me/events?limit=10000&since={since}&until={until}'.substitute(stamps), function(response) {
        eventsCont.empty();
        response.data.each(function(event) {
            Elements.from('<li><strong>{name}</strong> ({location})</li>'.substitute(event)).inject(eventsCont);
        });
    });
};

FB.login(function(response) {
    if (response.authResponse) {
        fetch({
            since: toStamp('Jan 01, 2011'),
            until: toStamp('Feb 01, 2011')
        });
        nav.addEvents({
            'click:relay(a)': function(event, el) {
                event.stop();
                if (el.get('href').split('#').getLast() === 'previous') {
                    console.log('prev');
                } else {
                    console.log('next');
                }
            }
        });
    } else {
        console.log('User cancelled login or did not fully authorize.');
    }
}, {
    scope: 'email,create_event,user_events'
});