├── .gitignore ├── LICENSE.md ├── README.md ├── calendar.html ├── calendar.js └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | .c9/ 2 | index.html 3 | javascript-tests.js 4 | react-example/ 5 | sandbox.html 6 | sandbox.js -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Michael Duane Mooring 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ,-----.,--. ,--. ,---. ,--.,------. ,------. 2 | ' .--./| | ,---. ,--.,--. ,-| || o \ | || .-. \ | .---' 3 | | | | || .-. || || |' .-. |`..' | | || | \ :| `--, 4 | ' '--'\| |' '-' '' '' '\ `-' | .' / | || '--' /| `---. 5 | `-----'`--' `---' `----' `---' `--' `--'`-------' `------' 6 | ----------------------------------------------------------------- 7 | 8 | 9 | Hi there! Welcome to Cloud9 IDE! 10 | 11 | To edit this repository in Cloud9 go here: 12 | - Cloud9 Workspace: https://ide.c9.io/mikeumus/vanilla-js-cal GitHub Pages: 13 | 14 | 15 | ## Support & Documentation 16 | 17 | Visit http://docs.c9.io for documentation, or http://support.c9.io for support. 18 | To watch some training videos, visit http://www.youtube.com/user/c9ide 19 | -------------------------------------------------------------------------------- /calendar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Vanilla JS Calendar 9 | 10 | 11 | 12 | 13 | 14 | 23 | 24 |

Vanilla JavaScript Calendar

25 | 26 |

27 | 28 | 29 |

30 | 31 |

32 |

How To Use:

33 |

34 | // Target an element ID you want to render the calendar inside of:       
35 | renderCalendar(calendarThis); 
36 | 
37 | // Something like this in your HTML file:
38 | <div id="calendarThis"> <div> 
39 | 
40 | // Source code:
41 | https://github.com/mikeumus/vanilla-js-calendar
42 |

43 |

44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /calendar.js: -------------------------------------------------------------------------------- 1 | /* Vanilla JS Calendar */ 2 | (function vanillaJsCalendar(){ 3 | 4 | "use strict"; 5 | 6 | var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; 7 | var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; 8 | 9 | document.addEventListener("DOMContentLoaded", function(event){ 10 | 11 | var theDate = new Date(); 12 | 13 | var DateObject = function DateObject(theDate) { 14 | this.theDay = theDate.getDate(); 15 | this.dayName = dayNames[theDate.getDay()]; 16 | this.theMonth = monthNames[theDate.getMonth()]; 17 | this.theYear = theDate.getFullYear(); 18 | this.daysInMonth = new Date(theDate.getFullYear(), theDate.getMonth()+1, 0).getDate(); 19 | this.firstDayOfMonth = dayNames[new Date(theDate.getFullYear(), theDate.getMonth(), 1).getDay()]; 20 | }; 21 | 22 | var currentDate = new DateObject(theDate); 23 | 24 | function renderCalendar(targetElem){ 25 | 26 | // Custom function to make new elements easier: 27 | function addElem(elementType, elemClass, appendTarget){ 28 | appendTarget.innerHTML += "<"+elementType+" class="+elemClass+"> "; 29 | } 30 | 31 | currentDate = new DateObject(theDate); 32 | 33 | // Refreshing Calendar 34 | var renderTarget = document.getElementById(targetElem); 35 | renderTarget.remove(); 36 | renderTarget = document.createElement("div"); 37 | renderTarget.id = targetElem; 38 | document.getElementsByTagName('body')[0].appendChild(renderTarget); 39 | 40 | // Monday, dayView 41 | addElem("div", "day-view", renderTarget); 42 | var dayView = document.querySelector('.day-view'); 43 | var dayNameElem = document.createElement("div"); // i.e.: Wednesday 44 | dayNameElem.className = "day-header"; 45 | var dayNameNode = document.createTextNode(currentDate.dayName); 46 | dayNameElem.appendChild(dayNameNode); 47 | dayView.appendChild(dayNameElem); 48 | // 21st, dayNumber 49 | addElem("time", "day-number", dayView); 50 | var dayNumber = document.querySelector('.day-number'); 51 | var dayNumNode = document.createTextNode(currentDate.theDay); 52 | dayNumber.appendChild(dayNumNode); 53 | dayView.appendChild(dayNumber); 54 | 55 | addElem("div", "month-view", renderTarget); 56 | var monthView = document.querySelector('.month-view'); 57 | 58 | var prevMonthSpan = document.createElement("SPAN"); 59 | prevMonthSpan.addEventListener('click', function(){ 60 | goToMonth(currentDate, false); // Go To Previous Month 61 | }); 62 | prevMonthSpan.classList.add('arrow', 'float-left', 'prev-arrow'); 63 | var backArrow = document.createTextNode("<"); 64 | prevMonthSpan.appendChild(backArrow); 65 | 66 | var nextMonthSpan = document.createElement("SPAN"); 67 | nextMonthSpan.addEventListener('click', function(){ 68 | goToMonth(currentDate, true); // Go To Next Month 69 | }); 70 | nextMonthSpan.classList.add('arrow', 'float-right', 'next-arrow'); 71 | var nextArrow = document.createTextNode(">"); 72 | nextMonthSpan.appendChild(nextArrow); 73 | 74 | document.onkeydown = function() { 75 | switch (window.event.keyCode) { 76 | case 37: //Left key 77 | goToMonth(currentDate, false); 78 | break; 79 | case 39: //Right key 80 | goToMonth(currentDate, true); 81 | break; 82 | } 83 | }; 84 | 85 | var monthSpan = document.createElement("SPAN"); 86 | monthSpan.className = "month-header"; 87 | var monthOf = document.createTextNode( 88 | currentDate.theMonth +" "+ currentDate.theYear 89 | ); 90 | 91 | monthSpan.appendChild(prevMonthSpan); 92 | monthSpan.appendChild(monthOf); 93 | monthSpan.appendChild(nextMonthSpan); 94 | monthView.appendChild(monthSpan); 95 | 96 | for(var i=0; i < dayNames.length; i++){ 97 | var dayOfWeek = document.createElement('div'); 98 | dayOfWeek.className = "day-of-week"; 99 | var charOfDay = document.createTextNode(dayNames[i].charAt(0)); 100 | dayOfWeek.appendChild(charOfDay); 101 | monthView.appendChild(dayOfWeek); 102 | } 103 | 104 | // renderTarget.appendChild(document.createElement("ul")); 105 | var calendarList = document.createElement("ul"); 106 | for(i = 0; i < currentDate.daysInMonth; i++){ 107 | var calendarCell = document.createElement("li"); 108 | var calCellTime = document.createElement("time"); 109 | calendarList.appendChild(calendarCell); 110 | calendarCell.id = 'day_'+(i+1); 111 | var dayDataDate = new Date(theDate.getFullYear(), theDate.getMonth(), (i+1)); 112 | calCellTime.setAttribute('datetime', dayDataDate.toISOString()); 113 | calCellTime.setAttribute('data-dayofweek', dayNames[dayDataDate.getDay()]); 114 | 115 | calendarCell.className = "calendar-cell"; 116 | if(i === currentDate.theDay-1){ 117 | calendarCell.className = "today"; 118 | } 119 | var dayOfMonth = document.createTextNode(i+1); 120 | calCellTime.appendChild(dayOfMonth); 121 | calendarCell.appendChild(calCellTime); 122 | monthView.appendChild(calendarList); 123 | 124 | } // daysInMonth for loop ends 125 | 126 | var dayOne = document.getElementById('day_1'); 127 | if (currentDate.firstDayOfMonth == "Monday"){ 128 | dayOne.style.marginLeft = "49px"; 129 | } else if (currentDate.firstDayOfMonth == "Tuesday"){ 130 | dayOne.style.marginLeft = "98px"; 131 | } else if (currentDate.firstDayOfMonth == "Wednesday"){ 132 | dayOne.style.marginLeft = "147px"; 133 | } else if (currentDate.firstDayOfMonth == "Thursday"){ 134 | dayOne.style.marginLeft = "196px"; 135 | } else if (currentDate.firstDayOfMonth == "Friday"){ 136 | dayOne.style.marginLeft = "245px"; 137 | } else if (currentDate.firstDayOfMonth == "Saturday"){ 138 | dayOne.style.marginLeft = "304px"; 139 | } 140 | 141 | var dayHeader = document.getElementsByClassName('day-header'); 142 | var dayNumNode = document.getElementsByClassName('day-number'); 143 | var updateDay = function(){ 144 | var thisCellTime = this.querySelector('time'); 145 | dayHeader[0].textContent = thisCellTime.getAttribute('data-dayofweek'); 146 | 147 | dayNumNode[0].textContent = this.textContent; 148 | 149 | } 150 | 151 | var calCells = document.getElementsByClassName('calendar-cell'); 152 | for(i = 0; i < calCells.length; i++){ 153 | calCells[i].addEventListener('click', updateDay, false); 154 | } 155 | 156 | } // renderCalener function ends 157 | 158 | // console.log(new DateObject(theDate)); 159 | renderCalendar("calendarThis"); 160 | 161 | function goToMonth(currentDate, direction) { 162 | if (direction == false){ 163 | theDate = new Date(theDate.getFullYear(), theDate.getMonth()-1, 1); 164 | } else{ 165 | theDate = new Date(theDate.getFullYear(), theDate.getMonth()+1, 1); 166 | } 167 | return renderCalendar("calendarThis"); 168 | } 169 | 170 | }); // DOMContentLoaded event listener ends 171 | 172 | })(); // iife (immediately invoked function expressions) ends 173 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | color: #82500D; 3 | height: 100vh; 4 | margin: auto; 5 | text-align: center; 6 | } 7 | a{ 8 | color:#d89f52; 9 | } 10 | pre{ 11 | text-align:left; 12 | border: antiquewhite 1px solid; 13 | padding: 13px 33px; 14 | } 15 | hr{ 16 | border: #d89f52 1px solid; 17 | } 18 | 19 | .container{ 20 | text-align: left; 21 | width: 57%; 22 | margin: 7% auto 0; 23 | } 24 | 25 | #calendarThis{ 26 | margin: 3% auto; 27 | display: inline-block; 28 | transition: box-shadow .25s; 29 | border-radius: 2px; 30 | padding: 9px 7px 9px 7px; 31 | background: #FFFCF9; 32 | box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); 33 | } 34 | #calendarThis li, .day-of-week{ 35 | display: inline-block; 36 | padding: 13px 7px; 37 | width: 33px; 38 | border: #FFF9F2 1px solid; 39 | text-align: center; 40 | background: antiquewhite; 41 | cursor: pointer; 42 | } 43 | #calendarThis li:hover{ 44 | border: #F9E0B6 1px solid; 45 | background: #fff; 46 | } 47 | .float-left, .day-view{ 48 | float: left; 49 | } 50 | .float-right, .month-view{ 51 | float: right; 52 | } 53 | .month-view ul{ 54 | padding: 0; 55 | margin: 0 0 0 8px; 56 | text-align: left; 57 | } 58 | 59 | .day-view{ 60 | text-align: center; 61 | font-weight: bold; 62 | } 63 | .day-header{ 64 | padding: 13px 0; 65 | border: antiquewhite 2px solid; 66 | background: #fff; 67 | } 68 | .day-number{ 69 | display:block; 70 | margin: 10% auto; 71 | font-size: 144px; 72 | background: #fff; 73 | width: 83%; 74 | border-radius: 2px; 75 | border: #FFE2BB 1px dotted; 76 | position: relative; 77 | top: 64%; 78 | transform: translateY(12%); 79 | } 80 | 81 | .day-view, .month-view{ 82 | width: 357px; 83 | display: block; 84 | } 85 | .day-of-week{ 86 | background: #FFFCF9 !important; 87 | font-weight: bold; 88 | border: #fff 1px solid; 89 | color: #D89F52; 90 | } 91 | 92 | .month-header{ 93 | width: 99%; 94 | display: block; 95 | text-align: center; 96 | padding: 13px 0; 97 | border: antiquewhite 2px solid; 98 | background: #fff; 99 | margin: 0 0 2px 0; 100 | font-weight: bold; 101 | } 102 | .today{ 103 | background: #FFFDFA !important; 104 | } 105 | .arrow{ 106 | width: 45px; 107 | height: 35px; 108 | margin: auto 0 auto 0; 109 | text-align: center; 110 | font-weight: bold; 111 | cursor: pointer; 112 | } 113 | 114 | /* Portrait and Landscape */ 115 | @media (max-width: 767px) { 116 | #calendarThis{ 117 | width: 358px; 118 | } 119 | } --------------------------------------------------------------------------------