总览

Schedule-x 为 Web 提供了 Material Design 风格的日历和日期选择器。它是围绕轻量级虚拟 DOM 实现构建的。该库为 React 和 Vue 提供了对应的组件。本文主要讨论它的日历组件。

安装

npm i @schedule-x/calendar @schedule-x/theme-default

基础使用

import { createCalendar, viewMonthGrid } from '@schedule-x/calendar'
import '@schedule-x/theme-default/dist/index.css' 

const calendar = createCalendar({ 
    views: [viewMonthGrid], 
    events: [ 
        {
            id: 1,
            title: 'Coffee with John',
            start: '2024-01-04 10:05',
            end: '2024-01-04 10:35',
        }
   ],
 }) 
 
 calendar.render(document.getElementById('calendar'))

上面的代码添加了日历组件与主题。页面效果显示如下：

配置

 const calendar = createCalendar({
    locale: 'zh-CN', // 中文
    // firstDayOfWeek: 0,
    defaultView: viewMonthGrid.name,
    // selectedDate: '2024-02-24',  // 默认日期
    // isDark: true, // 暗模式
    // dayBoundaries: {
    //   start: '06:00',
    //   end: '18:00',
    // },
    views: [viewMonthGrid, viewDay, viewMonthAgenda, viewWeek],
    // 页面中的活动
    events: [
      {
        id: 1,
        title: 'Coffee with John',
        start: '2024-01-04 10:05',
        end: '2024-01-04 10:35',
      }
    ],
    callbacks: {
      /**
       * Is called when:
       * 1. Selecting a date in the date picker
       * 2. Selecting a new view
       * */
      onRangeUpdate(range) {
        console.log('new calendar range start date', range.start)
        console.log('new calendar range end date', range.end)
      },
   
      /**
       * Is called when an event is updated through drag and drop
       * */
      onEventUpdate(updatedEvent) {
        console.log('onEventUpdate', updatedEvent)
      },
   
      // 点击活动事件的回调
      onEventClick(calendarEvent) {
        console.log('onEventClick', calendarEvent)
      },
   
      // 日期的回调
      onClickDate(date) {
        console.log('onClickDate', date) // e.g. 2024-01-01
      },
   
      /**
      * Is called when clicking somewhere in the time grid of a week or day view
      * */
      onClickDateTime(dateTime) {
        console.log('onClickDateTime', dateTime) // e.g. 2024-01-01 12:37
      }
    },
  })

视图

Schedule-X 日历可以在小屏幕使用(使用 viewMonthAgenda )。同时也支持日(viewDay)视图和周(viewWeek)视图。可以在配置中添加:

import { 
    createCalendar, 
    viewDay, 
    viewMonthAgenda, 
    viewMonthGrid, 
    viewWeek,} 
from '@schedule-x/calendar'
import '@schedule-x/theme-default/dist/index.css' 

const calendar = createCalendar({ 
    views: [viewMonthGrid, viewDay, viewMonthAgenda, viewWeek], 
    events: [],
 }) 
calendar.render(document.getElementById('calendar'))

效果如何:

活动事件

在任何日历的中心，都包含计划中的事件。Schedule-X 也不例外。

    calendar.events.add({
      id: 3,
      title: 'New event',
      start: '2024-01-10',
      end: '2024-01-12',
    }) // 添加一个新事件
    calendar.events.update({
      id: 1,
      title: 'Updated event',
      start: '2024-01-04',
      end: '2024-01-06',
    }) // 更新事件

    let calendarAll = calendar.events.getAll() // 获取所有的活动
    console.log(calendarAll)

    // calendar.events.remove(1) // 移除事件

效果如下:

日历事件的配置

Schedule-X 允许你为不同的事件设置不同的颜色，用于区分。calendarId 可以设计不同的属性名称。

{
    calendars: {
      personal: {
        colorName: 'personal',
        lightColors: {
          main: '#f9d71c',
          container: '#fff5aa',
          onContainer: '#594800',
        },
        darkColors: {
          main: '#fff5c0',
          onContainer: '#fff5de',
          container: '#a29742',
        },
      },
      work: {
        colorName: 'work',
        lightColors: {
          main: '#f91c45',
          container: '#ffd2dc',
          onContainer: '#59000d',
        },
        darkColors: {
          main: '#ffc0cc',
          onContainer: '#ffdee6',
          container: '#a24258',
        },
      },
      leisure: {
        colorName: 'leisure',
        lightColors: {
          main: '#1cf9b0',
          container: '#dafff0',
          onContainer: '#004d3d',
        },
        darkColors: {
          main: '#c0fff5',
          onContainer: '#e6fff5',
          container: '#42a297',
        },
      },
    },
    events: [
      {
        id: 1,
        title: 'Coffee with John',
        start: '2024-01-04 10:05',
        end: '2024-01-04 10:35',
        calendarId: "personal"
      },
      {
        id: 2,
        title: 'Ski trip',
        start: '2024-01-04',
        end: '2024-01-06',
        calendarId: "work"
      },
      {
        id: 3,
        title: 'Ski trip',
        start: '2024-01-09',
        end: '2024-01-16',
        calendarId: "leisure"
      },
    ],
}

效果如下：

插件

拖放插件

安装：

npm i @schedule-x/drag-and-drop

使用

import { createDragAndDropPlugin } from '@schedule-x/drag-and-drop' 
const calendar = createCalendar({ 
    // ...other 
    configuration plugins: [createDragAndDropPlugin()],
})

Playground

官方提供了一个在线演示Playground，可以查看效果：

Calendar demo – Schedule-X

资料

Github: schedule-x/schedule-x: Material design event calendar and date picker (github.com)

官网： Schedule-X | Material Design Event Calendar