网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
tui.calendar是基于js实现的一个功能强大、齐全的日历插件,用于在每日、每周和每月视图中显示自定义事件、日程表和任务。
基本用法:
1.在html页面中加载日历需要的JavaScript和CSS文件。
<link rel="stylesheet" href="dist/tui-calendar.css">
<script src="dist/tui-calendar.js"></script>
2.创建一个呈现Tui日历的容器。
<div id="calendar"></div>
3.创建新的Tui日历,如下所示:
var Calendar = tui.Calendar;
var calendar = new Calendar('#calendar', {
// options here
});
4.自定义日历的选项。
var calendar = new Calendar('#calendar', {
// 'day', 'week', 'month'
defaultView: 'week',
// shows the milestone and task in weekly, daily view
taskView: true,
// shows the all day and time grid in weekly, daily view
scheduleView: true,
// template options
template: {
milestone: function(schedule) {
return '<span style="color:red;"><i class="fa fa-flag"></i> ' + schedule.title + '</span>';
},
milestoneTitle: function() {
return 'Milestone';
},
task: function(schedule) {
return ' #' + schedule.title;
},
taskTitle: function() {
return '<label><input type="checkbox" />Task</label>';
},
allday: function(schedule) {
return schedule.title + ' <i class="fa fa-refresh"></i>';
},
alldayTitle: function() {
return 'All Day';
},
time: function(schedule) {
return schedule.title + ' <i class="fa fa-refresh"></i>' + schedule.start;
}
},
week: {
daynames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
startDayOfWeek: 0,
narrowWeekend: true
},
month: {
daynames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
startDayOfWeek: 0,
narrowWeekend: true
},
// list of Calendars that can be used to add new schedule
calendars: [],
// whether use default creation popup or not
useCreationPopup: false,
// whether use default detail popup or not
useDetailPopup: false
});
转载请注明来源:js功能强大自定义事件、日程表和任务日历控件(tui.calendar)
本文永久链接地址:https://www.moyouyouw.cn/code/777.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论