Skip to main content

week Calendar

Calendar View​

img

When data is in the form of dates, such as schedules, timetables, prices calendar, lunar calendar.

Usage​

import React from 'react'
import { WeekCalendar } from 'qdm-component-library'

function App() {
  return <WeekCalendar />
}
export default App

Reference​

weekStartDate​

To set the starting date of the calendar using weekStartDate.

import React from 'react'
import { WeekCalendar } from 'qdm-component-library'

function App() {
  return <WeekCalendar weekStartDate={new Date()} />
}
export default App

weekEndDate​

To set the ending date of the calendar using weekEndDate.

import React from 'react'
import { WeekCalendar } from 'qdm-component-library'

function App() {
  const addDays = (theDate, days) => {
    return new Date(theDate.getTime() + days * 24 * 60 * 60 * 1000)
  }

  return <WeekCalendar weekEndDate={addDays(new Date(), 6)} />
}
export default App

inLineStyles​

props give addition props to the inLineStyles element type Object