Simple Calendar with json events

index.html

<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>

script.js

// 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 (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;
      }
    }
  });
}

// 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();
}

Simple Calendar with json events.markdown

Simple Calendar with json events

Simple Calendar Experiment.

A Pen by Moncho Varela on CodePen.

License.

style.css

*,
*: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;
}