网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一款外观时尚,响应迅速的jQuery日历事件插件,4 个主题风格,支持中文。特征:折叠侧边栏切换月份,在右侧面板上显示事件,支持添加新事件,支持多语言,自定义日期格式,在日历中高亮显示今天的日期,允许在同一天显示多个事件。
1. 在html页面中加载jQuery库和日历插件相关文件。
<!-- Core Stylesheet -->
<link rel="stylesheet" href="evo-calendar.css" />
<!-- Optional Themes -->
<link rel="stylesheet" href="evo-calendar.midnight-blue.css" />
<link rel="stylesheet" href="evo-calendar.orange-coral.css" />
<link rel="stylesheet" href="evo-calendar.royal-navy.css" />
<!-- JavaScript -->
<script src="jquery.min.js"></script>
<script src="evo-calendar.js"></script>
2. 创建一个显示日历容器。
<div id="evoCalendar"></div>
3.添加日历事件。
myEvents = [
{
id: "required-id-1",
name: "New Year",
date: "Wed Jan 01 2020 00:00:00 GMT-0800 (Pacific Standard Time)",
type: "holiday",
everyYear: true
},
{
id: "required-id-2",
name: "Valentine's Day",
date: "Fri Feb 14 2020 00:00:00 GMT-0800 (Pacific Standard Time)",
type: "holiday",
everyYear: true,
color: "#222"
},
{
id: "required-id-3",
name: "Custom Date",
badge: "08/03 - 08/05",
date: ["August/03/2020", "August/05/2020"],
description: "Description here"
type: "event",
},
// more events here
],
4. 调用函数,在页面上生成事件日历。
$('#evoCalendar').evoCalendar({
calendarEvents: myEvents
});
5. 格式化日期。
$('#evoCalendar').evoCalendar({
format: 'mm/dd/yyyy',
titleFormat: 'MM yyyy',
eventHeaderFormat: 'MM d, yyyy'
});
6. 设置日历语言。
$('#evoCalendar').evoCalendar({
language: 'zh'
});
dates: {
en: {
days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
noEventForToday: "No event for today.. so take a rest! :)",
noEventForThisDay: "No event for this day.. so take a rest! :)"
},
es: {
days: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
daysShort: ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"],
daysMin: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"],
months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
monthsShort: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
noEventForToday: "No hay evento para hoy.. ¡así que descanse! :)",
noEventForThisDay: "Ningún evento para este día.. ¡así que descanse! :)"
},
de: {
days: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
daysShort: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
daysMin: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
months: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
monthsShort: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
noEventForToday: "Keine Veranstaltung für heute.. also ruhen Sie sich aus! :)",
noEventForThisDay: "Keine Veranstaltung für diesen Tag.. also ruhen Sie sich aus! :)"
},
pt: {
days: ["Domingo", "Segunda-Feira", "Terça-Feira", "Quarta-Feira", "Quinta-Feira", "Sexta-Feira", "Sábado"],
daysShort: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"],
daysMin: ["Do", "2a", "3a", "4a", "5a", "6a", "Sa"],
months: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
monthsShort: ["Jan", "Feb", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
noEventForToday: "Nenhum evento para hoje.. então descanse! :)",
noEventForThisDay: "Nenhum evento para este dia.. então descanse! :)"
},
zh: {
days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
daysMin: ["日", "一", "二", "三", "四", "五", "六"],
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
noEventForToday: "今天没有活动..休息一下吧!:)",
noEventForThisDay: "今天没有活动..休息一下吧!:)"
}
}
7. 确定是高亮出显示今天的日期。默认为false。
$('#evoCalendar').evoCalendar({
todayHighlight: false
});
8. 启用/禁用侧栏和事件面板切换程序。默认为true。
$('#evoCalendar').evoCalendar({
sidebarToggler: true,
sidebarDisplayDefault: true,
eventListToggler: true,
eventDisplayDefault: true,
});
9. 确定一周的第一天。默认为0(星期日)。
$('#evoCalendar').evoCalendar({
firstDayOfWeek: 1 // 星期一
});
10. 确定要禁用的日期数组。默认为“null”。
$('#evoCalendar').evoCalendar({
disabledDate: ["02/17/2020", "02/21/2020"]
});
11. 选择日期后执行函数。
$('#evoCalendar').evoCalendar({
onSelectDate: function() {
// console.log('onSelectDate!')
}
});
12. 向日历添加新事件。
$("#evoCalendar").evoCalendar('addCalendarEvent', [
{
name: "NEW EVENT",
date: "February/16/2020",
type: "birthday",
everyYear: true
}
]);
13. 确定日历的主题。
Midnight Blue
Royal Navy
Orange Coral
$('#evoCalendar').evoCalendar({
theme: 'Orange Coral'
});
14. API 方法。
// set theme
$("#evoCalendar").evoCalendar('setTheme', themeName);
// toggle sidebar
$("#evoCalendar").evoCalendar('toggleSidebar', true/false);
// toggle event list
$("#evoCalendar").evoCalendar('toggleEventList', true/false);
// get the selected date
$("#evoCalendar").evoCalendar('getActiveDate');
// get active events
$("#evoCalendar").evoCalendar('getActiveEvents');
// select a year
$("#evoCalendar").evoCalendar('selectYear', yearNumber);
// select a month
$("#evoCalendar").evoCalendar('selectMonth', monthNumber);
// select a date
$("#evoCalendar").evoCalendar('selectDate', dateNumber);
// add events
$("#evoCalendar").evoCalendar('addCalendarEvent', [{
id: 'Event ID',
name: "Event Name",
date: "Date Here",
type: "Event Type",
everyYear: true
}]);
// remove events by ID
$("#evoCalendar").evoCalendar('removeCalendarEvent', eventID);
// destroy the calendar
$("#evoCalendar").evoCalendar('destroy');
15. 监听事件。
$('#evoCalendar').evoCalendar({
// options here
})
.on('selectDate', function(newDate, oldDate) {
// do something
})
.on('selectMonth', function(activeMonth, monthIndex) {
// do something
})
.on('selectYear', function(activeYear) {
// do something
})
.on('selectEvent', function(activeEvent) {
// do something
})
.on('destroy', function(calendar) {
// do something
})
转载请注明来源:jQuery事件日历插件 外观时尚 4个主题风格
本文永久链接地址:https://www.moyouyouw.cn/code/882.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论