├── README.md
├── bower.json
├── demo
    ├── assets
    │   ├── css
    │   │   └── style.css
    │   └── js
    │   │   └── simplecalendar.js
    ├── basic.html
    └── personal.html
├── package.json
├── simplecalendar.js
└── style.css


/README.md:
--------------------------------------------------------------------------------
 1 | jQuery.Simple-Event-Calendar
 2 | ================
 3 | 
 4 | jQuery.Simple-Event-Calendar make it easier for you to create an calendar. Check out the demo!
 5 | 
 6 | 
 7 | [Thanks to jqueryscript.net](http://www.jqueryscript.net/time-clock/Creating-A-Pretty-Event-Calendar-with-jQuery.html)
 8 | 
 9 | [Check out demo!](http://philipehsing.github.io/simplecalendar/personal.html)
10 | 
11 | 
12 | ###Install
13 | ```html
14 | bower install simpleeventcalendar
15 | ```
16 | 
17 | ###Setup
18 | ```html
19 | <!-- You'll need jquery -->
20 | <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
21 | 
22 | <!-- and you'll need to include equalheight -->
23 | <script src="simplecalendar.js"></script>
24 | 
25 | <!-- and you'll need to include style.css -->
26 | <script src="style.css"></script>
27 | 
28 | <!-- and all you'll need to do is add some divs for event-->
29 | <div class="day-event" date-month="12" date-day="16" data-number="1">
30 | <a href="#" class="close fontawesome-remove"></a>
31 | <h2 class="title">Lorem ipsum 3</h2>
32 | <span class="date">2014-12-16</span>
33 | <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok.</p>
34 | <button class="read-more">Read more</button>
35 | </div>
36 | ```
37 | 
38 | ###Basic
39 | ![alt tag](http://oi59.tinypic.com/2vkivxs.jpg)
40 | ###Personal list
41 | ![alt tag](http://oi62.tinypic.com/dmbq86.jpg)
42 | 
43 | ###Updates
44 | * Personal list with print function
45 | * Auto add '.event' class to all days that has an event 
46 | * Uncheck calender '.day-event' checkbox when removing event from personal list
47 | * Sort personal list based on date
48 | * Problem when there was more then one event on same day data-number="1"
49 | 
50 | ###Todo
51 | * List days automatically based on month
52 | * Datepicker
53 | 
54 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "simplecalendar",
 3 |   "version": "0.0.1",
 4 |   "authors": [
 5 |     "Philip Ehsing <Philipehsing>"
 6 |   ],
 7 |   "description": "simplecalendar make it easier for you to create a clean flat calendar",
 8 |   "main": "simplecalendar.js",
 9 |   "keywords": [
10 |     "simple",
11 |     "calendar"
12 |   ],
13 |   "license": "MIT",
14 |   "homepage": "github.com/philipehsing"
15 | }
16 | 


--------------------------------------------------------------------------------
/demo/assets/css/style.css:
--------------------------------------------------------------------------------
  1 | *[class*="fontawesome-"]:before {
  2 |     font-family: 'FontAwesome', sans-serif;
  3 | }
  4 | 
  5 | body {
  6 |     background: #f9f9f9;
  7 |     color: #0e171c;
  8 |     font: 300 100%/1.5em 'Lato', sans-serif;
  9 |     margin: 0;
 10 | }
 11 | 
 12 | a {
 13 |     text-decoration: none;
 14 | }
 15 | 
 16 | h2 {
 17 |     font-size: 22px;
 18 |     line-height: 20px;
 19 |     margin: 4px 0;
 20 | }
 21 | 
 22 | h3 {
 23 |     font-size: 24px;
 24 |     line-height: 24px;
 25 |     margin: 5px 0;
 26 | }
 27 | 
 28 | table {
 29 |     border-spacing: 0;
 30 |     width: 100%;
 31 | }
 32 | 
 33 | .calendar-container {
 34 |     height: 538px;
 35 |     left: 50%;
 36 |     margin: -255px 0 0 -245px;
 37 |     position: absolute;
 38 |     top: 45%;
 39 |     width: 510px;
 40 | }
 41 | 
 42 | .calendar {
 43 |     text-align: center;
 44 | }
 45 | 
 46 | .calendar header {
 47 |     position: relative;
 48 | }
 49 | 
 50 | .calendar h2 {
 51 |     text-transform: uppercase;
 52 | }
 53 | 
 54 | .calendar thead {
 55 |     font-weight: 600;
 56 |     text-transform: uppercase;
 57 | }
 58 | 
 59 | .calendar tbody {
 60 |     color: #7c8a95;
 61 | }
 62 | 
 63 | .calendar tbody td:hover {
 64 |     border: 2px solid #c0392b;
 65 | }
 66 | 
 67 | .calendar tbody td.active {
 68 |     border: 2px solid #c0392b;
 69 | }
 70 | 
 71 | .calendar td {
 72 |     border: 2px solid transparent;
 73 |     border-radius: 50%;
 74 |     display: inline-block;
 75 |     height: 64px;
 76 |     line-height: 64px;
 77 |     text-align: center;
 78 |     width: 64px;
 79 | }
 80 | 
 81 | .current-day {
 82 |     background: #c0392b;
 83 |     color: #f9f9f9;
 84 | }
 85 | 
 86 | .event {
 87 |     cursor: pointer;
 88 |     position: relative;
 89 | }
 90 | 
 91 | .event:after {
 92 |     background: #c0392b;
 93 |     border-radius: 50%;
 94 |     bottom: 8px;
 95 |     display: block;
 96 |     content: '';
 97 |     height: 8px;
 98 |     left: 50%;
 99 |     margin: -4px 0 0 -4px;
100 |     position: absolute;
101 |     width: 8px;
102 | }
103 | 
104 | .event.current-day:after {
105 |     background: #f9f9f9;
106 | }
107 | 
108 | .btn-prev,
109 | .btn-next {
110 | 	border: 2px solid #cbd1d2;
111 | 	border-radius: 50%;
112 | 	color: #cbd1d2;
113 | 	height: 32px;
114 | 	font-size: 22px;
115 | 	line-height: 28px;
116 | 	margin: -16px;
117 | 	position: absolute;
118 | 	top: 50%;
119 | 	width: 32px;
120 | }
121 | 
122 | .btn-prev:hover,
123 | .btn-next:hover {
124 |     background: #cbd1d2;
125 |     color: #f9f9f9;
126 | }
127 | 
128 | .btn-prev {
129 |     left: 30px;
130 | }
131 | 
132 | .btn-next {
133 |     right: 35px;
134 | }
135 | 
136 | .list {
137 |     margin-top: 20px;
138 | }
139 | 
140 | .close {
141 |     color: #A4AAAB;
142 |     margin-top: -15px;
143 |     margin-right: 10px;
144 |     float: right;
145 | }
146 | 
147 | .day-event {
148 |     background-color: #F2F2F2 ;
149 |     width: 100%;
150 |     padding-top: 20px;
151 |     padding-bottom: 0px;
152 |     margin-bottom: 50px;
153 |     display:none;
154 | 
155 | }
156 | 
157 | .day-event p{
158 |     padding-left: 20px;
159 |     padding-right: 20px;
160 |     padding-bottom: 20px;
161 | }
162 | 
163 | .day-event span{
164 |     font-size: 12px;
165 | }
166 | 
167 | .day-event button {
168 |     position: relative;
169 |     vertical-align: top;
170 |     width: 100%;
171 |     height: 50px;
172 |     padding: 0;
173 |     font-size: 18px;
174 |     color: white;
175 |     text-align: center;
176 |     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
177 |     background: #c0392b;
178 |     border: 0;
179 |     border-bottom: 2px solid #b53224;
180 |     cursor: pointer;
181 |     -webkit-box-shadow: inset 0 -2px #b53224;
182 |     box-shadow: inset 0 -2px #b53224;
183 | }
184 | 
185 | .check-btn {
186 |     width: 100%;
187 | }
188 | input[type=checkbox] {display:none;}
189 | 
190 | span {
191 |     background-color:#373740;
192 |     -webkit-border-radius:4px;
193 |     -moz-border-radius:4px;
194 |     border-radius:4px;
195 |     font-weight:700;
196 |     color:#FFF;
197 |     font-size:.85em;
198 |     letter-spacing:2px;
199 |     text-decoration:none;
200 |     font-family:'PT Sans', sans-serif;
201 |     text-align:center;
202 |     width:100%;
203 |     height:50px;
204 |     line-height:50px;
205 |     cursor:pointer;
206 |     display:block;
207 |     margin: 0 auto;
208 |     -webkit-transition:background-color 150ms ease-in;
209 |     -moz-transition:background-color 150ms ease-in;
210 |     -ms-transition:background-color 150ms ease-in;
211 |     -o-transition:background-color 150ms ease-in;
212 |     transition:background-color 150ms ease-in;
213 | }
214 | 
215 | span:hover {
216 |     background-color:#c0392b;
217 | }
218 | 
219 | input[type=checkbox]:checked + span {
220 |     background-color:#9C2E23;
221 |     text-decoration:none;
222 |     -webkit-border-radius:4px;
223 |     -moz-border-radius:4px;
224 |     border-radius:4px;
225 |     background:#9C2E23 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX9JREFUeNpi+P//PwMNsS4QbwBiLnQ5WlqqAsRP/0PARiBmoYfFkkB8+z8qWALEjLS0mB+IL/3HDibSymJQXB7/jx/UgNSCvU4lwAbEG4DYkwi1WUxUspQZiOcRaSkIWOAKMk0Sg3jaf+IBOIVjMyQWiH8DsR+RljaTYOkBWJ5GNwRk2R+ooh9A7ETA0jwSLL0ATfEYqRpkyVc0xR+A2AyHpdFA/I9IS0F5WhRbAWIEtQQbeAXE6lhC5jeRlj4GYgVsRaYK1HBCmmWgmuyxhAwu8BpaXjNgs/gYkYbcAGIXPCGDDkCOM8eVPkCEFhE+JhX8BGJnfAkTxgC57BOVLAXlihBC2RA9Vf+k0FJQKk8nJv+jCwQi5WNyQAWxpR02wRQS8icy6CKlmMUlUUGipfOQK3lKLAbhdhIKfWZS6258kiAfzCZg6V4gZiOn0UBIAcgn63BYehK50Ke2xQxQH+3FUoqJUtJMIlYhLxAfxVJu09xiWENuMxCrUaNhCBBgAOAVfjALa5TLAAAAAElFTkSuQmCC) no-repeat 7% center;
226 |     background-size:15px 13px;
227 | }
228 | 
229 | input[type=checkbox]:checked:hover + span {
230 |     background-color:#9C2E23;
231 |     color:rgba(255,255,255,0.5);
232 |     text-decoration:none;
233 |     -webkit-border-radius:4px;
234 |     -moz-border-radius:4px;
235 |     border-radius:4px;
236 |     background:#9C2E23 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAS5JREFUeNq8110OgjAMAGBGvIY3VESjt9jPg95PT+LccBIZ7dYOWJPGB+g+Ymg3hLW2QeLkcu/y2pSFdvl0eQevehjI3uXbfkMh96TShFq/xhG6J4faAtxEtSBOQTm4QWpnOBWl4CZT69fuYpiCpnBDrB1xLhrjgoFO8F1oGcFslUv4bV32zFoxmOHJta0XMn65dC0UaiddA8UGiN4axeC1cUkdmWviEls/NwL1FqjPNtNvoimPdC3yRCUTiTXbt0R/oSnw2iiK10BBvBY6w2uiE3xJr8oFtcrvxy/fVcyeVdGx98yotcOxN/znHeMUIhdMOG8c4reagssF43VEoT5O4ZJwvNUUFJtcEE5BMXyGpnanf5yDxjiI+hSJj7YunEBvhbuTCh9tD+jiR4ABAJ0SrJgNr1UAAAAAAElFTkSuQmCC) no-repeat 7% center;
237 |     background-size:15px 15px;
238 | }
239 | 
240 | .print-btn {
241 |     padding: 1px 14px 5px 14px;
242 | }
243 | 
244 | /* Smartphones (portrait and landscape) ----------- */
245 | @media only screen
246 | and (min-device-width : 320px)
247 | and (max-device-width : 480px) {
248 | /* STYLES GO HERE */
249 | }
250 |  
251 | /* Smartphones (landscape) ----------- */
252 | @media only screen
253 | and (min-width : 321px) {
254 | /* STYLES GO HERE */
255 | }
256 |  
257 | /* Smartphones (portrait) ----------- */
258 | @media only screen
259 | and (max-width : 320px) {
260 | /* STYLES GO HERE */
261 | }
262 |  
263 | /* iPads (portrait and landscape) ----------- */
264 | @media only screen
265 | and (min-device-width : 768px)
266 | and (max-device-width : 1024px) {
267 | /* STYLES GO HERE */
268 | }
269 |  
270 | /* iPads (landscape) ----------- */
271 | @media only screen
272 | and (min-device-width : 768px)
273 | and (max-device-width : 1024px)
274 | and (orientation : landscape) {
275 | /* STYLES GO HERE */
276 | }
277 |  
278 | /* iPads (portrait) ----------- */
279 | @media only screen
280 | and (min-device-width : 768px)
281 | and (max-device-width : 1024px)
282 | and (orientation : portrait) {
283 | /* STYLES GO HERE */
284 | }
285 |  
286 | /* Desktops and laptops ----------- */
287 | @media only screen
288 | and (min-width : 1224px) {
289 | /* STYLES GO HERE */
290 | }
291 |  
292 | /* Large screens ----------- */
293 | @media only screen
294 | and (min-width : 1824px) {
295 | /* STYLES GO HERE */
296 | }
297 |  
298 | /* iPhone 5 (portrait & landscape)----------- */
299 | @media only screen
300 | and (min-device-width : 320px)
301 | and (max-device-width : 568px) {
302 | /* STYLES GO HERE */
303 | }
304 |  
305 | /* iPhone 5 (landscape)----------- */
306 | @media only screen
307 | and (min-device-width : 320px)
308 | and (max-device-width : 568px)
309 | and (orientation : landscape) {
310 | /* STYLES GO HERE */
311 | }
312 |  
313 | /* iPhone 5 (portrait)----------- */
314 | @media only screen
315 | and (min-device-width : 320px)
316 | and (max-device-width : 568px)
317 | and (orientation : portrait) {
318 | /* STYLES GO HERE */
319 | }


--------------------------------------------------------------------------------
/demo/assets/js/simplecalendar.js:
--------------------------------------------------------------------------------
  1 | var calendar = {
  2 | 
  3 |     init: function() {
  4 | 
  5 |         /**
  6 |          * Get current date
  7 |          */
  8 |         var d = new Date();
  9 |         var strDate = d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate();
 10 | 
 11 |         /**
 12 |          * Get current month and set as '.current-month' in title
 13 |          */
 14 |         var monthNumber = d.getMonth() + 1;
 15 | 
 16 |         function GetMonthName(monthNumber) {
 17 |             var months = ['Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni', 'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December'];
 18 |             return months[monthNumber - 1];
 19 |         }
 20 | 
 21 |         $('.month').text(GetMonthName(monthNumber));
 22 | 
 23 |         /**
 24 |          * Get current day and set as '.current-day'
 25 |          */
 26 |         $('tbody td:contains("' + d.getDate() + '")').addClass('current-day');
 27 | 
 28 |         /**
 29 |          * Add class '.active' on calendar date
 30 |          */
 31 |         $('tbody td').on('click', function(e) {
 32 |             if ($(this).hasClass('event')) {
 33 |                 $('tbody td').removeClass('active');
 34 |                 $(this).addClass('active');
 35 |             } else {
 36 |                 $('tbody td').removeClass('active');
 37 |             };
 38 |         });
 39 | 
 40 |         /**
 41 |          * Add '.event' class to all days that has an event
 42 |          */
 43 |         $('.day-event').each(function(i) {
 44 |             var eventMonth = $(this).attr('date-month');
 45 |             var eventDay = $(this).attr('date-day');
 46 |             $('tbody tr td[date-month="' + eventMonth + '"][date-day="' + eventDay + '"]').addClass('event');
 47 |         });
 48 | 
 49 |         /**
 50 |          * Get current day on click in calendar
 51 |          * and find day-event to display
 52 |          */
 53 |         $('tbody td').on('click', function(e) {
 54 |             $('.day-event').slideUp('fast');
 55 |             var monthEvent = $(this).attr('date-month');
 56 |             var dayEvent = $(this).text();
 57 |             $('.day-event[date-month="' + monthEvent + '"][date-day="' + dayEvent + '"]').slideDown('fast');
 58 |         });
 59 | 
 60 |         /**
 61 |          * Close day-event
 62 |          */
 63 |         $('.close').on('click', function(e) {
 64 |             $(this).parent().slideUp('fast');
 65 |         });
 66 | 
 67 |         /**
 68 |          * Save & Remove to/from personal list
 69 |          */
 70 |         $('.save').click(function() {
 71 |             if (this.checked) {
 72 |                 $(this).next().text('Remove from personal list');
 73 |                 var eventHtml = $(this).closest('.day-event').html();
 74 |                 var eventMonth = $(this).closest('.day-event').attr('date-month');
 75 |                 var eventDay = $(this).closest('.day-event').attr('date-day');
 76 |                 var eventNumber = $(this).closest('.day-event').attr('data-number');
 77 |                 $('.person-list').append('<div class="day" date-month="' + eventMonth + '" date-day="' + eventDay + '" data-number="' + eventNumber + '" style="display:none;">' + eventHtml + '</div>');
 78 |                 $('.day[date-month="' + eventMonth + '"][date-day="' + eventDay + '"]').slideDown('fast');
 79 |                 $('.day').find('.close').remove();
 80 |                 $('.day').find('.save').removeClass('save').addClass('remove');
 81 |                 $('.day').find('.remove').next().addClass('hidden-print');
 82 |                 remove();
 83 |                 sortlist();
 84 |             } else {
 85 |                 $(this).next().text('Save to personal list');
 86 |                 var eventMonth = $(this).closest('.day-event').attr('date-month');
 87 |                 var eventDay = $(this).closest('.day-event').attr('date-day');
 88 |                 var eventNumber = $(this).closest('.day-event').attr('data-number');
 89 |                 $('.day[date-month="' + eventMonth + '"][date-day="' + eventDay + '"][data-number="' + eventNumber + '"]').slideUp('slow');
 90 |                 setTimeout(function() {
 91 |                     $('.day[date-month="' + eventMonth + '"][date-day="' + eventDay + '"][data-number="' + eventNumber + '"]').remove();
 92 |                 }, 1500);
 93 |             }
 94 |         });
 95 | 
 96 |         function remove() {
 97 |             $('.remove').click(function() {
 98 |                 if (this.checked) {
 99 |                     $(this).next().text('Remove from personal list');
100 |                     var eventMonth = $(this).closest('.day').attr('date-month');
101 |                     var eventDay = $(this).closest('.day').attr('date-day');
102 |                     var eventNumber = $(this).closest('.day').attr('data-number');
103 |                     $('.day[date-month="' + eventMonth + '"][date-day="' + eventDay + '"][data-number="' + eventNumber + '"]').slideUp('slow');
104 |                     $('.day-event[date-month="' + eventMonth + '"][date-day="' + eventDay + '"][data-number="' + eventNumber + '"]').find('.save').attr('checked', false);
105 |                     $('.day-event[date-month="' + eventMonth + '"][date-day="' + eventDay + '"][data-number="' + eventNumber + '"]').find('span').text('Save to personal list');
106 |                     setTimeout(function() {
107 |                         $('.day[date-month="' + eventMonth + '"][date-day="' + eventDay + '"][data-number="' + eventNumber + '"]').remove();
108 |                     }, 1500);
109 |                 }
110 |             });
111 |         }
112 | 
113 |         /**
114 |          * Sort personal list
115 |          */
116 |         function sortlist() {
117 |             var personList = $('.person-list');
118 | 
119 |             personList.find('.day').sort(function(a, b) {
120 |                 return +a.getAttribute('date-day') - +b.getAttribute('date-day');
121 |             }).appendTo(personList);
122 |         }
123 | 
124 |         /**
125 |          * Print button
126 |          */
127 |         $('.print-btn').click(function() {
128 |             window.print();
129 |         });
130 | 
131 |     },
132 | };
133 | 
134 | $(document).ready(function() {
135 | 
136 |     calendar.init();
137 | 
138 | });


--------------------------------------------------------------------------------
/demo/basic.html:
--------------------------------------------------------------------------------
  1 | <html lang="sv">
  2 | 	<head>
  3 | 		<meta charset="UTF-8">
  4 | 		<title>SimpleCalendar</title>
  5 | 		<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:300,400,700">
  6 | 		<link rel="stylesheet" href="http://weloveiconfonts.com/api/?family=fontawesome">
  7 | 		<link rel="stylesheet" href="assets/css/style.css">
  8 | 		<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  9 | 		<script src="assets/js/simplecalendar.js" type="text/javascript"></script>
 10 | 	</head>
 11 | 	<body>
 12 | 		<div class="calendar-container">
 13 | 			<div class="calendar">
 14 | 				<header>
 15 | 					<h2 class="month"></h2>
 16 | 					<a class="btn-prev fontawesome-angle-left" href="#"></a>
 17 | 					<a class="btn-next fontawesome-angle-right" href="#"></a>
 18 | 				</header>
 19 | 				<table>
 20 | 					<thead>
 21 | 						<tr><td>Mån</td><td>Tis</td><td>Ons</td><td>Tors</td><td>Fre</td><td>Lör</td><td>Sön</td></tr>
 22 | 					</thead>
 23 | 					<tbody>
 24 | 						<tr>
 25 | 							<td date-month="12" date-day="1">1</td>
 26 | 							<td date-month="12" date-day="2">2</td>
 27 | 							<td date-month="12" date-day="3">3</td>
 28 | 							<td date-month="12" date-day="4">4</td>
 29 | 							<td date-month="12" date-day="5">5</td>
 30 | 							<td date-month="12" date-day="6">6</td>
 31 | 							<td date-month="12" date-day="7">7</td>
 32 | 						</tr>
 33 | 						<tr>
 34 | 							<td date-month="12" date-day="8">8</td>
 35 | 							<td date-month="12" date-day="9">9</td>
 36 | 							<td date-month="12" date-day="10">10</td>
 37 | 							<td date-month="12" date-day="11">11</td>
 38 | 							<td date-month="12" date-day="12">12</td>
 39 | 							<td date-month="12" date-day="13">13</td>
 40 | 							<td date-month="12" date-day="14">14</td>
 41 | 						</tr>
 42 | 						<tr>
 43 | 							<td date-month="12" date-day="15">15</td>
 44 | 							<td date-month="12" date-day="16">16</td>
 45 | 							<td date-month="12" date-day="17">17</td>
 46 | 							<td date-month="12" date-day="18">18</td>
 47 | 							<td date-month="12" date-day="19">19</td>
 48 | 							<td date-month="12" date-day="20">20</td>
 49 | 							<td date-month="12" date-day="21">21</td>
 50 | 						</tr>
 51 | 						<tr>
 52 | 							<td date-month="12" date-day="22">22</td>
 53 | 							<td date-month="12" date-day="23">23</td>
 54 | 							<td date-month="12" date-day="24">24</td>
 55 | 							<td date-month="12" date-day="25">25</td>
 56 | 							<td date-month="12" date-day="26">26</td>
 57 | 							<td date-month="12" date-day="27">27</td>
 58 | 							<td date-month="12" date-day="28">28</td>
 59 | 						</tr>
 60 | 						<tr>
 61 | 							<td date-month="12" date-day="29">29</td>
 62 | 							<td date-month="12" date-day="30">30</td>
 63 | 							<td date-month="12" date-day="31">31</td>
 64 | 						</tr>
 65 | 					</tbody>
 66 | 				</table>
 67 | 				<div class="list">
 68 | 					<div class="day-event" date-month="12" date-day="4">
 69 | 						<a href="#" class="close fontawesome-remove"></a>
 70 | 						<h2 class="title">Lorem ipsum 1</h2>
 71 | 						<p class="date">2014-12-16</p>
 72 | 						<p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok.</p>
 73 | 						<label>
 74 | 						    <span>Read more!</span>
 75 | 						</label>
 76 | 					</div>
 77 | 					<div class="day-event" date-month="12" date-day="13">
 78 | 						<a href="#" class="close fontawesome-remove"></a>
 79 | 						<h2 class="title">Lorem ipsum 2</h2>
 80 | 						<p class="date">2014-12-16</p>
 81 | 						<p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok.</p>
 82 | 						<label>
 83 | 						    <span>Read more!</span>
 84 | 						</label>
 85 | 					</div>
 86 | 					<div class="day-event" date-month="12" date-day="14">
 87 | 						<a href="#" class="close fontawesome-remove"></a>
 88 | 						<h2 class="title">Lorem ipsum 3</h2>
 89 | 						<p class="date">2014-12-16</p>
 90 | 						<p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok.</p>
 91 | 						<label>
 92 | 						    <span>Read more!</span>
 93 | 						</label>
 94 | 					</div>
 95 | 					<div class="day-event" date-month="12" date-day="16">
 96 | 						<a href="#" class="close fontawesome-remove"></a>
 97 | 						<h2 class="title">Lorem ipsum 4</h2>
 98 | 						<p class="date">2014-12-16</p>
 99 | 						<p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok.</p>
100 | 						<label>
101 | 						    <span>Read more!</span>
102 | 						</label>
103 | 					</div>
104 | 					<div class="day-event" date-month="12" date-day="24">
105 | 						<a href="#" class="close fontawesome-remove"></a>
106 | 						<h2 class="title">Lorem ipsum 5</h2>
107 | 						<p class="date">2014-12-16</p>
108 | 						<p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok.</p>
109 | 						<label>
110 | 						    <span>Read more!</span>
111 | 						</label>
112 | 					</div>
113 | 					<div class="day-event" date-month="12" date-day="31">
114 | 						<a href="#" class="close fontawesome-remove"></a>
115 | 						<h2 class="title">Lorem ipsum 6</h2>
116 | 						<p class="date">2014-12-31</p>
117 | 						<p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok.</p>
118 | 						<label>
119 | 						    <span>Read more!</span>
120 | 						</label>
121 | 					</div>
122 | 				</div>
123 | 			</div>
124 | 		</div>
125 | 	</body>
126 | </html>


--------------------------------------------------------------------------------
/demo/personal.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta charset="UTF-8">
  4 | 	<title>SimpleCalendar</title>
  5 | 	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:300,400,700">
  6 | 	<link rel="stylesheet" href="http://weloveiconfonts.com/api/?family=fontawesome">
  7 | 	<link rel="stylesheet" href="assets/css/style.css">
  8 | 	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  9 | 	<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
 10 | 	<script src="assets/js/simplecalendar.js" type="text/javascript"></script>
 11 | </head>
 12 | <body>
 13 | 	
 14 | 	<div class="container">
 15 | 		<div class="row">
 16 | 			<div class="col-lg-12">
 17 | 				<h1 class="page-header">jQuery.<small>Simple-Event-Calendar</small>
 18 | 				</h1>
 19 | 			</div>
 20 | 		</div>
 21 | 		<div class="row">
 22 | 			<div class="col-md-6">
 23 | 				<div class="calendar hidden-print">
 24 | 					<header>
 25 | 						<h2 class="month"></h2>
 26 | 						<a class="btn-prev fontawesome-angle-left" href="#"></a>
 27 | 						<a class="btn-next fontawesome-angle-right" href="#"></a>
 28 | 					</header>
 29 | 					<table>
 30 | 						<thead>
 31 | 							<tr><td>Mån</td><td>Tis</td><td>Ons</td><td>Tors</td><td>Fre</td><td>Lör</td><td>Sön</td></tr>
 32 | 						</thead>
 33 | 						<tbody>
 34 | 							<tr>
 35 | 								<td date-month="12" date-day="1">1</td>
 36 | 								<td date-month="12" date-day="2">2</td>
 37 | 								<td date-month="12" date-day="3">3</td>
 38 | 								<td date-month="12" date-day="4">4</td>
 39 | 								<td date-month="12" date-day="5">5</td>
 40 | 								<td date-month="12" date-day="6">6</td>
 41 | 								<td date-month="12" date-day="7">7</td>
 42 | 							</tr>
 43 | 							<tr>
 44 | 								<td date-month="12" date-day="8">8</td>
 45 | 								<td date-month="12" date-day="9">9</td>
 46 | 								<td date-month="12" date-day="10">10</td>
 47 | 								<td date-month="12" date-day="11">11</td>
 48 | 								<td date-month="12" date-day="12">12</td>
 49 | 								<td date-month="12" date-day="13">13</td>
 50 | 								<td date-month="12" date-day="14">14</td>
 51 | 							</tr>
 52 | 							<tr>
 53 | 								<td date-month="12" date-day="15">15</td>
 54 | 								<td date-month="12" date-day="16">16</td>
 55 | 								<td date-month="12" date-day="17">17</td>
 56 | 								<td date-month="12" date-day="18">18</td>
 57 | 								<td date-month="12" date-day="19">19</td>
 58 | 								<td date-month="12" date-day="20">20</td>
 59 | 								<td date-month="12" date-day="21">21</td>
 60 | 							</tr>
 61 | 							<tr>
 62 | 								<td date-month="12" date-day="22">22</td>
 63 | 								<td date-month="12" date-day="23">23</td>
 64 | 								<td date-month="12" date-day="24">24</td>
 65 | 								<td date-month="12" date-day="25">25</td>
 66 | 								<td date-month="12" date-day="26">26</td>
 67 | 								<td date-month="12" date-day="27">27</td>
 68 | 								<td date-month="12" date-day="28">28</td>
 69 | 							</tr>
 70 | 							<tr>
 71 | 								<td date-month="12" date-day="29">29</td>
 72 | 								<td date-month="12" date-day="30">30</td>
 73 | 								<td date-month="12" date-day="31">31</td>
 74 | 								<td date-month="12" date-day="0">1</td>
 75 | 								<td date-month="12" date-day="0">2</td>
 76 | 								<td date-month="12" date-day="0">3</td>
 77 | 								<td date-month="12" date-day="0">4</td>
 78 | 							</tr>
 79 | 						</tbody>
 80 | 					</table>
 81 | 					<div class="list">
 82 | 						<div class="day-event" date-month="12" date-day="4" data-number="1">
 83 | 							<a href="#" class="close fontawesome-remove"></a>
 84 | 							<h2 class="title">Lorem ipsum 1</h2>
 85 | 							<p class="date">2014-12-4</p>
 86 | 							<p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok.</p>
 87 | 							<label class="check-btn">
 88 | 								<input type="checkbox" class="save" id="save" name="" value=""/>
 89 | 								<span>Save to personal list!</span>
 90 | 							</label>
 91 | 						</div>
 92 | 						<div class="day-event" date-month="12" date-day="13" data-number="1">
 93 | 							<a href="#" class="close fontawesome-remove"></a>
 94 | 							<h2 class="title">Lorem ipsum 2</h2>
 95 | 							<p class="date">2014-12-13</p>
 96 | 							<p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok.</p>
 97 | 							<label class="check-btn">
 98 | 								<input type="checkbox" class="save" id="save" name="" value=""/>
 99 | 								<span>Save to personal list!</span>
100 | 							</label>
101 | 						</div>
102 | 						<div class="day-event" date-month="12" date-day="13" data-number="2">
103 | 							<a href="#" class="close fontawesome-remove"></a>
104 | 							<h2 class="title">Lorem ipsum 2</h2>
105 | 							<p class="date">2014-12-13</p>
106 | 							<p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok.</p>
107 | 							<label class="check-btn">
108 | 								<input type="checkbox" class="save" id="save" name="" value=""/>
109 | 								<span>Save to personal list!</span>
110 | 							</label>
111 | 						</div>
112 | 						<div class="day-event" date-month="12" date-day="14" data-number="1">
113 | 							<a href="#" class="close fontawesome-remove"></a>
114 | 							<h2 class="title">Lorem ipsum 3</h2>
115 | 							<p class="date">2014-12-14</p>
116 | 							<p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok.</p>
117 | 							<label class="check-btn">
118 | 								<input type="checkbox" class="save" id="save" name="" value=""/>
119 | 								<span>Save to personal list!</span>
120 | 							</label>
121 | 						</div>
122 | 						<div class="day-event" date-month="12" date-day="16" data-number="1">
123 | 							<a href="#" class="close fontawesome-remove"></a>
124 | 							<h2 class="title">Lorem ipsum 4</h2>
125 | 							<p class="date">2014-12-16</p>
126 | 							<p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok.</p>
127 | 							<label class="check-btn">
128 | 								<input type="checkbox" class="save" id="save" name="" value=""/>
129 | 								<span>Save to personal list!</span>
130 | 							</label>
131 | 						</div>
132 | 						<div class="day-event" date-month="12" date-day="24" data-number="1">
133 | 							<a href="#" class="close fontawesome-remove"></a>
134 | 							<h2 class="title">Lorem ipsum 5</h2>
135 | 							<p class="date">2014-12-24</p>
136 | 							<p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok.</p>
137 | 							<label class="check-btn">
138 | 								<input type="checkbox" class="save" id="save" name="" value=""/>
139 | 								<span>Save to personal list!</span>
140 | 							</label>
141 | 						</div>
142 | 						<div class="day-event" date-month="12" date-day="31" data-number="1">
143 | 							<a href="#" class="close fontawesome-remove"></a>
144 | 							<h2 class="title">Lorem ipsum 6</h2>
145 | 							<p class="date">2014-12-31</p>
146 | 							<p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok.</p>
147 | 							<label class="check-btn">
148 | 								<input type="checkbox" class="save" id="save" name="" value=""/>
149 | 								<span>Save to personal list!</span>
150 | 							</label>
151 | 						</div>
152 | 					</div>
153 | 				</div>
154 | 			</div>
155 | 			<div class="col-md-6">
156 | 				<label class="print pull-right">
157 | 					<span class="print-btn hidden-print">Print your list!</span>
158 | 				</label>
159 | 				<h2>Personal list</h2>
160 | 				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
161 | 				<div class="person-list"></div>
162 | 			</div>
163 | 		</div>
164 | 	</div>
165 | </body>
166 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 |     "name": "simplecalendar",
3 |     "version": "0.0.1",
4 |     "engines": {
5 |         "node": ">= 0.8.0"
6 |     },
7 | }


--------------------------------------------------------------------------------
/simplecalendar.js:
--------------------------------------------------------------------------------
  1 | var calendar = {
  2 | 
  3 |     init: function() {
  4 | 
  5 |         /**
  6 |          * Get current date
  7 |          */
  8 |         var d = new Date();
  9 |         var strDate = d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate();
 10 | 
 11 |         /**
 12 |          * Get current month and set as '.current-month' in title
 13 |          */
 14 |         var monthNumber = d.getMonth() + 1;
 15 | 
 16 |         function GetMonthName(monthNumber) {
 17 |             var months = ['Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni', 'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December'];
 18 |             return months[monthNumber - 1];
 19 |         }
 20 | 
 21 |         $('.month').text(GetMonthName(monthNumber));
 22 | 
 23 |         /**
 24 |          * Get current day and set as '.current-day'
 25 |          */
 26 |         $('tbody td:contains("' + d.getDate() + '")').addClass('current-day');
 27 | 
 28 |         /**
 29 |          * Add class '.active' on calendar date
 30 |          */
 31 |         $('tbody td').on('click', function(e) {
 32 |             if ($(this).hasClass('event')) {
 33 |                 $('tbody td').removeClass('active');
 34 |                 $(this).addClass('active');
 35 |             } else {
 36 |                 $('tbody td').removeClass('active');
 37 |             };
 38 |         });
 39 | 
 40 |         /**
 41 |          * Add '.event' class to all days that has an event
 42 |          */
 43 |         $('.day-event').each(function(i) {
 44 |             var eventMonth = $(this).attr('date-month');
 45 |             var eventDay = $(this).attr('date-day');
 46 |             $('tbody tr td[date-month="' + eventMonth + '"][date-day="' + eventDay + '"]').addClass('event');
 47 |         });
 48 | 
 49 |         /**
 50 |          * Get current day on click in calendar
 51 |          * and find day-event to display
 52 |          */
 53 |         $('tbody td').on('click', function(e) {
 54 |             $('.day-event').slideUp('fast');
 55 |             var monthEvent = $(this).attr('date-month');
 56 |             var dayEvent = $(this).text();
 57 |             $('.day-event[date-month="' + monthEvent + '"][date-day="' + dayEvent + '"]').slideDown('fast');
 58 |         });
 59 | 
 60 |         /**
 61 |          * Close day-event
 62 |          */
 63 |         $('.close').on('click', function(e) {
 64 |             $(this).parent().slideUp('fast');
 65 |         });
 66 | 
 67 |         /**
 68 |          * Save & Remove to/from personal list
 69 |          */
 70 |         $('.save').click(function() {
 71 |             if (this.checked) {
 72 |                 $(this).next().text('Remove from personal list');
 73 |                 var eventHtml = $(this).closest('.day-event').html();
 74 |                 var eventMonth = $(this).closest('.day-event').attr('date-month');
 75 |                 var eventDay = $(this).closest('.day-event').attr('date-day');
 76 |                 var eventNumber = $(this).closest('.day-event').attr('data-number');
 77 |                 $('.person-list').append('<div class="day" date-month="' + eventMonth + '" date-day="' + eventDay + '" data-number="' + eventNumber + '" style="display:none;">' + eventHtml + '</div>');
 78 |                 $('.day[date-month="' + eventMonth + '"][date-day="' + eventDay + '"]').slideDown('fast');
 79 |                 $('.day').find('.close').remove();
 80 |                 $('.day').find('.save').removeClass('save').addClass('remove');
 81 |                 $('.day').find('.remove').next().addClass('hidden-print');
 82 |                 remove();
 83 |                 sortlist();
 84 |             } else {
 85 |                 $(this).next().text('Save to personal list');
 86 |                 var eventMonth = $(this).closest('.day-event').attr('date-month');
 87 |                 var eventDay = $(this).closest('.day-event').attr('date-day');
 88 |                 var eventNumber = $(this).closest('.day-event').attr('data-number');
 89 |                 $('.day[date-month="' + eventMonth + '"][date-day="' + eventDay + '"][data-number="' + eventNumber + '"]').slideUp('slow');
 90 |                 setTimeout(function() {
 91 |                     $('.day[date-month="' + eventMonth + '"][date-day="' + eventDay + '"][data-number="' + eventNumber + '"]').remove();
 92 |                 }, 1500);
 93 |             }
 94 |         });
 95 | 
 96 |         function remove() {
 97 |             $('.remove').click(function() {
 98 |                 if (this.checked) {
 99 |                     $(this).next().text('Remove from personal list');
100 |                     var eventMonth = $(this).closest('.day').attr('date-month');
101 |                     var eventDay = $(this).closest('.day').attr('date-day');
102 |                     var eventNumber = $(this).closest('.day').attr('data-number');
103 |                     $('.day[date-month="' + eventMonth + '"][date-day="' + eventDay + '"][data-number="' + eventNumber + '"]').slideUp('slow');
104 |                     $('.day-event[date-month="' + eventMonth + '"][date-day="' + eventDay + '"][data-number="' + eventNumber + '"]').find('.save').attr('checked', false);
105 |                     $('.day-event[date-month="' + eventMonth + '"][date-day="' + eventDay + '"][data-number="' + eventNumber + '"]').find('span').text('Save to personal list');
106 |                     setTimeout(function() {
107 |                         $('.day[date-month="' + eventMonth + '"][date-day="' + eventDay + '"][data-number="' + eventNumber + '"]').remove();
108 |                     }, 1500);
109 |                 }
110 |             });
111 |         }
112 | 
113 |         /**
114 |          * Sort personal list
115 |          */
116 |         function sortlist() {
117 |             var personList = $('.person-list');
118 | 
119 |             personList.find('.day').sort(function(a, b) {
120 |                 return +a.getAttribute('date-day') - +b.getAttribute('date-day');
121 |             }).appendTo(personList);
122 |         }
123 | 
124 |         /**
125 |          * Print button
126 |          */
127 |         $('.print-btn').click(function() {
128 |             window.print();
129 |         });
130 | 
131 |     },
132 | };
133 | 
134 | $(document).ready(function() {
135 | 
136 |     calendar.init();
137 | 
138 | });


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | *[class*="fontawesome-"]:before {
  2 |     font-family: 'FontAwesome', sans-serif;
  3 | }
  4 | 
  5 | body {
  6 |     background: #f9f9f9;
  7 |     color: #0e171c;
  8 |     font: 300 100%/1.5em 'Lato', sans-serif;
  9 |     margin: 0;
 10 | }
 11 | 
 12 | a {
 13 |     text-decoration: none;
 14 | }
 15 | 
 16 | h2 {
 17 |     font-size: 22px;
 18 |     line-height: 20px;
 19 |     margin: 4px 0;
 20 | }
 21 | 
 22 | h3 {
 23 |     font-size: 24px;
 24 |     line-height: 24px;
 25 |     margin: 5px 0;
 26 | }
 27 | 
 28 | table {
 29 |     border-spacing: 0;
 30 |     width: 100%;
 31 | }
 32 | 
 33 | .calendar-container {
 34 |     height: 538px;
 35 |     left: 50%;
 36 |     margin: -255px 0 0 -245px;
 37 |     position: absolute;
 38 |     top: 45%;
 39 |     width: 510px;
 40 | }
 41 | 
 42 | .calendar {
 43 |     text-align: center;
 44 | }
 45 | 
 46 | .calendar header {
 47 |     position: relative;
 48 | }
 49 | 
 50 | .calendar h2 {
 51 |     text-transform: uppercase;
 52 | }
 53 | 
 54 | .calendar thead {
 55 |     font-weight: 600;
 56 |     text-transform: uppercase;
 57 | }
 58 | 
 59 | .calendar tbody {
 60 |     color: #7c8a95;
 61 | }
 62 | 
 63 | .calendar tbody td:hover {
 64 |     border: 2px solid #c0392b;
 65 | }
 66 | 
 67 | .calendar tbody td.active {
 68 |     border: 2px solid #c0392b;
 69 | }
 70 | 
 71 | .calendar td {
 72 |     border: 2px solid transparent;
 73 |     border-radius: 50%;
 74 |     display: inline-block;
 75 |     height: 64px;
 76 |     line-height: 64px;
 77 |     text-align: center;
 78 |     width: 64px;
 79 | }
 80 | 
 81 | .current-day {
 82 |     background: #c0392b;
 83 |     color: #f9f9f9;
 84 | }
 85 | 
 86 | .event {
 87 |     cursor: pointer;
 88 |     position: relative;
 89 | }
 90 | 
 91 | .event:after {
 92 |     background: #c0392b;
 93 |     border-radius: 50%;
 94 |     bottom: 8px;
 95 |     display: block;
 96 |     content: '';
 97 |     height: 8px;
 98 |     left: 50%;
 99 |     margin: -4px 0 0 -4px;
100 |     position: absolute;
101 |     width: 8px;
102 | }
103 | 
104 | .event.current-day:after {
105 |     background: #f9f9f9;
106 | }
107 | 
108 | .btn-prev,
109 | .btn-next {
110 | 	border: 2px solid #cbd1d2;
111 | 	border-radius: 50%;
112 | 	color: #cbd1d2;
113 | 	height: 32px;
114 | 	font-size: 22px;
115 | 	line-height: 28px;
116 | 	margin: -16px;
117 | 	position: absolute;
118 | 	top: 50%;
119 | 	width: 32px;
120 | }
121 | 
122 | .btn-prev:hover,
123 | .btn-next:hover {
124 |     background: #cbd1d2;
125 |     color: #f9f9f9;
126 | }
127 | 
128 | .btn-prev {
129 |     left: 30px;
130 | }
131 | 
132 | .btn-next {
133 |     right: 35px;
134 | }
135 | 
136 | .list {
137 |     margin-top: 20px;
138 | }
139 | 
140 | .close {
141 |     color: #A4AAAB;
142 |     margin-top: -15px;
143 |     margin-right: 10px;
144 |     float: right;
145 | }
146 | 
147 | .day-event {
148 |     background-color: #F2F2F2 ;
149 |     width: 100%;
150 |     padding-top: 20px;
151 |     padding-bottom: 0px;
152 |     margin-bottom: 50px;
153 |     display:none;
154 | 
155 | }
156 | 
157 | .day-event p{
158 |     padding-left: 20px;
159 |     padding-right: 20px;
160 |     padding-bottom: 20px;
161 | }
162 | 
163 | .day-event span{
164 |     font-size: 12px;
165 | }
166 | 
167 | .day-event button {
168 |     position: relative;
169 |     vertical-align: top;
170 |     width: 100%;
171 |     height: 50px;
172 |     padding: 0;
173 |     font-size: 18px;
174 |     color: white;
175 |     text-align: center;
176 |     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
177 |     background: #c0392b;
178 |     border: 0;
179 |     border-bottom: 2px solid #b53224;
180 |     cursor: pointer;
181 |     -webkit-box-shadow: inset 0 -2px #b53224;
182 |     box-shadow: inset 0 -2px #b53224;
183 | }
184 | 
185 | .check-btn {
186 |     width: 100%;
187 | }
188 | input[type=checkbox] {display:none;}
189 | 
190 | span {
191 |     background-color:#373740;
192 |     -webkit-border-radius:4px;
193 |     -moz-border-radius:4px;
194 |     border-radius:4px;
195 |     font-weight:700;
196 |     color:#FFF;
197 |     font-size:.85em;
198 |     letter-spacing:2px;
199 |     text-decoration:none;
200 |     font-family:'PT Sans', sans-serif;
201 |     text-align:center;
202 |     width:100%;
203 |     height:50px;
204 |     line-height:50px;
205 |     cursor:pointer;
206 |     display:block;
207 |     margin: 0 auto;
208 |     -webkit-transition:background-color 150ms ease-in;
209 |     -moz-transition:background-color 150ms ease-in;
210 |     -ms-transition:background-color 150ms ease-in;
211 |     -o-transition:background-color 150ms ease-in;
212 |     transition:background-color 150ms ease-in;
213 | }
214 | 
215 | span:hover {
216 |     background-color:#c0392b;
217 | }
218 | 
219 | input[type=checkbox]:checked + span {
220 |     background-color:#9C2E23;
221 |     text-decoration:none;
222 |     -webkit-border-radius:4px;
223 |     -moz-border-radius:4px;
224 |     border-radius:4px;
225 |     background:#9C2E23 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX9JREFUeNpi+P//PwMNsS4QbwBiLnQ5WlqqAsRP/0PARiBmoYfFkkB8+z8qWALEjLS0mB+IL/3HDibSymJQXB7/jx/UgNSCvU4lwAbEG4DYkwi1WUxUspQZiOcRaSkIWOAKMk0Sg3jaf+IBOIVjMyQWiH8DsR+RljaTYOkBWJ5GNwRk2R+ooh9A7ETA0jwSLL0ATfEYqRpkyVc0xR+A2AyHpdFA/I9IS0F5WhRbAWIEtQQbeAXE6lhC5jeRlj4GYgVsRaYK1HBCmmWgmuyxhAwu8BpaXjNgs/gYkYbcAGIXPCGDDkCOM8eVPkCEFhE+JhX8BGJnfAkTxgC57BOVLAXlihBC2RA9Vf+k0FJQKk8nJv+jCwQi5WNyQAWxpR02wRQS8icy6CKlmMUlUUGipfOQK3lKLAbhdhIKfWZS6258kiAfzCZg6V4gZiOn0UBIAcgn63BYehK50Ke2xQxQH+3FUoqJUtJMIlYhLxAfxVJu09xiWENuMxCrUaNhCBBgAOAVfjALa5TLAAAAAElFTkSuQmCC) no-repeat 7% center;
226 |     background-size:15px 13px;
227 | }
228 | 
229 | input[type=checkbox]:checked:hover + span {
230 |     background-color:#9C2E23;
231 |     color:rgba(255,255,255,0.5);
232 |     text-decoration:none;
233 |     -webkit-border-radius:4px;
234 |     -moz-border-radius:4px;
235 |     border-radius:4px;
236 |     background:#9C2E23 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAS5JREFUeNq8110OgjAMAGBGvIY3VESjt9jPg95PT+LccBIZ7dYOWJPGB+g+Ymg3hLW2QeLkcu/y2pSFdvl0eQevehjI3uXbfkMh96TShFq/xhG6J4faAtxEtSBOQTm4QWpnOBWl4CZT69fuYpiCpnBDrB1xLhrjgoFO8F1oGcFslUv4bV32zFoxmOHJta0XMn65dC0UaiddA8UGiN4axeC1cUkdmWviEls/NwL1FqjPNtNvoimPdC3yRCUTiTXbt0R/oSnw2iiK10BBvBY6w2uiE3xJr8oFtcrvxy/fVcyeVdGx98yotcOxN/znHeMUIhdMOG8c4reagssF43VEoT5O4ZJwvNUUFJtcEE5BMXyGpnanf5yDxjiI+hSJj7YunEBvhbuTCh9tD+jiR4ABAJ0SrJgNr1UAAAAAAElFTkSuQmCC) no-repeat 7% center;
237 |     background-size:15px 15px;
238 | }
239 | 
240 | .print-btn {
241 |     padding: 1px 14px 5px 14px;
242 | }
243 | 
244 | /* Smartphones (portrait and landscape) ----------- */
245 | @media only screen
246 | and (min-device-width : 320px)
247 | and (max-device-width : 480px) {
248 | /* STYLES GO HERE */
249 | }
250 |  
251 | /* Smartphones (landscape) ----------- */
252 | @media only screen
253 | and (min-width : 321px) {
254 | /* STYLES GO HERE */
255 | }
256 |  
257 | /* Smartphones (portrait) ----------- */
258 | @media only screen
259 | and (max-width : 320px) {
260 | /* STYLES GO HERE */
261 | }
262 |  
263 | /* iPads (portrait and landscape) ----------- */
264 | @media only screen
265 | and (min-device-width : 768px)
266 | and (max-device-width : 1024px) {
267 | /* STYLES GO HERE */
268 | }
269 |  
270 | /* iPads (landscape) ----------- */
271 | @media only screen
272 | and (min-device-width : 768px)
273 | and (max-device-width : 1024px)
274 | and (orientation : landscape) {
275 | /* STYLES GO HERE */
276 | }
277 |  
278 | /* iPads (portrait) ----------- */
279 | @media only screen
280 | and (min-device-width : 768px)
281 | and (max-device-width : 1024px)
282 | and (orientation : portrait) {
283 | /* STYLES GO HERE */
284 | }
285 |  
286 | /* Desktops and laptops ----------- */
287 | @media only screen
288 | and (min-width : 1224px) {
289 | /* STYLES GO HERE */
290 | }
291 |  
292 | /* Large screens ----------- */
293 | @media only screen
294 | and (min-width : 1824px) {
295 | /* STYLES GO HERE */
296 | }
297 |  
298 | /* iPhone 5 (portrait & landscape)----------- */
299 | @media only screen
300 | and (min-device-width : 320px)
301 | and (max-device-width : 568px) {
302 | /* STYLES GO HERE */
303 | }
304 |  
305 | /* iPhone 5 (landscape)----------- */
306 | @media only screen
307 | and (min-device-width : 320px)
308 | and (max-device-width : 568px)
309 | and (orientation : landscape) {
310 | /* STYLES GO HERE */
311 | }
312 |  
313 | /* iPhone 5 (portrait)----------- */
314 | @media only screen
315 | and (min-device-width : 320px)
316 | and (max-device-width : 568px)
317 | and (orientation : portrait) {
318 | /* STYLES GO HERE */
319 | }


--------------------------------------------------------------------------------