Lịch hàng tuần html

Có thể rất nhiều bạn đã nhìn thấy lịch quen thuộc này, và thấy nó nhìn rất hay và đẹp. Nhưng lại không biết làm thế nào để áp dụng vào trang web của mình. Vì nó không phải là một viên đá quý như bootstap mà chúng ta có thể cài đặt như bình thương

Bài viết này của mình sẽ hướng dẫn các bạn cách cài đặt và chỉnh sửa Bootstrap Calendar một cách chi tiết và đơn giản nhất để các bạn có thể sử dụng được ngay. Mình sẽ sử dụng Ruby on Rails để demo. Nhưng mình tin là sau khi đọc nó thì các bạn có thể sử dụng với bất kỳ trang web ngôn ngữ nào mà bạn biết

II) Chuẩn bị

Vâng, việc đầu tiên mà chúng ta cần làm đó chính là sao chép mã nguồn của nó về để sử dụng. Chúng ta phải sao chép các tệp css, js từ mã nguồn của họ để nhập vào dự án của chính mình. Nhưng mà ở đó có rất nhiều file, chúng ta phải copy những file nào? . Trong mã nguồn có rất nhiều thư viện mà ở dự án của chúng ta đã có sẵn nên không việc gì phải lấy hết. Dưới đây mình xin liệt kê những file cần thiết

• *lịch. js hoặc lịch. tối thiểu. js (thư mục bootstrap-calendar-master/js)
• *gạch dưới-phút. js (thư mục bootstrap-calendar-master/components/underscore)
• *lịch. css hoặc lịch. tối thiểu. css (thư mục bootstrap-calendar-master/css)
• *thư mục tmpls (nên đặt ở chế độ công khai để có thể truy cập vào các tệp html nhanh nhất mà không cần thêm bộ định tuyến) đây chính là các mẫu tệp để sử dụng lịch và xem cho chúng ta)

Trên đây là những tệp bắt buộc phải có với các ứng dụng web. Ngoài ra, chúng ta phải thêm css của bootstrap nếu như các bạn không cài đặt gem của bootstrap

• khởi động. css (thư mục components/bootstrap/css hoặc components/bootstrap 3/css)

III) Cách sử dụng

Có nhiều cách khởi động lịch khác nhau với các cách tải sự kiện khác nhau. Mình chỉ nói 2 cách đơn giản nhất là

1) Mã cứng

Bạn truyền ngay mảng sự kiện vào trong event_source như dưới đây là xong

    <div id="calendar">div>
    $("#calendar").calendar({
        tmpl_path: "/tmpls/",
        events_source: [
    		{
    			"id": 1,
    			"title": "Title 0",
    			"url": "/to_dos/1",
    			"class": "event-warning",
    			"start": 1469620406000,
    			"end": 1469620466000
    		},
    		{
    			"id": 2,
    			"title": "Title 1",
    			"url": "/to_dos/2",
    			"class": "event-important",
    			"start": 1469620466000,
    			"end": 1469620526000
    		}
    	]
    });

    <div id="calendar">div>
    $("#calendar").calendar(
        {
          tmpl_path: "/tmpls/",
          events_source: function(){
              return [
        		{
        			"id": 1,
        			"title": "Title 0",
        			"url": "/to_dos/1",
        			"class": "event-warning",
        			"start": 1469620406000,
        			"end": 1469620466000
        		},
        		{
        			"id": 2,
        			"title": "Title 1",
        			"url": "/to_dos/2",
        			"class": "event-important",
        			"start": 1469620466000,
        			"end": 1469620526000
        		}
        	];
    	}
    });

Như trên ta thấy, chỉ cần trong event_source có được mảng dữ liệu dưới dạng json nđúng định dạng là được

2) Tìm nạp url

Cách này đơn giản hơn rất nhiều và mình nghĩ nó sẽ được sử dụng nhiều nhất. URL chính được truyền vào event_source là nó sẽ tự động tìm nạp dữ liệu về để hiển thị. Và dĩ nhiên là hành động tìm nạp đó sẽ là phương thức lấy với định dạng json

    <div id="calendar">div>
    $("#calendar").calendar({
          tmpl_path: "/tmpls/",
          events_source: "/index"
    });

