日历

* {
    margin: 0;
    padding: 0;
    -webkit-backface-visibility: hidden;
    box-sizing: border-box;
}

*:hover {
    -webkit-tap-highlight-color: transparent;
}

a {
    text-decoration: none!important;
}

a:active,
a:visited,
a:hover {
    text-decoration: none!important;
    -webkit-tap-highlight-color: transparent;
}

input,
button,
select,
textarea {
    outline: none;
}

body {
    margin: 0!important;
    width: 100%;
    font-family: "微软雅黑";
    background-color: white;
    line-height: 16px;
}

li {
    list-style-type: none;
}

/*@media only screen and (min-width: 0px) {
    .schedule {
        width: 85%;
    }
    .oa-index-left {
        width: 100%;
        padding-left: 4%;
        padding-right: 4%;
        float: left;
        overflow: auto;
    }
    .oa-index-right {
        float: right;
        width: 100%;
        padding-left: 4%;
        padding-right: 4%;
        overflow: auto;
        overflow: auto;
    }
}
@media only screen and (min-width: 768px) {
    .oa-index-left {
        width: 100%;
        padding-left: 4%;
        padding-right: 4%;
        float: left;
        overflow: auto;
    }
    .oa-index-right {
        float: right;
        width: 100%;
        padding-left: 4%;
        padding-right: 4%;
        overflow: auto;
        overflow: auto;
    }
    .schedule {
        width: 50%;
    }
}

@media only screen and (min-width: 1006px) {
    .oa-index-left {
        width: 58%;
        padding-left: 2%;
        padding-right: 1%;
        float: left;
        overflow: auto;
    }
    .oa-index-right {
        float: right;
        width: 42%;
        padding-left: 1%;
        padding-right: 2%;
        overflow: auto;
        overflow: auto;
    }
    .schedule {
        width: 85%;
    }
}*/

.daysRedBg {
    background-color: #ff222f!important;
    border: 1px solid #ff222f!important;
    color: white!important;
}

.daysBlueBg {
    background-color: #2CCCBB;
    color: white;
}

.daysBlueBorder {
    border: 1px solid #2cccbb;
}

.daysRedBorder {
    border: 1px solid #ff222f;
}

.daysRedColor {
    color: #ff222f;
}

.daysBbbColor {
    color: #bbb;
}

.bgColorRed {
    background-color: #ff3252!important;
}

.fontColorRed {
    color: #ff3252!important;
}

.fontColorblue {
    color: #2CCCBB!important;
}

.bgColorBlue {
    background-color: #2CCCBB!important;
}
.schedule {
    width: 400px;
    min-width: 340px;
    height: 265px;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    font-size: 12px;
    font-weight: bold;
    position: relative;
}

.schedule-month {
    width: 100%;
    height: 40px;
    line-height: 40px;
    position: relative;
}

.schedule-month p {
    width: 100%;
    text-align: center;
    font-size: 20px;
    color: #555;
}

#dateTitleId {
    cursor: pointer;
}

.schedule-month div {
    position: absolute;
    width: 12px;
    height: 12px;
    top: 14px;
    cursor: pointer;
}

.schedule-month-first {
    left: 51px;
    background-image: url(../images/first.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.schedule-month-first:hover {
    background-image: url(../images/first1.png);
}

.schedule-month-prev {
    left: 75px;
    background-image: url(../images/prev.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.schedule-month-prev:hover {
    background-image: url(../images/prev1.png);
}

.schedule-month-last {
    right: 51px;
    background-image: url(../images/last.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.schedule-month-last:hover {
    background-image: url(../images/last1.png);
}

.schedule-month-next {
    right: 75px;
    background-image: url(../images/next.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.schedule-month-next:hover {
    background-image: url(../images/next1.png);
}

.schedule-week,
.schedule-week ul {
    width: 100%;
    height: 32px;
    line-height: 32px;
    color: #999;
}

.schedule-week ul li {
    width: 14.28%;
    float: left;
    text-align: center;
}

.schedule-day,
.schedule-day ul {
    width: 100%;
    overflow: auto;
    color: #444;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

.schedule-day ul li {
    width: 14.28%;
    height: 32px;
    float: left;
}

.schedule-day ul li div {
    width: 24px;
    height: 24px;
    line-height: 22px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4px;
    border-radius: 100%;
    text-align: center;
    cursor: pointer;
}

.schedule-choice {
    display: none;
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    height: 225px;
    z-index: 9;
    background-color: #f8f8f8;
    border-top: 1px solid #ddd;
}

.schedule-choice-month,
.schedule-choice-year {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    color: #555;
    font-size: 14px;
    margin-top: 8px;
}

.schedule-choice-month li {
    width: 25%;
    float: left;
    height: 30px;
}

.schedule-choice-month li div {
    display: block;
    width: 45px;
    height: 24px;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    line-height: 24px;
    border-radius: 4px;
    cursor: pointer;
}

.schedule-choice-year li {
    width: 20%;
    float: left;
    height: 30px;
}

.schedule-choice-year li div {
    display: block;
    width: 45px;
    height: 24px;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    line-height: 24px;
    border-radius: 4px;
    cursor: pointer;
}

.schedule-choice-month li div:hover {
    background-color: #2CCCBB;
    color: white;
}

.schedule-choice-year li div:hover {
    background-color: #2CCCBB;
    color: white;
}

.schedule-choice-butts {
    width: 100%;
    overflow: auto;
    text-align: center;
    margin-top: 15px;
}

.schedule-choice-butts button {
    margin-left: 15px;
    margin-right: 15px;
    padding: 4px 8px;
    border: 0;
    color: white;
    border-radius: 4px;
    cursor: pointer;
}

.schedule-choice-year {
    position: relative;
    padding: 0 20px;
}

.schedule-choice-year-prev,
.schedule-choice-year-next {
    position: absolute;
    width: 12px;
    height: 12px;
    bottom: 80px;
    cursor: pointer;
    z-index: 12;
}

.schedule-choice-year-prev {
    left: 20px;
    background-image: url(../images/prev.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.schedule-choice-year-next {
    right: 20px;
    background-image: url(../images/next.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.schedule-choice-year-prev:hover {
    background-image: url(../images/prev1.png);
}

.schedule-choice-year-next:hover {
    background-image: url(../images/next1.png);
}

 

                                               

 

代码：

      <link rel="stylesheet" href="css/time.css" />
      <script type="text/javascript" src="js/jquery.min.js" ></script>

    <body>
        <div class="schedule">
            <div class="schedule-month">
                <div onclick="getPrevYear()" class="schedule-month-first"></div><!--上一年-->
                <div onclick="getPrevMonth()" class="schedule-month-prev"></div><!--上个月-->
                <p><span id="dateTitleId"></span></p><!--当前年月-->
                <div onclick="getNextMonth()" class="schedule-month-next"></div><!--下个月-->
                <div onclick="getNextYear()" class="schedule-month-last"></div><!--下一年-->
            </div>
            <div class="schedule-choice">
                <ul class="schedule-choice-month"></ul>
                <ul class="schedule-choice-year"></ul>
                <div class="schedule-choice-year-prev"></div>
                <div class="schedule-choice-year-next"></div>
                <div class="schedule-choice-butts">
                    <button type="button" class="bgColorBlue" id="choiceTheDay">今天</button>
                    <button type="button" class="bgColorBlue" id="choiceConfirm">确认</button>
                    <button type="button" class="bgColorRed" id="choiceCancel">取消</button>
                </div>
            </div>
            <div class="schedule-week">
                <ul>
                    <li>日</li>
                    <li>一</li>
                    <li>二</li>
                    <li>三</li>
                    <li>四</li>
                    <li>五</li>
                    <li>六</li>
                </ul>
            </div>
            <div class="schedule-day">
                <ul>

                </ul>
            </div>
        </div>
        

    </body>

var clickData;
var mydate = new Date();
var TheYear; //获取当前年份
var minYear;
var maxYear;

function getDaysInOneMonth(year, month) { //获取某个月有多少天
    //alert(month)   //获取上个月和当前月份
    month = parseInt(month, 10); //parseInt去零0
    var d = new Date(year, month, 0);
    return d.getDate(); //天数
}

function getDateTheYear() { //获取当前年份
    var str = mydate.getFullYear(); //getFullYear()返回一个4位数的年份
    return str;
}

function getDateTheDay() { //获取当前年月
    var str = mydate.getFullYear() + "年";
    if((mydate.getMonth() + 1) >= 10) {
        str += (mydate.getMonth() + 1) + "月";
    } else {
        str += "0" + (mydate.getMonth() + 1) + "月";
    }
    //str += mydate.getDate() + "日";
    return str;
}

function getDateTheDays() { //获取当前年月日
    var str = "" + mydate.getFullYear();
    str += (mydate.getMonth() + 1);
    str += mydate.getDate();
    return str;
}

function getDateTheDays0() { //获取当前年月日(带0)
    var str = "" + mydate.getFullYear();
    if((mydate.getMonth() + 1) < 10) {
        str += '0' + (mydate.getMonth() + 1);
    } else {
        str += (mydate.getMonth() + 1);
    }

    if(mydate.getDate() < 10) {
        str += '0' + mydate.getDate();
    } else {
        str += mydate.getDate();
    }
    return str;
}

function getPrevMonth(clickDay) { //上一个月
    var getYear = $('#dateTitleId').text().substring(0, 4); //截取dateTitleId的字符串，0-4的字符，也就是年份
    var getMonth = $('#dateTitleId').text().substring(5, 7); //substrin()的用法是：截取dateTitleId的字符串，5-7的字符，也就是月份
    var getDay = clickDay;
    if(getMonth <= 1) {
        getMonth = 12;
        getYear = parseInt(getYear) - 1;
    } else {
        getMonth = parseInt(getMonth) - 1;
    }
    if(getMonth < 10) {
        getMonth = "0" + getMonth;
    }
    if(clickDay != undefined) {
        var prevDate = (getYear.toString() + getMonth.toString() + getDay.toString());
        init(getYear, getMonth, prevDate, clickData);
    } else {
        init(getYear, getMonth, undefined, clickData);
    }
    $('#dateTitleId').text(getYear + "年" + getMonth + "月");
    getDateMonth(); //遍历月份
    TheYear = $('#dateTitleId').text().substring(0, 4);
    minYear = parseInt(TheYear) - 7;
    maxYear = parseInt(TheYear) + 3;
    getDateYears(minYear, maxYear);
}

function getNextMonth(clickDay) { //下一个月
    var getYear = $('#dateTitleId').text().substring(0, 4);
    var getMonth = $('#dateTitleId').text().substring(5, 7);

    if(getMonth >= 12) {
        getMonth = 1;
        getYear = parseInt(getYear) + 1;
    } else {
        getMonth = parseInt(getMonth) + 1;
    }
    if(getMonth < 10) {
        getMonth = "0" + getMonth;
    }
    if(clickDay != undefined) {
        var prevDate = (getYear.toString() + getMonth.toString() + '0' + clickDay.toString());
        init(getYear, getMonth, prevDate, clickData);
    } else {
        init(getYear, getMonth, undefined, clickData);
    }
    $('#dateTitleId').text(getYear + "年" + getMonth + "月");
    getDateMonth(); //遍历月份
    TheYear = $('#dateTitleId').text().substring(0, 4);
    minYear = parseInt(TheYear) - 7;
    maxYear = parseInt(TheYear) + 3;
    getDateYears(minYear, maxYear);
}

function getPrevYear() { //上一年
    var getYear = $('#dateTitleId').text().substring(0, 4);
    var getMonth = $('#dateTitleId').text().substring(5, 7);
    getYear = parseInt(getYear) - 1;
    init(getYear, getMonth, undefined, clickData);
    $('#dateTitleId').text(getYear + "年" + getMonth + "月");
    TheYear = $('#dateTitleId').text().substring(0, 4);

    minYear = parseInt(TheYear) - 7;
    maxYear = parseInt(TheYear) + 3;
    getDateYears(minYear, maxYear);
}

function getNextYear() { //下一年
    var getYear = $('#dateTitleId').text().substring(0, 4);
    var getMonth = $('#dateTitleId').text().substring(5, 7);
    getYear = parseInt(getYear) + 1;
    init(getYear, getMonth, undefined, clickData);
    $('#dateTitleId').text(getYear + "年" + getMonth + "月");
    TheYear = $('#dateTitleId').text().substring(0, 4);
    minYear = parseInt(TheYear) - 7;
    maxYear = parseInt(TheYear) + 3;
    getDateYears(minYear, maxYear);
}

function init(year, month, clickDay, clickData) { //初始化
    $('.schedule-day ul').html('');
    var monthPrev;
    var monthNext;
    var getPrevDays; //上个月天数
    var setPrevDate;
    var setNextDate;
    if(month == 1) {
        monthPrev = 12;
        setPrevDate = (parseInt(year) - 1).toString() + monthPrev.toString(); //上个月
        getPrevDays = getDaysInOneMonth(year - 1, monthPrev); //获取上个月天数
    } else {
        if((month - 1) < 10) {
            setPrevDate = year.toString() + '0' + (month - 1).toString(); //上个月
        } else {
            setPrevDate = year.toString() + (month - 1).toString(); //上个月
        }
        getPrevDays = getDaysInOneMonth(year, month - 1); //获取上个月天数
    }

    var setDate = year.toString() + month.toString(); //当前月
    if(month == 12) {
        monthNext = 1;
        setNextDate = (parseInt(year) + 1).toString() + '0' + monthNext.toString(); //下个月
    } else {
        if((parseInt(month) + 1) < 10) {
            setNextDate = year.toString() + '0' + (parseInt(month) + 1).toString(); //下个月
        } else {
            setNextDate = year.toString() + (parseInt(month) + 1).toString(); //下个月
        }
    }

    var mydate = new Date(year, (month - 1), 1);
    var week = mydate.getDay();
    var getDays = getDaysInOneMonth(year, month); //获取当前月天数
    for(var i = (getPrevDays - week) + 1; i <= getPrevDays; i++) { //上个月
        if(i < 10) {
            $('.schedule-day ul').append('<li><div setDate="' + (setPrevDate + '0' + i) + '" class="daysBbbColor prevMonth">' + i + '</div></li>');
        } else {
            $('.schedule-day ul').append('<li><div setDate="' + (setPrevDate + i) + '" class="daysBbbColor prevMonth">' + i + '</div></li>');
        }
    }
    for(var i = 1; i <= getDays; i++) { //当前月
        var getWeek = new Date(year, (month - 1), i);
        if(i < 10) {
            if(clickDay == undefined) { //判断是否点击上月或下月日期跳转
                if(getWeek.getDay() == 0 || getWeek.getDay() == 6) {
                    if(year.toString() + month.toString() + '0' + i.toString() == clickData) {
                        $('.schedule-day ul').append('<li><div setDate="' + (setDate + '0' + i) + '" class="daysRedColor daysRedBg">' + i + '</div></li>');
                    } else {
                        $('.schedule-day ul').append('<li><div setDate="' + (setDate + '0' + i) + '" class="daysRedColor">' + i + '</div></li>');
                    }
                } else {
                    if(year.toString() + month.toString() + '0' + i.toString() == clickData) {
                        $('.schedule-day ul').append('<li><div setDate="' + (setDate + '0' + i) + '" class="daysRedBg">' + i + '</div></li>');
                    } else {
                        $('.schedule-day ul').append('<li><div setDate="' + (setDate + '0' + i) + '">' + i + '</div></li>');
                    }
                }
            } else {
                if(getWeek.getDay() == 0 || getWeek.getDay() == 6) {
                    if(year.toString() + month.toString() + '0' + i.toString() == clickDay) {
                        $('.schedule-day ul').append('<li><div setDate="' + (setDate + '0' + i) + '" class="daysRedColor daysRedBg">' + i + '</div></li>');
                    } else {
                        $('.schedule-day ul').append('<li><div setDate="' + (setDate + '0' + i) + '" class="daysRedColor">' + i + '</div></li>');
                    }
                } else {
                    if(year.toString() + month.toString() + '0' + i.toString() == clickDay) {
                        $('.schedule-day ul').append('<li><div setDate="' + (setDate + '0' + i) + '" class="daysRedBg">' + i + '</div></li>');
                    } else {
                        $('.schedule-day ul').append('<li><div setDate="' + (setDate + '0' + i) + '">' + i + '</div></li>');
                    }
                }
            }
        } else {
            if(clickDay == undefined) { //判断是否点击上月或下月日期跳转
                if(getWeek.getDay() == 0 || getWeek.getDay() == 6) {
                    if(year.toString() + month.toString() + i.toString() == clickData) {
                        $('.schedule-day ul').append('<li><div setDate="' + (setDate + i) + '" class="daysRedColor daysRedBg">' + i + '</div></li>');
                    } else {
                        $('.schedule-day ul').append('<li><div setDate="' + (setDate + i) + '" class="daysRedColor">' + i + '</div></li>');
                    }
                } else {
                    if(year.toString() + month.toString() + i.toString() == clickData) {
                        $('.schedule-day ul').append('<li><div setDate="' + (setDate + i) + '" class="daysRedBg">' + i + '</div></li>');
                    } else {
                        $('.schedule-day ul').append('<li><div setDate="' + (setDate + i) + '">' + i + '</div></li>');
                    }
                }
            } else {
                if(getWeek.getDay() == 0 || getWeek.getDay() == 6) {
                    if(year.toString() + month.toString() + i.toString() == clickDay) {
                        $('.schedule-day ul').append('<li><div setDate="' + (setDate + i) + '" class="daysRedColor daysRedBg">' + i + '</div></li>');
                    } else {
                        $('.schedule-day ul').append('<li><div setDate="' + (setDate + i) + '" class="daysRedColor">' + i + '</div></li>');
                    }
                } else {
                    if(year.toString() + month.toString() + i.toString() == clickDay) {
                        $('.schedule-day ul').append('<li><div setDate="' + (setDate + i) + '" class="daysRedBg">' + i + '</div></li>');
                    } else {
                        $('.schedule-day ul').append('<li><div setDate="' + (setDate + i) + '">' + i + '</div></li>');
                    }
                }
            }
        }
    }
    var scheduleRows = Math.ceil((getDays + week) / 7);
    for(var i = 1; i <= scheduleRows * 7 - (getDays + week); i++) { //下个月
        if(i < 10) {
            $('.schedule-day ul').append('<li><div setDate="' + (setNextDate + '0' + i) + '" class="daysBbbColor nextMonth">' + i + '</div></li>');
        } else {
            $('.schedule-day ul').append('<li><div setDate="' + (setNextDate + i) + '" class="daysBbbColor nextMonth">' + i + '</div></li>');
        }
    }
    //$('.schedule-day ul').find('li').first().css('margin-left',(week*14.28)+'%');
}

function getDateYears(minYear, maxYear) { //遍历年份
    $('.schedule-choice-year').html('');
    var getClickYear = $('#dateTitleId').text().substring(0, 4);
    for(var i = minYear; i < maxYear; i++) {
        if(getClickYear == i) {
            $('.schedule-choice-year').append('<li><div class="daysBlueBg">' + i + '</div></li>');
        } else {
            $('.schedule-choice-year').append('<li><div>' + i + '</div></li>');
        }
    }
}

function getDateMonth() { //遍历月份
    $('.schedule-choice-month').html('');
    var getClickMonth = $('#dateTitleId').text().substring(5, 7);
    for(var i = 1; i <= 12; i++) {
        if(i < 10) {
            i = '0' + i;
        }
        if(getClickMonth == i) {
            $('.schedule-choice-month').append('<li><div class="daysBlueBg">' + i + '月</div></li>');
        } else {
            $('.schedule-choice-month').append('<li><div>' + i + '月</div></li>');
        }
    }
}

function totalInit() { //初始化
    TheYear = getDateTheYear();
    minYear = parseInt(TheYear) - 7;
    maxYear = parseInt(TheYear) + 3;
    $('#dateTitleId').text(getDateTheDay());
    var getYear = $('#dateTitleId').text().substring(0, 4);
    var getMonth = $('#dateTitleId').text().substring(5, 7);
    clickData = getDateTheDays0(); //初始化选中当天
    init(getYear, getMonth, undefined, clickData); //初始化日历
    getDateYears(minYear, maxYear); //初始化 遍历年份
    getDateMonth(); //遍历月份
}
$(function() {
    totalInit();
    //给日期绑定点击事件
    $('.schedule-day ul').on('click', 'li div', function() {
        $(this).parent().siblings().find('div').removeClass('daysRedBg');
        $(this).addClass('daysRedBg');
        clickData = $(this).attr('setDate');
        //alert(clickData)
    });

    //上个月跳转
    $('.schedule-day ul').on('click', '.prevMonth', function() {
        clickData = $(this).attr('setDate');
        getPrevMonth($(this).text());
    });

    //下个月跳转
    $('.schedule-day ul').on('click', '.nextMonth', function() {
        clickData = $(this).attr('setDate');
        getNextMonth($(this).text());
    });

    //时间标题点击
    $('#dateTitleId').click(function() {
        $('.schedule-choice').slideToggle(200);
    });
    //取消
    $('#choiceCancel').click(function() {
        $('.schedule-choice').slideUp(200);
    });
    //确认
    $('#choiceConfirm').click(function() {
        var getYear = $('#dateTitleId').text().substring(0, 4);
        var getMonth = $('#dateTitleId').text().substring(5, 7);
        var clickYear = $("div[clickYear='clickYear']").text();
        var clickMonth = $("div[clickMonth='clickMonth']").text().substring(0, 2);
        if(clickYear == '' || clickYear == null) {
            clickYear = getYear;
        }
        if(clickMonth == '' || clickMonth == null) {
            clickMonth = getMonth;
        }
        $('#dateTitleId').text(clickYear + "年" + clickMonth + "月");
        init(clickYear, clickMonth, undefined, clickData);
        $('.schedule-choice').slideUp(200, function() {
            getDateYears(minYear, maxYear); //初始化 遍历年份
            getDateMonth(); //遍历月份
        });
    });
    //今天
    $('#choiceTheDay').click(function() {
        $('.schedule-choice').slideUp(200, function() {
            totalInit();
        });
    })
    //年份左边按钮
    $('.schedule-choice-year-prev').click(function() {
        minYear = minYear - 10;
        maxYear = parseInt(maxYear) - 10;
        getDateYears(minYear, maxYear);
    });
    //年份右边按钮
    $('.schedule-choice-year-next').click(function() {
        minYear = parseInt(minYear) + 10;
        maxYear = parseInt(maxYear) + 10;
        getDateYears(minYear, maxYear);
    });

    //月份选择
    $('.schedule-choice-month').on('click', 'li div', function() {
        $(this).parent().siblings().find('div').removeClass('daysBlueBorder');
        $(this).addClass('daysBlueBorder');
        $(this).parent().siblings().find('div').removeAttr('clickMonth');
        $(this).attr('clickMonth', 'clickMonth');
    });
    //月份选择
    $('.schedule-choice-year').on('click', 'li div', function() {
        $(this).parent().siblings().find('div').removeClass('daysBlueBorder');
        $(this).addClass('daysBlueBorder');
        $(this).parent().siblings().find('div').removeAttr('clickYear');
        $(this).attr('clickYear', 'clickYear');
    });

    //more按钮
    $('.oa-index-title img').hover(function() {
        $(this).attr('src', '/resources/static/images/moreBlue.png');
    }, function() {
        $(this).attr('src', '/resources/static/images/more.png');
    })

    //导航
    $('.oa-index-nav').each(function() {
        var thzz = $(this);
        thzz.find('li').click(function() {
            $(this).addClass('fontColorblue');
            $(this).siblings().removeClass('fontColorblue');
        })
    });

})