Giới thiệt FullCalendar

Bài đăng này đã không được cập nhật trong 5 năm

FullCalendar là một thư viện javascript quản lý hiển thị chuỗi sự kiện bằng dưới định dạng calendar.

Install

Có thể cài đặt thông qua npm và bower

    // via NPM
    $ npm install fullcalendar
    // via Bower
    $ bower install fullcalendar

Hoặc dùng luôn CDNJS

    https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js
    https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css
    https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.print.css

Gọi đến thư viện

    <link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
    <script src='lib/jquery.min.js'></script>
    <script src='lib/moment.min.js'></script>
    <script src='fullcalendar/fullcalendar.js'></script>

Import

    import $ from 'jquery';
    import 'fullcalendar';

Initializing

Một khi bạn có FullCalendar và nó đã được load trên page, bạn có thể viết js code để khởi tạo một calendar. Code này phải được thực thi sau khi page đã được khởi tạo. Cách tốt nhất để làm điều đó là sử dụng $(document).ready

$(function() {

  // page is now ready, initialize the calendar...

  $('#calendar').fullCalendar({
    // put your options and callbacks here
  })

});

Ở bên html bạn cần có một vị trí để hiển thị list calendar

<div id='calendar'></div>

Overall Display

header

Định nghĩa button và title hiển ở top của calendar

Kiểu giá trị: object/false, giá trị default là:
```
{
  left:   'title',
  center: '',
  right:  'today prev,next'
}
```
Nếu bạn thấy định nghĩa header:false trong js tức là calendar này sẽ không hiển thị phần header.

header có các property sau:

title: text chứa tháng/tuần/ngày hiện tại được view

prev: button để back về 1 tháng/tuần/ngày trước đó

next: button để next đến 1 tháng/tuần/ngày kế đó

prevYear: button để back về 1 năm trước đó

nextYear: button để next đến 1 năm kế đó

today: button để move calendar đến tháng/tuần/ngày hiện tại
```
`<view name>`: button để chuyển đổi đến một số kiểu view avaiable
```

header

Xác định format text thời gian sẽ hiển thị ở header title

Kiểu giá trị format: string, dưới đây là những giá trị default

    'MMMM YYYY''    // like 'September 2009', for month view
    'MMM D YYYY'  // like 'Sep 13 2009', for week views
    'MMMM D YYYY' // like 'September 8 2009', for day views

Views

defaultView

Khởi tạo kiểu hiển thị calendar load

Kiểu giá trị: string.
List giá trị view được chấp nhận: month, agendaWeek, listWeek, basicWeek, timelineDay, agendaDay

Giá trị default là 'month'

    $('#calendar').fullCalendar({
          defaultView: 'month'
    })

Date & Time

defaultDate

Giá trị khởi tạo được hiển thị khi calendar đầu tiên load.

Kiểu giá trị: Moment.

Khi giá trị của trường này không được khởi tạo thì giá trị mặc định của nó là ngày hiện tại Giá trị của nó phải được Moment chấp nhận. Có thể bao gồm định dạng ISO8601 date string ví dụ "2018-12-19".
```
    $('#calendar').fullCalendar({
          defaultDate: '2018-12-19'
    })
```

validRange

Giới hạn ngày hiển thị trong calendar .

Kiểu giá trị: object

validRange có 2 thuộc tính là start và end

    $('#calendar1').fullCalendar({
          defaultView: 'month',
          validRange: {
                start: '2018-12-01',
                end: '2018-12-19'
          }
    });

navLinks Định nghĩa nếu link day hoặc link week được click.

Kiểu giá trị: boolean. Giá trị defalut: false

Khi giá trị là true thì việc click sẽ dẫn tới event của ngày đó hoặc tuần đó.

Khi giá trị là true thì click link sẽ không thực hiện gì

Methods

prev

Chuyển calendar về step trước đó (tùy thuộc vào view)
```
    .fullCalendar( ‘prev’ )
```
Nếu view calendar là month, calendar sẽ chuyển về calendar của tháng trước đó.

Nếu view calendar là basicWeek hay agendaWeek, calendar sẽ chuyển về tuần trước đó.

Nếu view calendar là basicDay hay agendaDay, calendar sẽ chuyển trở về trước đó một ngày.
next

Chuyển calendar về step next (tùy thuộc vào view)
```
    .fullCalendar( ‘next’ )
```
Nếu view calendar là month, calendar sẽ chuyển đến calendar của tháng tiếp đó.

Nếu view calendar là basicWeek hay agendaWeek, calendar sẽ chuyển đến tuần tiếp đó.

Nếu view calendar là basicDay hay agendaDay, calendar sẽ chuyển đến một ngày tiếp đó.
today

Chuyển calendar đến calendar có ngày hiện tại
```
    .fullCalendar( ‘today’ )
```
gotoDate

Chuyển calendar đến calendar có ngày được chỉ định
```
    .fullCalendar( ‘gotoDate’,  date)
```
date (kiểu dữ liệu giống phần defaultDate đã đề cập)

Events

events (as an array)

Một mảng các event sẽ được hiển thị trong calendar

$('#calendar').fullCalendar({
  events: [
    {
      title  : 'event1',
      start  : '2010-01-01'
    },
    {
      title  : 'event2',
      start  : '2010-01-05',
      end    : '2010-01-07'
    },
    {
      title  : 'event3',
      start  : '2010-01-09T12:30:00',
      allDay : false // will make the time show
    }
  ]
});

events (as a json feed)

Call url của nguồn cấp dữ liệu JSON là một cách fetch data cho event object.
```
$('#calendar').fullCalendar({
  events: '/get_data.php'
});
```
Action này sẽ được thực thi khi người dùng click vào prev/next hay change calendar view. Calendar sẽ xác định khoảng thời gian hiển thị và sẽ add các thông tin này vào các tham số trên url tương ứng với start, end. Ví dụ:
```
/get_data.php?start=2013-12-01&end=2014-01-12&_=1386054751381
```
_ paramter được tự động thêm vào để chặn việc trình duyệt lưu cache

events (as a function) function để call dữ liệu cho event object.

Giá trị đầu vào:

function( start, end, timezone, callback ) { }

Ví dụ:

$('#calendar').fullCalendar({
  events: function(start, end, timezone, callback) {
    $.ajax({
      url: 'myxmlfeed.php',
      dataType: 'xml',
      data: {
        // our hypothetical feed requires UNIX timestamps
        start: start.unix(),
        end: end.unix()
      },
      success: function(doc) {
        var events = [];
        $(doc).find('event').each(function() {
          events.push({
            title: $(this).attr('title'),
            start: $(this).attr('start') // will be parsed
          });
        });
        callback(events);
      }
    });
  }
});