Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/munya-marinda/m-calendar
Easily integrating a customizable calendar into your web projects.
https://github.com/munya-marinda/m-calendar
calendar css events frontend html javascript-library mcalendar open-source scheduling ui-components web-development
Last synced: 9 days ago
JSON representation
Easily integrating a customizable calendar into your web projects.
- Host: GitHub
- URL: https://github.com/munya-marinda/m-calendar
- Owner: Munya-Marinda
- Created: 2023-12-12T12:55:38.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-12T13:06:59.000Z (about 1 year ago)
- Last Synced: 2023-12-12T14:26:56.322Z (about 1 year ago)
- Topics: calendar, css, events, frontend, html, javascript-library, mcalendar, open-source, scheduling, ui-components, web-development
- Language: JavaScript
- Homepage: https://munya-marinda.github.io/m-calendar/
- Size: 6.84 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MCalendar
MCalendar is a lightweight JavaScript library for easily integrating a customizable calendar into your web projects. It provides an intuitive interface to display events, deadlines, meetings, or any other date-related information. MCalendar is designed with simplicity and flexibility in mind, making it easy to use and customize according to your needs.
## Getting Started
To use MCalendar, follow these simple steps:
1. **Include Stylesheet**: Link to the MCalendar stylesheet in the `` of your HTML file.
```html
```
2. **Create a Container**: Add a `
` with the ID "calendar-container" where you want the calendar to appear.
```html
```
3. **Include JavaScript**: Link to the MCalendar JavaScript file just before the closing `` tag.
```html
```
4. **Initialize MCalendar**: Use JavaScript to create an instance of MCalendar and pass your configuration.
```html
document.addEventListener("DOMContentLoaded", function () {
const calendarContainer = document.getElementById("calendar-container");
const mcalendar = new MCalendar(calendarContainer, {
events: [
// Add your events here
],
});
mcalendar.render();
});
```
## Configuration
MCalendar is highly configurable. You can customize the appearance and behavior by providing options in the configuration object. For example:
```javascript
const mcalendar = new MCalendar(calendarContainer, {
events: [
// Your events here
],
// Additional configuration options go here
});
```
## Event Structure
Events are structured as objects with specific properties:
- `title`: The title of the event.
- `start_date`: The start date and time of the event.
- `end_date`: The end date and time of the event.
- `color`: The text color of the event.
- `background_color`: The background color of the event.
Feel free to contribute, report issues, or customize the code to suit your project's needs. Enjoy using MCalendar!