TG Booking Calendar
is a simple and interactive JavaScript library for creating booking calendars.
You can install tg-booking-calendar
using npm or yarn:
npm install tg-booking-calendar
yarn add tg-booking-calendar
You can use either CommonJS or ES modules to import and use the calendar.
CommonJS (Node.js):
const TgCalendar = require('tg-booking-calendar');
// Initialize the calendar
const calendar = new TgCalendar();
ES Modules (ESM):
import TgCalendar from 'tg-booking-calendar';
// Initialize the calendar
const calendar = new TgCalendar();
For legacy environments or when you want to use the package via a CDN, you can load tg-booking-calendar
UMD bundle from npm-based CDN such as jsDelivr and unpkg:
Use jsDelivr:
<script src="https://cdn.jsdelivr.net/npm/tg-booking-calendar/dist/tg-booking-calendar.min.js"></script>
Or Use unpkg:
<script src="https://unpkg.com/tg-booking-calendar/dist/tg-booking-calendar.min.js"></script>
Include the following HTML structure in your page to create the calendar UI.
<div class="tg-calendar-container">
<div class="controls">
<button class="prev">Previous</button>
<div class="month-title">September 2024</div>
<button class="next">Next</button>
</div>
<div class="calendar-grid"></div>
</div>
At the bottom of your HTML file, before the closing tag, initialize the calendar:
<!-- Include the tg-booking-calendar package from a CDN -->
<script src="https://cdn.jsdelivr.net/npm/tg-booking-calendar/dist/tg-booking-calendar.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/tg-booking-calendar/dist/tg-booking-calendar.min.js"></script>
<script>
// Initialize the calendar
const calendar = new TgCalendar();
</script>
For npm/yarn users:
import 'tg-booking-calendar/dist/tg-booking-calendar.min.css';
For CDN users, they should manually include the CSS file from the CDN or your own hosting:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tg-booking-calendar/dist/tg-booking-calendar.min.css">
You can customize the following styles to change the appearance of the calendar:
.calendar-day {
padding: 10px;
text-align: center;
cursor: pointer;
}
.current-day {
background-color: #ffcc00;
}
.selected-day {
background-color: #4CAF50;
color: white;
}