日历

by 孙 超

HTML

ね<div id='box'>
            <ul class='title'>
                <li>月</li>
                <li>火</li>
                <li>水</li>
                <li>木</li>
                <li>金</li>
                <li>土</li>
                <li>日</li>
            </ul>
        </div>
        <script src="https://code.jquery.com/jquery-4.0.0.min.js" integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao=" crossorigin="anonymous"></script>
        <script src='https://sun2dan.github.io/calendar-helper/dist/index.js'></script>

CSS

* {
                padding: 0;
                margin: 0;
            }

            #box {
                min-width: 500px;
            }

            .title {
                text-align: center;
                font-weight: bold;
                /* background: rgba(0, 0, 255, .25); */
            }

            ul {
                display: flex;
            }

            li {
                list-style: none;
            }

            ol{
                padding:5px 0 0;
            }

            ul>li {
                list-style: none;
                flex: 1;
                padding: 6px 10px;
                border: 1px solid #eee;
                box-sizing: border-box;
                margin: -0.5px;
            }

            h6 {
                font-size: 16px;
                font-weight: normal;
                color:  rgba(0, 0, 255, .75);
            }

JavaScript

(function() {
                let lessionStartDate = new Date(2026,0,26);
                let reviewDays = [0, 1, 2, 5, 12, 27, 57];

                let PageInit = {
                    _taskList: [],
                    init: function() {
                        const TASKLIST_KEY = 'taskList';
                        localStorage.setItem(TASKLIST_KEY, ""); 
                        let taskLit = localStorage.getItem(TASKLIST_KEY);
                        PageInit._taskList = taskLit || [];

                        let date = new Date();
                        this.renderMonthList(date);
                        date.setMonth(date.getMonth() + 1);
                        this.renderMonthList(date, true);
                    },

                    renderMonthList: function(date, isLastMonth) {
                        let days = window.calendarHelper.getMonthData(date, false, false, true);

                        if(isLastMonth){
                            if(days[0][0].day > 1){
                                days.splice(0, 1);
                            }
                        }
                        let resultArr = [];

                        days.map( (weeks, i) => {
                            let $ul = $('<ul>');
                            weeks.map( (day, j) => {
                                let taskList = PageInit.getCurDayTaskList(day.date);
                                console.log(taskList);
                                let taskStrArr = taskList.map(function(task, i) {
                                    return `<li>${PageInit.formatDate(task)}</li>`
                                });

                                $ul.append(`<li>
                                <h6>${day.dateStr}</h6>
                                <ol>${taskStrArr.join('')}</ol>
                            </li>`)
                            }
                            );

                           ...