Tg-booking-calendar NPM

TG Booking Calendar

TG Booking Calendar is a simple and interactive JavaScript library for creating booking calendars.

Installation:

You can install tg-booking-calendar using npm or yarn:

npm install tg-booking-calendar

yarn add tg-booking-calendar

Usage:

Import the Calendar

ES Modules (ESM):

import React, { useEffect } from 'react';
import TgCalendar from 'tg-booking-calendar';

// Initialize the calendar
useEffect(() => {
  new TgCalendar();   
}, []);

Use Styles for npm or yarn users:

import 'tg-booking-calendar/dist/tg-booking-calendar.min.css';

For Browser Environments:

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:

Include Script:

At the bottom of your HTML file, before the closing </body> tag, initialize the calendar:

<script src="https://cdn.jsdelivr.net/npm/tg-booking-calendar/dist/tg-booking-calendar.min.js"></script>

Iclude CSS:

At the Top of your HTML file, before the closing </head> tag, initialize the calendar:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tg-booking-calendar/dist/tg-booking-calendar.min.css">

Basic HTML Example:

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>

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;
}