目录


1、html代码

        <div class="calendar">
            <div class="event-header">
                <span class="title"><a href="">活动日历</a></span>
                <span class="more"><a href="">更多>></a></span>
            </div>
            <div class="calendar-container"></div>
        </div>

2、css代码

/*日历*/
.calendar {
    width: 282px;
}

.calendar-container {
    width: 100%;
}

.calendar .added-event {
    display: none;
}

.calendar-box {
    position: relative;
    display: inline-block;
    z-index: 2;
}

.calendar-pages {
    position: relative;
    padding-bottom: 30px;
}

.calendar-pages > .header {
    text-align: center;
    background: #62b9b0;
    position: relative;
}

.add-dot {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.add-dot h1 {
    font-size: 18px;
    font-weight: bold;
}

.add-dot .prev,
.add-dot .next {
    width: 22px;
    height: 22px;
    cursor: pointer;
    font-size: 28px;
    line-height: 22px;
    color: #62b9b0;
}

.calendar-pages > .header .day-names {
    overflow: hidden;
    text-align: center;
    display: flex;
    justify-content: space-between;
    margin: 0 !important;
    height: 40px;
    line-height: 40px;
}

.calendar-pages > .header h2 {
    width: 40px;
    font-size: 16px;
    text-align: center;
    height: 40px;
    color: #fff;
    line-height: 40px;
    border-right: 1px solid #fff;
}

.calendar-pages > .header h2:last-child {
    border-right: 0 !important;
}

.calendar .header h2:first-child {
    background: none !important;
}

.calendar .days {
    margin-bottom: 20px;
    text-align: center;
}

.calendar .days .day {
    display: inline-block;
    width: 40px;
    height: 35px;
    font-size: 16px;
    border-top: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    line-height: 35px;
    cursor: pointer;
    position: relative;
}

.calendar .days {
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
}

.calendar .days .day:hover {
    background-color: #e6eff1;
}

.calendar .days .day:nth-child(7n+1) {
    border-left: 0 solid #e0e0e0;
}

.calendar .days .day:nth-child(7n) {
    border-right: 0 !important;
}

.calendar .days .day:nth-child(1),
.calendar .days .day:nth-child(2),
.calendar .days .day:nth-child(3),
.calendar .days .day:nth-child(4),
.calendar .days .day:nth-child(5),
.calendar .days .day:nth-child(6),
.calendar .days .day:nth-child(7) {
    border-top: 0 !important;
}

.calendar .days .day:nth-last-child(1),
.calendar .days .day:nth-last-child(2),
.calendar .days .day:nth-last-child(3),
.calendar .days .day:nth-last-child(4),
.calendar .days .day:nth-last-child(5),
.calendar .days .day:nth-last-child(6),
.calendar .days .day:nth-last-child(7) {
    border-bottom: 1px solid #e0e0e0;
}

.calendar .days .day > .event-single {
    display: none;
}

.calendar .days .day i {
    position: absolute;
    left: 0;
    top: 0;
    width: 37px;
    height: 40px;
    display: inline-block;
}

.calendar .circle {
    position: absolute;
    right: 0;
    top: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fd7e14;
}

.calendar .add-event {
    float: right;
    display: none;
    width: 250px !important;
    position: absolute;
    background: #ece9e3;
}

.calendar .add-event:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #ece9e3;
    border-left: 15px solid transparent;
    top: -15px;
    left: 50px;
}

.calendar .events {
    height: auto !important;
    position: relative;
}

.calendar .events .events-list {
    max-height: 100%;
    overflow-x: auto;
    padding: 2px 2px 0 2px;
    position: relative;
    z-index: 2;
}

.calendar .events .event-single {
    border-bottom: 1px solid #cfccc4;
    padding: 5px;
}

