programming css

Hướng dẫn fullcalendar main css - css chính fullcalendar

GIỚI THIỆU

Gần đây mình vừa có cơ hội tìm hiểu về FullCalendar. Nên hôm nay mình sẽ giới thiệu nó lại với mọi người, sau đó sẽ hướng dẫn xây dựng một ứng dụng hoàn chỉnh tương tác với FullCalendar.

Google Calendar

Có lẻ tất mọi người đều không xa lạ gì với Google Calendar. Đây là một ứng dụng web để quản lý thông tin liên lạc và quản lý thời gian được cung cấp bởi Google. Nó cho phép người dùng đồng bộ các địa chỉ liên lạc trong Gmail với một bộ lịch dựa trên web. Nó bắt đầu được đưa vào sử dụng vào ngày 13 tháng 4 năm 2006 và hiện nay đang trong giai đoạn beta. Trong khi người dùng không bị yêu cầu phải có một tài khoản Gmail, nhưng người dùng được yêu cầu phải có một tài khoản Google miễn phí để có thể sử dụng các phần mềm này.

FullCalendar là gì

FullCalendar là một thư viện hỗ trợ rất tốt cho việc quản lý cũng như thiết lập lịch cho các sự kiện. Chúng ta có thể sử dụng FullCalendar để xây dựng ra một ứng dụng có giao diện giống như Google Calendar và dữ liệu không những được đồng bộ từ Google Calendar mà còn được lấy từ hệ thống chúng ta đang xây dựng.FullCalendar để xây dựng ra một ứng dụng có giao diện giống như Google Calendar và dữ liệu không những được đồng bộ từ Google Calendar mà còn được lấy từ hệ thống chúng ta đang xây dựng.

Triển khai

Setting

Đầu tiên các bạn vào đây để tải thư viện về, sau đó require vào dự án.

Khởi tạo

Để khởi tạo lịch, chỉ cần gọi hàm fullCalendar[] tại nơi bạn muốn hiển thị lịch

$['#calendar'].fullCalendar[{
    // put your options and callbacks here
}]

Có rất nhiều option khi khởi tạo lịch các bạn có thể đọc thêm tại đây.

Ví dụ: Mình muốn các button today, prev, next nằm bên trái lịch thì sẽ như sau:

$['#calendar'].fullCalendar[{
  header: {
    left: 'today, prev, next',
    center: 'title',
    right: null
  }
}]

Thêm các sự kiện ngày nghỉ, ngày lễ

Các ngày nghỉ, ngày lễ sẽ được lấy từ Google Calendar. Vậy đầu tiên các bạn cần vào Google Developer Console tạo 1 ứng dụng Google Calendar API để lấy googleCalendarApiKey. Chi tiết hướng dẫn các bạn có thể làm theo tại đây.Google Calendar API để lấy googleCalendarApiKey. Chi tiết hướng dẫn các bạn có thể làm theo tại đây.

Mình update lại hàm khởi tạo như sau:

$['#calendar'].fullCalendar[{
  header: {
    left: 'today, prev, next',
    center: 'title',
    right: null
  },
  googleCalendarApiKey: GOOGLE_CALENDAR_API_KEY,
  eventSources: [
    {
       url: '//www.google.com/calendar/feeds/vi.vietnamese#/public/basic'
    }
 ]
}]

Lưu ý: url ở trên là lịch ngày nghỉ, ngày lễ của việt nam, mỗi quốc gia sẻ có 1 url riêng để lấy lịch ngày nghỉ, ngày lễ. Ngoài ra các bạn có thể đồng bộ được những sự kiên cá nhân của tài khoản google đó vào hệ thống luôn.

Thêm các sự kiện từ hệ thống

Ví dụ: Để lấy sự kiện từ hệ thống chúng ta cần các tham số sau:

EVENTS_PATH sẽ là url để lấy các sự kiện của hệ thống.
start_date, end_date là khoảng thời gian muốn lấy sự kiện.

eventSources: [
  {
     url: '//www.google.com/calendar/feeds/vi.vietnamese#/public/basic'
  },
  {
    events: function[start, end, timezone, callback] {
      $.ajax[{
        url: EVENTS_PATH,
        data: {
          start_date: start,
          end_date: end
        },
        success: function[events] {
          callback[events];
        }
      }];
    }
]

Lưu ý: Để FullCalendar hiểu được danh sách event mình truyền vào, mình cần cấu trúc dữ liệu trả theo Event Object của FullCalendar.FullCalendar hiểu được danh sách event mình truyền vào, mình cần cấu trúc dữ liệu trả theo Event Object của FullCalendar.

{
  title: 'Cuộc hẹn giữa A và B',
  start: '20/02/2019',
  className: 'your_class',
  url: 'url khi click vào sự kiện'
}

Hiện Popup xem chi tiết sự kiện

Để hiện popup xem chi tiết sự kiện mình cần thêm 2 callback là renderEvent và eventClick.

eventRender: function [event, element] {
  element.popover[{
    content: function[] {
      return 'Lấy chi tiết sự kiên từ hệ thống';
    },
    html: 'true',
    placement: 'left',
    animation: 'true',
    container: ''
  }];
  }
},
eventClick: function[calEvent, jsEvent, view] {
  // close các popup khác đang mở
}

