Skip to content

Commit 563a257

Browse files
[update] date formatting info
1 parent 3a9c807 commit 563a257

File tree

5 files changed

+52
-2
lines changed

5 files changed

+52
-2
lines changed

docs/api/config/js_eventcalendar_editorshape_config.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ editorShape?: [
7474

7575
// for a "date" type only
7676
time?: boolean,
77+
format?: string,
7778

7879
// for a "files" type only
7980
uploadURL?: string,
@@ -183,6 +184,12 @@ For a **colorSchema** type only. Unless you specify *colors* for the **colorSche
183184
#### - Parameters for a "date" type
184185
185186
- `time` - (optional) - enables/disables a *timepicker* (besides a *datepicker*)
187+
- `format` - (optional) - defines a date format for an editor field. For more information, refer to the [**Configuring date format for editor fields**
188+
](/howtos/#configuring-date-format-for-editor-fields)
189+
190+
:::tip
191+
Explore the [**Format**](https://date-fns.org/v3.3.1/docs/format) topic for more information about available date formats!
192+
:::
186193
187194
#### - Parameters for a "files" type
188195

docs/assets/006_date_format.png

53.1 KB
Loading

docs/assets/arv.jpg

-74.8 KB
Binary file not shown.

docs/guides/localization.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -413,9 +413,11 @@ en.calendar.timeFormat = 24;
413413
~~~
414414

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

419+
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.
420+
419421
## Example
420422

421423
In this snippet you can see how to switch between the *EN*, *DE* and *RU* locales:

docs/howtos.md

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,47 @@ In this section you can find out how to work with an events editor
107107
| [Configuring an editor appearance](api/config/js_eventcalendar_editorshape_config.md) | Learn how to configure an editor appearance |
108108
| [Updating editor settings](api/methods/js_eventcalendar_setconfig_method.md) | Learn how to update editor settings in a runtime |
109109

110+
### Configuring date format for editor fields
111+
112+
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:
113+
114+
![Event Calendar Date Formar](assets/006_date_format.png)
115+
116+
~~~jsx {6,15,24}
117+
const editorShape = [
118+
{
119+
type: "date",
120+
key: "start_date",
121+
config:{
122+
format: "%d/%m/%Y", // you can specify any other format
123+
},
124+
label: "Start date",
125+
time: true
126+
},
127+
{
128+
type: "date",
129+
key: "end_date",
130+
config:{
131+
format: "%d/%m/%Y", // you can specify any other format
132+
},
133+
label: "End date",
134+
time: true
135+
},
136+
// other editor fields
137+
];
138+
139+
new eventCalendar.EventCalendar("#root", {
140+
editorShape,
141+
// other configuration properties
142+
});
143+
~~~
144+
145+
:::tip
146+
Explore the [**Format**](https://date-fns.org/v3.3.1/docs/format) topic for more information about available date formats!
147+
:::
148+
149+
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.
150+
110151
## How to work with inner events
111152

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

174215
:::info
175216
You can also leave your questions in the comments below!
176-
:::
217+
:::

0 commit comments

Comments
 (0)