Tui.calendar
Một lịch biểu dành cho JavaScript với đầy đủ tính năng. Bây giờ dịch vụ của bạn chỉ cần một lịch có thể tùy chỉnh.
Thu thập thống kê về việc sử dụng mã nguồn mở
TOAST UI Calendar sử dụng Google Analytics (GA) để thu thập thống kê về việc sử dụng mã nguồn mở, nhằm xác định mức độ TOAST UI Calendar được sử dụng trên khắp thế giới. Điều này cũng là chỉ số quan trọng để xác định hướng phát triển của các dự án trong tương lai. location.hostname (ví dụ: > “ui.toast.com”) sẽ được thu thập và mục đích duy nhất là để đo lường thống kê về việc sử dụng.
Để tắt GA, sử dụng options:
var calendar = new Calendar('#calendar', {
usageStatistics: false
});
📙 Tài liệu
Bạn cũng có thể xem các phiên bản API cũ hơn trên releases page.
✨ Thật Tuyệt: Các Loại Xem Hàng Tháng, Hàng Tuần, Hàng Ngày và Nhiều Loại Xem Khác Nhau.
Hàng tháng | Hàng tuần |
---|---|
Hàng ngày | 2 Tuần |
— | — |
Dễ Dàng Sử Dụng: Kéo và Thay Đổi Kích Thước Lịch Trình
Kéo | Thay đổi kích thước |
---|---|
Sẵn Sàng Sử Dụng: Cửa Sổ Popup Mặc Định
Popup Tạo | Popup Chi Tiết |
---|---|
🎨 Tính Năng
- Hỗ trợ các loại xem khác nhau: hàng ngày, hàng tuần, hàng tháng (6 tuần, 2 tuần, 3 tuần)
- Hỗ trợ quản lý hiệu quả các mốc thời gian và lịch trình công việc
- Hỗ trợ hiển thị hẹp vào cuối tuần
- Hỗ trợ thay đổi ngày bắt đầu của tuần
- Hỗ trợ tùy chỉnh giao diện ngày và thông tin lịch trình (bao gồm tiêu đề và chân trang của ô lưới)
- Hỗ trợ điều chỉnh lịch trình bằng cách kéo chuột
- Hỗ trợ tùy chỉnh giao diện người dùng thông qua chủ đề
🐾 Ví dụ
- Basic : Ví dụ về việc sử dụng các tùy chọn mặc định.
💾 Cài đặt
Các sản phẩm của TOAST UI có thể được sử dụng bằng cách sử dụng trình quản lý gói hoặc tải nguồn trực tiếp. Tuy nhiên, chúng tôi rất khuyến nghị sử dụng trình quản lý gói.
Thông qua Trình Quản lý Gói
Các sản phẩm của TOAST UI đã được đăng ký trong hai trình quản lý gói, npm và bower. Bạn có thể dễ dàng cài đặt chúng bằng cách sử dụng các lệnh được cung cấp bởi mỗi trình quản lý gói. Khi sử dụng npm, hãy đảm bảo rằng bạn đã cài đặt môi trường Node.js.
npm
$ npm install --save tui-calendar # Latest version
$ npm install --save tui-calendar@<version> # Specific version
bower
$ bower install tui-calendar # Latest version
$ bower install tui-calendar#<tag> # Specific version
Thông qua Mạng Phân Phối Nội Dung (CDN)
Các sản phẩm của TOAST UI có sẵn trên mạng phân phối nội dung (CDN) được cung cấp bởi NHN Cloud.
Bạn có thể sử dụng CDN như dưới đây.
Chèn các tệp bảng mẫu (style sheet)
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.css" />
<!-- If you use the default popups, use this. -->
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.css" />
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css" />
Chèn tệp JavaScript
<script src="https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js"></script>
<script src="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.min.js"></script>
<script src="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.min.js"></script>
<script src="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.js"></script>
Nếu bạn muốn sử dụng một phiên bản cụ thể, hãy sử dụng tên thẻ thay vì latest
trong đường dẫn url.
Thư mục CDN có cấu trúc như sau.
tui-calendar/
├─ latest/
│ ├─ tui-calendar.js
│ └─ tui-calendar.min.js
│ └─ tui-calendar.css
│ └─ tui-calendar.min.css
├─ v1.0.0/
│ ├─ ...
Tải Xuống Tệp Nguồn
🛍 Bao Bọc
- toast-ui.vue-calendar Thành phần bao bọc Vue được thực hiện bởi NHN Cloud.
- toast-ui.react-calendar Thành phần bao bọc React được cung cấp bởi NHN Cloud.
- ngx-mat-tui-calendar Thành phần bao bọc Angular 12 , Thiết kế Material được thực hiện bởi @ron2015schmitt
- ngx-tui-dev: Thành phần bao bọc TypeScript và Angular 5 đang được thực hiện (xem thêm #82) bởi @amanvishnani và @brnrds. Cảm ơn sự đóng góp của họ.
- vue-tui-calendar: Thành phần bao bọc Vue đang được thực hiện (xem thêm #81) bởi @lkmadushan. Cảm ơn sự đóng góp của họ.
- tui-calendar-react: Thành phần bao bọc React được cung cấp (xem thêm #134) bởi @IniZio. Cảm ơn sự đóng góp của anh ấy.
- toast_ui.blazor_calendar: Thành phần bao bọc C#/Blazor JSInterop được cung cấp (xem thêm #781) bởi @gismofx Cảm ơn sự đóng góp của anh ấy.
🔨 Sử dụng
HTML
Đặt một thẻ <div></div>
nơi bạn muốn hiển thị TOAST UI Calendar.
<body>
...
<div id="calendar" style="height: 800px;"></div>
...
</body>
JavaScript
Sử dụng không gian tên trong môi trường trình duyệt
var Calendar = tui.Calendar;
Sử dụng định dạng module trong môi trường node
var Calendar = require('tui-calendar'); /* CommonJS */
require("tui-calendar/dist/tui-calendar.css");
// If you use the default popups, use this.
require("tui-date-picker/dist/tui-date-picker.css");
require("tui-time-picker/dist/tui-time-picker.css");
import Calendar from 'tui-calendar'; /* ES6 */
import "tui-calendar/dist/tui-calendar.css";
// If you use the default popups, use this.
import 'tui-date-picker/dist/tui-date-picker.css';
import 'tui-time-picker/dist/tui-time-picker.css';
Sau đó, bạn có thể tạo một phiên bản lịch bằng options để cài đặt cấu hình.
var calendar = new Calendar('#calendar', {
defaultView: 'month',
taskView: true,
template: {
monthDayname: function(dayname) {
return '<span class="calendar-week-dayname-name">' + dayname.label + '</span>';
}
...
}
});
Hoặc bạn có thể sử dụng tiện ích jquery. Bạn phải bao gồm jquery trước khi sử dụng tiện ích jquery này.
// jquery wrapper
var $calEl = $('#calendar').tuiCalendar({
defaultView: 'month',
taskView: true,
template: {
monthDayname: function(dayname) {
return '<span class="calendar-week-dayname-name">' + dayname.label + '</span>';
}
...
}
});
// You can get calendar instance
var calendarInstance = $calEl.data('tuiCalendar');
calendarInstance.createSchedules([...]);
🌏 Hỗ trợ Trình Duyệt
Chrome | Internet Explorer | Edge | Safari | Firefox |
---|---|---|---|---|
Mới Nhất | +9 | Mới Nhất | Mới Nhất | Mới Nhất |
🔧 Bước Đóng Góp
Sản phẩm của TOAST UI là mã nguồn mở, vì vậy bạn có thể tạo một yêu cầu kéo (PR) sau khi bạn sửa các vấn đề. Chạy các kịch bản npm và phát triển bản thân theo quy trình sau.
Cài Đặt
Sao chép nhánh develop
vào kho cá nhân của bạn. Sao chép nó xuống máy tính cục bộ. Cài đặt các module node. Trước khi bắt đầu phát triển, bạn nên kiểm tra xem có bất kỳ lỗi nào hay không.
$ git clone https://github.com/{owner}/tui.calendar.git
$ cd tui.calendar
$ npm install
$ npm run test
Phát Triển
Bắt đầu phát triển! Bạn có thể thấy mã của mình được phản ánh ngay sau khi lưu mã bằng cách chạy máy chủ. Đừng bỏ lỡ việc thêm các trường hợp kiểm thử và sau đó đảm bảo chúng xanh.
Chạy webpack-dev-server
$ npm run serve
Chạy kiểm thử karma
$ npm run test
Yêu Cầu Kéo
Trước khi tải lên Yêu Cầu Kéo của bạn, hãy chạy kiểm thử một lần cuối cùng để kiểm tra xem có bất kỳ lỗi nào hay không. Nếu không có lỗi, hãy commit và sau đó đẩy lên!
Để biết thêm thông tin về các bước Yêu Cầu Kéo, vui lòng xem các liên kết trong phần Đóng Góp.
💬 Đóng Góp
🔩 Phụ Thuộc
- tui-code-snippet >= 1.5.0
- tui-date-picker >= 4.3.0 là tùy chọn.
- tui-time-picker >= 2.1.4 là tùy chọn.
🍞 Gia Đình TOAST UI
🚀 Được Sử Dụng Bởi
- NHN Dooray! – Collaboration Service (Project, Messenger, Mail, Calendar, Drive, Wiki, Contacts)
- NCP – Commerce Platform
- shopby
- payco-shopping
- iamTeacher
- linder
Chi Tiết Tải Xuống:
Tác giả: nhn
Mã Nguồn: https://github.com/nhn/tui.calendar
Giấy Phép: MIT license