Kết luận

Trên đây mình vừa giới thiệu với các bạn về FullCalendar. Mình thấy bộ thư viện này rất hửu ích và có hướng dẫn rất chi tiết đây đủ để chúng ta dể dàng sử dụng. FullCalendar. Mình thấy bộ thư viện này rất hửu ích và có hướng dẫn rất chi tiết đây đủ để chúng ta dể dàng sử dụng.

Tham khảm

FullCalendar.

Giới Thiệu Chung##

Hiện nay với những người thường xuyên tiếp xúc với máy tính và xử lý khối lượng công việc lớn hẳn đã không còn xa lạ với công cụ Calendar[tạo và lưu trữ lịch biểu] mà Google cung cấp. Tuy vậy, do nhu cầu sử dụng của người dùng lớn và vấn đề bảo mật nên bản thân các nhà phát triển phần mềm đã chủ động xây dựng bộ công cụ với chức năng tương tự của riêng mình.

Hiện giờ có rất nhiều cách thức để xây dựng chức năng này tuy nhiên phổ biến, dễ dàng và đầy đủ nhất ở bài viết này xin được giới thiệu plugin Fullcalendar. Đây là một plugin của Jquery vì vậy vách ngăn về ngôn ngữ nhúng sẽ bị phá bỏ, cùng với cú pháp rõ dàng, tính mềm dẻo cao xứng đáng là lựa chọn đầu tiên của lập trình viên khi phát triển chức năng Calendar của riêng mình.

Hướng Dẫn Sử Dụng##

Cài đặt thư viện###

Việc cài đặt Fullcalendar dễ dàng và tương tự với những plugin khác. Thêm thư viện Jquery và Css vào ứng dụng như sau:

