为开发者准备的10款最好的jQuery日历插件

当今，jQuery作为一种广泛使用的JavaScript框架之一，被许多开发者选择来支持他们的Web开发。为了帮助开发人员轻松地为他们的项目添加高质量的日历，下面介绍了10个最好的jQuery日历插件。

1. FullCalendar

简介

FullCalendar是一个开源的jQuery日历插件，它包括了事件、拖放、资源视图和样式定制等特性，其中的某些特性在其他插件中很难找到。

示例

$(document).ready(function() {
  $('#calendar').fullCalendar({
    events: [{
      title: 'event1',
      start: '2018-01-01'
    },
    {
      title: 'event2',
      start: '2018-02-05',
      end: '2018-02-07'
    },
    {
      title: 'event3',
      start: '2018-03-09T12:30:00',
      allDay: false //false表示事件不是全天的
    }]
  });
});

2. jQuery Week Calendar

简介

与FullCalendar不同，jQuery Week Calendar不仅提供了周视图和月视图，还支持日视图和议程视图。可以通过拖动、调整大小，以及单击选择的方式来创建事件。

示例

$(document).ready(function() {
  $('#calendar').weekCalendar({
    data:
    [{
      "start": new Date("2018-02-06T13:00:00"),
      "end": new Date("2018-02-06T16:00:00"),
      "title": "Event Title",
      "color": "red",
      "textColor": "white"
    }],
    timeslotsPerHour: 4,//每小时格子的数量，也就是分钟数
    timeslotHeight: 20,//每个格子的高度
    scrollToHourMillis: 1000//滚动到某个小时所需的时间
  });
});

3. Calendar

简介

Calendar是一个富有特色的jQuery日历插件，以其重要的可定制性和适用性而著称。

示例

$(document).ready(function() {
  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();

  $('#calendar').calendar({
    events_source: [{
      title: 'Lorem ipsum dolor sit',
      url: '/my_url/',
      class: 'event-important',
      start: new Date(y, m, d - 5),
      end: new Date(y, m, d - 2)
    }],
    view: 'month',
    day: new Date(),
    onAfterViewLoad: function(view) {
      $('.btn-group button').removeClass('active');
      $('button[data-calendar-view="' + view + '"]').addClass('active');
    },
  });
});

4. PickMeUp

简介

PickMeUp是一个基于日历的选择器，它可选择日期和时间。它以可定制性高、便于使用和轻量级闻名。

示例

$('.datepicker').pickmeup({
  hide_on_select: true,//选择后隐藏小的选项框
  format: 'Y-m-d',//日期格式
  min: '2011-03-05',//最小日期
  max: '2022-12-31',//最大日期
  mode: 'range'//选择日期范围
});

5. Zabuto Calendar

简介

Zabuto Calendar是一个支持多种数据类型和事件视图的jQuery日历插件。此外，它也为视图和事件提供自定义选项。

示例

$(document).ready(function () {
    $("#my-calendar").zabuto_calendar({
        language: "en",
        today: true,
        data: [{
                "date": "2018-02-03",
                "badge": true,
                "title": "Example Event"
            }, …
        ]
        action: function () {
            return myDateFunction(this.id, false);
        },
        legend: [{
                type: "text",
                label: "Special Event",
                badge: "00"
            }, {
                type: "block",
                label: "Regular Event",
                classname: "my-class",
                blocksize: "normal"
            }, …
        ]
    });
});

6. Simple Events Calendar JS

简介

Simple Events Calendar JS是一个快速轻巧的jQuery日历插件。它针对固定格式的事件列表生成一个交互式、响应式的日历。

示例

$(document).ready(function () {
    $("#example-three").simpleCalendar({
        months: monthsArr,//月份英文全称
        days: daysArr,//当前星期的英文缩写
        events: eventsArr,//内容格式如下
        eventsInfo: {//"日期":{"事件":"更多网址"}
            "2017-06-22":{"name":"Picnic","location":"Central Park","time":"12:30pm","url":"http://www.centralparknyc.org/"}
        } 
    });
});

7. GLCalendar

简介

GLCalendar是一个基于Core Animation的日历插件，其特点在于拥有令人赞叹的动画特效，包括日期和月份工具栏的动画效果。

示例

$(document).ready(function () {
    $("#gl-canvas").glDatePicker({ //需要引用GLDatePicker JS、CSS、GL DatePicker en.js
        showAlways: true,
        cssName: 'darkneon',
        hideOnClick: true,
        selectedDate: new Date("02/22/2018"),
        onSelected: function (el, cell, date, data) {
            alert(date);
        }
    });
});

8. jQuery Calendario

简介

jQuery Calendario是一个响应式日历插件，提供了可定制的事件格式。

示例

$(document).ready(function() {
  $('#calendar').calendario({
    events: [{
      date: '2018-02-08',
      title: '日历控件更新',
      url: '/some/url'
    },
    {
      date: '2018-02-12',
      title: 'John Birthday',
      url: '/some/url'
    }]
  });
});

9. Bootstrap Calendar

简介

Bootstrap Calendar是一个更接近原生的日历控件，它是响应式、可控、可定制和易于使用。

示例

$(document).ready(function() {
  $('#calendar').calendar({
    events: [{
      title: 'Lorem ipsum dolor sit',
      url: '/ev/input/',
      class: 'event-important',
      start: new Date(y, m, 1),
      end: new Date(y, m, 2)
    }]
  });
});

10. Pikaday

简介

Pikaday是一个轻量级的，在移动设备上也表现出色的日历插件。它可定制性高，使用也非常方便。

示例

var picker = new Pikaday({
  field: document.getElementById('datepicker'),
  format: 'YYYY-MM-DD',

  // using moment.js to format dates provided as strings

  onSelect: function(date) {
    document.getElementById('output').textContent = picker.toString();
  }
});

总的来说，以上10款最好的jQuery日历插件都有各自的优劣势，开发人员可以根据项目的实际需求来选择适合自己的插件。