Skip to content

Instantly share code, notes, and snippets.

@Baael

Baael/gist:182824

Created September 8, 2009 10:00
Show Gist options
  • Save Baael/182824 to your computer and use it in GitHub Desktop.
Save Baael/182824 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.rhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><%= yield :title %></title>
<script type="text/javascript" src="/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#calendar td').each(function(i,val){
this.nr=i;
})
var stopdragging=function(){
$('#calendar td').unbind('mouseover');
$('#calendar td').unbind('click',stopdragging);
$('#calendar td').bind('click',startdragging);
$('#calendar td.selected:first').addClass('rounded-left');
$('#calendar td.selected:last').addClass('rounded-right');
$('#calendar-output').val("");
$('#calendar td.selected').each(function(i,value){
$('#calendar-output').val(value.id+';'+$('#calendar-output').val());
})
};
var startdragging=function(){
$("#calendar td").removeClass('selected')
var started=this.nr;
$(this).addClass('selected');
$(this).addClass('rounded-left');
$(this).addClass('rounded-right');
$('#calendar td').unbind('click',startdragging);
$('#calendar td').bind('click',stopdragging);
$('#calendar td').bind('mouseover',function(){
$("#calendar td").removeClass('selected')
$('#calendar td').removeClass('rounded-left');
$('#calendar td').removeClass('rounded-right');
if (this.nr<started) {
$("#calendar td").slice(this.nr,started+1).addClass('selected');
} else {
$("#calendar td").slice(started,this.nr+1).addClass('selected');
}
$('#calendar td.selected:first').addClass('rounded-left');
$('#calendar td.selected:last').addClass('rounded-right');
})
}
$('#calendar td').bind('click',startdragging)
});
//]]>
</script>
<style type="text/css" media="screen">
body{
font-family:Arial;
padding:0px;
margin:0px;
}
li.odd span{
background:#C6C6C6;
}
li.odd ul li span{
background:none;
}
.red{
}
</style>
</head>
<body>
<% base_day = Date.civil(2009, 8, 1) %>
<% days=[
'Nd',
'Pn',
'Wt',
'Sr',
'Cz',
'Pt',
'So',
] %>
<style>
#calendar{
font-size:10px;
border-spacing:0px;
}
#calendar td, #calendar th{
margin-top:6px;
}
#calendar th{
width:30px;
padding:5px;
text-align:right;
color:#6D6D6D;
font-size:9px;
font-weight: 600;
font-family: Arial;
text-shadow: #BABABA 0px 0px 1px;
border-spacing:0px;
}
#calendar td{
width:30px;
padding:5px 0px;
font-weight: 600;
cursor:pointer;
text-align:center;
border-spacing:0px;
}
#calendar td.other_month{
padding:5px;
text-align:right;
text-shadow: none;
color:#E2E2E2;
border-spacing:0px;
}
#calendar td.other_month div{
padding:1px 5px;
margin:auto;
text-shadow: none;
}
#calendar td div{
padding:1px 5px;
margin:auto;
text-shadow: #808080 0px 0px 2px;
}
#calendar td.selected div{
background:#62BBE0;
text-shadow: none;
color:#fff;
}
#calendar td.week-rounded-left div, #calendar td.rounded-left div{
-moz-border-radius-topleft:10%; /*Top Left Corner Rounded*/
-moz-border-radius-bottomleft:10%; /*Bottom Left Corner Rounded*/
}
#calendar td.week-rounded-right div, #calendar td.rounded-right div{
-moz-border-radius-topright:10%; /*Top Right Corner Rounded*/
-moz-border-radius-bottomright:10%; /*Bottom right Corner Rounded*/
}
</style>
<table id="calendar">
<% ranga=(0..0) %>
<thead><%= (base_day.beginning_of_week..base_day.end_of_week).map{|day|
"<th>#{days[day.wday]}</th>"
} %></thead>
<%=
(base_day.beginning_of_week..base_day.end_of_month.end_of_week).collect{|day|
"<td id='#{day.to_s}' class='#{(ranga.include?(day.day)&&day.month==8)? "selected":""} #{(day.month==8)? "current_month":"other_month"} #{((day.wday==1)? 'week-rounded-left':'') } #{((day.wday==0)? 'week-rounded-right':'') }'><div>#{day.day}</div></td>
#{(day.cwday==7)? '</tr><tr>':''}
"
}.to_s
%></table>
<textarea name="" id="calendar-output" rows="30" cols="80"></textarea>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment