Material Design Styles
parent
b90d125e92
commit
e6497a0712
|
|
@ -0,0 +1,168 @@
|
|||
/* Material Design CSS for calendar.js, version: 2018-03-14 */
|
||||
.calendar-box {
|
||||
display: none;
|
||||
width: 301px;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
padding: 0;
|
||||
font-family: Roboto, sans-serif;
|
||||
box-shadow: 0 19px 60px rgba(0, 0, 0, .3), 0 15px 20px rgba(0, 0, 0, .22)
|
||||
}
|
||||
.calendar-box select.calendar-month {
|
||||
width: 90px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.calendar-box select.calendar-year {
|
||||
width: 70px;
|
||||
}
|
||||
.calendar-box .calendar-cancel {
|
||||
font-family: Roboto, sans-serif;
|
||||
font-size: 15px;
|
||||
border: 0;
|
||||
width: auto;
|
||||
margin: 10px;
|
||||
padding: 0 12px;
|
||||
float: right;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
text-transform: uppercase;
|
||||
height: 36px;
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
line-height: 36px;
|
||||
cursor: pointer;
|
||||
transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
}
|
||||
.calendar-box .calendar-cancel:hover {
|
||||
background: rgba(0, 0, 0, 0.14);
|
||||
}
|
||||
.calendar-box table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
font-weight: normal;
|
||||
font-size: 13px;
|
||||
}
|
||||
.calendar-box td.months, .calendar-box td.years {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
.calendar-box td.months a, .calendar-box td.years a {
|
||||
text-decoration: none;
|
||||
line-height: 42px;
|
||||
height: 43px;
|
||||
display: block;
|
||||
padding-right: 1px;
|
||||
box-sizing: border-box;
|
||||
color: #777;
|
||||
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
}
|
||||
.calendar-box td.days {
|
||||
width: 43px;
|
||||
height: 43px;
|
||||
padding: 3px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
.calendar-box td.days a {
|
||||
text-decoration: none;
|
||||
line-height: 36px;
|
||||
height: 37px;
|
||||
width: 37px;
|
||||
display: block;
|
||||
padding-right: 1px;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
color: #777;
|
||||
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
}
|
||||
.calendar-box td a:hover {
|
||||
background: rgba(3, 169, 244, 0.3);
|
||||
}
|
||||
.calendar-box td.selected a {
|
||||
background: rgb(3, 169, 244);
|
||||
color: white;
|
||||
}
|
||||
.calendar-box td.days.today a {
|
||||
border: 1px solid rgb(3, 169, 244);
|
||||
}
|
||||
.calendar-box td.days.today a:hover {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.calendar-box tr.header td {
|
||||
color: #aaa;
|
||||
text-transform: uppercase;
|
||||
width: 43px;
|
||||
height: 43px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
.calendar-box td { background: #f4f6f8; }
|
||||
.calendar-box td.future { color: #606060; }
|
||||
.calendar-box .calendar-title {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
padding: 10px 56px;
|
||||
background: #03a9f4;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 36px;
|
||||
color: white;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.calendar-box .calendar-title a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
text-transform: uppercase;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
}
|
||||
|
||||
.calendar-box .calendar-title a:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.calendar-box .calendar-title a.prev {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
padding: 0;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.calendar-box .calendar-title a.next {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
padding: 0;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.calendar-box .calendar-title a.prev:after {
|
||||
content: "chevron_left";
|
||||
}
|
||||
|
||||
.calendar-box .calendar-title a.next:after {
|
||||
content: "chevron_right";
|
||||
}
|
||||
|
||||
.calendar-box .calendar-title a.prev:after,
|
||||
.calendar-box .calendar-title a.next:after {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
display: inline-block;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-feature-settings: 'liga';
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
}
|
||||
.calendar-box select.calendar-month { width: 9 0px; margin-right: 3px; }
|
||||
.calendar-box select.calendar-year { width: 70px; }
|
||||
.calendar-box .calendar-cancel { width: 100%; }
|
||||
.calendar-box .calendar-cancel { display: block; text-align: center; cursor: pointer; margin: 2px; }
|
||||
.calendar-box table td { width: 14%; text-align: center; }
|
||||
.calendar-box a { text-decoration: none; display: block; padding: 5px; }
|
||||
.calendar-box a:hover { background: #e8ffd0; }
|
||||
|
|
@ -20,3 +20,5 @@
|
|||
.calendar-box .selected { background-color: #c9ff8b; }
|
||||
.calendar-box .calendar-title { text-align: center; white-space: nowrap; }
|
||||
.calendar-box .calendar-title a { display: inline-block; padding: 3px 7px; border: 1px solid #d0d2d4; background: #eef0f2; }
|
||||
.calendar-box .calendar-title a.prev:before { content: "<"; }
|
||||
.calendar-box .calendar-title a.next:before { content: ">"; }
|
||||
|
|
|
|||
16
calendar.js
16
calendar.js
|
|
@ -41,7 +41,7 @@ window.Calendar = {
|
|||
this.data.push(txt);
|
||||
},
|
||||
fin:function() {
|
||||
this.wrt("<input type='button' value='"+this.close_label+"' class='calendar-cancel' onclick='Calendar.hideCalendar();' />");
|
||||
this.wrt("<a class='calendar-cancel' onclick='Calendar.hideCalendar();'>"+this.close_label+"</a>");
|
||||
document.getElementById(this.opt['calendar']).innerHTML = this.data.join("");
|
||||
this.data = [];
|
||||
},
|
||||
|
|
@ -61,9 +61,9 @@ window.Calendar = {
|
|||
var cur_m = this.today.getMonth();
|
||||
var sel_m = this.selected.getFullYear() == year ? this.selected.getMonth() : -1;
|
||||
this.wrt("<table>");
|
||||
this.wrt("<tr><th colspan='4' class='calendar-title'><a href='javascript:Calendar.showMonths("+(year-1)+")' title='"+(year-1)+"'><</a>");
|
||||
this.wrt("<tr><th colspan='4' class='calendar-title'><a href='javascript:Calendar.showMonths("+(year-1)+")' title='"+(year-1)+"' class='prev'></a>");
|
||||
this.wrt(" <a href='javascript:Calendar.showYears("+year+")'>"+year+"</a>");
|
||||
this.wrt(" <a href='javascript:Calendar.showMonths("+(year+1)+")' title='"+(year+1)+"'>></a></th></tr>");
|
||||
this.wrt(" <a href='javascript:Calendar.showMonths("+(year+1)+")' title='"+(year+1)+"' class='next'></a></th></tr>");
|
||||
this.wrt("<tr>");
|
||||
for (var i in this.month_names) {
|
||||
if (i && !(i % 3))
|
||||
|
|
@ -84,9 +84,9 @@ window.Calendar = {
|
|||
var sel_y = this.selected.getFullYear();
|
||||
this.wrt("<table>");
|
||||
this.wrt("<tr><th colspan='4' class='calendar-title'>");
|
||||
this.wrt(" <a href='javascript:Calendar.showYears("+(year-16)+");' title='"+(beg-16)+" - "+(beg-1)+"'><</a>");
|
||||
this.wrt(" <a href='javascript:Calendar.showYears("+(year-16)+");' title='"+(beg-16)+" - "+(beg-1)+"' class='prev'></a>");
|
||||
this.wrt(" <b>"+beg+" - "+(beg+15)+"</b>");
|
||||
this.wrt(" <a href='javascript:Calendar.showYears("+(year+16)+");' title='"+(beg+16)+" - "+(beg+31)+"'>></a>");
|
||||
this.wrt(" <a href='javascript:Calendar.showYears("+(year+16)+");' title='"+(beg+16)+" - "+(beg+31)+"' class='next'></a>");
|
||||
this.wrt("</th></tr>");
|
||||
this.wrt("<tr>");
|
||||
for (var i = 0; i < 16; i++) {
|
||||
|
|
@ -121,7 +121,7 @@ window.Calendar = {
|
|||
var current_year = this.today.getFullYear();
|
||||
|
||||
this.wrt("<table>");
|
||||
this.wrt("<tr><th colspan='7' class='calendar-title'><a href='javascript:Calendar.makeCalendar("+previous_month_year+","+previous_month+");' title='"+this.month_names[previous_month]+" "+(previous_month_year)+"'><</a>");
|
||||
this.wrt("<tr><th colspan='7' class='calendar-title'><a href='javascript:Calendar.makeCalendar("+previous_month_year+","+previous_month+");' title='"+this.month_names[previous_month]+" "+(previous_month_year)+"' class='prev'></a>");
|
||||
if (!this.selectboxes) {
|
||||
this.wrt(" <a href='javascript:Calendar.showMonths("+year+", "+month+")'>"+this.month_names[month]+"</a>");
|
||||
this.wrt(" <a href='javascript:Calendar.showYears("+year+")'>"+year+"</a>");
|
||||
|
|
@ -141,7 +141,7 @@ window.Calendar = {
|
|||
}
|
||||
this.wrt("</select>");
|
||||
}
|
||||
this.wrt(" <a href='javascript:Calendar.makeCalendar("+next_month_year+","+next_month+");' title='"+this.month_names[next_month]+" "+next_month_year+"'>></a></th></tr>");
|
||||
this.wrt(" <a href='javascript:Calendar.makeCalendar("+next_month_year+","+next_month+");' title='"+this.month_names[next_month]+" "+next_month_year+"' class='next'></a></th></tr>");
|
||||
this.wrt("<tr class='header'>");
|
||||
for (var weekday = 0; weekday < 7; weekday++)
|
||||
this.wrt("<td>"+this.weekdays[weekday]+"</td>");
|
||||
|
|
@ -199,7 +199,7 @@ window.Calendar = {
|
|||
|
||||
class_name += " " + this.weekdays[j].toLowerCase();
|
||||
|
||||
this.wrt("<td class='days"+class_name+"'><a href='javascript:Calendar.selectDate(\""+year+"\",\""+mon+"\",\""+w+"\")'>"+w+"</a></td>");
|
||||
this.wrt("<td class='days"+class_name+"'><a href='javascript:Calendar.selectDate(\""+year+"\",\""+mon+"\",\""+w+"\")'>"+d+"</a></td>");
|
||||
d++;
|
||||
}
|
||||
else
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<link rel="stylesheet" href="calendar-material.css">
|
||||
<script src="calendar.util.js"></script>
|
||||
<script src="calendar.js"></script>
|
||||
|
||||
<input id="x" style="margin: 50px">
|
||||
<script>
|
||||
Calendar.set(document.getElementById('x'));
|
||||
</script>
|
||||
Loading…
Reference in New Issue