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.
To use MCalendar, follow these simple steps:
-
Include Stylesheet: Link to the MCalendar stylesheet in the
<head>of your HTML file.<link rel="stylesheet" href="m-calendar.css" />
-
Create a Container: Add a
<div>with the ID "calendar-container" where you want the calendar to appear.<div id="calendar-container"></div>
-
Include JavaScript: Link to the MCalendar JavaScript file just before the closing
</body>tag.<script src="m-calendar.js"></script>
-
Initialize MCalendar: Use JavaScript to create an instance of MCalendar and pass your configuration.
<script> document.addEventListener("DOMContentLoaded", function () { const calendarContainer = document.getElementById("calendar-container"); const mcalendar = new MCalendar(calendarContainer, { events: [ // Add your events here ], }); mcalendar.render(); }); </script>
MCalendar is highly configurable. You can customize the appearance and behavior by providing options in the configuration object. For example:
const mcalendar = new MCalendar(calendarContainer, {
events: [
// Your events here
],
// Additional configuration options go here
});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!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent