Agenda React Component

Description

An Agenda component for your React application. Display a list of events and offer the possibility to create new or modify these events.

Offer the possibility to customise options and colors of the component.

Installation

Use npm install agenda-rc to install the package You need to download input-moment.min.css and add it as a css link in your html page

Utilisation

Props

| Props | Description | Type | Optional | | ----------- | ----------------------------------------------------------------------------------------------------------- | --------------------- | ----------------------- | | eventList | List of events which will be displayed in the agenda | Array | false | | language | Language of the text displayed | String ("en" or "fr") | true (fr by default) | | theme | Index of the color theme (see material palette + white and black) | number | true | | settings | List of settings of the app | Object | true | | handlers | List of function to update value of different props (no need to update the props of the component) | Object | false | | tagsList | List of tags | Object | false(but can be empty) | | eventColors | Default List of colors for events | List | true | | timeRange | Minimal time division (must be : 5, 10, 15, 20, 30 or 60) | Number | true (default : 5) |

Settings

Settings object props

| Name | Description | Type | Optional | | ----------------- | ------------------------------------------------------------------------ | ------- | --------------------- | | settingsModif | Defined wich options can be changed within the component | Object | false | | table | Used to know during how much month before and after the events are given | Object | false | | title | Informations about the title | Object | false | | allowCreation | Tell if we can create new events | Boolean | true (default : true) | | allowModification | Tell if we can modify existing event (delete included) | Boolean | true (default : true) | | allowTags | allow the creation of tags | Object | true (default : true) |

settingsModif

SettingsModif object props

| Name | Description | Type | Optional | | ---------------- | ------------------------------------------------------------------- | ------- | ---------------------- | | allowed | Allow the possibility to acces change the settings in the component | Boolean | false | | allowColor | Allow to change the event color range | Boolean | true (default : true ) | | allowTimeRange | Allow to change the time division | Boolean | true (default : true ) | | allowThemeChange | Allow to change the theme | Boolean | true (default : true ) |

table

Table object props

| Name | Description | Type | Optional | | ------ | ------------------------------------------ | ------ | -------- | | before | Number of month rendered before today date | Number | false | | after | Number of month rendered after today date | Number | false | | total | Number total of month rendered | Number | false |

title

Title object props

| Name | Description | Type | Optional | | -------- | ---------------------------------------------------------------- | ------- | -------- | | isImage | Tell if you want to use an image instead of a text for the title | Boolean | false | | value | Title or path to the image | String | false | | hasLogo | Tell if ther is a logo to render before the title | Boolean | false | | logoPath | Path to the logo | String | false |

Handlers

List of function to update value of different props (no need to update the props of the component)

| Name | Description | Type | Optional | | --------------- | ------------------------------------------------- | -------- | -------- | | handleEvent | Function to return the events modified or created | function | false | | handleColors | Function to return the color range | function | true | | handleTimeRange | Function to return the time division | function | true | | handleTagList | Function to return the tags | function | true | | handleTheme | Function to return the theme | function | true |

Example

import Agenda from 'agenda-rc'

//Needed for the css to work because of semantic ui (can be imported once in the top container)
import 'semantic-ui-css/semantic.min.css'

const settings = {
      //settings window alowed options
      settingsModif: {
         //allow general setting modif
         allowed: true,
         //allow color change in settings(true by default)
         allowColor: true,
         //allow change of timeRange
         allowTimeRange: true,
         //allow theme color change
         allowThemeChange: true
      },
      //settings link to the eventList
      table: {
         //number of months before given
         before: 1,
         //number of months after given
         after: 11,
         //number total of months
         total: 12
      },
      //title otpions
      title: {
         //is the title an image and no a text
         isImage: false,
         //text of the title or link to the image
         value: 'Calendrier',
         //does it have logo
         hasLogo: false,
         //logo path
         logoPath: 'https://react.semantic-ui.com/images/wireframe/image.png'
      },
      //creation and modification options
      //allow creation of event
      allowCreation: true,
      //allow modification of events
      allowModification: true,
      //allow the creation of tags
      allowTags : true
   }

  //list of events to be displayed
  const eventList = [
    //exemple of event:
    {
               title: '', // title of the event
               color: '', //color of the event
               start: moment, //start moment (from moment)
               end: moment, //end moment
               icon: '', //name of the icon from semantic ui to be associated (optional)
               key: '', //the unique key correspoding to the event
               place: '', //name of the place where the eventit take place
               tags: [], // list of the keys of the tags associated to this event
               description: '' // the description of the event
            }
  ]

  //list of handlers to permit changes from the agenda
  //handle the change of differents value (take the new value for parameters)
  const handlers = {
      handleEvent: function, //for the eventList
      handleColors: function, // for the colorsList
      handleTimeRange: function, // for the timeRange
      handleTagList: function, // for the tagList
      handleTheme: function // for the theme
   }

   //List of tags
   const tagsList = {
   //can be empty, tags can be created when events are created / modified
   //else is on the format
      key: { //the key of the tag (must be unique)
         name: '', //the name displayed
         color: '' //the color, must be one element of : red, orange, yellow, olive, green, teal, blue, violet, purple, pink, brown, grey, black
      }
   }

   //array of default color (in hexaDecimal) for events(optional)
   const eventColors = ['#000', '#f00', '#0f0', '#00f']

   //minimal time range (multiple of 5 and one hour can be easily divided in equals part of this time range) must be : 5, 10, 15, 20, 30 or 60
   const timeRange = 15

   .
   .
   .


   ReactDOM.render(<Calendar eventList={eventList} language="en" theme={1} settings={settings} handlers={handlers} tagsList={tagsList} eventColors={eventColors} timeRange={timeRange} />, document.querySelector('#root'))