react-native-calendar-android
Một lịch đơn giản với giao diện theo chủ đề vật liệu dành cho React Native trên nền tảng Android.
Cài đặt trên Android
. npm install --save react-native-calendar-android
Lưu ý : Kể từ phiên bản react-native-calendar-android@0.0.3, bạn nên sử dụng react-native@0.19.0 trở lên.
Trong android/settings.gradle
...
include ':ReactNativeCalendarAndroid', ':app'
project(':ReactNativeCalendarAndroid').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-calendar-android/android')
Trong android/app/build.gradle
...
dependencies {
...
compile project(':ReactNativeCalendarAndroid')
}
Đăng ký module (trong MainActivity.java)
.1. Với RN < 0.19.0
.2. Với RN >= 0.19.0
```java
import com.chymtt.reactnativecalendar.CalendarPackage; // <----- import
public class MainActivity extends ReactActivity {
...
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new CalendarPackage() // <------ add here
);
}
}
```
```java
import com.chymtt.reactnativecalendar.CalendarPackage; // <----- import
public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
......
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.addPackage(new CalendarPackage()) // <------ add here
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);
setContentView(mReactRootView);
}
......
}
```
Sử dụng
var Calendar = require('react-native-calendar-android');
...
render() {
return (
<Calendar
width={300}
topbarVisible={true}
arrowColor="#dafacd"
firstDayOfWeek="monday"
showDate="all"
currentDate={[ "2016/12/01" ]}
selectionMode="multiple"
selectionColor="#dadafc"
selectedDates={[ "2015/11/20", "2015/11/30", 1448745712382 ]}
onDateChange={(data) => {
console.log(data);
}} />
);
}
Ghi chú
Giao diện là một lưới với 7 ô rộng và 8 ô cao (với topbarVisible=true), hoặc 7 ô cao (với topbarVisible=false).
Kích thước của mỗi ô được tính toán tự động dựa trên chiều rộng đã cung cấp.
Thuộc tính
int width (bắt buộc)
Cung cấp chiều rộng của lịch. Chiều cao sẽ được tính toán dựa trên chiều rộng và topbarVisible.
boolean topbarVisible (mặc định = true)
Hiển thị/ẩn thanh trên cùng chứa tiêu đề tháng và các mũi tên để điều hướng đến tháng trước hoặc sau.
string arrowColor
Một chuỗi màu trong định dạng #RRGGBB hoặc #AARRGGBB. Thay đổi màu của các mũi tên trên thanh trên cùng tương ứng.
enum firstDayOfWeek (mặc định = ‘sunday’)
enum [ ‘monday’, ‘tuesday’, ‘wednesday’, ‘thursday’, ‘friday’, ‘saturday’, ‘sunday’ ]
Thiết lập ngày đầu tiên của tuần.
enum showDate (mặc định = ‘current’)
enum [ ‘all’, ‘current’ ]
Nếu thiết lập thành current, chỉ hiển thị các ngày trong tháng hiện tại. Nếu thiết lập thành all, sẽ hiển thị các ngày từ tháng trước và tháng hiện tại.
array currentDate
Cảm ơn bạn!
Đặt trọng tâm cho lịch. Do một số hạn chế, bạn chỉ cần cung cấp một mảng với một phần tử duy nhất, đó là ngày hiện tại (currentDate). currentDate có thể là một chuỗi trong định dạng yyyy/mm/dd hoặc một dấu thời gian (timestamp).
enum selectionMode (mặc định = ‘single’)
enum [ ‘none’, ‘single’, ‘multiple’ ]
Thiết lập chế độ chọn.
- none: bạn không thể chọn ngày
- single: bạn chỉ có thể chọn một ngày mỗi lần
- multiple: bạn có thể chọn nhiều ngày
string selectionColor
Thiết lập màu của vùng tròn chọn. Phải là một màu trong định dạng #RRGGBB hoặc #AARRGGBB.
array selectedDates
Một mảng ngày trong định dạng yyyy/mm/dd hoặc timestamp. Đặt những ngày đã chọn trên lịch.
Sự kiện
onDateChange(data)
Được gọi khi người dùng chọn/bỏ chọn một ngày. Dữ liệu trả về là { date: ‘yyyy/mm/dd’, selected: boolean }
Câu hỏi hoặc gợi ý?
Hãy tự do open an issue Pull requests cũng được hoan nghênh
Ghi chú
Rất cảm ơn @prolificinteractive vì công việc tuyệt vời của họ Material Calendar View
Chi tiết tải về:
Tác giả: chymtt
Nguồn: https://github.com/chymtt/ReactNativeCalendarAndroid
Giấy phép: MIT license
Cảm ơn bạn!
