Skip to content

[update] date formatting info #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 24, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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!
:::
:::
Loading