Skip to content

Instantly share code, notes, and snippets.

@lobodin

lobodin/Calendar.css

Created November 5, 2010 15:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lobodin/664327 to your computer and use it in GitHub Desktop.
Save lobodin/664327 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Calendar.css
.calendar {
position: fixed;
width: 210px;
height: 200px;
background: #DAD9DD;
font-family: Helvetica;
color: #3F4E5E;
font-weight: bold;
display: block;
}
.calendar .header {
position: absolute;
width: 100%;
height: 38px;
text-align: center;
background-image: -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#949494));
}
.header .month-year {
position: relative;
top: 4px;
}
a {
text-decoration: none;
color: #3F4E5E;
}
.header .left-arrow {
top: 3px;
left: 8px;
position: absolute;
text-align: left;
font-size: 17px;
}
.header .right-arrow {
top: 3px;
right: 8px;
position: absolute;
text-align: right;
font-size: 17px;
}
.header .week-days {
position: absolute;
font-size: 10px;
bottom: -2px;
text-align: left;
width: 100%;
}
.week-days table {
width: 100%;
text-align: center;
}
.calendar .days-table-wrapper {
position: absolute;
top: 38px;
width: 100%;
}
.days-table-wrapper table {
width: 100%;
height: 100%;
}
.days-table-wrapper table {
text-align: center;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;
}
.days-table-wrapper td {
padding: 4px;
text-align: center;
border: 1px #F2F2F3 solid;
}
.calendar td {
width: 30px;
}
Raw
Calendar.js
months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
daysInMonths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
Calendar = function(configuration) {
this.relativeElement = $("#"+configuration.relativeElementId);
this.date = new Date();
this.setLayout();
this.setEvents(this);
this.updateDaysTable(this.date);
}
Calendar.prototype.setLayout = function() {
this.calendarDiv = $("<div>").addClass("calendar");
$("body").append(this.calendarDiv);
this.headerDiv = $("<div>").addClass("header");
$(this.calendarDiv).append(this.headerDiv);
$(this.calendarDiv).css( { "top": $(this.relativeElement).position().top + 22 + "px" } );
this.monthYearSpan = $("<span>").addClass("month-year");
$(this.headerDiv).append(this.monthYearSpan);
this.leftArrow = $("<a>").addClass("left-arrow").html("&larr;").attr("href", "#");
$(this.headerDiv).append(this.leftArrow);
this.rightArrow = $("<a>").addClass("right-arrow").html("&rarr;").attr("href", "#");
$(this.headerDiv).append(this.rightArrow);
var weekDaysDiv = $("<div>").addClass("week-days");
$(this.headerDiv).append(weekDaysDiv);
var weekDaysTable = $("<table>").append("<tr>");
var row = $("tr", weekDaysTable);
for (var i = 0; i < 7; i++) {
var cell = $(row).append("<td>").children().last().append(weekdays[i].substr(0, 3));
}
$(weekDaysDiv).append(weekDaysTable);
this.daysTableWrapperDiv = $("<div>").addClass("days-table-wrapper");
$(this.calendarDiv).append(this.daysTableWrapperDiv);
}
Calendar.prototype.updateMonthYear = function(month, year) {
$(this.monthYearSpan).html(month + " " + year);
}
Calendar.prototype.updateDaysTable = function(date) {
if (this.daysTable != null) {
$(this.daysTable).remove();
}
var calendarObject = this;
date.setDate(1);
var first = date.getDay();
var monthNumber = date.getMonth();
var year = date.getFullYear();
var monthLength = year % 4 == 0 && year % 100 != 0 && monthNumber == 1 || year % 400 == 0 ? 29 : daysInMonths[monthNumber];
var d = 1;
this.daysTable = $("<table>");
for (var i = 0; i < Math.ceil((first + monthLength) / 7); i++) {
var row = $(this.daysTable).append("<tr>").children().last().children().last();
for (var j = 0; j < 7; j++) {
var cell = $(row).append("<td>").children().last().addClass("day").attr("value", d);
if (i * 7 + j >= first && d <= monthLength) {
$(cell).click(function() {
date.setDate($(this).attr("value"));
$(calendarObject.relativeElement).attr("value", date.toDateString());
calendarObject.showOrHide();
});
$(cell).append(d++);
}
}
}
$(this.daysTableWrapperDiv).append(this.daysTable);
$(this.calendarDiv).height($(this.headerDiv).height() + $(this.daysTable).height());
this.updateMonthYear(months[monthNumber], year);
}
Calendar.prototype.setEvents = function(calendarObject) {
var d = calendarObject.date;
$(this.leftArrow).click(function() {
d.setMonth(d.getMonth() - 1);
calendarObject.updateDaysTable(d);
});
this.rightArrow.click(function() {
d.setMonth(d.getMonth() + 1);
calendarObject.updateDaysTable(d);
});
}
Calendar.prototype.showOrHide = function() {
$(this.calendarDiv).toggle();
}
Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Calendar Picker</title>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="Calendar.js"></script>
<link href="Calendar.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
cal = null;
function showCalendar(id) {
if (cal != null) {
cal.showOrHide();
return;
}
cal = new Calendar({relativeElementId: id});
}
</script>
</head>
<body>
<input id="calText" type="text" name="cal" onclick="showCalendar(this.id)"/>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment