calendar 副本 | 程式專案 | 橘蘋學習平台

{"id":197268,"student_id":12205,"content":"{\"html\":\"\u003chtml lang=\\\"zh-TW\\\"\u003e\\n\u003chead\u003e\\n\\n\\t\u003cmeta charset=\\\"UTF-8\\\"\u003e\\n\\t\u003ctitle\u003eCalendar\u003c/title\u003e\\n\\t\\n\\t\u003clink rel=\\\"stylesheet\\\" href=\\\"https://fonts.googleapis.com/css?family=Lato:300,400,700\\\"\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n\\n\\t\u003cdiv class=\\\"container\\\"\u003e\\n\\n\\t\\t\u003cdiv class=\\\"calendar\\\"\u003e\\n\\n\\t\\t\\t\u003cheader\u003e\\t\\t\\t\\t\\n\\n\\t\\t\\t\\t\u003ch2 id=\\\"month-name\\\"\u003e\u003c/h2\u003e\\n\\n\\t\\t\\t\\t\u003ca class=\\\"btn-prev fontawesome-angle-left\\\" href=\\\"#\\\"\u003e\u003c/a\u003e\\n\\t\\t\\t\\t\u003ca class=\\\"btn-next fontawesome-angle-right\\\" href=\\\"#\\\"\u003e\u003c/a\u003e\\n\\n\\t\\t\\t\u003c/header\u003e\\n\\t\\t\\t\\n\\t\\t\\t\u003ctable\u003e\\n\\t\\t\\t\\n\\t\\t\\t\\t\u003cthead\u003e\\n\\t\\t\\t\\t\\t\\n\\t\\t\\t\\t\\t\u003ctr\u003e\\n                        \u003ctd\u003eSu\u003c/td\u003e\\n\\t\\t\\t\\t\\t\\t\u003ctd\u003eMo\u003c/td\u003e\\n\\t\\t\\t\\t\\t\\t\u003ctd\u003eTu\u003c/td\u003e\\n\\t\\t\\t\\t\\t\\t\u003ctd\u003eWe\u003c/td\u003e\\n\\t\\t\\t\\t\\t\\t\u003ctd\u003eTh\u003c/td\u003e\\n\\t\\t\\t\\t\\t\\t\u003ctd\u003eFr\u003c/td\u003e\\n\\t\\t\\t\\t\\t\\t\u003ctd\u003eSa\u003c/td\u003e\\n\\t\\t\\t\\t\\t\u003c/tr\u003e\\n\\n\\t\\t\\t\\t\u003c/thead\u003e\\n\\n\\t\\t\\t\\t\u003ctbody\u003e\\n\\t\\t\\t\\t\\t\\n\\t\\t\\t\\t\u003c/tbody\u003e\\n\\n\\t\\t\\t\u003c/table\u003e\\n\\n\\t\\t\u003c/div\u003e \u003c!-- end calendar --\u003e\\n\\n\\t\u003c/div\u003e \u003c!-- end container --\u003e\\n\\t\u003cscript src=\\\"https://code.jquery.com/jquery-3.2.1.slim.min.js\\\"\u003e\u003c/script\u003e\\n    \u003cscript src=\\\"http://lab.cubiq.org/addtohome/src/addtohomescreen.js\\\"\u003e\u003c/script\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"@charset \\\"utf-8\\\";\\n/* CSS Document */\\n\\n/* ---------- FONTAWESOME ---------- */\\n/* ---------- https://fortawesome.github.com/Font-Awesome/ ---------- */\\n/* ---------- http://weloveiconfonts.com/ ---------- */\\n\\n@import url(http://weloveiconfonts.com/api/?family=fontawesome);\\n\\n*[class*=\\\"fontawesome-\\\"]:before {\\n  font-family: 'FontAwesome', sans-serif;\\n}\\n\\n/* ---------- GENERAL ---------- */\\n\\nbody {\\n\\tbackground: #f9f9f9;\\n\\tcolor: #0e171c;\\n\\tfont: 300 100%/1.5em 'Lato', sans-serif;\\n\\tmargin: 0;\\n}\\n\\na {\\n\\ttext-decoration: none;\\n}\\n\\nh2 {\\n\\tfont-size: 2em;\\n\\tline-height: 1.25em;\\n\\tmargin: .25em 0;\\n}\\n\\nh3 {\\n\\tfont-size: 1.5em;\\n\\tline-height: 1em;\\n\\tmargin: .33em 0;\\n}\\n\\ntable {\\n\\tborder-collapse: collapse;\\n\\tborder-spacing: 0;\\n}\\n\\n.container {\\n\\theight: 538px;\\n\\tleft: 50%;\\n\\tmargin: -255px 0 0 -245px;\\n\\tposition: absolute;\\n\\ttop: 50%;\\n\\twidth: 510px;\\n}\\n\\n/* ---------- CALENDAR ---------- */\\n\\n.calendar {\\n\\ttext-align: center;\\n}\\n\\n.calendar header {\\n\\tposition: relative;\\n}\\n\\n.calendar h2 {\\n\\ttext-transform: uppercase;\\n}\\n\\n.calendar thead {\\n\\tfont-weight: 600;\\n\\ttext-transform: uppercase;\\n}\\n\\n.calendar tbody {\\n\\tcolor: #7c8a95;\\n}\\n\\n.calendar tbody td:hover {\\n\\tborder: 2px solid #00addf;\\n}\\n\\n.calendar td {\\n\\tborder: 2px solid transparent;\\n\\tborder-radius: 50%;\\n\\tdisplay: inline-block;\\n\\theight: 4em;\\n\\tline-height: 4em;\\n\\ttext-align: center;\\n\\twidth: 4em;\\n}\\n\\n.calendar .prev-month,\\n.calendar .next-month {\\n\\tcolor: #cbd1d2;\\n}\\n\\n.calendar .prev-month:hover,\\n.calendar .next-month:hover {\\n\\tborder: 2px solid #cbd1d2;\\n}\\n\\n.current-day {\\n\\tbackground: #00addf;\\n\\tcolor: #f9f9f9;\\n}\\n\\n.event {\\n\\tcursor: pointer;\\n\\tposition: relative;\\n}\\n\\n.event:after {\\n\\tbackground: #00addf;\\n\\tborder-radius: 50%;\\n\\tbottom: .5em;\\n\\tdisplay: block;\\n\\tcontent: '';\\n\\theight: .5em;\\n\\tleft: 50%;\\n\\tmargin: -.25em 0 0 -.25em;\\n\\tposition: absolute;\\n\\twidth: .5em;\\n}\\n\\n.event.current-day:after {\\n\\tbackground: #f9f9f9;\\n}\\n\\n.btn-prev,\\n.btn-next {\\n\\tborder: 2px solid #cbd1d2;\\n\\tborder-radius: 50%;\\n\\tcolor: #cbd1d2;\\n\\theight: 2em;\\n\\tfont-size: .75em;\\n\\tline-height: 2em;\\n\\tmargin: -1em;\\n\\tposition: absolute;\\n\\ttop: 50%;\\n\\twidth: 2em;\\n}\\n\\n.btn-prev:hover,\\n.btn-next:hover {\\n\\tbackground: #cbd1d2;\\n\\tcolor: #f9f9f9;\\n}\\n\\n.btn-prev {\\n\\tleft: 6em;\\n}\\n\\n.btn-next {\\n\\tright: 6em;\\n}\",\"js\":\"var Calendar = function () {\\n    this.monthNames = [\\\"January\\\", \\\"February\\\", \\\"March\\\", \\\"April\\\", \\\"May\\\", \\\"June\\\",\\n \\\"July\\\", \\\"August\\\", \\\"September\\\", \\\"October\\\", \\\"November\\\", \\\"December\\\"];\\n    this.currentDate = new Date();\\n    \\n    this.setMonthName();\\n    this.setCalendarView();\\n\\n    $('.btn-prev').on('click', this.prev.bind(this));\\n    $('.btn-next').on('click', this.next.bind(this));\\n};\\n\\n// 設定標題名稱\\nCalendar.prototype.setMonthName = function () {\\n    $('#month-name').text(\\n        this.currentDate.getFullYear() + ' ' + this.monthNames[this.currentDate.getMonth()]\\n    );\\n}\\n\\n// 該月份起始日\\nCalendar.prototype.monthStartOn = function (date) {\\n    var date = new Date(date.getFullYear(), date.getMonth(), 1);\\n    return date.getDay();\\n}\\n\\n// 該月有多少天\\nCalendar.prototype.daysInMonth = function (date) {\\n    return new Date(date.getFullYear(), date.getMonth()+1, 0).getDate();\\n}\\n\\n// 插入日曆元素\\nCalendar.prototype.append = function(i, itemClass) {\\n    itemClass = (typeof itemClass !== 'undefined') ?  itemClass : '';\\n\\n    if (this.cellCount % 7 == 0) {\\n        $('tbody').append('\u003ctr\u003e\u003c/tr\u003e');\\n    }\\n    var row = $('tbody \u003e tr:last-child');\\n    row.append('\u003ctd class=\\\"' + itemClass + '\\\" \u003e'+i+'\u003c/td\u003e');\\n    \\n    this.cellCount++;\\n}\\n\\n// 設定日期\\nCalendar.prototype.setCalendarView = function () {\\n    var currentMonthStartOn = this.currentMonthStartOn();\\n    var currentMonthDays = this.currentMonthDays();\\n    var previousMonthDays = this.previousMonthDays();\\n\\n    this.cellCount = 0;\\n    this.currentRow = null;\\n    $('tbody').html('');\\n\\n    if(currentMonthStartOn != 0) {\\n        console.log('currentMonthStartOn', currentMonthStartOn)\\n        for(var i = currentMonthStartOn; i \u003e 0; i--) {\\n            this.append(previousMonthDays - i + 1, 'prev-month');\\n        }\\n    }\\n\\n    for (var i = 1; i \u003c= currentMonthDays; i++) {\\n        var now = new Date();\\n        \\n        // Highlight 今天\\n        if(this.currentDate.getFullYear() === now.getFullYear() \u0026\u0026 \\n            this.currentDate.getMonth() === now.getMonth() \u0026\u0026\\n            i === now.getDate()) {\\n            this.append(i, 'current-day');\\n        } else {\\n            this.append(i);\\n        } \\n        \\n    }\\n    \\n    var remaining = (currentMonthDays + currentMonthStartOn) % 7;\\n    if(remaining != 0) {\\n        for(i = 1; i \u003c= 7 - remaining; i++) {\\n            this.append(i, 'next-month');\\n        }\\n    }\\n}\\n\\nCalendar.prototype.next = function() {\\n    this.currentDate.setMonth(this.currentDate.getMonth()+1);\\n    this.setMonthName();\\n    this.setCalendarView();\\n}\\n\\nCalendar.prototype.prev = function() {\\n    this.currentDate.setMonth(this.currentDate.getMonth()-1);\\n    this.setMonthName();\\n    this.setCalendarView();\\n}\\n\\n// Private\\nCalendar.prototype.currentMonthDays = function () {\\n    return this.daysInMonth(this.currentDate);\\n}\\n\\nCalendar.prototype.previousMonthDays = function() {\\n    var lastMonthDate = new Date(this.currentDate.getMonth(), this.currentDate.getFullYear(), 0);\\n    return this.daysInMonth(lastMonthDate);\\n}\\n\\nCalendar.prototype.currentMonthStartOn = function () {\\n    return this.monthStartOn(this.currentDate);\\n}\\n\\nnew Calendar();\"}","created_at":"2020-10-23T19:32:41.208+08:00","updated_at":"2020-10-23T19:32:51.590+08:00","name":"calendar 副本","language":"web","screenshot":{"url":"https://cdn8.koding.school/uploads/project/screenshot/197268/d6ce13a3edc45b31a99327f27cd8cd94.jpg"},"parent_id":12623,"plugin":null,"description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":38,"hashid":"36ysmewwp","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}