Skip to content

Commit

Permalink
edit the “Learn” section for the en version
Browse files Browse the repository at this point in the history
  • Loading branch information
uvarov-frontend committed Oct 31, 2023
1 parent 46fbbaf commit 9197c45
Show file tree
Hide file tree
Showing 45 changed files with 201 additions and 200 deletions.
6 changes: 4 additions & 2 deletions docs/en/learn/action-handlers/change-of-time.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Change of time
# Handling Time Changes

If you turn on the time selection with the `settings.selection.time` parameter, then you have the ability to get all the data you need every time the time changes!
By activating the `settings.selection.time` parameter, you gain the ability to automatically retrieve the required data whenever the time changes.

Usage example in the sandbox:

<Sandbox example="action-handlers-change-of-time" height={400} />
17 changes: 6 additions & 11 deletions docs/en/learn/action-handlers/click-a-day.mdx
Original file line number Diff line number Diff line change
@@ -1,24 +1,19 @@
# Click a day
# Handling Click on a Day

If you plan to have the user interact with your calendar in some way, you need to use existing actions. One of these actions is
`clickDay()`, as the name suggests, with this action we can catch the moment when the user has clicked on a day in your calendar.
Various actions are available for user interaction with the calendar, one of which is `clickDay()`. This action allows you to track the moment when a user clicks on a specific day in the calendar.

Let's try to display the clicked day in the console!
Example with logging the selected day to the console:

<Sandbox example="action-handlers-click-a-day" />

As you may have noticed, the day is contained in an array, this is because we can get not only one day, but for example a range.
Please note that the selected day is represented as an array because the user can select not only one day but also a range of dates if allowed by the calendar parameters.

<Sandbox example="action-handlers-click-a-day-ranged" />

By default, we get an array of all selected dates, this is logical. But more often than not, you only need to get the extreme dates.
By default, an array of all selected dates is provided, which is logical. However, most of the time, you will want to obtain only the start and end dates.

We could take the first and last element of the array, but in this case we cannot guarantee that the user will not select the latest date first and then the earliest.

In order to get the dates sorted, we can use the standard `.sort()` method.
To ensure that the dates are in the correct order, you can use the standard `.sort()` method:

```js
dates.sort((a, b) => +new Date(a) - +new Date(b))
```

Try pasting this snippet into your `console.log()` in the sandbox above!
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
# Click on the month in the month selection
# Handling Click on a Month in the Month List

By clicking on the month heading, you will be able to select the month without using the arrows.
When you click on a month in the list of all months, you can handle this event and obtain information about the selected item and its ordinal number.

By clicking on a month from the list, you can get the item that was clicked, as well as the number of the month.

It is important to know that the numbering of months starts from zero, so December is the 11th month.
It's important to note that months are numbered starting from zero, where January corresponds to the zeroth month, and December is the eleventh.

<Sandbox example="action-handlers-click-on-a-month-in-the-month-selection" />
4 changes: 2 additions & 2 deletions docs/en/learn/action-handlers/click-on-the-arrows.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# Click on the arrows
# Handling Click on the Arrows

When you click on any of the arrows, events for switching the month or year occur. If necessary, you can obtain the necessary data.
When you click on any of the arrows, an event occurs to switch the month or year in the calendar. This event can be used according to your needs.

<Sandbox example="action-handlers-click-on-the-arrows" />
8 changes: 3 additions & 5 deletions docs/en/learn/action-handlers/click-on-the-week-number.mdx
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
# Click on the week number
# Handling Click on the Week Number

In some countries it is customary to designate dates using week numbers. To do this, the `settings.visibility.weekNumbers` parameter has been added to the calendar, which is responsible for their display.

But now we will try not only to display week numbers, but also to get some data by clicking on the number.
In some countries, week numbers are used to denote dates. You can display week numbers in the calendar using the `settings.visibility.weekNumbers` parameter and handle clicks on them.

<Sandbox example="action-handlers-click-on-the-week-number" />

Having information about the dates in this week, we can select these dates by writing a couple of lines of code.
By having information about the dates in the selected week, you can easily select these dates using code.

<Sandbox example="action-handlers-click-on-the-week-number-select-days" />
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# Click on the year in the year selector
# Handling Click on the Year in Year Selection

As with the month, by clicking on the heading of the year, you will be able to select a year from the list.
Similar to selecting a month, you can choose a year by clicking on the year header in the calendar.

By clicking on a year from the list, you can get the clicked item as well as the year number.
When you click on a year from the list, you can obtain information about the selected element that was clicked and the year number.

<Sandbox example="action-handlers-click-on-the-year-in-the-year-selection" />
8 changes: 4 additions & 4 deletions docs/en/learn/action-handlers/get-and-change-every-day.mdx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# Get and change every day
# Getting and Modifying Each Day

By having access to each day, we may post additional information or otherwise change each day on the calendar.
When you have access to each day in the calendar, you can perform various operations, add additional information, or make changes to each day.

As an example, let's add a random cost to each day.
As an example, you can add a random cost or value to each day.

<Sandbox example="action-handlers-get-and-change-every-day" />
<Sandbox example="action-handlers-get-and-change-every-day" height={370} />
18 changes: 9 additions & 9 deletions docs/en/learn/additional-features/date-picker-in-input.mdx
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
# Date picker in input
# Date Selection in Input

So, if you need to show the calendar on click on **«Input»**, the easiest way is to initialize it immediately with the parameter <a href="/docs/reference/main/main-settings#input">`input`</a>.
Here is the simplest example of such usage with default settings.
If you need to display a calendar when clicking on an **«Input»**, you can easily configure it by initializing it with the <a href="/docs/reference/main/main-settings#input">`input`</a> parameter.
Here's a simple example of usage with default parameters:

<Info>
Open the sandbox in a separate tab if you want to see an example with all the files. To do this, click the **«Open»** button at the top right.
Open the sandbox in a separate tab to see the example with all the files. To do this, click the **«Открыть»"** button in the upper right corner.
</Info>

<Sandbox example="additional-features-date-picker-in-input" height={470} />

It is important to understand that **«Input»** in the context of this calendar is not necessarily an `<input>` tag, it can be any tag, such as `<div>`. Let's consider this option.
It's important to note that the **«Input»** in the context of this calendar does not necessarily have to be an `<input>` tag. It can be any HTML element, such as a `<div>`.

<Sandbox example="additional-features-date-picker-in-input-div" height={470} />

Great, we tried the simplest option with one date to choose from, now let's try something more complicated.
With the calendar type set to `'multiple'`, users can select multiple dates simultaneously.
This allows for easily defining date ranges and working with them.
Such a calendar provides flexibility and various options for date management.

Let's add a date range selection with a `'multiple'` calendar type.

<Sandbox example="additional-features-date-picker-in-input-multiple" vertically={false} height={720} />
<Sandbox example="additional-features-date-picker-in-input-multiple" vertically={false} height={760} />
29 changes: 16 additions & 13 deletions docs/en/learn/additional-features/enable-time-picker.mdx
Original file line number Diff line number Diff line change
@@ -1,24 +1,27 @@
# Enable time picker
# Time Selection Options

By default, time picker is disabled.
Enable to set a 12-hour day, or switch to a 24-hour day if needed.
By default, time selection is disabled, but you can easily enable it and configure it to meet your needs.

In addition, you can set the start time during initialization and control the minute and hour increments.
## 12-Hour Time with AM/PM

Variant with 12-hour day and AM/PM marker.
You can enable the 12-hour time format and add AM/PM markers.

<Sandbox example="additional-features-enable-time-picker-12" height={370} />
<Sandbox example="additional-features-enable-time-picker-12" height={400} />

Option with 24-hour day.
## 24-Hour Time

<Sandbox example="additional-features-enable-time-picker-24" height={370} />
If you need a 24-hour time format without AM/PM, you can configure it as follows.

By default, the time is set automatically. You can reassign this to your own value.
<Sandbox example="additional-features-enable-time-picker-24" height={400} />

For a 24-hour day, the AM/PM marker is not required.
## Setting Your Own Time

<Sandbox example="additional-features-enable-time-picker-your-time" height={370} />
You can set the initial time when initializing the calendar. For a 24-hour day, you don't need to specify an AM/PM marker.

Among other things, you can control the step of the time sliders. And also disable the ability to enter the time manually in the input.
<Sandbox example="additional-features-enable-time-picker-your-time" height={400} />

<Sandbox example="additional-features-enable-time-picker-control" height={370} />
## Time Step Control

In addition, you can configure the time step for minutes and hours. You can also disable manual input of time in the input field.

<Sandbox example="additional-features-enable-time-picker-control" height={400} />
10 changes: 5 additions & 5 deletions docs/en/learn/additional-features/react-component.mdx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# React component
# React Component

<Info>
If you don't use TypeScript, use the .jsx extension instead of .tsx and get rid of the component typing.
If you're not using TypeScript, use the .jsx extension instead of .tsx and remove the component's typing.
</Info>

Create a react component named `VanillaCalendar.tsx` and copy the below code into this file.
To create a React component named VanillaCalendar.tsx, you need to copy the code provided below into this file:

```js
import { HTMLAttributes, useEffect, useRef, useState } from "react";
Expand Down Expand Up @@ -39,7 +39,7 @@ function VanillaCalendar({ config, ...attributes }: VanillaCalendarProps) {
export default VanillaCalendar
```

Then import the created component into the react component where you plan to display the calendar.
Then import the created component VanillaCalendar into your React component where you plan to display the calendar.

```js
import VanillaCalendar from "./VanillaCalendar";
Expand All @@ -53,7 +53,7 @@ Use the created component.
// ...
```

The `VanillaCalendar` component can be passed any HTML attributes that the `<div>` tag supports, as well as `config` to configure the calendar.
You can pass any HTML attributes supported by the `<div>` tag to the `VanillaCalendar` component, as well as the `config`parameter for calendar customization.

```js
// ...
Expand Down
6 changes: 3 additions & 3 deletions docs/en/learn/customization-and-modification/css-classes.mdx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# CSS classes
# CSS Classes

All calendar css classes are included in variables, which can be replaced with your own values ​​if necessary, but note that in this case you need to style the modified css class yourself.
All CSS classes used in the calendar are variables that can be customized by replacing them with your own values. However, it's important to note that when making such replacements, you'll also need to independently add styles for the modified CSS class.

In the sandbox below, we will replace the arrow class with our own. See the reference for a complete list of classes.
Below is an example of replacing the class for arrows with your own. The complete list of classes can be found in the reference guide.

<Sandbox example="customization-and-modification-css-classes" />
10 changes: 4 additions & 6 deletions docs/en/learn/customization-and-modification/dom-templates.mdx
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
# DOM templates
# DOM Templates

One of the advantages of this calendar is that you can easily customize its HTML markup with the `DOMTemplates` parameter.
The calendar provides a convenient way to customize the HTML markup using the `DOMTemplates` parameter. This allows you to add your own elements, such as buttons or any other HTML elements, to the calendar.

Thanks to this, you can safely add your button or any other html element to your calendar.
`DOMTemplates` takes the calendar `type` as the key and a string as the value.

`DOMTemplates` takes the `type` of a calendar as a key. And types take a string as a value.

In the example below, we'll customize the title of our calendar, but only for `type: 'default'` and add a regular button.
In the following example, the calendar header is customized for type: `'default'`, and a regular button is added inside the calendar.

<Sandbox example="customization-and-modification-dom-templates" />
8 changes: 5 additions & 3 deletions docs/en/learn/customization-and-modification/popups.mdx
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
# Pop-ups

For any day in the calendar, you can add a pop-up with information that will be displayed when you hover over that day.
The calendar allows you to add pop-ups with information for any day, which will be displayed when hovering over that day.

In the example below, we will select several days using css modifiers and add information about this day.
This is a useful tool for displaying additional data in the calendar.

Read more about pop-ups in the reference, section <a href="/docs/reference/additionally/pop-ups">«Pop-ups»</a>
In the example given, specific days are highlighted using CSS modifiers, and information is added to pop-ups for each of them.

Further details about pop-ups can be found in the <a href="/docs/reference/additionally/pop-ups">reference</a>.

<Sandbox example="customization-and-modification-dom-popups" />
14 changes: 6 additions & 8 deletions docs/en/learn/customization-and-modification/themes.mdx
Original file line number Diff line number Diff line change
@@ -1,19 +1,17 @@
# Themes

The calendar supports dark and light themes.
The calendar supports both light and dark theme designs.

If for the `settings.visibility.themeDetect`. set to `false`, the theme is determined by the user's system or `settings.visibility.theme`.
If the `settings.visibility.themeDetect` parameter is set to `false`, the theme will be determined by the user's system settings or the `settings.visibility.theme` parameter.

The calendar can detect and track the theme of the site automatically, by the given tag and attribute, read more in the reference, the parameter <a href="/docs/reference/additionally/settings#visibility-themeDetect">`settings.visibility.themeDetect`</a>.
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 <a href="/docs/reference/additionally/settings#visibility-themeDetect">reference</a>.

If your site only supports one theme, or if you want your calendar to look different, you can force any of the themes.
If your site supports only one theme or you want to customize the calendar's appearance according to your preferences, you can explicitly choose one of the available themes.

By the way, since we're forcing one theme on, we don't need to load an extra css file.

Remove extra css import and activate dark theme.
The example below demonstrates the forced use of the dark theme.

<Sandbox example="customization-and-modification-themes-dark" themeDetection={false} />

And now the same thing, only with the `'light'` theme.
And here's the same example, but using the light theme.

<Sandbox example="customization-and-modification-themes-light" themeDetection={false} />
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Disable the ability to select days, months and years
# Disabling the Ability to Select Day, Month, and Year

You can turn off the ability to select the day, month, or year.
The calendar allows you to easily disable the ability to select the day, month, or year individually.

The example below demonstrates disabling the ability to select all three parameters.

<Sandbox example="date-management-disable-the-ability-to-select-days-months-and-years" />
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Do not highlight the weekend today
# Disabling Highlighting of Weekends and Today

You can turn off highlighting all holidays/weekends and today.
The calendar allows you to easily disable the highlighting of all holidays, weekends, and today's date.

The example below demonstrates disabling the highlighting of weekends and today's date.

<Sandbox example="date-management-do-not-highlight-the-weekend-today" />
6 changes: 4 additions & 2 deletions docs/en/learn/date-management/other-today.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Other today
# Setting a Different Today

If necessary, you can specify which day the calendar will consider today.
The calendar allows you to specify which day should be considered as today.

The example below demonstrates setting a different date as today.

<Sandbox example="date-management-other-today" />
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# Selected days, month, year by default
# Default Selected Days, Month, and Year

You can explicitly specify the default selected days, as well as the month and year that are displayed regardless of the current date.
The calendar allows you to explicitly specify default selected days, as well as a month and year that will be displayed independently of the current date.

The example below demonstrates setting default selected days, month, and year.

<Sandbox example="date-management-selected-days-month-year-by-default" />

This is useful if you need to preselect specific dates and set a particular month and year during the calendar initialization.
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Specify additional weekends/holidays
# Specifying Additional Weekends/Holidays

Weekends and public holidays are marked in red on the calendar. Holidays you need to set manually.
In the calendar, you can specify additional weekends or holidays that will be highlighted in red. Holiday dates must be set manually.

The example below demonstrates how to set additional weekends/holidays.

<Sandbox example="date-management-specify-additional-weekends-or-holidays" />
10 changes: 6 additions & 4 deletions docs/en/learn/date-range/enable-or-disable-days.mdx
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
# Enable or disable days
# Enabling or Disabling Days

Sometimes you will need to disable certain days for selection, see the example below.
Sometimes you may need to disable specific days so they are not available for selection. The examples below show how this can be done.

<Info>
It is important to understand that in the examples below, the `settings.selected.year` and `settings.selected.month` options are only given to show a specific month.
It's important to understand that in the examples below, the parameters `settings.selected.year` and `settings.selected.month` are only specified for the demonstration of a particular month.
</Info>

The example below demonstrates the disabling of specific days.

<Sandbox example="date-range-disable-days" />

Let's look at an example where it's easier for you to enable specific days than to list disabled days.
And in the following example, it shows how to enable specific days, which can be simpler than specifying a list of disabled days.

<Sandbox example="date-range-enable-days" />
Loading

0 comments on commit 9197c45

Please sign in to comment.