Skip to content

Instantly share code, notes, and snippets.

@alejandrolechuga

alejandrolechuga/index.html

Created March 10, 2013 07:29
Show Gist options
  • Save alejandrolechuga/5127508 to your computer and use it in GitHub Desktop.
Save alejandrolechuga/5127508 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Facebook Puzzle: One Day Calendar</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
#calendar {
overflow: hidden;
font-family: "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif;;
color: #686868;
font-size: 12px;
width: 700px;
}
#calendar .bold { font-weight: bold; }
#calendar .title { color: #4166A4; }
#calendar .thinletter {
font-size: 10px;
color : #A6A6A6;
}
#calendar .time-grid {
width: 79px;
float: left;
overflow: hidden;
}
#calendar .time-grid ul {
padding: 0;
margin: 0;
text-align: right;
margin-right: 10px;
list-style: none;
}
#calendar .time-grid li {
height: 30px;
overflow: hidden;
}
#calendar .time-grid li div.format { margin-top: 7px; }
#calendar .time-grid li div.format span{ margin-left: 4px;}
#calendar .events-grid {
margin-top: 15px;
width: 600px;
height: 720px;
padding: 0 10px 0 10px;
background-color: #ECECEC;
border-left: 1px solid #D6D6D6;
float: left;
overflow: hidden;
position: relative;
}
#calendar .event-item {
position: absolute;
overflow: hidden;
}
#calendar .event-item .event-content{
height:100%;
border: 1px solid #D6D6D6;
border-left: 3px solid #4166A4;
background-color: white;
padding: 10px 0 0 10px;
}
</style>
</head>
<body>
<div id="calendar">
<!-- Template TIME GRID -->
<script type="text/html" id="time_grid_tmpl">
<ul>
<% for ( var i = 0; i < hours.length; i++ ) { %>
<li>
<div class="format">
<% if (hours[i].minutes != "30") { %>
<span class="bold"><%=hours[i].hours%>:<%=hours[i].minutes%></span>
<span class="thinletter"><%=hours[i].period%></span>
<% } else { %>
<span class="thinletter"><%=hours[i].hours%>:<%=hours[i].minutes%></span>
<% } %>
</div>
</li>
<% } %>
</ul>
</script>
<!-- Template TIME GRID -->
<!-- Template start:EVENTS GRID -->
<script type="text/html" id="events_grid_tmpl">
<div id="<%=id%>" class="event-item">
<div class="event-content">
<div class="title bold">
Sample Title
</div>
<div class="location thinletter">
Sample Location
</div>
<div>
</div>
</script>
<!-- Template EVENTS GRID -->
<div id="time-grid" class="time-grid">
</div>
<div class="events-grid">
<div id="events-grid">
</div>
</div>
</div>
<script type="text/javascript" src="calendar.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment