Release v2.7.1

demo/index.css

@@ -19,7 +19,7 @@
 }
 
 .wrapper-calendar {
-	@apply w-[550px] max-w-max justify-center items-center flex flex-col mb-4 relative
+	@apply w-[550px]
 }
 
 .input {

package/README.md

@@ -1,44 +1,54 @@
+# Vanilla Calendar - A Lightweight, Feature-Rich JavaScript Date and Time Picker
+
 [![vanilla-calendar preview](https://vanilla-calendar.com/vanilla-calendar-preview.png)](https://vanilla-calendar.com/)
-# Lightweight, simple, feature-rich and no dependencies.
 
 [![package-badge]][package]
 
-VanillaCalendar is a pure JavaScript date and time picker using TypeScript so it supports any JS framework and library.
+Vanilla Calendar is a versatile JavaScript date and time picker with TypeScript support, making it compatible with any JavaScript framework or library. It is designed to be lightweight, simple to use, and feature-rich without relying on external dependencies.
 
-The final minified .js file is ~ **44.4 KB** and with gzip is ~ **10.8** KB.
+## Key Features
 
-Latest version without TypeScript - [v1.5.5](https://www.npmjs.com/package/@uvarov.frontend/vanilla-calendar/v/1.5.5) (**No longer supported**)
+- **Lightweight**: The final minified .js file is only approximately **44.4 KB**, and with gzip compression, it's just around **10.8 KB**.
+- **No Dependencies**: Vanilla Calendar is entirely self-contained, ensuring you don't need to include additional libraries.
+- **Simple Localization**: Supports simple localization for any language.
+- **Customizable**: Can be easily configured using CSS and HTML markup.
+- **Multiple Instances**: Allows for an unlimited number of calendar instances on a single page.
+- **Theme Support**: Includes two themes - the light theme and the dark theme.
+- **Week Start Customization**: Supports both Sunday and Monday as the beginning of the week.
+- **Week Number Display**: Can display week numbers throughout the year.
+- **Not Tied to Input Tags**: Unlike many date pickers, it's not limited to the `<input>` tag.
 
-This plugin is completely free, any support from you is important. Please report problems or new ideas, it's really important!
+## Browser Support
 
-If you like VanillaCalendar, please give it a 🌟 star on GitHub.
+Vanilla Calendar is compatible with a wide range of browsers:
 
-## Support browsers
 ![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Opera](https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png)
 --- | --- | --- | --- | --- |
 57+ ✔ | 52+ ✔ | 80+ ✔ | 44+ ✔ | 10.1+ ✔ |
 
-## Getting Started
+## Support and Feedback
 
-This calendar has no dependencies, has a simple localization for any language, is displayed anywhere, is not tied to the **«input»** tag, can have an unlimited number of copies on the page and is easily configurable both using CSS and by changing the html markup.
+This plugin is completely free, and your support is important. Please feel free to report any issues or share your new ideas; it's really important!
 
-You can include it as a separate script in your html document or import it into your bundler.
+If you like Vanilla Calendar, please consider giving it a 🌟 star on GitHub.
+
+## Getting Started
 
-### Install
+### Installation
 
-You can get it via npm or yarn:
+You can install Vanilla Calendar using npm or yarn:
 
 ```sh
 npm install @uvarov.frontend/vanilla-calendar
 # or
 yarn add @uvarov.frontend/vanilla-calendar
 ```
 
-If you are not using a package manager, connect locally or via [CDN](https://cdn.jsdelivr.net/npm/@uvarov.frontend/vanilla-calendar/build/).
+If you prefer not to use a package manager, you can also include it via [CDN](https://cdn.jsdelivr.net/npm/@uvarov.frontend/vanilla-calendar/build/) or [download](https://vanilla-calendar.com/vanilla-calendar.zip) it from the website.
 
 ### Usage
 
-Simple usage example:
+Here's a simple example of how to use Vanilla Calendar in your HTML:
 
 ```html
 <html>
@@ -52,28 +62,28 @@ Simple usage example:
 </html>
 ```
 
-The **vanilla-calendar.min.css** file contains the properties of the calendar skeleton, other css files in the **themes** directory contain only the calendar color scheme.
-The calendar automatically displays the theme used in the user's system. You can disable this default behavior and install any of the themes forcibly. In this case, you don't need to import all the themes.
+To add the necessary styles and scripts, you can use the following code:
 
 ```js
-// JS Script
-import VanillaCalendar from '@uvarov.frontend/vanilla-calendar';
+// Import Vanilla Calendar
+import Vanilla Calendar from '@uvarov.frontend/vanilla-calendar';
 
-// Basic styles
+// Import the basic styles
 import '@uvarov.frontend/vanilla-calendar/build/vanilla-calendar.min.css';
 
-// Additional styles
+// Import additional styles
 import '@uvarov.frontend/vanilla-calendar/build/themes/light.min.css';
 import '@uvarov.frontend/vanilla-calendar/build/themes/dark.min.css';
 
-const calendar = new VanillaCalendar('#calendar');
+// Initialize the calendar
+const calendar = new Vanilla Calendar('#calendar');
 calendar.init();
 // or
 // const calendarWithInput = new VanillaCalendar('#calendar-input', { input: true });
 // calendarWithInput.init();
 ```
 
-If you downloaded the files manually or decided to use a CDN, then instead of the example above, you need to add all the necessary files to the **head** tag of your HTML document. Here is an example of such usage:
+If you're not using a package manager and prefer manual installation or CDN usage, you can include the necessary files in your HTML document's `<head>`:
 
 ```html
 <html>
@@ -98,11 +108,21 @@ If you downloaded the files manually or decided to use a CDN, then instead of th
 </html>
 ```
 
-### DOM Templates
+## CSS Themes
+
+Vanilla Calendar includes two CSS themes: the **light theme** and the **dark theme**.
+
+- The **vanilla-calendar.min.css** file contains the essential structural styles for the calendar.
+- The **light.min.css** theme provides a light color scheme.
+- The **dark.min.css** theme offers a dark color scheme.
+
+The calendar will automatically display the theme based on the user's system preferences. If you want to enforce a specific theme, you can do so manually without the need to import all themes separately.
+
+## DOM Templates
 
-The calendar has registered components with which you can completely change the structure of the calendar.
-Tags containing the **«#»** character are registered calendar components and must include a trailing slash at the end of the tag.
-Default Template:
+Vanilla Calendar features customizable DOM templates that allow you to modify the structure of the calendar to fit your needs. The templates are identified by tags containing the **#** character, and they should include a trailing slash at the end.
+
+Here's an example of the default template:
 
 ```js
 new VanillaCalendar('#calendar', {
@@ -118,7 +138,7 @@ new VanillaCalendar('#calendar', {
       </div>
       <div class="vanilla-calendar-wrapper">
         <#WeekNumbers />
-        <div class="vanilla-calendar-content">
+        <div class "vanilla-calendar-content">
           <#Week />
           <#Days />
         </div>
@@ -129,45 +149,13 @@ new VanillaCalendar('#calendar', {
 });
 ```
 
-### Example using React + TypeScript
-
-Since the final plugin file is pure JavaScript without any dependencies, if desired, it can be used with any framework or library, such as Vue, React, Angular, etc.
+## React Component
 
-```tsx
-import { useEffect, useRef } from 'react';
-import VanillaCalendar from '@uvarov.frontend/vanilla-calendar';
-import '@uvarov.frontend/vanilla-calendar/build/vanilla-calendar.min.css';
-import '@uvarov.frontend/vanilla-calendar/build/themes/light.min.css';
-import '@uvarov.frontend/vanilla-calendar/build/themes/dark.min.css';
-
-const Calendar: React.FC = () => {
-  const calendarEl = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!calendarEl.current) return;
-
-    const calendar = new VanillaCalendar(calendarEl.current, {
-      settings: {
-        lang: 'en',
-        selection: {
-          time: 12,
-        },
-      },
-    });
-    calendar.init();
-  }, [calendarEl]);
-
-  return (
-    <div ref={calendarEl}></div>
-  );
-};
-
-export default Calendar;
-```
+For detailed instructions on using Vanilla Calendar in a React component with TypeScript, please visit the [website](https://vanilla-calendar.com/docs/learn/additional-features/react-component) for comprehensive documentation and examples.
 
 ## API Reference
 
-You can see all the parameters and settings of the calendar in the [reference](https://vanilla-calendar.com/docs/reference/).
+For detailed information on the available parameters and settings, please refer to the [API reference](https://vanilla-calendar.com/docs/reference/).
 
 ## Sponsor