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

演示  website 下载

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
    
});

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