<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < linkhref = ' https://fonts.googleapis.com/css?family=Montserrat:700,400' rel = ' stylesheet' type = ' text/css' > < linkhref = " https://fonts.googleapis.com/icon?family=Material+Icons" rel = " stylesheet" > < linkrel = " stylesheet" href = " ./style.css" > </ head> < body> < htmlng-app = ' calendarApp' ng-cloak = ' true' > </ html> < divclass = ' calendar' ng-controller = ' calendarController as calendar' > < divclass = ' calendar_left' > < divclass = ' header' > < iclass = ' material-icons' ng-click = ' calendar.prev()' > </ i> < h1> </ h1> < iclass = ' material-icons' ng-click = ' calendar.next()' > </ i> </ div> < divclass = ' days' > < divclass = ' day_item' > </ div> < divclass = ' day_item' > </ div> < divclass = ' day_item' > </ div> < divclass = ' day_item' > </ div> < divclass = ' day_item' > </ div> < divclass = ' day_item' > </ div> < divclass = ' day_item' > </ div> </ div> < divclass = ' dates' > </ div> </ div> < divclass = ' calendar_right' > < divclass = ' list' > < ul> < liclass = ' bounce-in' ng-repeat = ' events in calendar.events' ng-show = ' events.id === calendar.dataId' > < spanclass = ' type' > </ span> < spanclass = ' description' > </ span> </ li> </ ul> </ div> < formng-submit = ' calendar.add()' > < inputng-model = ' calendar.description' placeholder = ' Enter a task for this day' type = ' text' > < selectng-model = ' calendar.type' placeholder = ' calendar.type' > < optionvalue = ' Social' > </ option> < optionvalue = ' Work' > </ option> </ select> </ input> </ form> </ div> </ div> < scriptsrc = ' https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js' > </ script> < scriptsrc = ' https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js' > </ script> < scriptsrc = ' https://code.angularjs.org/1.8.2/angular-animate.js' > </ script> < scriptsrc = " ./script.js" > </ script> </ body> </ html> ( function ( ) { angular. module ( 'calendarApp' , [ 'ngAnimate' ] ) . controller ( 'calendarController' , calendarController) ; function calendarController ( $scope ) { var vm = this , now = new Date ( ) , months = [ 'January' , 'February' , 'March' , 'April' , 'May' , 'June' , 'July' , 'August' , 'September' , 'October' , 'November' , 'December' ] , jan = daysInMonth ( 1 , now. getFullYear ( ) ) , feb = daysInMonth ( 2 , now. getFullYear ( ) ) , mar = daysInMonth ( 3 , now. getFullYear ( ) ) , apr = daysInMonth ( 4 , now. getFullYear ( ) ) , may = daysInMonth ( 5 , now. getFullYear ( ) ) , jun = daysInMonth ( 6 , now. getFullYear ( ) ) , jul = daysInMonth ( 7 , now. getFullYear ( ) ) , aug = daysInMonth ( 8 , now. getFullYear ( ) ) , sep = daysInMonth ( 9 , now. getFullYear ( ) ) , oct = daysInMonth ( 10 , now. getFullYear ( ) ) , nov = daysInMonth ( 11 , now. getFullYear ( ) ) , dec = daysInMonth ( 12 , now. getFullYear ( ) ) , monthRef = [ jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] , month = now. getMonth ( ) , monthDay = monthRef[ now. getMonth ( ) ] , n = now. getDate ( ) , uidi, uidm, uid; vm. id = now. getDate ( ) . toString ( ) + now. getMonth ( ) . toString ( ) ; vm. dataId; vm. events = [ ] ; vm. description; vm. type = 'Social' ; vm. month = months[ month] ; vm. next = next; vm. prev = prev; vm. add = add; function placeIt ( ) { if ( month === 0 ) { $ ( ".date_item" ) . first ( ) . css ( { 'margin-left' : '200px' } ) } else if ( month === 1 ) { $ ( "date_item" ) . first ( ) . css ( { 'margin-left' : '0px' } ) } else if ( month === 2 ) { $ ( ".date_item" ) . first ( ) . css ( { 'margin-left' : '150px' } ) } else if ( month === 3 ) { $ ( ".date_item" ) . first ( ) . css ( { 'margin-left' : '300px' } ) } else if ( month === 4 ) { $ ( ".date_item" ) . first ( ) . css ( { 'margin-left' : '400px' } ) } else if ( month === 5 ) { $ ( ".date_item" ) . first ( ) . css ( { 'margin-left' : '200px' } ) } else if ( month === 6 ) { $ ( ".date_item" ) . first ( ) . css ( { 'margin-left' : '300px' } ) } else if ( month === 7 ) { $ ( ".date_item" ) . first ( ) . css ( { 'margin-left' : '100px' } ) } else if ( month === 8 ) { $ ( ".date_item" ) . first ( ) . css ( { 'margin-left' : '250px' } ) } else if ( month === 9 ) { $ ( ".date_item" ) . first ( ) . css ( { 'margin-left' : '350px' } ) } else if ( month === 10 ) { $ ( ".date_item" ) . first ( ) . css ( { 'margin-left' : '150px' } ) } else if ( month === 11 ) { $ ( ".date_item" ) . first ( ) . css ( { 'margin-left' : '250px' } ) } } function presentDay ( ) { $ ( ".date_item" ) . eq ( n - 1 ) . addClass ( "present" ) ; } function showDays ( days ) { for ( var i = 1 ; i < days; i++ ) { var uidi = i; var uidm = month; var uid = uidi. toString ( ) + uidm. toString ( ) ; $ ( ".dates" ) . append ( "<div class='date_item' data='" + uid + "'>" + i + "</div>" ) ; } } function daysInMonth ( month, year ) { return new Date ( year, month, 0 ) . getDate ( ) + 1 ; } function next ( ) { if ( month < 11 ) { month++ ; $ ( ".dates" ) . html ( '' ) ; vm. month = months[ month] ; monthDay = monthRef[ month] ; showDays ( monthDay) ; placeIt ( ) ; } } function prev ( ) { if ( month === 0 ) { return false } else { month-- ; $ ( ".dates" ) . html ( '' ) ; vm. month = months[ month] ; monthDay = monthRef[ month] ; showDays ( monthDay) ; placeIt ( ) ; } } function add ( ) { vm. events. push ( { id : vm. id, description : vm. description, type : vm. type} ) ; vm. description = "" ; } $ ( ".dates" ) . on ( "click" , ".date_item" , function ( ) { vm. id = $ ( this ) . attr ( 'data' ) ; vm. dataId = $ ( this ) . attr ( 'data' ) ; $ ( this ) . addClass ( "present" ) . siblings ( ) . removeClass ( "present" ) ; $scope. $apply ( ) ; } ) ; showDays ( monthDay) ; presentDay ( ) ; placeIt ( ) ; } } ) ( ) ;
* { margin : 0; padding : 0; box-sizing : border-box; font-family : "Montserrat" , sans-serif;
} html, body { background : #f7f8fb;
} .calendar { display : flex; justify-content : center; align-items : center; height : 100vh;
}
.calendar_left { background : linear-gradient ( #c4f185, #86d2f3) ; width : 400px; height : 415px; border-top-left-radius : 5px; border-bottom-left-radius : 5px; padding : 1.5em; z-index : 1;
}
.calendar_left .header { display : flex; justify-content : space-around; margin-bottom : 2em; color : #FFF; font-size : 0.7em;
}
.calendar_left .header h1 { line-height : 1em;
}
.calendar_left .header i { cursor : pointer;
}
.calendar_right { background : linear-gradient ( #c4f185, #86d2f3) ; width : 350px; height : 415px; border-top-right-radius : 5px; border-bottom-right-radius : 5px; position : relative; transform : scale ( 0.95) translateX ( -10px) ; z-index : 0;
}
.calendar_right .list { height : 351px; overflow-y : scroll; padding : 1em;
}
.calendar_right .list ul { padding : 2.25em;
}
.calendar_right .list li { padding : 1em; width : 180px; color : #FFF; transform : translateX ( -700px) ;
}
.calendar_right .list .description { font-size : 12px;
}
.calendar_right form { position : absolute; bottom : 0; display : flex; width : 100%; display : flex; flex-flow : row wrap;
}
.calendar_right input { background : #68c9f0; border : none; padding : 1.2em; flex : 2; outline : none; color : #FFF; border-bottom-right-radius : 5px;
}
.calendar_right select { background : #5d97ad; border : none; padding : 1.2em; outline : none; color : #FFF; border-top-left-radius : 0; border-top-right-radius : 0; border-bottom-left-radius : 0; border-bottom-right-radius : 5px; -webkit-appearance : none; -moz-appearance : none; appearance : none;
} .days { display : flex; justify-content : flex-start; width : 400px;
}
.days .day_item { color : #FFF; width : 50px; text-align : center; padding-bottom : 1em;
} .dates { display : flex; justify-content : flex-start; flex-flow : row wrap; width : 350px;
}
.dates .date_item { color : #FFF; width : 50px; text-align : center; height : 50px; padding : 1em; cursor : pointer; border-radius : 100%;
} .present { background : #FFF; transform : scale ( 0.7) ; border-radius : 50px; padding : 0.95em !important ; color : #6bc5e9 !important ; z-index : 0; box-shadow : 10px 10px 5px #7acbeb; -webkit-animation : bounce-button-in 0.45s 0s cubic-bezier ( 0.175, 0.885, 0.32, 1.275) forwards; animation : bounce-button-in 0.45s 0s cubic-bezier ( 0.175, 0.885, 0.32, 1.275) forwards;
} ::-webkit-scrollbar { display : none;
} ::-webkit-input-placeholder { color : #FFF;
} .bounce-in.ng-animate { -webkit-animation : none 0s; animation : none 0s;
} .bounce-in { -webkit-animation : bounce-in 0.9s 0s cubic-bezier ( 0.175, 0.885, 0.32, 1.275) forwards; animation : bounce-in 0.9s 0s cubic-bezier ( 0.175, 0.885, 0.32, 1.275) forwards;
} @-webkit-keyframes bounce-in{ 50% { transform : translateX ( 0) ; } 75% { transform : translateX ( 7px) ; } 100% { transform : translateX ( 2px) ; }
} @keyframes bounce-in{ 50% { transform : translateX ( 0) ; } 75% { transform : translateX ( 7px) ; } 100% { transform : translateX ( 2px) ; }
}
@-webkit-keyframes bounce-button-in{ 0% { transform : translateZ ( 0) scale ( 0) ; } 100% { transform : translateZ ( 0) scale ( 0.7) ; }
}
@keyframes bounce-button-in{ 0% { transform : translateZ ( 0) scale ( 0) ; } 100% { transform : translateZ ( 0) scale ( 0.7) ; }
}
