Based on the new folder structure, here is an updated version of the README:
Demo.
- Overview
- Project Structure
- Features
- Installation
- Usage
- Event Handling
- Customization
- Example
- Contributing
- License
Schedule-Lib is a versatile JavaScript library that allows for the creation and management of interactive calendar applications. It offers multiple views such as Year, Month, Week, and Day, and enables the creation, updating, and movement of events with support for recurring events. The library is built with a modular structure, allowing for extensive customization and easy integration into various projects.
schedule-lib/ ├── schedule/ │ ├── exemple/ │ │ ├── events.js │ │ └── index.html │ ├── src/ │ │ ├── css/ │ │ │ ├── checkbox.css │ │ │ ├── day.css │ │ │ ├── event.css │ │ │ ├── index.css │ │ │ ├── modal.css │ │ │ ├── month.css │ │ │ ├── schedule.css │ │ │ ├── week.css │ │ │ └── year.css │ │ └── js/ │ │ ├── managers/ │ │ │ ├── eventManager.js │ │ │ ├── index.js │ │ │ └── langManager.js │ │ ├── views/ │ │ │ ├── checkboxView.js │ │ │ ├── dayView.js │ │ │ ├── eventView.js │ │ │ ├── index.js │ │ │ ├── modalView.js │ │ │ ├── monthView.js │ │ │ ├── weekView.js │ │ │ └── yearView.js │ │ └── index.js │ └── readme.md - checkbox.css: Styles for checkbox elements in the
CheckboxView. - day.css: Styles for the Day view.
- event.css: Styles for individual events.
- index.css: General styles for the schedule application.
- modal.css: Styles for modals.
- month.css: Styles for the Month view.
- schedule.css: Overall layout styles for the schedule.
- week.css: Styles for the Week view.
- year.css: Styles for the Year view.
- eventManager.js: Manages event operations like adding, updating, removing, and managing recurring events.
- index.js: Entry point for managers and global configurations.
- langManager.js: Handles language-specific operations, translations, and localization.
- checkboxView.js: Renders checkboxes for filtering and interacting with installations and zones.
- dayView.js: Manages and renders the Day view, displaying events and details for a single day.
- eventView.js: Handles the display and management of events.
- index.js: Entry point for views-related operations.
- modalView.js: Manages modals for adding, editing, or viewing event details.
- monthView.js: Manages and renders the Month view in a grid format.
- weekView.js: Manages and renders the Week view with a detailed breakdown of events by hours and days.
- yearView.js: Manages and renders the Year view, showing an overview of events across months.
- events.js: Contains predefined event data used in the example.
- index.html: An example HTML file showcasing the usage of
Schedule-Lib.
- Multiple Views: Navigate between Year, Month, Week, and Day views.
- Event Management: Create, update, duplicate, and move events.
- Recurring Events: Manage events with recurrence patterns.
- Language Support: Easily switch between languages using
langManager. - Customizable UI: Tailor the look and feel of the calendar with CSS.
To use Schedule-Lib:
- Clone the repository:
git clone https://github.com/your-repo/schedule-lib.git
- Navigate to the project directory:
cd schedule-lib/schedule/src - Open
index.htmlin your preferred browser.
-
Initialize the Schedule:
<div id="schedule"></div>
-
Configure Options:
const options = { containerId: 'schedule', editable: true, defaultView: 'month', defaultLang: 'fr', events: events, // Import or define your events checkboxes: checkboxes, // Import or define checkbox data };
-
Initialize the Schedule:
import { Schedule } from "./schedule/src/js/index.js"; document.addEventListener('DOMContentLoaded', () => { const schedule = new Schedule(options); });
- add: Triggered when an event is added.
- duplicate: Triggered when an event is duplicated.
- update: Triggered when an event is updated.
- move: Triggered when an event is moved to a different date.
- remove: Triggered when an event is removed.
Example:
schedule.on('add', (eventData) => { schedule.eventManager.addEvent(eventData.date, {...eventData, id: events.length}); schedule.updateView(); });Modify styles in the schedule/src/css/ directory to customize the calendar's appearance.
Extend or modify views and managers by editing or adding new files in the schedule/src/js/ directory.
Use langManager.js to add new languages or modify existing translations.
For a live example of Schedule-Lib, visit this demo.
Contributions are welcome! Please fork the repository, create a new branch, commit your changes, and open a pull request.
This project is licensed under the MIT License.
This README provides a comprehensive guide to getting started with Schedule-Lib, including details on installation, usage, customization, and contribution.