目录
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(' ')
$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、最终效果
后端接口部分可参照“帝国CMS通过API插件输出json数据”(https://blog.24dm.cn/archives/111/)进行开发