https://github.com/colorfield/react_calendar

React progressively decoupled Calendar based on JSON API
https://github.com/colorfield/react_calendar

calendar drupal drupal-8 drupal-module json-api react

Last synced: about 1 month ago
JSON representation

React progressively decoupled Calendar based on JSON API

• Host: GitHub
• URL: https://github.com/colorfield/react_calendar
• Owner: colorfield
• Created: 2018-07-02T10:58:27.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-08-29T13:50:21.000Z (over 6 years ago)
• Last Synced: 2024-11-08T01:12:18.852Z (3 months ago)
• Topics: calendar, drupal, drupal-8, drupal-module, json-api, react
• Language: PHP
• Homepage:
• Size: 6.24 MB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Calendar

React progressive decoupling for Drupal 8 based on JSON API.

## Dependencies

### React

- [Big Calendar](https://github.com/intljusticemission/react-big-calendar)

- [Moment](https://www.npmjs.com/package/react-moment)

## Drupal

- Date Range or Date (core)

- JSON API 2.x ([The path for JSON API to core](https://www.drupal.org/project/jsonapi/issues/2931785))

## Configuration 

- Enable the __Date Range__ or __Date__ module

- Add a _date range_ or _date_ field to a content type

- Use the content type tab to enable 'React Calendar' 

for the desired content type(s) and set the date field that will be used

- Head to _/react_calendar/calendar_

 

## Roadmap

By priority

- ~~Expose calendar as a block~~

- Content translation review for language fallback

 (/admin/config/react_calendar/settings)

- Configure events title display as multiline in month view 

- [Timezone support](https://github.com/r-daneelolivaw/react_calendar/issues/2)

- Provide configuration for BigCalendar React props,

including views (month, week, work week, day, agenda)

- Clear cache after module installation to display the React Calendar tab on the content type

- Set enabled entity types from the date or date range field instance definition instead of the

content type configuration that currently limits the exposed entities to nodes 

- Set Calendar view and date from the routing

- Configure Calendar exposed views (month, week, day, agenda)

- Add permission to view the calendar

- Week start day based on system configuration

- Provide configuration and translation for status messages (loading, error)

- Set calendar locales based on current interface language

- Optionally set event colors based on a taxonomy vocabulary (e.g. event type)

- Provide GraphQL implementation

- Choose between GraphQL or JSON API from the configuration

- Update events via drag and drop

- Styling documentation

## Development

### Drupal

- Enable the Date Range module

- Enable the React Calendar module

- Configure CORS to allow `* | http://localhost:3000`

- Create an 'event' content type with a 'date range' field 

named 'field_datetime_range'.

These values are coming from the static js/public/index.html file

- Use the event content type tab to enable 'React Calendar' 

and set the date field to the date range field previously created

- Devel generate some events

### React

1. cd in _react_calendar/js/src_

2. Install dependencies with `yarn install`

3. Copy the _constants/.env.example.js_ file to _constants/.env.local.js_ 

and set there your Drupal 8 development site url.

It will be used while debugging React as a standalone app for JSON API requests

4. Edit _App.js_ or the components

5. Run `yarn start` to start the React development server 

and test your app outside of Drupal (localhost:3000)

6. Run `php build.php` to bundle the dist js and css

that are referenced by _react_calendar.libraries.yml_