simple-jscalendar
Version:
Just a simple javascript calendar
137 lines (127 loc) • 3.24 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>jsCalendar Demo</title>
<meta name="description" content="jsCalendar demo - year calendar">
<meta name="author" content="GramThanos">
<!-- jsCalendar -->
<link rel="stylesheet" type="text/css" href="../source/jsCalendar.css">
<link rel="stylesheet" type="text/css" href="../themes/jsCalendar.darkseries.css">
<script type="text/javascript" src="../source/jsCalendar.js"></script>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
<!-- Demo Style -->
<style>
html, body {
font-family: Tahoma, Geneva, sans-serif;
background-color: #000000;
color: #cccccc;
}
.description {
padding-bottom: 40px;
text-align: left;
width: 860px;
margin: 0 auto;
}
#year-calendar {
width: 905px;
text-align: center;
margin: 0 auto;
box-shadow: none;
}
#year-calendar .year-title {
padding: 10px 32px;
font-size: 36px;
text-align: left;
}
#year-calendar .jsCalendar {
display : inline-block;
}
#year-calendar .jsCalendar table {
box-shadow : none;
}
#year-calendar .jsCalendar-previous,
#year-calendar .jsCalendar-next {
opacity : 0.8;
}
.version {
font-size: 10px;
opacity: 0.6;
text-align: right;
width: 860px;
margin: 0 auto;
padding-top: 20px;
}
@media print {
html, body {
width: 100%;
height: 100%;
}
body {
zoom: 70%;
color: #000000;
background-color: #ffffff;
}
.description {
display: none;
}
#year-calendar .jsCalendar.black-theme table {
color: #000000;
}
#year-calendar .jsCalendar-previous,
#year-calendar .jsCalendar-next {
opacity : 0.4;
}
@page {
size: A4 Portrait;
max-height: 100%;
max-width: 100%;
}
}
</style>
</head>
<body>
<div class="description">
<div style="font-size: 1.4em;">Year calendar</div>
<div>Demo full year calendar using jsCalendar</div>
<div style="font-size: 0.75em;">Try to print it [Ctrl+P]</div>
</div>
<!-- Full Calendar wrapper -->
<div id="year-calendar"></div>
<!-- Create the calendar -->
<script type="text/javascript">
// Get element
var wrapper = document.getElementById("year-calendar");
// Variables
var date = new Date();
var year = date.getYear() + 1900;
var div;
// Create title
div = document.createElement("div");
div.className = "year-title";
div.textContent = year;
wrapper.appendChild(div);
// Create calendars
var calendars = [];
for (var i = 0; i < 12; i++) {
// Create element
div = document.createElement("div");
div.className = "black-theme";
wrapper.appendChild(div);
// Create month calender (we set the date to 0)
calendars.push(
jsCalendar.new(div, 0, {
zeroFill : true,
navigator : false
})
);
calendars[i].goto("01-" + ((i + 1 < 10) ? "0" : "") + (i + 1) + "-" + year);
}
</script>
<div class="version">
jsCalendar <script type="text/javascript">document.writeln(jsCalendar.version);</script>
</div>
</body>
</html>