### Install Dependencies and Start Dev Server (NPM)
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/guides/integration_with_react.md
Commands to install dependencies and start the development server using NPM.
```bash
npm install
npm run dev
```
--------------------------------
### Install Dependencies and Start Dev Server (Yarn)
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/guides/integration_with_react.md
Commands to install dependencies and start the development server using Yarn.
```bash
yarn
yarn start
```
--------------------------------
### Event Calendar Initialization with Configuration Properties
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/how_to_start.md
Example showing various configuration properties that can be passed during Event Calendar initialization.
```javascript
new eventCalendar.EventCalendar("#root", {
calendars,
colors,
config,
date,
editorShape,
events,
locale,
mode,
sidebar,
templates,
theme
});
```
--------------------------------
### index.html
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/how_to_start.md
Example of how to include and initialize the Event Calendar component in an HTML file.
```html
How to Start with Event Calendar
```
--------------------------------
### Navigate to the project directory and install dependencies
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/guides/integration_with_angular.md
Go to the new created app directory and install dependencies and start the dev server using yarn.
```bash
cd my-angular-event-calendar-app
yarn
yarn start
```
--------------------------------
### Example
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/internal/js_eventcalendar_getstores_method.md
An example demonstrating how to get the DataStore object of an Event Calendar instance.
```javascript
// create Event Calendar
const calendar = new eventCalendar.EventCalendar("#root", {
// configuration properties
});
// get the DataStore object of Event Calendar
const stores = calendar.api.getStores();
console.log(stores);
```
--------------------------------
### Example
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/config/js_eventcalendar_colors_config.md
Example of how to set colors dynamically.
```jsx
// create Event Calendar
new eventCalendar.EventCalendar("#root", {
colors: [
{
background: "#d62b31",
border: "#32a852",
textColor: "#e5f01d",
colorpicker: "background"
},
{
background: "#ccf5ff",
border: "#00CDFF",
textColor: "#e5f01d",
colorpicker: "background"
},
{
background: "#cee8f8",
border: "#098CDC",
textColor: "#e5f01d",
colorpicker: "border"
}
],
// other configuration parameters
});
```
--------------------------------
### Example
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/config/js_eventcalendar_theme_config.md
Example of how to set the theme when creating an Event Calendar.
```jsx
// create Event Calendar
new eventCalendar.EventCalendar("#root", {
events,
theme: "willowDark"
// other configuration parameters
});
```
--------------------------------
### Response Example
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/provider/rest_routes/get_routes/js_eventcalendar_getcalendars_route.md
Example of the JSON object returned by the GET /calendars route, containing an array of calendar objects.
```json
[
{
"id": 1,
"label": "Work",
"active": true,
"color": {
"background": "#3AA3E3",
"border": "#098CDC"
},
"description": ""
},
{
"id": 2,
"label": "Meeting",
"active": true,
"color": {
"background": "#9585EF",
"border": "#7A67EB"
},
"description": ""
},
// ...
]
```
--------------------------------
### Response Example
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/provider/rest_routes/post_routes/js_eventcalendar_postcalendar_route.md
Example of a JSON object returned after successfully creating a new calendar.
```json
"id": 1
```
--------------------------------
### Example of Server-Side Updates and Multiuser Backend
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/news/whats_new.md
This example demonstrates how to implement server-side updates and integrate with a multiuser backend for the Event Calendar.
```javascript
https://snippet.dhtmlx.com/ga85sc0x?tag=event_calendar
```
--------------------------------
### Multipart Request Example
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/provider/rest_routes/post_routes/js_eventcalendar_postupload_route.md
Example of a multipart/form-data request for uploading a file.
```http
------WebKitFormBoundary1aDBIObTwl1A4Vpf
Content-Disposition: form-data; name="upload"; filename="Screenshot from 2022-11-11 12-35-01.png"
Content-Type: image/png
------WebKitFormBoundary1aDBIObTwl1A4Vpf--
```
--------------------------------
### Response JSON Example
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/provider/rest_routes/post_routes/js_eventcalendar_postupload_route.md
Example of a JSON response object returned after a successful upload.
```json
{
"id": 4,
"name": "cat.png",
"url": "https://server.com/uploads/4/cat.png"
}
```
--------------------------------
### Example of Timeline Section Template
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/news/whats_new.md
This example demonstrates the usage of the 'timelineSection' template for the Timeline view.
```javascript
https://snippet.dhtmlx.com/rmgc73n6?tag=event_calendar
```
--------------------------------
### Install dependencies
Source: https://github.com/dhtmlx/docs-calendar/blob/master/README.md
Command to install project dependencies using yarn.
```bash
$ yarn
```
--------------------------------
### index.html
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/how_to_start.md
Basic HTML file structure including Event Calendar source files.
```html
How to Start with Event Calendar
```
--------------------------------
### Example of Custom View Modes
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/news/whats_new.md
This example showcases the implementation of custom view modes in the Event Calendar.
```javascript
https://snippet.dhtmlx.com/dmoijc47?tag=event_calendar
```
--------------------------------
### Before v2.0.2
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/news/migration.md
Configuration example before v2.0.2.
```jsx
config: {
...
dimPastEvents: true,
}
```
--------------------------------
### Example
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/internal/js_eventcalendar_getreactivestate_method.md
Demonstrates how to get the reactive state and subscribe to changes in calendars, events, selection, date, and mode. Also shows how to set and update the mode.
```javascript
// create Event Calendar
const calendar = new eventCalendar.EventCalendar("#root", {
// configuration properties
});
// get reactive state
const state = calendar.api.getReactiveState();
// subscribe on the calendars changes and output the calendars data
state.calendars.subscribe((data) => {
console.log(data);
});
// subscribe on the events changes and output the events data
state.events.subscribe((data) => {
console.log(data);
});
// subscribe on the event selection and output the data of the selected event
state.selected.subscribe((data) => {
console.log(data);
// other actions
});
// subscribe on the date changes and output the selected date
state.date.subscribe((date) => {
console.log(date);
});
// subscribe on the modes changes and output the selected mode
state.mode.subscribe((mode) => {
console.log(mode);
});
// set new mode
state.mode.set("day");
// update mode
state.mode.update((mode) => {
if(mode === "day"){
return "week";
}
});
```
--------------------------------
### Short Configuration for Day View
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/guides/views.md
A concise configuration example for the 'Day' view.
```jsx
config: {
views: [
{ id: "day", label: "Day", layout: "day" }
]
}
```
--------------------------------
### Example
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/config/js_eventcalendar_mode_config.md
Example of creating an Event Calendar with the 'timeline' mode.
```javascript
// create Event Calendar
new eventCalendar.EventCalendar("#root", {
mode: "timeline"
// other configuration parameters
});
```
--------------------------------
### Payload Example
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/provider/rest_routes/post_routes/js_eventcalendar_postcalendar_route.md
Example of a JSON object to be sent as the payload for creating a new calendar.
```json
{
"label": "New Calendar",
"description": "Some description",
"color": {
"background": "#5890DC",
"border": "#2D74D3"
}
}
```
--------------------------------
### Run the documentation on the local server
Source: https://github.com/dhtmlx/docs-calendar/blob/master/README.md
Command to start the documentation server locally.
```bash
$ yarn start
```
--------------------------------
### From v2.0.2
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/news/migration.md
Configuration example from v2.0.2 onwards, showing the addition of the `dateClick` parameter.
```jsx
config: {
...
dimPastEvents: true,
dateClick: false, // or "day" | "week" | "month" | "year" | "agenda" | "timeline"
}
```
--------------------------------
### Example
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/provider/rest_methods/js_eventcalendar_getcalendars_method.md
An example of how to use the getCalendars() method to fetch events and calendars and initialize the calendar.
```javascript
const url = "https://some_backend_url";
const restProvider = new eventCalendar.RestDataProvider(url);
Promise.all([
restProvider.getEvents(),
restProvider.getCalendars()
]).then(([events, calendars]) => {
const calendar = new eventCalendar("#root", {
events,
calendars
});
calendar.api.setNext(restProvider);
});
```
--------------------------------
### Payload Example
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/provider/rest_routes/post_routes/js_eventcalendar_postevent_route.md
Example of a JSON object to be sent in the request payload for creating a new event.
```json
{
"text": "New Event",
"start_date": "2021-06-10T03:05:00.369Z",
"end_date": "2021-06-10T10:10:00.369Z",
"allDay": true,
"type": 1,
"details": "Some details",
"files": [
{
"id": 2,
"name": "document.html",
"url": "http://localhost:3000/uploads/2/document.html"
}
]
}
```
--------------------------------
### Example of View Control and Dim Past Events Parameters
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/news/whats_new.md
This example demonstrates the use of 'viewControl' and 'dimPastEvents' parameters in the Event Calendar configuration.
```javascript
https://snippet.dhtmlx.com/qw45r367?tag=event_calendar
```
--------------------------------
### Highlight Grid Cells Example
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/news/whats_new.md
Shows how to highlight grid cells using the API.
```html
```
--------------------------------
### View-Specific Configuration
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/guides/views.md
This example demonstrates how to apply specific configuration settings to a single view, in this case, the 'Day' view.
```jsx
const calendar = new eventCalendar.EventCalendar("#root", {
config: {
views: [
{
id: "day",
label: "Day",
layout: "day",
config: [
timeRange: [8, 17]
]
}
]
},
events: [],
date: new Date()
});
```
--------------------------------
### Example of Dimming Past Events
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/news/whats_new.md
This example shows how to visually dim past events in the Event Calendar.
```javascript
https://snippet.dhtmlx.com/teaka0o8?tag=event_calendar
```
--------------------------------
### Multiselect and Radio Editor Types Example
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/news/whats_new.md
Illustrates the use of multiselect and radio editor types.
```html
```
--------------------------------
### Example Usage
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/methods/js_eventcalendar_parse_method.md
An example demonstrating how to initialize an Event Calendar and then parse both events and calendars data into it.
```javascript
// create Event Calendar
const calendar = new eventCalendar.EventCalendar("#root", {
// configuration parameters
});
// events data
const events = [
{
id: "1",
type: "work",
start_date: new Date("2021-05-24T00:00:00"),
end_date: new Date("2021-06-08T00:00:00"),
text: "French Open",
details: "Philippe-Chatrier Court\n Paris, FRA",
},
{
id: "2",
type: "work",
start_date: new Date("2021-06-07T00:00:00"),
end_date: new Date("2021-06-13T00:00:00"),
text: "French Open",
details: "Philippe-Chatrier Court\n Paris, FRA",
}, ...
];
// calendars data
const calendars = [
{
id: "rest",
label: "Rest",
readonly: true,
active: true,
color: {
background: "#EDD1EC",
border: "#AD4AB",
textColor: "#3e98db"
}
},
{
id: "movie",
label: "Movie",
readonly: false,
active: false,
color: {
background: "#CEEDC3",
border: "#77D257",
textColor: "#3e98db"
}
}
];
// parse the events and calendars data into Event Calendar
calendar.parse({ events, calendars });
```
--------------------------------
### Example Event Configuration
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/config/js_eventcalendar_events_config.md
An example demonstrating how to configure events with various properties.
```jsx
// create Event Calendar
new eventCalendar.EventCalendar("#root", {
events: [
{
start_date: new Date("2023-01-27T15:10:00"),
end_date: new Date("2023-01-27T15:12:00"),
allDay: false,
id: "1",
type: "work",
text: "Current event",
details: "Philippe-Chatrier Court\n Paris, FRA",
dragResize: true,
readonly: false,
dragMove: true,
color: {
background: "#EDD1EC",
border: "#AD44AB",
textColor: "#3e98db"
},
RRULE: "FREQ=WEEKLY;INTERVAL=1;BYDAY=Mo,Tu,We,Th,Fr",
recurring: true,
STDATE: new Date("2023-01-27T15:00:00"),
DTEND: new Date("2023-06-27T15:00:00"),
custom_key: "Custom key of the event"
},
// other events data
]
// other configuration parameters
});
```
--------------------------------
### data.js
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/guides/integration_with_react.md
Example of a data.js file to store event data for the calendar.
```jsx
export function getData() {
return [
{
id: '27',
type: 'work',
start_date: new Date('2024-06-10T14:00:00'),
end_date: new Date('2024-06-10T18:30:00'),
text: ' Olympiastadion - Berlin ',
details: ' Berlin, GER '
},
{
id: '28',
type: 'rest',
start_date: new Date('2024-06-12T14:00:00'),
end_date: new Date('2024-06-12T16:00:00'),
text: ' Commerz Bank Arena ',
details: ' Frankfurt, GER '
},
{
id: '29',
type: 'meeting',
start_date: new Date('2024-06-13T11:00:00'),
end_date: new Date('2024-06-13T16:00:00'),
text: ' Olympic Stadium - Munich ',
details: ' Munich, GER '
}
]
}
```
--------------------------------
### Year and Agenda Modes Example
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/news/whats_new.md
Demonstrates the ability to view events in Year and Agenda modes.
```html
```
--------------------------------
### Example of Recurring Editor Field
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/news/whats_new.md
This example shows how to use the 'recurring' type for editor fields, likely for recurring events.
```javascript
https://snippet.dhtmlx.com/bxwdj1rt?tag=event_calendar
```
--------------------------------
### Example Usage
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/methods/js_eventcalendar_showeventinfo_method.md
An example demonstrating how to create an Event Calendar instance and then use the showEventInfo method to open an info popup for a specific event.
```javascript
// create Event Calendar
const calendar = new eventCalendar.EventCalendar("#root", {
// initial configuration parameters
});
// open info popup for the event with the "1" ID
calendar.showEventInfo({ id: "1" });
```
--------------------------------
### Example Usage
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/internal/js_eventcalendar_exec_method.md
This example demonstrates how to create an Event Calendar and then use the exec method to set the mode to 'day'.
```javascript
// create Event Calendar
const calendar = new eventCalendar.EventCalendar("#root", {
// configuration properties
});
// set "day" mode
calendar.api.exec("set-mode", { mode: "day" });
```
--------------------------------
### Before v2.1
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/news/migration.md
Configuration example before v2.1, showing the deprecated `eventMerge` parameter.
```jsx
config: {
...
views: [
...
{
...
config: {
...
eventMerge: "10px",
}
}
]
}
```
--------------------------------
### data.js
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/guides/integration_with_vue.md
Example data structure for the Event Calendar.
```jsx
export function getData() {
return [
{
id: '27',
type: 'work',
start_date: new Date('2024-06-10T14:00:00'),
end_date: new Date('2024-06-10T18:30:00'),
text: ' Olympiastadion - Berlin ',
details: ' Berlin, GER '
},
{
id: '28',
type: 'rest',
start_date: new Date('2024-06-12T14:00:00'),
end_date: new Date('2024-06-12T16:00:00'),
text: ' Commerz Bank Arena ',
details: ' Frankfurt, GER '
},
{
id: '29',
type: 'meeting',
start_date: new Date('2024-06-13T11:00:00'),
end_date: new Date('2024-06-13T16:00:00'),
text: ' Olympic Stadium - Munich ',
details: ' Munich, GER '
}
];
}
```
--------------------------------
### GET /events Response Example
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/provider/rest_routes/get_routes/js_eventcalendar_getevents_route.md
Example of the JSON response returned by the GET /events route, containing an array of event objects.
```json
[
{
"id": 1,
"text": "French Open",
"start_date": "2022-06-10T03:05:00.369Z",
"end_date": "2022-06-20T03:05:00.369Z",
"allDay": false,
"type": 1,
"details": "Philippe-Chatrier Court\n Paris, FRA",
"files": []
},
{
"id": 2,
"text": "Aegon Championship",
"start_date": "2022-06-10T03:05:00.369Z",
"end_date": "2022-07-10T03:05:00.369Z",
"allDay": false,
"type": 1,
"details": "The Queens Club\n London, ENG",
"files": {
"id": 5,
"name": "document.html",
"url": "https://server.com/uploads/5/document.html"
}
},
// ...
]
```
--------------------------------
### Example of getCalendar()
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/methods/js_eventcalendar_getcalendar_method.md
Example of how to get a calendar data with the "work" ID.
```javascript
// create Event Calendar
const calendar = new eventCalendar.EventCalendar("#root", {
// configuration parameters
});
// get a calendar data with the "work" ID
const calendar_data = calendar.getCalendar({ id: "work" });
console.log(calendar_data);
```
--------------------------------
### Timeline getPrev example
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/config/js_eventcalendar_config_config.md
Example of implementing the getPrev function for the Timeline view to determine the start date of the previous interval.
```jsx
// ...,
getPrev: (date) => {
return new Date(date.getFullYear(), date.getMonth(), date.getDate() - 7);
},
```
--------------------------------
### Timeline getNext example
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/config/js_eventcalendar_config_config.md
Example of implementing the getNext function for the Timeline view to determine the start date of the next interval.
```jsx
// ...,
getNext: (date) => {
return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 7);
},
```
--------------------------------
### Navigate to Project Directory
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/guides/integration_with_react.md
Command to change the current directory to the newly created React project.
```bash
cd my-react-event-calendar-app
```
--------------------------------
### Getting an Event by ID
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/methods/js_eventcalendar_getevent_method.md
Example of how to create an Event Calendar instance and then retrieve event data using the getEvent method with a specific event ID.
```javascript
// create Event Calendar
const calendar = new eventCalendar.EventCalendar("#root", {
// configuration parameters
});
// get an event data with the "1" ID
const event_data = calendar.getEvent({ id: "1" });
console.log(event_data);
```
--------------------------------
### Create React App
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/guides/integration_with_react.md
Command to create a new React project using create-react-app.
```bash
npx create-react-app my-react-event-calendar-app
```
--------------------------------
### Payload Example
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/provider/rest_routes/put_routes/js_eventcalendar_putcalendar_route.md
Example of a JSON object sent in the request payload to update a calendar.
```json
{
"label": "My Calendar",
"description": "Updated",
"color": {
"background": "#5890DC",
"border": "#2D74D3"
}
}
```
--------------------------------
### Example Usage of editorValidation
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/config/js_eventcalendar_editorvalidation_config.md
Example of how to use the editorValidation callback to validate event text.
```javascript
// create Event Calendar
new eventCalendar.EventCalendar("#root", {
editorValidation: event => {
if (!event.text) return "Text is required";
}
// other configuration parameters
});
```
--------------------------------
### index.html
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/guides/initialization.md
Create a container for Event Calendar.
```jsx
```
--------------------------------
### From v2.1
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/news/migration.md
Configuration example from v2.1 onwards, showing the new `dateTitle`, `eventVerticalSpace`, and `eventHorizontalSpace` parameters, and the deprecation of `eventMerge`.
```jsx
config: {
...
dateTitle: (date, [start, end]) =>
`${format(start, "do")} - ${format(end, "do")} ${format(date, "LLL")}`, // you can also specify this property for each view separately
eventVerticalSpace: 8, // you can also specify this property for the "day" | "week" | "month" | "timeline" view modes separately
views: [
...
{
...
config: {
...
// the "eventMerge" parameter was deprecated
// use the "eventHorizontalSpace" parameter instead of "eventMerge" one
eventHorizontalSpace: 10,
}
}
]
}
```
--------------------------------
### Time and Date format
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/guides/localization.md
This example shows how to configure Date and Time settings for the calendar, including time format (12/24 hour) and various date formats.
```jsx
const { en, EventCalendar } = eventCalendar;
// Time format settings
en.calendar.timeFormat = 12;
en.scheduler.hourFormat = "h";
en.scheduler.minuteFormat = "mm";
en.scheduler.meridianFormat = "aa"
// Date format settings
en.scheduler.monthFormat: "EEE";
en.scheduler.dateFormat: "EEE, d";
en.scheduler.agendaDateFormat: "MMMM d EEEE";
en.scheduler.unassignFormat: "d MMM yyyy";
const event_calendar = new EventCalendar("#root", {
events,
mode: "month",
date: new Date("2023-02-12T00:00:00"),
locale: en
});
```
```jsx
en.calendar.timeFormat = 12;
// or
en.calendar.timeFormat = 24;
```
--------------------------------
### index.html
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/guides/initialization.md
Include the Event Calendar source files on a page.
```html
```
--------------------------------
### Example of updating an event
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/methods/js_eventcalendar_updateevent_method.md
This example demonstrates how to update an event's data using the updateEvent method.
```jsx
// create Event Calendar
const calendar = new eventCalendar.EventCalendar("#root", {
// configuration parameters
});
const new_event_data = {
id: "1.1",
type: "Work",
start_date: new Date("2021-05-24 00:00:00"),
end_date: new Date("2021-06-08 00:00:00"),
text: "Updated Event",
details: "Philippe-Chatrier Court\n Paris, FRA"
};
// update data of the event with the 1 ID
calendar.updateEvent({
event: new_event_data,
id: "1"
});
```
--------------------------------
### Setting initial date
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/guides/configuration.md
This snippet shows how to set the initially selected date using the `date` property.
```jsx
// create Event Calendar
new eventCalendar.EventCalendar("#root", {
date: new Date("2022-04-28T09:00:00"), // the initially selected date
// other configuration parameters
});
```
--------------------------------
### Create a new project
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/guides/integration_with_angular.md
Create a new my-angular-event-calendar-app project using Angular CLI.
```bash
ng new my-angular-event-calendar-app
```
--------------------------------
### Chinese Locale Example
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/guides/localization.md
An example of a Chinese locale configuration for the DHTMLX Calendar, covering scheduler-specific translations for events, dates, and recurring options.
```jsx
const cn = {
dateFnsLocale: dateFnsLocaleCn,
scheduler: {
"New Event": "新建事件",
"Add description": "添加描述",
"Create event": "创建事件",
"Edit event": "编辑事件",
"Delete event": "删除事件",
"Event name": "事件名称",
"Start date": "开始日期",
"End date": "结束日期",
"All day": "全天",
"No events": "无事件",
Type: "类型",
Description: "描述",
Today: "今天",
Day: "日",
Week: "周",
Month: "月",
Timeline: "时间线",
Agenda: "议程",
Calendars: "日历",
hourFormat: "H",
minuteFormat: "mm",
meridianFormat: " a",
monthFormat: "EEE",
dateFormat: "EEE, d",
agendaDateFormat: "MMMM d EEEE",
unassignFormat: "d MMM yyyy",
Color: "颜色",
Delete: "删除",
Edit: "编辑",
Calendar: "日历",
New: "新建",
Name: "名称",
Save: "保存",
Add: "添加",
Event: "事件",
confirmDelete: "确定要删除 {item} 吗？",
confirmUnsaved: "您有未保存的更改！确定要放弃吗？",
"Repeat event": "重复事件",
viewAll: "+{count} 更多",
Never: "永不",
Every: "每",
Workdays: "工作日",
Year: "年",
Custom: "自定义",
Ends: "结束于",
After: "之后",
"On date": "在日期",
events: "事件",
"recurring event": "重复事件",
all: "所有事件",
future: "当前及后续事件",
only: "仅此事件",
recurringActionError: "开始日期不能晚于重复结束日期",
Assignees: "分配对象",
"Recurring events": "重复事件",
"Single events": "单一事件",
recurringEveryMonthDay: "每月 {date} 日",
recurringEveryMonthPos: "每月的第 {pos} 个 {weekDay}",
recurringEveryYearDay: "每年 {month} {date} 日",
recurringEveryYearPos: "每年 {month} 的第 {pos} 个 {weekDay}"
}
};
```
--------------------------------
### Custom Two-Week View
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/guides/views.md
This example shows how to create a two-week view by overriding getBounds, getNext, and getPrev methods to adjust the displayed range and navigation for a 14-day interval.
```jsx
const { dateFns, EventCalendar } = eventCalendar;
const calendar = new EventCalendar("#root", {
config: {
views: [
{
id: "two-weeks",
label: "Two Weeks",
layout: "week",
config: {
getBounds: (date) => {
const start = dateFns.startOfWeek(date);
return [start, dateFns.addDays(start, 13)];
},
getNext: (date) => dateFns.addDays(date, 14),
getPrev: (date) => dateFns.addDays(date, -14)
}
}
]
},
mode: "two-weeks",
date: new Date("2025-02-12T00:00:00")
});
```
--------------------------------
### deleteCalendar Method Example
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/methods/js_eventcalendar_deletecalendar_method.md
This example demonstrates how to delete a calendar by its ID using the deleteCalendar method.
```javascript
// create Event Calendar
const calendar = new eventCalendar.EventCalendar("#root", {
// configuration parameters
});
// delete calendar with the "work" ID
calendar.deleteCalendar({
id: "work"
});
```
--------------------------------
### App.js
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/guides/integration_with_react.md
App.js file demonstrating how to import data and pass it as props to the EventCalendar component.
```jsx
import EventCalendar from "./EventCalendar";
import { getData } from "./data";
function App() {
const events = getData();
return ;
}
export default App;
```
--------------------------------
### Example Usage of add-calendar Event
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/events/js_eventcalendar_addcalendar_event.md
This example shows how to subscribe to the 'add-calendar' event and log the event object.
```javascript
// create Event Calendar
const calendar = new eventCalendar.EventCalendar("#root", {
// configuration parameters
});
// subscribe on the "add-calendar" event
calendar.api.on("add-calendar", (obj) => {
console.log(obj);
});
```
--------------------------------
### Clone the documentation to the local folder
Source: https://github.com/dhtmlx/docs-calendar/blob/master/README.md
Steps to clone the documentation repository and navigate into the directory.
```bash
$ git clone git@github.com:DHTMLX/docs-calendar.git
$ cd docs-calendar
```
--------------------------------
### Russian Locale Example
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/guides/localization.md
An example of a Russian locale configuration for the DHTMLX Calendar, including day names, month names, and core UI elements.
```javascript
const ru = {
dateFnsLocale: dateFnsLocaleRu,
fullDay: [
"Воскресенье",
"Понедельник",
"Вторник",
"Среда",
"Четверг",
"Пятница",
"Суббота",
],
dayShort: ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"],
hours: "Часы",
minutes: "Минуты",
done: "Гoтовo",
clear: "Очистить",
today: "Сегодня",
timeFormat: 24, // defines a Time format (12 or 24)
weekStart: 1, // defines a first day of week (Monday by default)
},
core: {
ok: "OK",
cancel: "Отмена"
}
};
```
--------------------------------
### index.html
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/guides/initialization.md
Initialize Event Calendar with a constructor.
```jsx
// create Event Calendar
new eventCalendar.EventCalendar("#root", {
// configuration properties
});
```
--------------------------------
### Updating Calendar Data Example
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/methods/js_eventcalendar_updatecalendar_method.md
An example demonstrating how to update the data of a specific calendar using the updateCalendar method.
```javascript
// create Event Calendar
const calendar = new eventCalendar.EventCalendar("#root", {
// configuration parameters
});
const new_calendar_data = {
id: "movie",
active: true,
label: "New Calendar",
color: {
background: "#CEEDC3",
border: "#77D257"
}
};
// update data of the calendar with the "Movie" ID
calendar.updateCalendar({
calendar: new_calendar_data,
id: "movie"
});
```
--------------------------------
### Example of creating an Event Calendar and closing its editor
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/methods/js_eventcalendar_closeeditor_method.md
This example demonstrates how to initialize an Event Calendar and then close its editor.
```javascript
// create Event Calendar
const calendar = new eventCalendar.EventCalendar("#root", {
// configuration parameters
});
// close an editor
calendar.closeEditor();
```
--------------------------------
### main.ts
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/guides/integration_with_angular.md
This snippet shows the main entry point for bootstrapping the Angular application with the AppModule.
```typescript
import {
platformBrowserDynamic
} from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.error(err));
```
--------------------------------
### Example
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/config/js_eventcalendar_locale_config.md
This example shows how to apply a custom locale (German in this case) when creating a new Event Calendar instance.
```javascript
// create Event Calendar
new eventCalendar.EventCalendar("#root", {
locale: eventСalendar.de // apply the "de" locale
// other configuration parameters
});
```
--------------------------------
### Timeline getBounds example
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/config/js_eventcalendar_config_config.md
Example of how to implement the getBounds function for the Timeline view to define the date range for a week.
```jsx
// helper
const getMonday = (date) => {
const newDate = new Date(date);
const day = date.getDay();
const diff = date.getDate() - day + (day == 0 ? -6 : 1);
return new Date(newDate.setDate(diff));
};
// ...,
views: [
{
id: 'timeline',
label: 'Timeline',
layout: 'timeline',
config: {
getBounds: (date) => {
const weekStart = getMonday(date);
return [weekStart, new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 7)];
},
//...
}
}
]
```
--------------------------------
### Example of custom editorShape
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/config/js_eventcalendar_editorshape_config.md
An example demonstrating how to extend the default editorShape with a custom radio button field for event priorities.
```jsx
// event priorities
const priorities = [
{ value: 1, label: "High" },
{ value: 2, label: "Medium" },
{ value: 3, label: "Low" }
];
// editor settings
const editorShape = [
...eventCalendar.defaultEditorShape, // include the default settings
{
type: "radio",
key: "priority",
label: "Priority",
options: priorities
}
];
// create Event Calendar
new eventCalendar.EventCalendar("#root", {
editorShape
// other configuration parameters
});
```
--------------------------------
### Multiuser Initialization with WebSocket
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/guides/working_with_server.md
This code shows how to set up a WebSocket connection to listen for real-time events from the server after the widget has been initialized.
```js
// multiuser initialization...
// connect to server events
const remoteEvents = new RemoteEvents(
url + "/api/v1",
token
);
remoteEvents.on(
remoteUpdates(calendar.api, restProvider.getIDResolver())
);
```
--------------------------------
### Configuration Object Example
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/api/config/js_eventcalendar_config_config.md
An example of the configuration object structure for dhtmlxCalendar, showing properties like label, id, and img.
```javascript
label: "Andy Warh",
id: "1",
img: "../src/codebase/data/common/img/02/avatar_02.jpg",
// ...,
},
{ ... }
]
```
--------------------------------
### Import Event Calendar Source Files (Trial Version)
Source: https://github.com/dhtmlx/docs-calendar/blob/master/docs/guides/integration_with_react.md
Import statements for the trial version of Event Calendar.
```jsx
import { EventCalendar } from '@dhx/trial-eventcalendar';
import "@dhx/trial-eventcalendar/dist/event-calendar.css";
```