帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

本栏目分享一些实用的网页图片特效、网页导航特效、网页菜单特效、网页文字特效等js、jquery、css网页特效。

当前位置:首页 > 资源 > 网页特效 > 正文

js功能强大自定义事件、日程表和任务日历控件(tui.calendar)

帝国模板之家 2020-11-19 网页特效 评论

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 '&nbsp;&nbsp;#' + 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
    
});

会员登陆后即可下载资源文件。更多好用网站特效插件,请关注帝国模板之家。

遗憾,悲伤,喜悦,怨恨,人们在不同时期,会流不同性质的眼泪。 情绪最好不要强行压抑,想哭就哭,想笑就笑,这样反而有利于身心。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

帝国手册

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言