lib-calendar

The calendar component used across Doodle frontends.

Publish

Publish via Github Releases using tagflow tag conventions.

• Create a release with a release tag on Github Releases tab with the prefix pub e.g. pub.[release_number].
• Add the release tag in the title with a short title for the new release.
• Please describe what changes are in the release in the description section and link the relevant JIRA ticket/s.

Development

Create a link for @doodle/calendar

yarn install
yarn build
yarn link

Use the link in your project

yarn link @doodle/calendar

Playground

To run calendar playground:

yarn play

Fix for linking

Include the following line in resolve.alias in webpack.config.js in your consuming project. Otherwise, react may get included twice in your local build and things will break. (react is coming as part of the storybook dependencies)

react: path.resolve(__dirname, '../node_modules', 'react')

The equivalent fix for jest.config.js is...

moduleNameMapper: {
  '^react$': '<rootDir>/node_modules/react/index.js',
},

Resolutions

1. js-yaml: the latest version of babel-plugin-inline-react-svg (1.1.1) indirectly requires an outdated version of js-yaml that contains a critical security vulnerability: https://www.npmjs.com/advisories/813

Library used in projects

Projects currently using lib-calendar.

These project versions are found on a branch which is separate from master in the library so as not to cause conflicts between projects.

Note: this is still WIP. Once the branch is in place, its name will be added to this section

• Meetme - @doodle/calendar: 1.x.x
• Bookable Calendar - @doodle/calendar: 1.x.x

These project versions are found on master.

• SchedEx - @doodle/calendar: 2.x.x

  • OrgEx
  • PartEx

Library Documentation

Settings and layout

Date data

Styles, messages & formats

Boolean Props

Callbacks

To show slots

* data passed as a prop (minimum properties required for an event are start and end}

 {
   start: 'Sun Mar 30 2020 01:00:00 GMT+0300 (Moscow Standard Time)',
   end: 'Sun Mar 30 2020 02:00:00 GMT+0300 (Moscow Standard Time)',
 },

Components

Here, there is the ability to customise how different sections of the calendar render by providing custom Components.

components: {
 event: () => <Event />,
 eventWrapper: () => <EventWrapper />,
 dayWrapper:() => <DayWrapper />, // not used in doodle projects
 dateCellWrapper: () => <DateCellWrapper />,
 optionsToolbar: () => <OptionsToolbar />, // not used in doodle projects
 toolbar: () => <Toolbar />,
}

event

Defines how Event should look.

If a custom design for an event is needed:

• Create event component
• Pass function to components prop. Function returns event component.

components={
{ event: elProps => <CustomEvent eventProp={elProps.event} />}
}

eventWrapper

E.g. The Meetme projects differs between a slot and an event e.g. slot should take 100% width while the event could be positioned on the lower layer - z-index: 0.

dateCellWrapper

E.g. Add a title or functionality for date cell.

toolbar

Defines how the toolbar should look.

Properties that should be defined before calendar mounting