Thư viện Jquery và Css được public hoàn toàn tại địa chỉ: `//fullcalendar.io/download/ . Version mới nhất là 2.4.0

Xây dựng ứng dụng demo###

Sau khi thực hiện cài đặt thành công thư viện việc xây dựng một ứng dụng demo với giao diện và tính năng mặc định là hết sức dễ dàng.

Code html:

Là vị trí hiển thị Calender định nghĩa bằng thẻ html.

Tiếp theo build Calendar bằng Jquery như sau:

  $["#calendar"].fullCalendar[{
    now: "2015-08-07",
    editable: true,
    aspectRatio: 1.8,
    scrollTime: "00:00",
    header: {
      left: "today prev,next",
      center: "title",
      right: "timelineDay,timelineThreeDays,agendaWeek,month"
    },
    defaultView: "timelineDay",
    views: {
    timelineThreeDays: {
      type: "timeline",
      duration: {days: 3}
    },
    resourceLabelText: "Rooms",
    resources: [
    {id: "a", title: "Auditorium A"},
    {id: "b", title: "Auditorium B", eventColor: "green"},
    {id: "c", title: "Auditorium C", eventColor: 'orange'},
    {id: 'd', title: 'Auditorium D', children: [
      {id: 'd1', title: 'Room D1'},
      {id: 'd2', title: 'Room D2'}
    ]},
    {id: 'e', title: 'Auditorium E'},
    {id: 'f', title: 'Auditorium F', eventColor: 'red'},
    {id: 'g', title: 'Auditorium G'},
    {id: 'h', title: 'Auditorium H'},
    {id: 'i', title: 'Auditorium I'},
    {id: 'j', title: 'Auditorium J'},
    {id: 'k', title: 'Auditorium K'},
    {id: 'l', title: 'Auditorium L'},
    {id: 'm', title: 'Auditorium M'},
    {id: 'n', title: 'Auditorium N'},
    {id: 'o', title: 'Auditorium O'},
    {id: 'p', title: 'Auditorium P'},
    {id: 'q', title: 'Auditorium Q'},
    {id: 'r', title: 'Auditorium R'},
    {id: 's', title: 'Auditorium S'},
    {id: 't', title: 'Auditorium T'},
    {id: 'u', title: 'Auditorium U'},
    {id: 'v', title: 'Auditorium V'},
    {id: 'w', title: 'Auditorium W'},
    {id: 'x', title: 'Auditorium X'},
    {id: 'y', title: 'Auditorium Y'},
    {id: 'z', title: 'Auditorium Z'}
    ],
    events: [
      {id: '1', resourceId: 'b', start: '2015-08-07T02:00:00', end: '2015-08-07T07:00:00', title: 'event 1'},
      {id: '2', resourceId: 'c', start: '2015-08-07T05:00:00', end: '2015-08-07T22:00:00', title: 'event 2'},
      {id: '3', resourceId: 'd', start: '2015-08-06', end: '2015-08-08', title: 'event 3'},
      {id: '4', resourceId: 'e', start: '2015-08-07T03:00:00', end: '2015-08-07T08:00:00', title: 'event 4'},
      {id: '5', resourceId: 'f', start: '2015-08-07T00:30:00', end: '2015-08-07T02:30:00', title: 'event 5'}
    ]
  }];

Calendar sẽ có giao diện như sau:

Customer Plugin###

Plugin cung cấp rất nhiều option và method cho việc lập trình được dễ dàng.

- Cú pháp khai báo một option:

  $['#calendar'].fullCalendar[{
      weekends: false // Sẽ ẩn đi ngày thứ bẩy và chủ nhật
  }];

- Cú pháp gọi một method:

$['#calendar'].fullCalendar[{
  header: {
    left: 'today, prev, next',
    center: 'title',
    right: null
  }
}]

- Cú pháp gọi một function callbacks:

$['#calendar'].fullCalendar[{
  header: {
    left: 'today, prev, next',
    center: 'title',
    right: null
  }
}]

Giới thiệu một số options và method thường dùng.###

- Hiển thị Calender tại thời điểm nhất định:

Thêm thuộc tính

$['#calendar'].fullCalendar[{
  header: {
    left: 'today, prev, next',
    center: 'title',
    right: null
  }
}]

$['#calendar'].fullCalendar[{
  header: {
    left: 'today, prev, next',
    center: 'title',
    right: null
  }
}]

- Hiển thị title và button trên header:

$['#calendar'].fullCalendar[{
  header: {
    left: 'today, prev, next',
    center: 'title',
    right: null
  }
}]

Trong đó: - Bên trái sẽ hiển thị các button today, prev, next với chức năng tương ứng. - Ở giữa hiển thị tiêu đề của calendar. - Bên phải hiển thị button[công việc trong ngày, tháng, tuần, 3 ngày liền kề].

Button timelineThreeDays sẽ được định nghĩa:

$['#calendar'].fullCalendar[{
  header: {
    left: 'today, prev, next',
    center: 'title',
    right: null
  }
}]

- Dữ liệu hiển thị trên view được định nghĩa là mảng các hash.

$['#calendar'].fullCalendar[{
  header: {
    left: 'today, prev, next',
    center: 'title',
    right: null
  }
}]

Tương ứng là:

$['#calendar'].fullCalendar[{
  header: {
    left: 'today, prev, next',
    center: 'title',
    right: null
  }
}]

- Vị trí hiển thị event cũng được định nghĩa bằng một mảng các hash.

$['#calendar'].fullCalendar[{
  header: {
    left: 'today, prev, next',
    center: 'title',
    right: null
  }
}]

- Thêm liên kết cho Calendar và Datetimepicker.

$['#calendar'].fullCalendar[{
  header: {
    left: 'today, prev, next',
    center: 'title',
    right: null
  }
}]

Khi chọn thời gian tương ứng trên datetimepicker sẽ hiển thị event trên calendar ở thời điểm đó.

Tất cả options, method và functions mà plugin cung cấp đều được public và hướng dẫn sử dụng trên địa chị

$['#calendar'].fullCalendar[{
  header: {
    left: 'today, prev, next',
    center: 'title',
    right: null
  },
  googleCalendarApiKey: GOOGLE_CALENDAR_API_KEY,
  eventSources: [
    {
       url: '//www.google.com/calendar/feeds/vi.vietnamese#/public/basic'
    }
 ]
}]

0 các bạn có thể tham khảo và sử dụng theo mục đích mong muốn, cú pháp đều tương tự như trên.

Kết Luận##

Để xây dựng một ứng dụng tương tự Calendar của Google thì plugin Fullcalendar hoàn toàn có thể đáp ứng. Với những gì Fullcalendar cung cấp lập trình viên có thể thoải mái sáng tạo và tùy chỉnh ứng dụng của mình với những tính năng mới. Bài viết chỉ giới thiệu những điều cơ bản nhất của plugin rất mong được góp ý của các bạn.

Thank you for listening!!!