The Boom-Components Library provides separate, reusable React components for building calendar-related functionality in your projects.
-
Clone the repository:
git clone https://github.com/BoomTech-LLC/Calendar-Components
-
Navigate to the project directory:
cd Calendar-Components
-
Install dependencies (use Node.js version 14):
npm install
Note: Install dependencies both in the root folder and inside the
components
folder. -
Start the server:
- Navigate to the
components
folder. - Run the following command:
npm start
The server will be running at:
http://localhost:9123/
- Navigate to the
To test a component, add it in the App.js
file and set all properties:
<DateBox
start="2024-12-04"
end="2024-12-05"
eventKind="1"
eventTimeZone="Asia/Yerevan"
dateFormat="DD MMMM, YYYY"
allDay={true}
showIcons={false}
type="dateBox"
dayNumberSize={80}
wrapperCustomClassNames={["bc-agenda-desc-color", "timebox", "seperateDates"]}
oneLine={true}
repeat={{
type: "",
advanced: "",
end: "720",
interval: "1",
exclude: [],
additionalDates: []
}}
agenda={true}
showTimeOnly={true}
makeDatesCenter={false}
/>
If you want to change the project's port, modify the .env
file in the components
folder.
- Update the root folder's
package.json
file version from1.0.0
to1.0.1
. - Update the
components
folder'spackage.json
file version from1.0.0
to1.0.1
. - Navigate to the root folder and run the following command:
npm run build
- After the build process, push the changes to GitHub and merge them with the
master
branch.
Important Note: Both package.json
files must have the same version number.
-
If the library is not listed in your
package.json
, install it directly:npm i git+https://github.com/BoomTech-LLC/Calendar-Components.git
-
To update the library, add the following script to your
package.json
:"scripts": { "update:bcc": "npm install git+https://github.com/BoomTech-LLC/Calendar-Components.git" }
Then run the script:
npm run update:bcc
-
Import the required component individually, for example:
import AddShareIcons from 'boom-components/dist/AddShareIcons';