<div class="wrapper">
<div class="wrapper">
<h1>Events for this Month.</h1>
<div id="calendar"></div>
<div id="calendar_data">
<h3>No Events</h3>
<dl>
<dt><dfn>Title:</dfn></dt><dd>No Events for this Day</dd>
<dt><dfn>Hour:</dfn></dt><dd>No provide</dd>
<dt><dfn>Venue:</dfn></dt><dd>No provide</dd>
<dt><dfn>Location:</dfn></dt><dd>No provide</dd>
<dt><dfn>Description:</dfn></dt><dd>No provide</dd>
<dt><dfn>More Info:</dfn></dt><dd><a href="#" title="More info">Here</a><dt></dd>
</dl>
</div>
<div class="clearfix"></div>
<div id="json">
<pre><code>{
"9/12/2014": {
"type":"Conference",
"title": "International Conference",
"venue":"Hyatt Regency Hotel",
"location": "Calgary Alberta , Canada",
"time": "10:00 AM",
"desc": "Lorem ipsum dolor sit amet...",
"more": "http://www.example.com"
}
}</code></pre>
</div>
</div>
*,
*,
*:after,
*:before {
box-sizing: border-box;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
body {
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
/* for demo */
.wrapper {
display:block;
width: 600px;
margin: 10px auto;
background: #FCFCFC;
color: #C5C2C2;
}
div#calendar {
margin: 0;
padding: 0;
display: block;
width: 50%;
float: left;
height: 300px;
background: #F3F3F3;
}
table {
width: 100%;
font-family: sans-serif;
border-collapse: separate;
border-spacing: 0;
border: 1px solid #DADADA;
background: #ECECEC;
height: 300px;
}
thead {} tr.head_cal {
background: #FFAFAF;
color: #FF8D8D;
font-size: 20px;
line-height: 60px;
text-transform: uppercase;
}
tr.subhead_cal {
background: #FF8585;
color: #FFF;
font-size: 18px;
line-height: 28px;
}
tr.week_cal {
background: #FFF;
color: #D5D5D5;
font-size: 15px;
line-height: 27px;
}
td.white_cal {
background: #ECECEC!important;
}
tbody.days_cal tr td a {
padding: 5px 7px;
text-decoration: none;
color: #B9B9B9;
line-height: 30px;
}
tbody.days_cal tr td {
padding: 0;
margin: 0;
background: #FAFAFA;
border: 1px solid #EBEAEA;
text-align: center;
}
.event {
border-radius: 100%;
border-bottom: 1px solid #3498DB;
transition: all 0.3s ease;
}
.today_cal.event {
border-radius: 100%;
border-bottom: 1px solid #EE7171;
transition: all 0.3s ease;
}
.today_cal.event:hover,
.event:hover{
border-color: #E26D2B;
color: #E26D2B;
transition: all 0.3s ease;
}
.week_event {
color: #EE7171;
}
#calendar_data {
margin: 0;
padding: 0;
display: block;
width: 50%;
float: left;
height: 300px;
background: #fff;
border: 1px solid #E6E6E6;
color: #C5C2C2;
font-size: 13px;
font-family: sans-serif;
font-weight: 700;
}
#calendar_data h3 {
text-align: center;
font-size: 20px;
padding: 5px 10px;
margin: 0;
color: #FF7676;
border-bottom: 1px solid #EEEBEB;
text-transform: capitalize;
}
#calendar_data dl {
padding: 0.5em;
margin-left: -1em;
}
#calendar_data dt {
float: left;
clear: left;
width: 100px;
text-align: right;
font-weight: bold;
color: #8F8F8F;
}
#calendar_data dd {
margin: 0 0 0 110px;
padding: 0 0 0.5em 0;
}
#calendar_data a {
color: #FF8585;
text-decoration: underline;
}
#json pre {
display: block;
clear: left;
margin-top: 21px;
word-wrap: break-word;
word-break: break-all;
overflow: auto;
height: 220px;
background: #E46868;
color: #FFF;
border: 1px solid #E47B7B;
}
// Start
// Start
_('#calendar').innerHTML = calendar();
// short queySelector
function _(s) {
return document.querySelector(s);
}
// show info
function showInfo(event) {
// link
var url = 'https://dl.dropboxusercontent.com/u/23834858/api/calendar.json';
// get json
getjson(url, function(obj) {
for (var key in obj) {
// if has envent add class
if(_('[data-id="' + key + '"]')){
_('[data-id="' + key + '"]').classList.add('event');
}
if (event === key) {
// template info
var data = '<h3>' + obj[key].type + '</h3>' +
'<dl>' +
'<dt><dfn>Title:</dfn></dt><dd>' + obj[key].title + '</dd>' +
'<dt><dfn>Hour:</dfn></dt><dd>' + obj[key].time + '</dd>' +
'<dt><dfn>Venue:</dfn></dt><dd>' + obj[key].venue + '</dd>' +
'<dt><dfn>Location:</dfn></dt><dd>' + obj[key].location + '</dd>' +
'<dt><dfn>Description:</dfn></dt><dd>' + obj[key].desc + '</dd>' +
'<dt><dfn>More Info:</dfn></dt><dd><a href="' + obj[key].more +
'" title="More info">Here</a><dt></dd>' +
'</dl>';
return _('#calendar_data').innerHTML = data;
}
}
});
return false;
}
// simple calendar
function calendar() {
// show info on init
showInfo();
// vars
var day_of_week = new Array(
'Sun', 'Mon', 'Tue',
'Wed', 'Thu', 'Fri', 'Sat'),
month_of_year = new Array(
'January', 'February', 'March',
'April', 'May', 'June', 'July',
'August', 'September', 'October',
'November', 'December'),
Calendar = new Date(),
year = Calendar.getYear(),
month = Calendar.getMonth(),
today = Calendar.getDate(),
weekday = Calendar.getDay(),
html = '';
// start in 1 and this month
Calendar.setDate(1);
Calendar.setMonth(month);
// template calendar
html = '<table>';
// head
html += '<thead>';
html += '<tr class="head_cal"><th colspan="7">' + month_of_year[month] + '</th></tr>';
html += '<tr class="subhead_cal"><th colspan="7">' + Calendar.getFullYear() + '</th></tr>';
html += '<tr class="week_cal">';
for (index = 0; index < 7; index++) {
if (weekday == index) {
html += '<th class="week_event">' + day_of_week[index] + '</th>';
} else {
html += '<th>' + day_of_week[index] + '</th>';
}
}
html += '</tr>';
html += '</thead>';
// body
html += '<tbody class="days_cal">';
html += '</tr>';
// white zone
for (index = 0; index < Calendar.getDay(); index++) {
html += '<td class="white_cal"> </td>';
}
for (index = 0; index < 31; index++) {
if (Calendar.getDate() > index) {
week_day = Calendar.getDay();
if (week_day === 0) {
html += '</tr>';
}
if (week_day !== 7) {
// this day
var day = Calendar.getDate();
var info = (Calendar.getMonth() + 1) + '/' + day + '/' + Calendar.getFullYear();
if (today === Calendar.getDate()) {
html += '<td><a class="today_cal" href="#" data-id="' + info + '" onclick="showInfo(\'' + info + '\')">' +
day + '</a></td>';
showInfo(info);
} else {
html += '<td><a href="#" data-id="' + info + '" onclick="showInfo(\'' + info + '\')">' +
day + '</a></td>';
}
}
if (week_day == 7) {
html += '</tr>';
}
}
Calendar.setDate(Calendar.getDate() + 1);
} // end for loop
return html;
}
// Get Json data
function getjson(url, callback) {
var self = this,
ajax = new XMLHttpRequest();
ajax.open('GET', url, true);
ajax.onreadystatechange = function() {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
var data = JSON.parse(ajax.responseText);
return callback(data);
} else {
console.log(ajax.status);
}
}
};
ajax.send();
}