Skip to content

Latest commit

 

History

History
137 lines (111 loc) · 4.63 KB

README.md

File metadata and controls

137 lines (111 loc) · 4.63 KB
Raw

@zhengxs/calendar-data

lang code style: prettier npm version Downloads Downloads Gzip Size codecov Build Status License

一个轻量的日历数据生成的 JavaScript 库，支持国际化的功能。支持 Nodejs 和浏览器。

  • 🌐 国际化 I18n

面向初学者：如何写一个日历组件

快速开始

安装

$ npm install @zhengxs/calendar-data --save

使用

import Calendar from '@zhengxs/calendar-data'

// 全局设置每一周的开始（0 表示星期日，6 表示星期六）
Calendar.config.firstWeekDay = 0

// 单个日历视图上显示的周数量
Calendar.config.visibleWeeksCount = 6

// 全局设置默认语言
Calendar.config.locale = 'cn'

// 全局添加语种
Calendar.locale({
  name: 'en',
  weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
  weekdaysShort: ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
  weekdaysAbbr: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
})

const calendar = Calendar.create({
  // 默认周末开始
  // firstWeekDay: 0,
  // 默认6周，如果周日开始
  // 那 2020-01-01 在日历视图上就是占用6行
  // visibleWeeksCount: 6
})

// 默认中文
calendar.getWeekHead()
// ->
// [
//   { name: '星期日', ..., day: 0 },
//   { name: '星期一', ..., day: 1 },
//   { name: '星期二', ..., day: 2 },
//   { name: '星期三', ..., day: 3 },
//   { name: '星期四', ..., day: 4 },
//   { name: '星期五', ..., day: 5 },
//   { name: '星期六', ..., day: 6 },
// ]

// 国际化
calendar.locale('en').getWeekHead()
// ->
// [
//   { name: 'Sunday',    ..., day: 0 },
//   { name: 'Monday',    ..., day: 1 },
//   { name: 'Tuesday',   ..., day: 2 },
//   { name: 'Wednesday', ..., day: 3 },
//   { name: 'Thursday',  ..., day: 4 },
//   { name: 'Friday',    ..., day: 5 },
//   { name: 'Saturday',  ..., day: 6 },
// ]

// 生成 2020-12 月的日历数据
calendar.getMonthCalendar(2020, 12)
// -> 一个二维数组
// [
//   [Date(2020, 11, 29), ..., Date(2020, 12, 05)],
//   [Date(2020, 12, 06), ..., Date(2020, 12, 12)],
//   [Date(2020, 12, 13), ..., Date(2020, 12, 19)],
//   [Date(2020, 12, 20), ..., Date(2020, 12, 26)],
//   [Date(2020, 12, 27), ..., Date(2020, 01, 02)],
//   [Date(2021, 01, 03), ..., Date(2021, 01, 09)],
// ]

// 生成 2020-12 前面一个月的日历数据
calendar.getPreviousMonthCalendar(2020, 12)
// ->
// [
//   [Date(2020, 11, 01), ..., Date(2020, 11, 07)],
//   [Date(2020, 11, 08), ..., Date(2020, 11, 14)],
//   [Date(2020, 11, 15), ..., Date(2020, 11, 21)],
//   [Date(2020, 11, 22), ..., Date(2020, 11, 28)],
//   [Date(2020, 11, 29), ..., Date(2020, 11, 05)],
//   [Date(2020, 12, 06), ..., Date(2020, 12, 12)],
// ]

// 生成 2020-12 后面一个月的日历数据
calendar.getNextMonthCalendar(2020, 12)
// ->
// [
//   [Date(2020, 12, 27), ..., Date(2021, 01, 02)],
//   [Date(2021, 01, 03), ..., Date(2021, 01, 09)],
//   [Date(2021, 01, 10), ..., Date(2021, 01, 16)],
//   [Date(2021, 01, 17), ..., Date(2021, 01, 23)],
//   [Date(2021, 01, 24), ..., Date(2021, 01, 30)],
//   [Date(2021, 01, 31), ..., Date(2021, 02, 06)],
// ]

// 生成某个月的时间数据
calendar.getMonthDates(2020, 12)
// -> [Date(2020, 12, 01), ..., Date(2020, 12, 31)]

// 生成某个周的时间数据
calendar.getMonthDates(2020, 12, 03)
// -> [Date(2020, 11, 29), ..., Date(2020, 12, 05)]

示例

代码都在 examples 目录

License

  • MIT