Skip to content

Latest commit

 

History

History
86 lines (82 loc) · 3.32 KB

README.md

File metadata and controls

86 lines (82 loc) · 3.32 KB
Raw

Times Square

Times Square helps you to pick and customize calendar with multiple attributes and support for Arabic calendar

Download & Install

Install using:

npm i @ohos/times_square

For using Times Square in your app, add the below dependency in the entry/package.json

"dependencies": {
    "@ohos/times_square": "file:../times_square"
  }

Usage instructions

To use time square calendar, Import the CalendarPickerComponent and set calendar options as below

import { CalendarPickerComponent, CalendarType } from '@ohos/times_square'

CalendarPickerComponent({
          options: {
            tsSelectionMode: CalendarType.SINGLE, // Type of Calendar CalendarType.[Single|Multi|Range]
            tsIsDialog: false, // Show calendar in dialog or not.
            tsBgColor: "#FFFFFF", // Background color of calendar.
            tsGridTextSize: '14fp', // Text size of grid.
            tsMonthTextSize: '14fp', // Text size of month.
            tsMonthTextColor: "#000000", // Text color of month.
            tsSelectedTextColor: "#fafafa", // Text color of selected date.
            tsSelectedGridBackgroundColor: "#3a4352", // Background color of selected date.
            tsNotInMonthTextColor: "#787a7d", // Text color of not in month date.
            tsInMonthColor: "#ebf5ef", // Background color of in month date.
            tsNotInMonthColor: "#d0d9d4", // Background color of not in month date.
            tsInMonthTextColor: "#303133", // Text color of in month date.
            tsSetSelection: true, // Set selection on calendar.
            tsWithNumbers: true, // Show numbers on calendar.
            tsLanguage: "English", // Language of calendar.
            tsGridShape: "Square" // Shape of grid.
          },
          clickListener: (selectedDate) => this.selectedDate (selectedDate)
        })

Screenshots

Attributes

You can style the Calendar using theses attributes :

Attribute Description
tsSelectionMode Type of the calendar
tsBgColor Background color of the calendar
tsGridTextSize Calendar grid text size
tsMonthTextSize Calendar month text size
tsMonthTextColor calendar month text color
tsSelectedTextColor Calendar selected date text color
tsSelectedGridBackgroundColor Calendar selected date background color
tsNotInMonthTextColor Calendar not in month text color
tsInMonthColor Calendar in month text color
tsNotInMonthColor Calendar not in month background color
tsInMonthTextColor Calendar in month background color
tsSetSelection Calendar setting for selection
tsWithNumbers Calendar to show numbers (For arabic)
tsLanguage Calendar set language
tsGridShape Calendar grid shape
tsDayIcon Calendar grid icon

Compatibility

Supports OpenHarmony API version 9

Code Contribution

If you find any problems during usage, you can submit an issue to us. Of course, we also welcome you to send us PR.

Open source License

This project is based on Apache License 2.0, please enjoy and participate in open source freely.