cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <head>
  <script src="https://use.fontawesome.com/484df5253e.js"></script>
</head>
<body>
	<div id="app"></div>
</body>
            
          
!
            
              body{background:#E9E9E9;margin:0;padding:0;width:100%;height:100%;font-family: 'Roboto', sans-serif;-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;}
a{color:white;text-decoration:none;}
#app{width:400px;margin:auto;margin-top:60px;position:relative;}
#calendar{overflow:hidden;background:#2980b9;height:500px;width:100%;box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25), 0px 0px 2px rgba(0, 0, 0, 0.125);}
#header{width:100%;height:30px;color:white;margin-top:5px;text-align:center;z-index:200;}
#header i{width:19%;}
#header p{width:43%;}
#header i, #header p, #header div{display:inline-block;font-size:19px;}
#header > div{width:19%;}
.fa-calendar-o{position:relative;top:-13px;cursor:pointer;}
.fa-calendar-o:before{position:absolute;left:0;line-height:18px;font-size:27px;}
.fa-calendar-o span{position:absolute;font-size:13px;line-height:20px;font-weight:600;left:5px;font-family: 'Roboto', sans-serif;}


ul{list-style:none;}
#dates{width:100%;padding:10px 8px;}
#dates p{color:rgba(189, 195, 199, 0.6);}
#dates > div{width:14%;float:left;text-align:center;color:white;}
#dates > div ul{min-height:300px;width:100%;margin:0;padding:0;}
#dates > div > ul > li{margin-top:15%;width:50px;height:50px;cursor:pointer;border-radius:50%;line-height:50px;}
#dates li:hover{background:rgba(189, 195, 199, 0.2);transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out;}
#arrows{float:left;width:100%;height:30px;font-size:15px;color:white;padding-top:30px;text-align:center;}
#arrows i{width:30px;height:30px;line-height:30px;cursor:pointer;border-radius:50%;padding:5px;}
#arrows i:active{background:rgba(189, 195, 199, 0.2)}
#arrows > i{float:left;margin-left:15px;}
#arrows i:nth-child(2n){float:right;margin-right:15px;}
.today{background:rgba(189, 195, 199, 0.1);}
.warning{float:left;color:white;font-size:14px;font-weight:300;position:absolute;bottom:0;padding:10px 20px;}

#entries{float:left;background:white;width:100%;max-width:400px;min-height:50px;max-height:250px;overflow-y:scroll;z-index:-1;box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25), 0px 0px 2px rgba(0, 0, 0, 0.125);}
.contain_entries{padding:20px;}
#entries #entries-header p{padding:0;margin:0;}
#entries #entries-header{width:100%;border-bottom:1px solid #E0E0E0;padding-bottom:20px;}
.rotate{transform:rotate(45deg);-webkit-transform: rotate(45deg);}
.entryDay{font-size:20px;font-weight:500;color:#555;}
.currday{font-size:15px;font-weight:300;color:#777;}

/* add entry form */
#add_entry{position:relative;z-index:50;background:#ffffff;height:400px;width:400px;top:40px;display:none;}
.enter_entry{width:100%;height:50px;background:#2980b9;}
.enter_entry > input{outline:none !important;border:none;max-width:65%;height:30px;font-size:20px;background:transparent;padding:0px 30px;color:#fff;}
.enter_entry > span{width:40%;padding:20px 13px;color:white;cursor:pointer;}

.enter_entry > input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #fff;
}
.enter_entry > input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #fff;
   opacity: 1;
}
.enter_entry > input::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #fff;
   opacity: 1;
}
.enter_entry > input:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #fff;
}
.entry_details{width:100%;height:100%;background:#fff;}
.entry_details > div{padding:0px 30px;}
.entry_info{width:100%;border-bottom:1px solid #E0E0E0;min-height:40px;padding:20px 0px;}
.entry_info2{width:100%;border-bottom:1px solid #E0E0E0;height:40px;padding-bottom:20px;}
.entry_info i, .entry_info2 i{font-size:25px;color:#B6B6B6;line-height:60px;vertical-align:middle;margin-right:20px;}
.entry_info p, .entry_info2 p{line-height:60px;margin:0;padding:0;display:inline-block;width:50%;}
.entry_info2 input{border:none;font-size:16px;width:85%;}
.entry_info2 textarea{border:none;font-size:16px;width:85%;resize:none;margin-top:20px;font-family: 'Roboto', sans-serif;height:35px;}
.entry_info2 input:focus{outline:none;border:none;}
.entry_info2 textarea:focus{outline:none;border:none;}
#select_hour{margin-left:40px;line-height:30px;width:auto;}
#hour{float:right;line-height:35px;text-align:right;}
#enter_hour{padding:0;margin:0;width:20%;padding:5px;border:1px solid #CACACA;}
.fa-pencil{font-size:18px !important;margin-top:-40px;}
.fa-circle{font-size:18px !important;line-height:20px !important;}
.fa-image{font-size:18px !important;line-height:30px !important;float:left;}
#defColor{width:89%;}
.colors{padding-top:0px;}
.colors > div{margin-left:35px;}
.colors > div span i{cursor:pointer;}
.colors > div span i:active{color:#000;}
#blue{color:#2980b9;}
#red{color:#DB1B1B;}
#green{color:#8BB929;}
#yellow{color:#E4F111;}
#purple{color:#8129B9;}
#gray{color:#666666;}
.first{padding-bottom:10px !important;}
.second{min-height:40px !important;height:auto;}
#entry-img{width: 0.1px;height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1;}
#for_img{float:left;max-width:70%;max-height:30px;line-height:30px;cursor:pointer;overflow:hidden;}
#for_img:active{background:#EFEFEF;}
#remove_img{float:right;line-height:30px;font-size:15px;color:#888;cursor:pointer;display:none;}

/* toggle */
input[type='checkbox'] {display: none; cursor: pointer; }
input[type='checkbox']:focus,
input[type='checkbox']:active {outline: none; }
input[type='checkbox'] + label {cursor: pointer; display: inline-block; position: relative; padding-left: 25px; margin-right: 10px; color: #0b4c6a; }
input[type='checkbox'] + label:before,
input[type='checkbox'] + label:after {content: ''; font-family: helvetica; display: inline-block; width: 18px; height: 18px; left: 0; bottom: 0; text-align: center; position: absolute; }
input[type='checkbox'] + label:before {background-color: #fafafa; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
input[type='checkbox'] + label:after {color: #fff; }
input[type='checkbox']:checked + label:before {-moz-box-shadow: inset 0 0 0 10px #158EC6; -webkit-box-shadow: inset 0 0 0 10px #158EC6; box-shadow: inset 0 0 0 10px #158EC6; }
input[type='checkbox'] + label:before {-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
input[type='checkbox'] + label:hover:after, input[type='checkbox']:checked + label:after {content: "\2713"; line-height: 18px; font-size: 14px; }
input[type='checkbox'] + label:hover:after {color: #c7c7c7; }
input[type='checkbox']:checked + label:after, input[type='checkbox']:checked + label:hover:after {color: #fff; }

/*Toggle Specific styles*/
input[type='checkbox'].toggle {display: inline-block; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 55px; height: 28px; background-color: #C0C0C0; position: relative; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; float:right; margin-top:18px; }
input[type='checkbox'].toggle:hover:after {background-color: #ffffff; }
input[type='checkbox'].toggle:after {content: ''; display: inline-block; position: absolute; width: 24px; height: 24px; background-color: #F2F2F2; top: 2px; left: 2px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
input[type='checkbox']:checked.toggle {-moz-box-shadow: inset 0 0 0 15px #2980b9; -webkit-box-shadow: inset 0 0 0 15px #2980b9; box-shadow: inset 0 0 0 15px #2980b9; }
input[type='checkbox']:checked.toggle:after {left: 29px; background-color: #fff; }

/* open entry */
#open_entry{position:relative;z-index:50;background:#ffffff;height:520px;width:400px;top:-40px;display:none;position:relative;}
.entry_img{width:100%;height:300px;background:#2980b9;overflow:hidden;}
.entry_img img{opacity:0.7}
.overlay{width:100%;height:300px;position:absolute;z-index:100;color:white;background: -moz-linear-gradient(top,  rgba(30,87,153,0) 0%, rgba(0,0,0,0.5) 100%); background: -webkit-linear-gradient(top,  rgba(30,87,153,0) 0%,rgba(0,0,0,0.5) 100%); background: linear-gradient(to bottom,  rgba(30,87,153,0) 0%,rgba(0,0,0,0.5) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#80000000',GradientType=0 ); }
.overlay > div{float:left;width:90%;height:87%;padding:20px;}
.overlay p{float:left;width:100%;margin-top:60%;}
.overlay span{float:left;width:100%;line-height:25px;}
#entry_title{font-size:25px;}
#entry_times{font-size:15px;font-weight:300;}
.openedEntry{padding:10px 0px !important;}
.openedEntry > div{line-height:40px;padding-left:20px !important;padding-right:20px !important;border:none !important;}
.noteDiv{height:80px !important;overflow:hidden;padding-top:20px !important;}
.noteDiv > div{line-height:20px !important;}
.openedEntry .fa-map-marker{margin-right:25px !important;}
.openedEntry i{font-size:25px !important;color:#555;margin-right:20px;padding-top:10px !important}
.openedEntry span{color:#999;}
#note{color:black !important;}

/* entry list */
.no-entries{width:100%;text-align:center;padding:15px 0px;}
.no-entries i{font-size:35px;color:#888;width:100%;padding-bottom:20px;}
.no-entries span{font-size:25px;color:#888;width:100%;font-weight:300;font-style:italic;}
.entry{width:100%;border-bottom:1px solid #E0E0E0;height:40px;padding:10px 0px;}
.entry p{margin:0;}
.entry > div{border-left:4px solid #2980b9;height:40px;padding-left:20px;}
.entry_left{float:left;width:80%;cursor:pointer;}
.entry_event{line-height:20px;font-weight:500;color:#555;height:20px;}
.entry_time{line-height:20px;font-weight:300;color:#888;font-size:15px;}
.delete_entry{float:left;width:20%;line-height:40px;text-align:center;font-size:25px;color:#888;}
.delete_entry i{width:30px;height:30px;line-height:30px;cursor:pointer;border-radius:50%;padding:5px;}
.delete_entry i:active{background:rgba(189, 195, 199, 0.2)}

/* Menu */
.fa-bars{cursor:pointer;}
#menu{width:100%;height:100%;position:absolute;background:rgba(0,0,0,0.4);z-index:100;overflow:hidden;display:none;}
#menu-content{width:65%;background:white;float:left;height:100%;display:none;}
#click-close{float:right;width:35%;height:100%;cursor:pointer;}
.madeBy{width:100%;height:200px;position:relative;background:#2980b9;color:white;}
.madeOverlay{width:100%;position:absolute;bottom:10px;}
.madeOverlay span{float:left;width:100%;margin-left:15px;margin-bottom:5px;font-weight:300;}
#madeName{font-weight:400;font-size:20px;}
#madeInfo{font-size:14px;}
#madeWeb{font-size:14px;display:inline-block;width:auto;}
#madeWeb:hover{text-decoration:underline;}

#ignoreOverflow{position:absolute;bottom:-25px;right:0;}
/* material button */
@-webkit-keyframes ink-visual-show {
  from {
    opacity: 1;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes ink-visual-show {
  from {
    opacity: 1;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes ink-visual-hide {
  to {
    opacity: 0;
  }
}
@keyframes ink-visual-hide {
  to {
    opacity: 0;
  }
}
button {
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
  -webkit-transition-timing-function: cubic-bezier(0.25, 0.5, 0.5, 1);
          transition-timing-function: cubic-bezier(0.25, 0.5, 0.5, 1);
  position: relative;
  padding: 0;
  height: auto;
  border: none;
  border-radius: 2px;
  outline: none;
  line-height: 60px;
  text-transform: uppercase;
  z-index:200;
}
button:active {
  -webkit-transition-duration: 0.1s;
          transition-duration: 0.1s;
}
button .btn {
  position: relative;
  padding: 0px 8px;
  z-index: 2;
}
button .ink-visual-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 2px;
  z-index: 1;
}
button .ink-visual-container .ink-visual-static {
  position: static;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 2px;
}
button .ink-visual-container .ink-visual {
  -webkit-animation: ink-visual-show 0.25s cubic-bezier(0.25, 0.5, 0.5, 1);
          animation: ink-visual-show 0.25s cubic-bezier(0.25, 0.5, 0.5, 1);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 1;
  z-index: -1;
}
button .ink-visual-container .ink-visual.hide {
  -webkit-animation: ink-visual-show 0.25s cubic-bezier(0.25, 0.5, 0.5, 1), ink-visual-hide 0.5s cubic-bezier(0.25, 0.5, 0.5, 1);
          animation: ink-visual-show 0.25s cubic-bezier(0.25, 0.5, 0.5, 1), ink-visual-hide 0.5s cubic-bezier(0.25, 0.5, 0.5, 1);
}
button .ink-visual-container .ink-visual.hide.shown {
  -webkit-animation: ink-visual-show 0.25s cubic-bezier(0.25, 0.5, 0.5, 1), ink-visual-hide 0.15s cubic-bezier(0.25, 0.5, 0.5, 1);
          animation: ink-visual-show 0.25s cubic-bezier(0.25, 0.5, 0.5, 1), ink-visual-hide 0.15s cubic-bezier(0.25, 0.5, 0.5, 1);
}
button.float {
  -webkit-transition-property: box-shadow, background;
  transition-property: box-shadow, background;
  background-color: #40b31a;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25), 0px 0px 2px rgba(0, 0, 0, 0.125);
  color: white;
}
button.float:hover {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25), 0px 0px 4px rgba(0, 0, 0, 0.125);
  background-color: #5dbe3c;
}
button.float:active {
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25), 0px 0px 1px rgba(0, 0, 0, 0.125);
  background-color: #3ba518;
}
button.float:active {
  background-color: #5dbe3c;
}
button.float .ink-visual {
  background-color: #3ba518;
}
button.float {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  font-size: 40px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25), 0px 0px 2px rgba(0, 0, 0, 0.125);
  background-color: #333;
  float:right;
  cursor:pointer;
  margin-right:20px;
  margin-top:5px;
}
button.float:hover {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25), 0px 0px 4px rgba(0, 0, 0, 0.125);
  background-color: #333;
}
button.float:active {
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25), 0px 0px 1px rgba(0, 0, 0, 0.125);
  background-color: #555;
}
button.float:active {
  background-color: #333;
}
button.float .ink-visual-container {
  border-radius: 50%;
  -webkit-clip-path: circle();
          clip-path: circle();
}
button.float .ink-visual-static {
  border-radius: 50%;
}
button.float .ink-visual {
  background: #555;
}
            
          
!
            
              /*
	Problems i know that exist but i don't want to waste time with them (since it's just a playground):
	- When an entry title is big and needs a second line it overflows other stuff
	- the images takes a bit to load so dont rush opening the entry, no need to go into compressing
	- to remove an image from the input (while inserting an entry) just click the input and click cancel afterwards, the input keeps the file after inserting an entry, when you enter another entry the image will still be there for that new entry
*/
var daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
var MonthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

function Month(year, month, dates){
	this.date          = new Date(year,month,0);
	this.numberofdays  = this.date.getDate();
	this.numberofmonth = this.date.getMonth();
	this.nameofmonth   = MonthNames[this.date.getMonth()];
	this.firstday      = 1;
	this.year          = this.date.getFullYear();
	this.calendar      = generateCalendar(this.numberofdays, year, month-1, this.firstday, dates);
}

function Date2Day(year, month, day){
	return (new Date(year,month,day)).getDay();
}

function generateCalendar(numberofdays, year, month, day, dates){
	var WEEKDAY = daysOfWeek[Date2Day(year,month,day)];
	if(WEEKDAY in dates){
		dates[WEEKDAY].push(day);
	}else{
		dates[WEEKDAY] = [day];
	}
	day++;
	return day > numberofdays ? dates : generateCalendar(numberofdays, year, month, day, dates);
}
// to add a zero to the time when this is less than 10
function addZero(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}

function resetColors(){
	var defaultColor = {color:"#2980b9"};
	var color1       = {color:"#DB1B1B"};
	var color2       = {color:"#8BB929"};
	var color3       = {color:"#E4F111"};
	var color4       = {color:"#8129B9"};
	var color5       = {color:"#666666"};
	return {dColor:defaultColor, color1:color1, color2:color2, color3:color3, color4:color4, color5:color5};
}

Date.daysBetween = function( date1, date2 ) {
  var firstDate = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
  var secondDate = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
  var diference = (secondDate - firstDate) / 86400000;
  return Math.trunc(diference);
}

var Calendar = React.createClass({
	getInitialState: function(){return this.generateCalendar()},
	generateCalendar: function(){
		var today        = new Date();
		var present      = new Date();
		var month        = {};
		var entries      = [];
		var defaultColor = {color:"#2980b9"};
		var color1       = {color:"#DB1B1B"};
		var color2       = {color:"#8BB929"};
		var color3       = {color:"#E4F111"};
		var color4       = {color:"#8129B9"};
		var color5       = {color:"#666666"};
		var file 		 = {};
		month = new Month(today.getFullYear(), today.getMonth() + 1, month);
		return {dates:month, today:today, entry:'+', present:present, entries:entries, dColor:defaultColor, color1:color1, color2:color2, color3:color3, color4:color4, color5:color5, file:file};
	},
	update: function(direction){
		var month = {};
		if(direction == "left"){
			month = new Month(this.state.dates.date.getFullYear(), this.state.dates.date.getMonth(), month);
		}else{
			month = new Month(this.state.dates.date.getFullYear(), this.state.dates.date.getMonth() + 2, month);
		}
		this.state.currDay = "";
		this.state.currMonth = "";
		this.state.currYear = "";
		$(".float").removeClass('rotate');
		return this.setState({dates:month});
	},
	selectedDay: function(day){
		this.state.warning = "";
		var selected_day   = new Date();
		selected_day.setDate(day);
		var currentMonth   = this.state.dates.nameofmonth;
		var currentMonthN  = this.state.dates.numberofmonth;
		var currentYear    = this.state.dates.date.getFullYear();
		return this.setState({today:selected_day, currDay:day, currMonth:currentMonth, currYear:currentYear, currMonthN:currentMonthN});
	},
	returnPresent: function(){
		if($(".float").hasClass('rotate')){
			$(".float").removeClass('rotate');
			$("#add_entry").addClass('animated slideOutDown');
			window.setTimeout( function(){
                $("#add_entry").css('display','none');
            }, 500);
			$("#entry_name").val("");
		}
		var month            = {};
		var today            = new Date();
		month                = new Month(today.getFullYear(), today.getMonth() + 1, month);
		this.state.currDay   = "";
		this.state.currMonth = "";
		this.state.currYear  = "";
		$(".float").removeClass('rotate');
		return this.setState({dates:month, today:today});
	},
	addEntry: function(day){
		if(this.state.currDay){
			if($(".float").hasClass('rotate')){
				$(".float").removeClass('rotate');
				$(".entry").css('background', 'none');
				$("#open_entry").addClass('animated slideOutDown');
				$("#add_entry").addClass('animated slideOutDown');
				window.setTimeout( function(){
	                $("#add_entry").css('display','none');
	                $("#open_entry").css('display','none');
	            }, 700);
				$("#entry_name").val("");
				$("#all-day").prop('checked', false); // unchecks checkbox
				$("#not-all-day").css('display', 'block');
				$("#enter_hour").val("");
				$("#entry_location").val("");
				$("#entry_note").val("");
				// reset entry colors
				var resColor = new resetColors();
				return this.setState(resColor);
			}else{
				$(".float").addClass('rotate');
				$("#add_entry").removeClass('animated slideOutDown');
				$("#add_entry").addClass('animated slideInUp');
				$("#add_entry").css('display', 'block');
				window.setTimeout( function(){
	                $("#entry_name").focus();
	            }, 700);

			}
		}else{
			return this.setState({warning:"Select a day to make an entry!"});
		}
	},
	saveEntry: function(year, month, day){
		var entryName = $("#entry_name").val();
		if($.trim(entryName).length > 0){
			var entryTime = new Date();
			var entryDate = {year,month,day};
			$(".duration").css('background', 'none');
			if($("#all-day").is(':checked')){
				var entryDuration = "All day";
			}else if($("#enter_hour").val() && $("#enter_hour").val() >= 0 && $("#enter_hour").val() <= 24){
				var entryDuration = addZero($("#enter_hour").val());
			}else{
				$(".duration").css('background', '#F7E8E8');
				return 0;
			}
			if($("#entry_location").val()){
				var entryLocation = $("#entry_location").val();
			}else{var entryLocation = ""}
			if($("#entry_note").val()){
				var entryNote = $("#entry_note").val();
			}else{var entryNote = ""}

			var entryImg = this.state.file;
			var entryColor = this.state.dColor;
			var entry = {entryName,entryDate,entryTime,entryDuration,entryLocation,entryNote,entryColor, entryImg};
			this.state.entries.splice(0,0,entry);

			// clean and close entry page
			$(".float").removeClass('rotate');
			$("#add_entry").addClass('animated slideOutDown');
			window.setTimeout( function(){
	            $("#add_entry").css('display','none');
	        }, 700);
			$("#entry_name").val("");
			$("#all-day").prop('checked', false); // unchecks checkbox
			$("#not-all-day").css('display', 'block');
			$("#enter_hour").val("");
			$("#entry_location").val("");
			$("#entry_note").val("");
			// reset entry colors
			var resColor = new resetColors();

			return (this.setState({entries: this.state.entries}), this.setState(resColor));
		}
	},
	deleteEntry: function(e){
		this.state.entries.splice(e,1);
		$(".float").removeClass('rotate');
		$("#open_entry").addClass('animated slideOutDown');
		$("#add_entry").addClass('animated slideOutDown');
		window.setTimeout( function(){
            $("#add_entry").css('display','none');
            $("#open_entry").css('display','none');
        }, 700);
        $(".entry").css('background', 'none');
		$("#entry_name").val("");
		$("#all-day").prop('checked', false); // unchecks checkbox
		$("#not-all-day").css('display', 'block');
		$("#enter_hour").val("");
		$("#entry_location").val("");
		$("#entry_note").val("");
		var resColor = new resetColors();
		return (this.setState({entries: this.state.entries}), this.setState(resColor));
	},
	openEntry: function(entry, e){
		if($(".float").hasClass('rotate')){
			$(".float").removeClass('rotate');
			$("#open_entry").addClass('animated slideOutDown');
			window.setTimeout( function(){
                $("#open_entry").css('display','none');
            }, 700);
            $(".entry").css('background', 'none');
            $("#"+e).css('background', 'none');
		}else{
			window.setTimeout( function(){
               	$("#open_entry").removeClass('animated slideOutDown');
				$("#open_entry").addClass('animated slideInUp');
				$("#open_entry").css('display', 'block');
            }, 50);
			$(".float").addClass('rotate');
			$("#"+e).css('background', '#F1F1F1');
			return this.setState({openEntry: entry});
		}
	},
	setColor: function(color, state){
		switch(state){
			case 'color1':
				var changeColor = {color:this.state.dColor.color};
				var defColor = {color:color.color};
				return this.setState({dColor:defColor, color1:changeColor});
			break;
			case 'color2':
				var changeColor = {color:this.state.dColor.color};
				var defColor = {color:color.color};
				return this.setState({dColor:defColor, color2:changeColor});
			break;
			case 'color3':
				var changeColor = {color:this.state.dColor.color};
				var defColor = {color:color.color};
				return this.setState({dColor:defColor, color3:changeColor});
			break;
			case 'color4':
				var changeColor = {color:this.state.dColor.color};
				var defColor = {color:color.color};
				return this.setState({dColor:defColor, color4:changeColor});
			break;
			case 'color5':
				var changeColor = {color:this.state.dColor.color};
				var defColor = {color:color.color};
				return this.setState({dColor:defColor, color5:changeColor});
			break;
		}
	},
	handleImage: function(e){
		e.preventDefault();
	    let reader = new FileReader();
	    let file = e.target.files[0];
		if(file){
		    reader.onloadend = () => {
		    	var readerResult = reader.result;
		    	var img = {file,readerResult};
		      this.setState({file:img});
		  	}
		  	reader.readAsDataURL(file);
		}else{
			var img = {};
			this.setState({file:img});
		}
	},
	openMenu: function(){
		$("#menu").css('display', 'block');
		$("#menu-content").addClass('animated slideInLeft');
		$("#menu-content").css('display', 'block');
	},
	render: function(){
		var calendar = [];
		for(var property in this.state.dates.calendar){
			calendar.push(this.state.dates.calendar[property])
		}
		var weekdays = Object.keys(this.state.dates.calendar);
		var done = false;
		var count = 0;
		var daysBetween = '';
		if(this.state.openEntry){
			var selectdDate = new Date(this.state.openEntry.entryDate.year, this.state.openEntry.entryDate.month, this.state.openEntry.entryDate.day);
			if(selectdDate > this.state.present){
				daysBetween = Date.daysBetween(this.state.present, selectdDate);
				if(daysBetween == 1){daysBetween = "Tomorrow"}else{daysBetween = daysBetween + " days to go";}
			}else if(selectdDate < this.state.present){
				daysBetween = Date.daysBetween(selectdDate, this.state.present);
				if(daysBetween == 1){daysBetween = "Yesterday"}else{daysBetween = daysBetween + " days ago";}
			}
			if(this.state.present.getDate() === this.state.openEntry.entryDate.day && this.state.present.getMonth() === this.state.openEntry.entryDate.month && this.state.present.getFullYear() === this.state.openEntry.entryDate.year){
				daysBetween = "Today";
			}
		}
		return(
			<div>
				<div id="calendar">
					<div id="menu">
						<div id="menu-content">
							<div className="madeBy">
								<div className="madeOverlay">
									<span id="madeName">Ricardo Barbosa</span>
									<span id="madeInfo">WebDeveloper - Portugal</span>
									<span id="madeWeb"><a target="_blank" href="https://github.com/RicardoPBarbosa"><i className="fa fa-github" aria-hidden="true"></i> GitHub</a></span>
									<span id="madeWeb"><a target="_blank" href="https://codepen.io/RicardoBarbosa/"><i className="fa fa-codepen" aria-hidden="true"></i> CodePen</a></span>
								</div>
								<img src="https://imgur.com/LOaisfQ.jpg" width="260" height="200" />
							</div>
						</div>
						<div id="click-close"></div>
					</div>
					<div id="header">
						<i className="fa fa-bars" aria-hidden="true" onClick={this.openMenu}></i>
						<p>{this.state.dates.nameofmonth} {this.state.dates.year}</p>
						<div><i onClick={this.returnPresent} className="fa fa-calendar-o" aria-hidden="true"><span>{this.state.present.getDate()}</span></i></div>
						<i className="fa fa-search" aria-hidden="true"></i>
					</div>
					<div id="add_entry">
						<div className="enter_entry">
							<input type="text" placeholder="Enter title" id="entry_name" />
							<span id="save_entry" onClick={this.saveEntry.bind(null, this.state.currYear, this.state.currMonthN, this.state.currDay)}>SAVE</span>
						</div>
						<div className="entry_details">
							<div>
								<div className="entry_info first">
									<i className="fa fa-image" aria-hidden="true"></i>
									<input type="file" name='entry-img' id="entry-img" onChange={(e)=>this.handleImage(e)} />
									<label htmlFor="entry-img" id="for_img"><span id="file_name">Choose an image</span></label>
									<span id="remove_img">Remove</span>
								</div>
								<div className="entry_info2 first second duration">
									<i className="fa fa-clock-o" aria-hidden="true"></i>
									<input className='toggle' type="checkbox" name='all-day' id="all-day" />
									<p>All-day</p>
									<div id="not-all-day">
										<p id="select_hour">Select hour</p>
										<p id="hour"><input type="number" id="enter_hour" min="0" max="24" /> h</p>
									</div>
								</div>
								<div className="entry_info2">
									<i className="fa fa-map-marker" aria-hidden="true"></i>
									<input type="text" placeholder="Add location" id="entry_location" />
								</div>
								<div className="entry_info2">
									<i className="fa fa-pencil" aria-hidden="true"></i>
									<textarea id="entry_note" cols="35" rows="2" placeholder="Add note"></textarea>
								</div>
								<div className="entry_info colors">
									<i className="fa fa-circle" aria-hidden="true" id="blue" style={this.state.dColor} ></i>
									<p id="defColor">Default color</p>
									<div>
										<span><i onClick={this.setColor.bind(null, this.state.color1, "color1")} className="fa fa-circle" aria-hidden="true" style={this.state.color1}></i></span>
										<span><i onClick={this.setColor.bind(null, this.state.color2, "color2")} className="fa fa-circle" aria-hidden="true" style={this.state.color2}></i></span>
										<span><i onClick={this.setColor.bind(null, this.state.color3, "color3")} className="fa fa-circle" aria-hidden="true" style={this.state.color3}></i></span>
										<span><i onClick={this.setColor.bind(null, this.state.color4, "color4")} className="fa fa-circle" aria-hidden="true" style={this.state.color4}></i></span>
										<span><i onClick={this.setColor.bind(null, this.state.color5, "color5")} className="fa fa-circle" aria-hidden="true" style={this.state.color5}></i></span>
									</div>
								</div>
							</div>
						</div>
					</div>
					{this.state.openEntry ?
						<div id="open_entry">
							<div className="entry_img" style={{backgroundColor:this.state.openEntry.entryColor.color}}>
								<div className="overlay"><div>
									<p>
										<span id="entry_title">{this.state.openEntry.entryName}</span>
										<span id="entry_times">{daysBetween} {this.state.openEntry.entryDuration === "All day" ? "| All day" : "at " + this.state.openEntry.entryDuration + ":00" }</span>
									</p>
								</div></div>
								<img src={this.state.openEntry.entryImg.readerResult} width="400px" height="300px" />
							</div>
							<div className="entry openedEntry"><div>
								<i className="fa fa-map-marker" aria-hidden="true"></i> {this.state.openEntry.entryLocation ? this.state.openEntry.entryLocation : <span>No location</span>}
							</div></div>
							<div className="entry openedEntry noteDiv"><div>
								<i className="fa fa-pencil" aria-hidden="true"></i> {this.state.openEntry.entryNote ? <span id="note">{this.state.openEntry.entryNote}</span> : <span>No description</span>}
							</div></div>
						</div>
					: null}
					<div id="arrows">
						<i className="fa fa-arrow-left" aria-hidden="true" onClick={this.update.bind(null,"left")}></i>
						<i className="fa fa-arrow-right" aria-hidden="true" onClick={this.update.bind(null,"right")}></i>
					</div>
					<div id="dates">
						{calendar.map(function(week, i){
							return (
								<div key={i}>
									<p className="weekname">{weekdays[i].substring(0,3)}</p>
									<ul>
										{week.map(function(day, k){
											var existEntry = {};
											{this.state.entries.map(function(entry, e){
												if(entry.entryDate.day == day && entry.entryDate.month == this.state.dates.numberofmonth && entry.entryDate.year == this.state.dates.year){
													existEntry = {borderWidth:"2px", borderStyle:"solid", borderColor:"#8DBEDE"};
													return;
												}
											}.bind(this))}
											return <li className={day === this.state.today.getDate() ? "today" : null} key={k} style={existEntry} onClick={this.selectedDay.bind(null, day)}>{day}</li>
										}.bind(this))}
									</ul>
								</div>
							)
						}.bind(this))}
					</div>
							
					{this.state.warning ? 
						<div className="warning">
							{this.state.warning}
						</div>
					: null }
					<div id="ignoreOverflow"><button className="float" onClick={this.addEntry.bind(null, this.state.today.getDate())}>{this.state.entry}</button></div>
				</div>
				{this.state.currDay ? 
					<div id="entries">
						<div className="contain_entries">
							<div id="entries-header">
								<p className="entryDay">{this.state.currDay} {this.state.currMonth}</p>
								{this.state.present.getDate() === this.state.currDay && this.state.present.getMonth() === this.state.currMonthN && this.state.present.getFullYear() === this.state.currYear ? <p className="currday">TODAY</p> : null}
							</div>
							{this.state.entries != '' ?
								<div>
									{this.state.entries.map(function(entry, e){
										count++;
										var entryFromThisDate = (entry.entryDate.day === this.state.currDay && entry.entryDate.month === this.state.currMonthN && entry.entryDate.year === this.state.currYear ? true : false);
										if(entryFromThisDate){
											// prevent the "no-entries" div to appear in the next entries that are not from this day
											done = true;
											var style = {borderLeftColor:entry.entryColor.color, borderLeftWidth:"4px", borderLeftStyle:"solid"};
											return (
												<div className="entry" id={e} key={e}>
													<div style={style}>
														<div className="entry_left" onClick={this.openEntry.bind(null, entry, e)}>
															<p className="entry_event">{entry.entryName}</p>
															<p className="entry_time">{entry.entryDuration === "All day" ? "All day" : entry.entryDuration + " h" } {entry.entryLocation ? " | " + entry.entryLocation : null}</p>
														</div>
														<div className="delete_entry">
															<i className="fa fa-times" aria-hidden="true" onClick={this.deleteEntry.bind(null,e)}></i>
														</div>
													</div>
												</div>
											)
										}
										if(count === this.state.entries.length){
											if(!done){
												done = true;
												return (
													<div className="no-entries" key={e}>
														<i className="fa fa-calendar-check-o" aria-hidden="true"></i>
														<span>No events planned for today</span>
													</div>
												)
											}
										}
									}.bind(this))}
								</div>
							: 	<div className="no-entries">
									<i className="fa fa-calendar-check-o" aria-hidden="true"></i>
									<span>No events planned for today</span>
								</div>
							}
						</div>
					</div>
				: null}
			</div>
		)
	}
})
ReactDOM.render(<Calendar />, document.getElementById("app"));

(function($, undefined) {
	$("#all-day").click(function(){
		if(this.checked){
			$("#not-all-day").css('display', 'none');
		}else{
			$("#not-all-day").css('display', 'block');
		}
	});

	$("#click-close").click(function(){
		$("#menu-content").removeClass('animated slideInLeft');
		$("#menu-content").addClass('animated slideOutLeft');
		window.setTimeout( function(){
            $("#menu").css('display', 'none');
			$("#menu-content").css('display', 'none');
			$("#menu-content").removeClass('animated slideOutLeft');
        }, 750);
	});
	
	$("#entry-img").bind( 'change', function( e ){
		var label	 = this.nextElementSibling;
		var fileName = '';
		if(this.files){
			fileName = e.target.value.split( '\\' ).pop();
		}else{
			fileName = '';
		}
		if( fileName != '' ){
			label.querySelector( 'span' ).innerHTML = fileName;
		}else{
			label.querySelector( 'span' ).innerHTML = "Choose an image";
		}
	});

  function hypot(x, y) { return Math.sqrt((x * x) + (y * y)); }

  $("button").each(function(el) {
    var self = $(this),
        html = self.html();

    self.html("").append($('<div class="btn"/>').html(html));
  })
  .append($('<div class="ink-visual-container"/>').append($('<div class="ink-visual-static"/>')))

  .on("mousedown touchstart", function(evt) {
    event.preventDefault();
    
    var self = $(this),
        container = self.find(".ink-visual-static", true).eq(0);

    if(!container.length) return;

    container.find(".ink-visual").addClass("hide");
    
    var rect = this.getBoundingClientRect(),
        cRect = container[0].getBoundingClientRect(),
        cx, cy, radius, diam;

        if (event.changedTouches) {
          cx = event.changedTouches[0].clientX;
          cy = event.changedTouches[0].clientY;
        }
        else {
          cx = event.clientX;
          cy = event.clientY;
        }

    if(self.is(".float")) {
      var rx = rect.width / 2,
          ry = rect.height / 2,
          br = (rx + ry) / 2,
          mx = rect.left + rx,
          my = rect.top + ry;

      radius = hypot(cx - mx, cy - my) + br;
    }
    diam = radius * 2;
        
    var el = $('<div class="ink-visual"/>').width(diam).height(diam)
    .css("left", cx - cRect.left - radius).css("top", cy - cRect.top - radius)
    
    .on("animationend webkitAnimationEnd oanimationend MSAnimationEnd", function() {
      var self2 = $(this);

      switch(event.animationName) {
        case "ink-visual-show":
          if (self.is(":active")) self2.addClass("shown");
          break;

        case "ink-visual-hide":
          self2.remove();
          break;
      }
    })
    
    .on("touchend", function() { event.preventDefault(); });

    container.append(el);
  });

  $(window).on("mouseup touchend", function(evt) {
    $(".ink-visual-static").children(".ink-visual").addClass("hide");
  })
  .on("select selectstart", function(evt) { event.preventDefault(); return false; });
}(jQuery))
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console