.calendar .events .event-single p {
    line-height: 25px;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

.calendar .events .event-single span {
    font-size: 13px;
    line-height: 20px;
}

3、js代码(需要提前引入jquery.js)

    // 首页活动日历
    $.fn.calendar = function (options) {
        let settings = $.extend({
            customDay: new Date(),
            color: '#62b9b0',
            lang: 'CN'
        }, options)

        // 语言包
        let dayNames = {}
        let monthNames = {}

        dayNames['CN'] = ['一', '二', '三', '四', '五', '六', '日']
        dayNames['EN'] = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        monthNames['CN'] = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
        monthNames['EN'] = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']

        // 创建日历
        let $this = $(this)
        let div = function (e, classN) {
            return $(document.createElement(e)).addClass(classN)
        }

        $this.append(
            div('div', 'calendar-box').append(
                div('div', 'calendar-pages').append(
                    div('div', 'add-dot').append(
                        div('a', 'prev iconfont icon-arrow-left-filling'),
                        div('h1'),
                        div('a', 'next iconfont icon-arrow-right-filling'),
                    ),
                    div('div', 'header').append(
                        div('div', 'day-names')
                    ),
                    div('div', 'days'),
                ),
                div('div', 'add-event').append(
                    div('div', 'events').append(
                        div('div', 'events-list')
                    )
                )
            )
        )

        // 创建"日期"
        for (let i = 0; i < 42; i++) {
            $this.find('.days').append(div('div', 'day'))
        }

        // 创建"星期"
        for (let i = 0; i < 7; i++) {
            $this.find('.day-names').append(div('h2').text(dayNames[settings.lang][i]))
        }

        let d = new Date(settings.customDay)
        let year = d.getFullYear()
        let date = d.getDate()
        let month = d.getMonth()

        // 判断闰年
        let isLeapYear = function (year) {
            return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)
        }

        // 判断天数
        let feb = 0
        let febCalc = function (feb) {
            if (isLeapYear(year) === true) {
                feb = 29
            } else {
                feb = 28
            }
            return feb
        }

        let monthDays = [31, febCalc(feb), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]

        // 计算当月事件
        function calcMonth() {
            monthDays[1] = febCalc(feb)

            let weekStart = new Date()
            weekStart.setFullYear(year, month, 0)
            let startDay = weekStart.getDay()

            $this.find('.add-dot h1').html(monthNames[settings.lang][month] + '/' + year)
            $this.find('.day').html('&nbsp')
            $this.find('.day').removeClass('this-month')
            for (let i = 1; i <= monthDays[month]; i++) {
                startDay++
                let showDay = i
                if (i < 10) {
                    showDay = '0' + i
                }
                let showMonth = monthNames[settings.lang][month]

                $this.find('.day').eq(startDay - 1).addClass('this-month').attr('data-date', showDay + '/' + showMonth + '/' + year).html(i)
            }
            if (month === d.getMonth() && year === d.getFullYear()) {
                $this.find('.day.this-month').removeClass('today').eq(date - 1).addClass('today').css('color', settings.color)
            } else {
                $this.find('.day.this-month').removeClass('today').attr('style', '')
            }

            getInfos(year, month + 1)
        }

        // 获取事件
        function getInfos(year, month) {
            let server = 'http://www.***.com/api/getInfos.php'
            let classId = '107'
            $.get(server, {classId: classId, year: year, month: month},
                function (data) {
                    let infos = JSON.parse(data)
                    for (let i = 0; i < infos.length; i++) {
                        createEvent(infos[i].id, infos[i].title, infos[i].newstime, infos[i].data, infos[i].titleurl)
                    }
                }
            )
        }

        // 创建事件
        function createEvent(id, title, time, data, url) {
            $this.find('.this-month[data-date="' + data + '"]').append(
                div('div', 'event-single').append(
                    div('p', '').html('<a href="' + url + '" >' + title + '</a>'),
                    div('span', '').text(time),
                )
            )
            $this.find('.day').has('.event-single').addClass('have-event').prepend(div('i', '').html('<div class="circle"></div>'))
        }

        calcMonth()

        let arrows = [$this.find('.prev'), $this.find('.next')]
        $this.find('.calendar-pages').css({'width': $this.find('.calendar-pages').width()})
        $this.find('.events').css('height', ($this.height() - 197))

        function prevAddEvent() {
            $this.find('.day').removeClass('selected').removeAttr('style')
            $this.find('.today').css('color', settings.color)
            $this.find('.add-event').hide()
        }

        arrows[1].on('click', function () {
            if (month >= 11) {
                month = 0
                year++
            } else {
                month++
            }
            calcMonth()
            prevAddEvent()
        })
        arrows[0].on('click', function () {
            if (month === 0) {
                month = 11
                year--
            } else {
                month--
            }
            calcMonth()
            prevAddEvent()
        })

        // 阻止冒泡
        function stopPropagation(e) {
            let ev = e || window.event
            ev.stopPropagation ? ev.stopPropagation() : (ev.cancelBubble = true)
        }

        $this.on('click', '.have-event i', function (e) {
            let pageX = e.pageX,
                pageY = e.pageY
            let divX = $this.find('.calendar-box').offset().left
            let divY = $this.find('.calendar-box').offset().top
            let eventSingle = $(this).siblings('.event-single')
            $this.find('.events .event-single').remove()
            $this.find('.add-event').css('display', 'block')
            $this.find('.add-event').css({
                top: pageY - divY + 30,
                left: pageX - divX - 70,
            })
            $this.find('.events-list').html(eventSingle.clone())
            stopPropagation(e)
        })

        $(document).bind('click', function (e) {
            $(".add-event").hide()
            stopPropagation(e)
        })
    }
    $('.calendar-container').calendar()

4、最终效果

截屏2021-02-03 08.58.23.png

©本文为原创文章,著作权归博主所有,转载请联系博主获得授权

仅有一条评论

  1. 后端接口部分可参照“帝国CMS通过API插件输出json数据”(https://blog.24dm.cn/archives/111/)进行开发

发表评论