Skip to main content

calendar

Last updated on
  • calendar là component trong tini-ui là thành phẩn nhỏ gọn hiển thị thông tin lịch (ngày, tháng, năm).
  • Để sử dụng calendar, bạn cần phải cài tini-ui từ version 0.2.1-rc.8 trở lên.

Quét mã để trải nghiệm

Xem code mẫu trên Tini Studio

Demo

Trải nghiệm thử với trình giả lập bên dưới

Cài đặt tini-ui:

$> yarn add @tiki.vn/tini-ui

Chi tiết

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
classNamestring''Custom class cho calendar
stylestring''Style cho calendar
locale'en' | 'vi''viHỗ trợ Tiếng Việt / Tiếng Anh.
tagData[{ date: '11-11-2021', tag: 'Aa', tagColor: 'blue', tagInactiveColor: 'red',disable: true},][]Có thể đặt tag (color) hoặc disabled một số ngày cụ thể
mode'timeOnly', 'single' , 'range'timeOnly'Chế độ hiển thị/chọn lịch. (single - chọn một ngày, range - chọn khoảng thời gian)
header'year', 'month''month'Nếu set 'year' có thể chọn next/pre year.
selectedDate[][]Ngày đang được chọn. (format là timestamp)
onSelectevent(data) => voidTrigger function này khi chọn ngày bên trái của calendar
onChangeevent(data) => voidTrigger function này khi thay đổi tháng/năm bên phải của calendar

Sample Code

index.json
{
"defaultTitle": "Calendar",
"usingComponents": {
"list-item": "@tiki.vn/tini-ui/es/list/list-item/index",
"calendar": "@tiki.vn/tini-ui/es/calendar/index",
"block-header": "components/block-header/index",
"block-variant": "components/block-variant/index"
}
}
index.txml
<template name="variant-format">
<block-variant header="Variant" title="1. Header" description="Default, Title with fast navigation & Time only">
<view class="mt-medium">
<view class="font-bold pb-2x-small border-bottom ">1.1. Header - Default</view>
<view class="mt-2x-small">
<calendar mode="single" header="month" />
</view>
</view>
<view class="mt-medium">
<view class="font-bold pb-2x-small border-bottom ">1.2. Header - Fast forward & back forward</view>
<view class="mt-2x-small">
<calendar mode="range" header="year" />
</view>
</view>
<view class="mt-medium">
<view class="font-bold pb-2x-small border-bottom ">1.2. Header - Fast forward & back forward</view>
<view class="mt-2x-small">
<calendar mode="timeOnly" />
</view>
</view>
</block-variant>
</template><template name="variant-state">
<block-variant title="2. Content" description="Default & With sub content.">
<view class="mt-medium">
<view class="font-bold pb-2x-small border-bottom ">2.1. Content - Default</view>
<view class="mt-2x-small">
<calendar mode="single" onSelect="onSelect" onChange="onChange" />
</view>
</view>
<view class="mt-medium">
<view class="font-bold pb-2x-small border-bottom ">2.2. Content - With sub content</view>
<view class="mt-2x-small">
<calendar tagData="{{tagData}}" mode="single" header="year" onSelect="onSelect" onChange="onChange" />
</view>
</view>
</block-variant>
</template>
<view class="page">
<block-header title="Usage" description="Calendar allow users to overview and select a start and end time." />
<template is="variant-format" data="{{tagData}}" />
<template is="variant-state" data="{{tagData}}" />
</view>
index.js
Page({
data: {
tagData: [
{
date: '09-11-2021',
tag: 'Aa'
},
{
date: '10-11-2021',
tag: 'Aa'
},
{
date: '11-11-2021',
tag: 'Aa'
},
{
date: '12-11-2021',
tag: 'Aa',
tagColor: 'blue',
tagInactiveColor: 'red'
},
{
date: '13-11-2021',
tag: 'Aa',
disabled: true
},
{
date: '28-11-2021',
tag: 'Aa',
tagColor: 'blue',
tagInactiveColor: 'red'
}
]
},
onSelect(data) {
console.log(data);
},
onChange(data) {
console.log(data);
}
});