Skip to main content

editorShape

Description

Optional. An array of objects containing settings for managing the appearance and functionality of the Event Calendar editor

Usage

editorShape?: [
{
// common settings
type: string,
key: string,
label?: string,

// for "text" and "textarea" types
config?: {
readonly?: boolean,
focus?: boolean,
disabled?: boolean,
placeholder?: string,
type?: string,
inputStyle?: string
},

// for "combo" and "multiselect" types only
template?: (option) => string,
options?: [
{
id: any,
label: string,
},
{...} // other options
],
config?: {
placeholder?: string,
disabled?: boolean
},

// for a "radio" type only
options?: [
{
id: any,
label?: string,
},
{...} // other options
],

// for "color" and "colorSchema" types
colors?: [], // for a "color" type only
colors?: [ // for a "colorSchema" type only
{
background?: string,
border?: string,
textColor? string,
colorpicker? string
},
{...}
],
config?: {
placeholder?: string,
clear?: boolean
},

// for a "checkbox" type only
text?: string,

// for a "date" type only
time?: boolean

// for a "files" type only
uploadURL?: string,
config?: {
accept?: string,
disabled?: boolean,
multiple?: boolean,
folder?: boolean
}
},{...}
];

Parameters

To configure the editor appearance and functionality, you can specify the following parameters (fields):

- Common parameters for all types

  • type - (required) an editor field type. Here you can specify the following types: text, textarea, combo, multiselect, color, checkbox, date, radio and files
  • key - (required) an editor field key. Here you need to use the value specified in the events property. See the example below:
// event data
const events = [
{
text: "Current event",
start_date: new Date("2021-05-24T00:00:00")
}, {...}
];
// editor settings
const editorShape = [
{
type: "text",
key: "text",
label: "Event name",
config: {
placeholder: "New event"
}
},
{
type: "date",
key: "start_date",
label: "Start date",
time: true
}
];
  • label - (optional) an editor field label

- Parameters for "text" and "textarea" types

  • config - (optional) a configuration object of the "text" and "textarea" fields. Here you can specify the following parameters:
    • readonly - (optional) enables/disables a readonly mode
    • focus - (optional) enables/disables a focus
    • disabled - (optional) enables/disables a field state
    • placeholder - (optional) a placeholder value
    • type - (optional) a type of the input field (only for text type). Here you can specify only the password, number, and text values)
    • inputStyle - (optional) a custom css style

- Parameters for "combo" and "multiselect" types

  • template - (optional) a function that needs to return a custom template of the drop-down options
  • options - (optional) an array of objects containing the dropdown options data. Here you can specify the following parameters:
    • id - (required) an option ID
    • label - (required) an option label
  • config - (optional) a configuration object of the "combo" field. Here you can specify the following parameters:
    • placeholder - (optional) a placeholder value
    • disabled - (optional) enables/disables a field state

- Parameters for a "radio" type

  • options - (optional) an array of objects containing the radio button data. Here you can specify the following parameters:
    • value - (required) a radio button value
    • label - (optional) an option label

- Parameters for "color" and "colorSchema" types

note

For a color type only

  • colors - (optional) an array with valid HEX codes
note

For a colorSchema type only. Unless you specify colors for the colorSchema type, the colorpicker will use a set of parameters specified via the colors property

  • colors - (optional) an array of objects containing the parameters of colors used in colorpicker. For each set of colors you can specify the following parameters:
    • background - (optional) a HEX code of the event background color
    • border - (optional) a HEX code of the event border color
    • textColor - (optional) a HEX code of the event text color
    • colorpicker - (optional) a value (color) used in colorpicker. The possible values are "background" and "border"
  • config - (optional) a configuration object of the "color" and "colorSchema" fields. Here you can specify the following parameters:
    • placeholder - (optional) a placeholder value
    • clear - (optional) shows/hides a "clear" icon

- Parameters for a "checkbox" type

  • text - (optional) text label (only for checkbox type)

- Parameters for a "date" type

  • time - (optional) - enables/disables a timepicker (besides a datepicker)

- Parameters for a "files" type

  • uploadURL - (optional) an URL of the editor uploader
  • config - (optional) a configuration object of the "files" field. Here you can specify the following parameters:
    • accept - (optional) a file type to be uploaded ("image/*", "video/*", "audio/*" and other)
    • disabled - (optional) enables/disables uploading files
    • multiple - (optional) enables/disables uploading multiple files
    • folder - (optional) enables/disables uploading folders
info

Unless you specify the editor settings via the editorShape property, the widget will apply the defaultEditorShape set of parameters!

Default config

note

You can export the default config using the eventCalendar.defaultEditorShape expression.

const defaultEditorShape = [
{
key: "text",
type: "text",
label: "Event name",
config: {
placeholder: "New Event"
}
},
{
type: "date",
key: "start_date",
label: "Start date",
time: true
},
{
type: "date",
key: "end_date",
label: "End date",
time: true
},
{
type: "checkbox",
key: "allDay",
text: "All day"
},
{
type: "combo",
key: "type",
label: "Type"
},
{
key: "details",
type: "textarea",
label: "Description",
config: {
placeholder: "Add description"
}
}
];
info

To set the editorShape config dynamically, you can use the setConfig() method

Example

// 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
{ // add custom radio field
type: "radio",
key: "priority",
label: "Priority",
options: priorities
}
];
// create Event Calendar
new eventCalendar.EventCalendar("#root", {
editorShape
// other configuration parameters
});

Related articles: Configuration

Related sample: Event Calendar. Event color and Event Calendar. Custom editor fields

Change log:

  • The multiselect and radio types of editor were added in v1.1
  • The template parameter of the multiselect and combo types of editor was added in v1.1