Ajax Loader
×
HTML
<div class="wrapper">
1
<div class="wrapper">
2
  <h1>Events for this Month.</h1>
3
  <div id="calendar"></div>
4
  <div id="calendar_data">
5
    <h3>No Events</h3>
6
    <dl>
7
      <dt><dfn>Title:</dfn></dt><dd>No Events for this Day</dd>
8
      <dt><dfn>Hour:</dfn></dt><dd>No provide</dd>
9
      <dt><dfn>Venue:</dfn></dt><dd>No provide</dd>
10
      <dt><dfn>Location:</dfn></dt><dd>No provide</dd>
11
      <dt><dfn>Description:</dfn></dt><dd>No provide</dd>
12
      <dt><dfn>More Info:</dfn></dt><dd><a href="#" title="More info">Here</a><dt></dd>
13
    </dl>
14
  </div>
15
  <div class="clearfix"></div>
16
  <div id="json">
17
    <pre><code>{
18
  "9/12/2014": {
19
      "type":"Conference",
20
      "title": "International Conference",
21
      "venue":"Hyatt Regency Hotel",
22
      "location": "Calgary Alberta , Canada",
23
      "time": "10:00 AM",
24
      "desc": "Lorem ipsum dolor sit amet...",
25
      "more": "http://www.example.com"
26
  }
27
}</code></pre>
28
  </div>
29
</div>
 
CSS
*,
1
*,
2
*:after,
3
*:before {
4
  box-sizing: border-box;
5
}
6
.clearfix:after {
7
  visibility: hidden;
8
  display: block;
9
  font-size: 0;
10
  content: " ";
11
  clear: both;
12
  height: 0;
13
}
14
.clearfix { display: inline-table; }
15
 
16
* html .clearfix { height: 1%; }
17
.clearfix { display: block; }
18
 
19
 
20
body {
21
  margin: 0;
22
  padding: 0;
23
  height: 100%;
24
  position: relative;
25
}
26
/* for demo */
27
.wrapper {
28
  display:block;
29
  width: 600px;
30
  margin: 10px auto;
31
  background: #FCFCFC;
32
  color: #C5C2C2;
33
}
34
div#calendar {
35
  margin: 0;
36
  padding: 0;
37
  display: block;
38
  width: 50%;
39
  float: left;
40
  height: 300px;
41
  background: #F3F3F3;
42
}
43
table {
44
  width: 100%;
45
  font-family: sans-serif;
46
  border-collapse: separate;
47
  border-spacing: 0;
48
  border: 1px solid #DADADA;
49
  background: #ECECEC;
50
  height: 300px;
51
}
52
thead {} tr.head_cal {
53
  background: #FFAFAF;
54
  color: #FF8D8D;
55
  font-size: 20px;
56
  line-height: 60px;
57
  text-transform: uppercase;
58
}
59
tr.subhead_cal {
60
  background: #FF8585;
61
  color: #FFF;
62
  font-size: 18px;
63
  line-height: 28px;
64
}
65
tr.week_cal {
66
  background: #FFF;
67
  color: #D5D5D5;
68
  font-size: 15px;
69
  line-height: 27px;
70
}
71
td.white_cal {
72
  background: #ECECEC!important;
73
}
74
tbody.days_cal tr td a {
75
  padding: 5px 7px;
76
  text-decoration: none;
77
  color: #B9B9B9;
78
  line-height: 30px;
79
}
80
tbody.days_cal tr td {
81
  padding: 0;
82
  margin: 0;
83
  background: #FAFAFA;
84
  border: 1px solid #EBEAEA;
85
  text-align: center;
86
}
87
.event {
88
  border-radius: 100%;
89
  border-bottom: 1px solid #3498DB;
90
  transition: all 0.3s ease;
91
}
92
.today_cal.event {
93
  border-radius: 100%;
94
  border-bottom: 1px solid #EE7171;
95
  transition: all 0.3s ease;
96
}
97
.today_cal.event:hover,
98
.event:hover{
99
  border-color: #E26D2B;
100
  color: #E26D2B;
101
  transition: all 0.3s ease;
102
}
103
.week_event {
104
  color: #EE7171;
105
}
106
#calendar_data {
107
  margin: 0;
108
  padding: 0;
109
  display: block;
110
  width: 50%;
111
  float: left;
112
  height: 300px;
113
  background: #fff;
114
  border: 1px solid #E6E6E6;
115
  color: #C5C2C2;
116
  font-size: 13px;
117
  font-family: sans-serif;
118
  font-weight: 700;
119
}
120
#calendar_data h3 {
121
  text-align: center;
122
  font-size: 20px;
123
  padding: 5px 10px;
124
  margin: 0;
125
  color: #FF7676;
126
  border-bottom: 1px solid #EEEBEB;
127
  text-transform: capitalize;
128
}
129
#calendar_data  dl {
130
  padding: 0.5em;
131
  margin-left: -1em;
132
}
133
#calendar_data  dt {
134
  float: left;
135
  clear: left;
136
  width: 100px;
137
  text-align: right;
138
  font-weight: bold;
139
  color: #8F8F8F;
140
}
141
#calendar_data  dd {
142
  margin: 0 0 0 110px;
143
  padding: 0 0 0.5em 0;
144
}
145
#calendar_data a {
146
  color: #FF8585;
147
  text-decoration: underline;
148
}
149
#json pre {
150
  display: block;
151
  clear: left;
