Skip to content

Commit

Permalink
[update] date formatting info
Browse files Browse the repository at this point in the history
  • Loading branch information
serhiipylypchuk1991 committed Sep 24, 2024
1 parent 3a9c807 commit 563a257
Show file tree
Hide file tree
Showing 5 changed files with 52 additions and 2 deletions.
7 changes: 7 additions & 0 deletions docs/api/config/js_eventcalendar_editorshape_config.md
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ editorShape?: [

// for a "date" type only
time?: boolean,
format?: string,

// for a "files" type only
uploadURL?: string,
Expand Down Expand Up @@ -183,6 +184,12 @@ For a **colorSchema** type only. Unless you specify *colors* for the **colorSche
#### - Parameters for a "date" type
- `time` - (optional) - enables/disables a *timepicker* (besides a *datepicker*)
- `format` - (optional) - defines a date format for an editor field. For more information, refer to the [**Configuring date format for editor fields**
](/howtos/#configuring-date-format-for-editor-fields)
:::tip
Explore the [**Format**](https://date-fns.org/v3.3.1/docs/format) topic for more information about available date formats!
:::
#### - Parameters for a "files" type
Expand Down
Binary file added docs/assets/006_date_format.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed docs/assets/arv.jpg
Binary file not shown.
4 changes: 3 additions & 1 deletion docs/guides/localization.md
Original file line number Diff line number Diff line change
Expand Up @@ -413,9 +413,11 @@ en.calendar.timeFormat = 24;
~~~

:::tip
Refer to the [**Format**](https://date-fns.org/v3.3.1/docs/format) topic for more information.
Explore the [**Format**](https://date-fns.org/v3.3.1/docs/format) topic for more information about available date formats!
:::

To get more information on how to specify a custom date format for editor fields, refer to the [**Configuring date format for editor fields**](/howtos/#configuring-date-format-for-editor-fields) section.

## Example

In this snippet you can see how to switch between the *EN*, *DE* and *RU* locales:
Expand Down
43 changes: 42 additions & 1 deletion docs/howtos.md
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,47 @@ In this section you can find out how to work with an events editor
| [Configuring an editor appearance](api/config/js_eventcalendar_editorshape_config.md) | Learn how to configure an editor appearance |
| [Updating editor settings](api/methods/js_eventcalendar_setconfig_method.md) | Learn how to update editor settings in a runtime |

### Configuring date format for editor fields

You can specify a custom date format for editor fields via the [`editorShape.config.format`](/api/config/js_eventcalendar_editorshape_config/#--parameters-for-a-date-type) property:

![Event Calendar Date Formar](assets/006_date_format.png)

~~~jsx {6,15,24}
const editorShape = [
{
type: "date",
key: "start_date",
config:{
format: "%d/%m/%Y", // you can specify any other format
},
label: "Start date",
time: true
},
{
type: "date",
key: "end_date",
config:{
format: "%d/%m/%Y", // you can specify any other format
},
label: "End date",
time: true
},
// other editor fields
];

new eventCalendar.EventCalendar("#root", {
editorShape,
// other configuration properties
});
~~~

:::tip
Explore the [**Format**](https://date-fns.org/v3.3.1/docs/format) topic for more information about available date formats!
:::

To get more information on how to configure the time and date format in the Event Calendar, refer to the [**Time and Date format**](/guides/localization/#time-and-date-format) section.

## How to work with inner events

| Topic | Description |
Expand Down Expand Up @@ -173,4 +214,4 @@ The ***!important*** directive is required for this style to work!

:::info
You can also leave your questions in the comments below!
:::
:::

0 comments on commit 563a257

Please sign in to comment.