<!DOCTYPEhtml><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()'>navigate_before</i><h1>{{calendar.month}}</h1><iclass='material-icons'ng-click='calendar.next()'>navigate_next</i></div><divclass='days'><divclass='day_item'>Mon</div><divclass='day_item'>Tue</div><divclass='day_item'>Wed</div><divclass='day_item'>Thu</div><divclass='day_item'>Fri</div><divclass='day_item'>Sat</div><divclass='day_item'>Sun</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'>It's a {{ events.type }} thing -</span><spanclass='description'>{{ events.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'>Social</option><optionvalue='Work'>Work</option></select></input></form></div></div><!-- partial --><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);functioncalendarController($scope){var vm =this,
now =newDate(),
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;// 把日期放在正确的地方functionplaceIt(){if(month ===0){$(".date_item").first().css({'margin-left':'200px'})}elseif(month ===1){$("date_item").first().css({'margin-left':'0px'})}elseif(month ===2){$(".date_item").first().css({'margin-left':'150px'})}elseif(month ===3){$(".date_item").first().css({'margin-left':'300px'})}elseif(month ===4){$(".date_item").first().css({'margin-left':'400px'})}elseif(month ===5){$(".date_item").first().css({'margin-left':'200px'})}elseif(month ===6){$(".date_item").first().css({'margin-left':'300px'})}elseif(month ===7){$(".date_item").first().css({'margin-left':'100px'})}elseif(month ===8){$(".date_item").first().css({'margin-left':'250px'})}elseif(month ===9){$(".date_item").first().css({'margin-left':'350px'})}elseif(month ===10){$(".date_item").first().css({'margin-left':'150px'})}elseif(month ===11){$(".date_item").first().css({'margin-left':'250px'})}}// 突出今天functionpresentDay(){$(".date_item").eq(n -1).addClass("present");}// 打印当前月份的日期列表functionshowDays(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>");}}// 获取当前日期functiondaysInMonth(month, year){returnnewDate(year, month,0).getDate()+1;}// 下个月functionnext(){if(month <11){
month++;$(".dates").html('');
vm.month = months[month];
monthDay = monthRef[month];showDays(monthDay);placeIt();}}// 前一个月functionprev(){if(month ===0){returnfalse}else{
month--;$(".dates").html('');
vm.month = months[month];
monthDay = monthRef[month];showDays(monthDay);placeIt();}}// 将事件添加到指定日期functionadd(){
vm.events.push({id: vm.id,description: vm.description,type: vm.type
});
vm.description ="";}// 获取每个日期项的唯一ID$(".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();}})();
作者：来自 Elastic Sherry Ger, Stephen Brown
对于许多企业来说，搜索卓越中心（center of excellence - COE）向其用户提供搜索服务，从不同的数据源中整理知识，并将搜索功能集成到其内部和外部应用程序中。…
