Date Components

Installation

npm install @semapps/date-components --save

If you wish to use the CalendarList or DaysList components, you must also include the following CSS file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.7.2/main.min.css" />

Components

CalendarList

Display a list of resources in a calendar view, using the FullCalendar package.

import { List } from 'react-admin';
import { CalendarList } from '@semapps/date-components';

const MyList = props => (
  <List pagination={false} perPage={1000} {...props}>
    <CalendarList
      label="label"
      startDate="startDate"
      endDate="endDate"
    />
  </List>
);

Property	Type	Default	Description
label	Function or String	required	A function which takes a record and returns a label, or the property to use
startDate	Function or String	required	A function which takes a record and returns a start date, or the property to use
endDate	Function or String	required	A function which takes a record and returns an end date, or the property to use
locale	Object	(English)	The locale to be used by FullCalendar
linkType	String	"edit"	What kind of link to use. Available options: "show" or "edit"

DaysList

Same as CalendarList, except the resources are displayed in a list view.

Date/Time inputs

import React from 'react';
import { Edit, SimpleForm } from 'react-admin'
import { DateInput, TimeInput, DateTimeInput } from '@semapps/date-components';

export const MyEdit = (props) => (
  <Edit {...props}>
    <SimpleForm>
      <DateInput source="startDate" label="Start date" options={{ format: 'dd/MM/yyyy' }} />
      <TimeInput source="startTime" label="Start time" options={{ format: 'HH:mm:ss' }} />
      <DateTimeInput source="endDate" label="End time" options={{ format: 'dd/MM/yyyy, HH:mm:ss', ampm: false, clearable: true }} />
    </SimpleForm>
  </Edit>
);

Props

Property	Type	Default	Description
allowClear	Boolean	false	Show a clear button on the right of component

options

The options prop is passed down to the pickers.

Documentation for these options can be found in the material-ui-pickers documentation for the component you're trying to use.

providerOptions

If you want to use a date adapter library other than date-fns or you want a locale other than english, you can pass the providerOptions prop:

import DateFnsUtils from '@date-io/date-fns';
import MomentUtils from 'material-ui-pickers/utils/moment-utils';
import frLocale from "date-fns/locale/fr";
import moment from "moment";

<DateInput source="date" label="Date using moment" providerOptions={{ utils: MomentUtils }} />
<DateInput source="date" label="Date in French!" providerOptions={{ utils: DateFnsUtils, locale: frLocale }} />