Merge pull request #328 from ghiscoding/docs/version3-docs

docs: update documentation for new v3.0

docs/en/learn.mdx

@@ -0,0 +1,40 @@
+---
+title: Introduction
+description: Page Description
+---
+
+# Introduction to Vanilla Calendar Pro
+
+**Vanilla Calendar Pro** is a powerful, flexible, and lightweight tool for handling dates and times, created for developers who need a functional and easily customizable calendar for web applications or websites. It is independent of external libraries and highly performant, making it an excellent choice for integrating into any projects that require a calendar.
+
+This calendar is designed for developers working on a wide variety of projects, whether personal sites, corporate portals, or complex web applications. Vanilla Calendar Pro is perfect for those looking for a simple date display solution and those needing more advanced features like time selection and interactive actions.
+
+## Key Features
+
+Vanilla Calendar Pro offers a rich set of features that allow the creation of convenient and adaptive calendar widgets.
+
+Key features include:
+
+- **Lightweight**: The final JavaScript file is minified and optimized for fast loading.
+- **Dependency-Free**: Completely standalone, with no need for additional libraries.
+- **Easy Localization**: Supports easy localization for any language.
+- **Customizable**: Easily configurable through CSS and HTML markup.
+- **Multiple Instances**: Allows unlimited calendars on a single page.
+- **Theme Support**: Automatically switches between light and dark themes and supports custom themes.
+- **Week Start Customization**: Enables choosing any day of the week as the starting day.
+- **Weekend Customization**: Allows setting custom weekends for each week.
+- **Week Number Display**: Can display week numbers throughout the year.
+- **Not Tied to `<input>`**: Unlike many calendars, it is not limited to use with the `<input>` element.
+- **Accessibility**: Includes ARIA labels, `tabindex`, and full keyboard navigation, enhancing accessibility.
+- **Date and Time Range Selection**: Supports selecting date and time ranges with minimum and maximum limits.
+- **Pop-Ups and Tooltips**: Allows setting up pop-ups with custom information and adds tooltips for date range selections.
+
+## Try Vanilla Calendar Pro
+
+Below is a live example of Vanilla Calendar Pro in a JS sandbox. You can modify the parameters and instantly see how the calendar adapts to your settings.
+
+<Sandbox example="installation-and-usage" />
+
+<Info>**This demo example** — one of many in this section — helps you understand how to use Vanilla Calendar Pro and customize it to your needs.</Info>
+
+In the following sections, you will find everything needed for successful integration and setup of Vanilla Calendar Pro.

docs/en/learn/additional-features-layouts.mdx

@@ -0,0 +1,19 @@
+---
+title: Layouts
+description: Layouts allow you to customize the HTML markup of the calendar, adding your own elements such as buttons. Learn how to customize the calendar header and add elements for different types of calendars.
+section: 6. Additional Features
+---
+
+# Layouts
+
+The calendar provides a convenient way to customize the HTML markup using the `layouts` parameter. This allows you to add your own elements, such as buttons or any other HTML element, to the calendar.
+
+`layouts` takes the `type` of the calendar as the key and a string as the value.
+
+In the following example, the calendar header is customized for `type: 'default'`, and a regular button is added inside the calendar.
+
+<Sandbox example="additional-features-layouts" />
+
+Now, let's use the `inputMode: true` parameter. We will add a button that will hide the calendar when clicked.
+
+<Sandbox example="additional-features-layouts-btn-close" input={true} />

docs/en/learn/additional-features-popups-and-tooltip.mdx

@@ -0,0 +1,23 @@
+---
+title: Popups and Tooltips
+description: Learn how to add popups with information for any day in the calendar and use tooltips for selecting date ranges.
+section: 6. Additional Features
+---
+
+# Popups and Tooltips
+
+## Popups
+
+The calendar allows you to add popups with information for any day, which will be displayed when hovering over that day.
+
+In the provided example, a specific day is highlighted using a CSS modifier, and information is added to the popup.
+
+Additional details about popups can be found in the reference guide.
+
+<Sandbox example="additional-features-popups" />
+
+## Tooltips
+
+Tooltips can be used when the `selectionDatesMode` parameter is set to `'multiple-ranged'`. Using `onCreateDateRangeTooltip`, you can create a fully customized tooltip.
+
+<Sandbox example="additional-features-tooltips" />

docs/en/learn/additional-features-styles.mdx

@@ -0,0 +1,15 @@
+---
+title: Styles
+description: Customize the styles of the calendar by replacing the CSS classes with your own. Learn how to customize the appearance of the calendar.
+section: 6. Additional Features
+---
+
+# Styles
+
+All CSS classes used in the calendar are variables that can be customized by replacing them with your own values.
+
+<Info>When replacing CSS classes with your own, keep in mind that you will need to create and style this class in your own CSS.</Info>
+
+Below is an example of replacing the class for the arrows with your own. A full list of classes can be found in the reference guide.
+
+<Sandbox example="additional-features-styles" />

docs/en/learn/additional-features-themes.mdx

@@ -0,0 +1,27 @@
+---
+title: Themes
+description: The calendar supports custom themes and by default has light and dark themes. Learn how to configure themes and use system settings or your own themes.
+section: 6. Additional Features
+---
+
+# Themes
+
+The calendar supports custom themes and by default has light and dark themes.
+
+If the `themeAttrDetect` parameter is set to `false`, the theme will be determined by the user's system settings or the `selectedTheme` parameter.
+
+The calendar can automatically detect and track the site's theme based on the set tag and attribute. Additional information about this parameter can be found in the reference guide.
+
+If your site supports only one theme or you want to customize the appearance of the calendar to your liking, you can explicitly select one of the available themes.
+
+The example below demonstrates the forced use of the dark theme:
+
+<Sandbox example="additional-features-themes-dark" themeDetection={false} />
+
+And here is the same example, but using the light theme:
+
+<Sandbox example="additional-features-themes-light" themeDetection={false} />
+
+As described above, you can use your own themes, create them yourself, or import them from the calendar if they exist.
+
+<Sandbox example="additional-features-themes-slate-light" themeDetection={false} />

docs/en/learn/components-for-libraries-react.mdx

@@ -0,0 +1,69 @@
+---
+title: React Component
+description: Learn how to create and use a React component for Vanilla Calendar Pro. A detailed guide to creating the component and integrating it into a React application.
+section: 7. Components for Libraries
+---
+
+# React Component
+
+<Info>
+  If you are not using TypeScript, use the `.jsx` extension instead of `.tsx` and remove the `CalendarProps` interface from the component.
+</Info>
+
+For demonstration purposes, let's consider the simplest React component for Vanilla Calendar Pro. Create a file named `VanillaCalendar.tsx` and copy the following code into it:
+
+```tsx
+import { useEffect, useRef, useState } from 'react';
+import { Options, Calendar } from 'vanilla-calendar-pro';
+
+import 'vanilla-calendar-pro/styles/index.css';
+
+interface CalendarProps extends React.HTMLAttributes<HTMLDivElement> {
+  config?: Options,
+}
+
+function VanillaCalendar({ config, ...attributes }: CalendarProps) {
+  const ref = useRef(null);
+  const [calendar, setCalendar] = useState<Calendar | null>(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+    setCalendar(new Calendar(ref.current, config));
+  }, [ref, config])
+
+  useEffect(() => {
+    if (!calendar) return;
+    calendar.init()
+  }, [calendar])
+
+  return (
+    <div {...attributes} ref={ref}></div>
+  )
+}
+
+export default VanillaCalendar;
+```
+
+Then, import the created `VanillaCalendar` component into your React application where you plan to display the calendar.
+
+```tsx
+import VanillaCalendar from "./VanillaCalendar";
+```
+
+Use the created component.
+
+```tsx
+// ...
+<VanillaCalendar />
+// ...
+```
+
+The `VanillaCalendar` component can accept any HTML attributes supported by the `<div>` tag, as well as the `config` parameter for configuring the calendar.
+
+```tsx
+// ...
+<VanillaCalendar config={{
+    type: 'multiple',
+  }} className="thisIsMyClass" />
+// ...
+```