Dữ liệu khi trả về có định dạng

{
	"success": 1,
	"result": [
		{
			"id": 1,
			"title": "Title 0",
			"url": "/to_dos/1",
			"class": "event-warning",
			"start": 1469620406000,
			"end": 1469620466000
		},
		{
			"id": 2,
			"title": "Title 1",
			"url": "/to_dos/2",
			"class": "event-important",
			"start": 1469620466000,
			"end": 1469620526000
		}
	]
}

Giải thích

Vâng, cách sử dụng thì đơn giản. Nhưng những dữ liệu đó có nghĩa là gì và để làm gì

• Tiêu đề. chính là tiêu đề sẽ hiển thị các biểu tượng trung tâm cho sự kiện mà bạn muốn tạo khi chúng ta nhấp vào một ngày nào đó (tuần hoặc tháng)
• url. Chính là đường dẫn mà bạn muốn người dùng truy cập khi nhấp vào tiêu đề của sự kiện đó (hoặc có thể nội dung hiển thị của trang web đó sẽ được hiển thị trên chế độ - đọc tiếp sẽ rõ. v)
• lớp. Chính là lớp trên khung nhìn của sự kiện. Mỗi lớp sẽ có một màu khác nhau để các bạn phân biệt được chúng (chúng có thể giúp bạn phân biệt sự quan trọng của công việc đo lường)
• bắt đầu. Đây là thời gian bắt đầu thực hiện công việc
• chấm dứt. time end of work Khi được hiển thị thì lịch theo từng ngày một thì bạn có thể thấy được độ dài công việc một cách trực quan nhất. With the other cahs display other, it will be a dấu chấm xác định công việc thuộc ngày đó

Vâng, ở trên mình có đề cập đến việc url nội dung sẽ được hiển thị lên phương thức. Vậy cách sử dụng của nó ra sao? . Bạn chỉ cần thêm chế độ xem và tùy chọn khi khơi dậy là xong

<div class="modal hide fade" id="events-modal">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×button>
      <h3>Detail for ToDoh3>
    div>
    <div class="modal-body" style="height: 400px">
    div>
    <div class="modal-footer">
      <a href="#" data-dismiss="modal" class="btn">Closea>
    div>
  div>
  <script type="text/javascript">
    $('#calendar').calendar({
        modal: "#events-modal",
        tmpl_path: "/tmpls/",
        events_source: "index"
    });
  script>

Còn một vấn đề nữa mà mình cũng đã từng đề cập đó là cách hiển thị của lịch. Do đó có những cách hiển thị nào? . Hiển thị theo năm, theo tháng, theo tuần và theo ngày. Use it as after

<div class="pull-right form-inline">
  <div class="btn-group">
    <button class="btn btn-primary" data-calendar-nav="prev"><< Prevbutton>
    <button class="btn" data-calendar-nav="today">Todaybutton>
    <button class="btn btn-primary" data-calendar-nav="next">Next >>button>
  div>
  <div class="btn-group">
    <button class="btn btn-warning" data-calendar-view="year">Yearbutton>
    <button class="btn btn-warning active" data-calendar-view="month">Monthbutton>
    <button class="btn btn-warning" data-calendar-view="week">Weekbutton>
    <button class="btn btn-warning" data-calendar-view="day">Daybutton>
  div>
div>
<script type="text/javascript">
  var calendar = $('#calendar').calendar(
    {
      modal: "#events-modal",
      tmpl_path: "/tmpls/",
      events_source: "index"
    }
  );

  $('.btn-group button[data-calendar-nav]').each(function() {
    var $this = $(this);
    $this.click(function() {
      calendar.navigate($this.data('calendar-nav'));
    });
  });

  $('.btn-group button[data-calendar-view]').each(function() {
    var $this = $(this);
    $this.click(function() {
      calendar.view($this.data('calendar-view'));
    });
  });
script>

Dưới đây là hình demo các kiểu hiển thị của lịch

NGÀY

TUẦN

THÁNG

NĂM

Trên đây là một số hướng dẫn đơn giản để bạn có thể tạo một ứng dụng web sử dụng lịch của boostrap. Các bạn có thể tham khảo một cách chi tiết và đầy đủ hơn tại https. //github. com/Serhioromano/bootstrap-calendar