152
  margin-top: 21px;
153
  word-wrap: break-word;
154
  word-break: break-all;
155
  overflow: auto;
156
  height: 220px;
157
  background: #E46868;
158
  color: #FFF;
159
  border: 1px solid #E47B7B;
160
}
 
JavaScript
// Start
1
// Start
2
_('#calendar').innerHTML = calendar();
3
 
4
// short queySelector
5
function _(s) {
6
  return document.querySelector(s);
7
}
8
 
9
 
10
// show info
11
function showInfo(event) {
12
  // link 
13
  var url = 'https://dl.dropboxusercontent.com/u/23834858/api/calendar.json';
14
  // get json
15
  getjson(url, function(obj) {
16
    for (var key in obj) {
17
      // if has envent add class
18
      if(_('[data-id="' + key + '"]')){
19
        _('[data-id="' + key + '"]').classList.add('event');        
20
      }
21
      if (event === key) {
22
        // template info
23
        var data = '<h3>' + obj[key].type + '</h3>' +
24
            '<dl>' +
25
            '<dt><dfn>Title:</dfn></dt><dd>' + obj[key].title + '</dd>' +
26
            '<dt><dfn>Hour:</dfn></dt><dd>' + obj[key].time + '</dd>' +
27
            '<dt><dfn>Venue:</dfn></dt><dd>' + obj[key].venue + '</dd>' +
28
            '<dt><dfn>Location:</dfn></dt><dd>' + obj[key].location + '</dd>' +
29
            '<dt><dfn>Description:</dfn></dt><dd>' + obj[key].desc + '</dd>' +
30
            '<dt><dfn>More Info:</dfn></dt><dd><a href="' + obj[key].more +
31
            '" title="More info">Here</a><dt></dd>' +
32
            '</dl>';
33
        return _('#calendar_data').innerHTML = data;
34
      }
35
    }
36
  });
37
  return false;
38
}
39
 
40
// simple calendar
41
function calendar() {
42
  // show info on init
43
  showInfo();
44
  
45
  // vars
46
  var day_of_week = new Array(
47
    'Sun', 'Mon', 'Tue',
48
    'Wed', 'Thu', 'Fri', 'Sat'),
49
      month_of_year = new Array(
50
        'January', 'February', 'March',
51
        'April', 'May', 'June', 'July',
52
        'August', 'September', 'October',
53
        'November', 'December'),
54
      
55
      Calendar = new Date(),
56
      year = Calendar.getYear(),
57
      month = Calendar.getMonth(),
58
      today = Calendar.getDate(),
59
      weekday = Calendar.getDay(),
60
      html = '';
61
  
62
  // start in 1 and this month
63
  Calendar.setDate(1);
64
  Calendar.setMonth(month);
65
  
66
  // template calendar
67
  html = '<table>';
68
  // head
69
  html += '<thead>';
70
  html += '<tr class="head_cal"><th colspan="7">' + month_of_year[month] + '</th></tr>';
71
  html += '<tr class="subhead_cal"><th colspan="7">' + Calendar.getFullYear() + '</th></tr>';
72
  html += '<tr class="week_cal">';
73
  for (index = 0; index < 7; index++) {
74
    if (weekday == index) {
75
      html += '<th class="week_event">' + day_of_week[index] + '</th>';
76
    } else {
77
      html += '<th>' + day_of_week[index] + '</th>';
78
    }
79
  }
80
  html += '</tr>';
81
  html += '</thead>';
82
  
83
  // body
84
  html += '<tbody class="days_cal">';
85
  html += '</tr>';
86
  // white zone
87
  for (index = 0; index < Calendar.getDay(); index++) {
88
    html += '<td class="white_cal"> </td>';
89
  }
90
  
91
  for (index = 0; index < 31; index++) {
92
    if (Calendar.getDate() > index) {
93
      
94
      week_day = Calendar.getDay();
95
      
96
      if (week_day === 0) {
97
        html += '</tr>';
98
      }
99
      if (week_day !== 7) {
100
        // this day
101
        var day = Calendar.getDate();
102
        var info = (Calendar.getMonth() + 1) + '/' + day + '/' + Calendar.getFullYear();
103
        
104
        if (today === Calendar.getDate()) {
105
          html += '<td><a class="today_cal" href="#" data-id="' + info + '" onclick="showInfo(\'' + info + '\')">' +
106
            day + '</a></td>';
107
          
108
          showInfo(info);
109
          
110
        } else {
111
          html += '<td><a href="#" data-id="' + info + '" onclick="showInfo(\'' + info + '\')">' +
112
            day + '</a></td>';
113
        }
114
        
115
      }
116
      if (week_day == 7) {
117
        html += '</tr>';
118
      }
119
    }
120
    Calendar.setDate(Calendar.getDate() + 1);
121
  } // end for loop
122
  return html;
123
}
124
 
125
 
126
//   Get Json data  
127
function getjson(url, callback) {
128
  var self = this,
129
      ajax = new XMLHttpRequest();
130
  ajax.open('GET', url, true);
131
  ajax.onreadystatechange = function() {
132
    if (ajax.readyState == 4) {
133
      if (ajax.status == 200) {
134
        var data = JSON.parse(ajax.responseText);
135
        return callback(data);
136
      } else {
137
        console.log(ajax.status);
138
      }
139
    }
140
  };
141
  ajax.send();
142
}
 

Untitled

CSSDeck G+