v-calendar-scheduler
Version:
Calendar scheduler component for VueJs
168 lines (166 loc) • 43.5 kB
HTML
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Vue Calendar | Event model</title>
<meta name="description" content="Calendar scheduler component for VueJs">
<meta property="og:url" content="https://v-calendar.davidpaternina.com/">
<meta property="og:title" content="Vue Calendar Scheduler">
<meta property="og:description" content="Calendar scheduler component for VueJs">
<meta property="og:image" content="https://v-calendar.davidpaternina.com/assets/img/fb-jumbo.png">
<link rel="preload" href="/assets/css/0.styles.df06e255.css" as="style"><link rel="preload" href="/assets/js/app.233d7366.js" as="script"><link rel="preload" href="/assets/js/3.d6d810f1.js" as="script"><link rel="prefetch" href="/assets/js/4.1e6fe3d0.js"><link rel="prefetch" href="/assets/js/1.561fc534.js"><link rel="prefetch" href="/assets/js/2.24fa77b3.js"><link rel="prefetch" href="/assets/js/5.3ae44317.js"><link rel="prefetch" href="/assets/js/6.c3810d63.js"><link rel="prefetch" href="/assets/js/7.529a46be.js"><link rel="prefetch" href="/assets/js/8.1d03fc94.js"><link rel="prefetch" href="/assets/js/9.b1f1ce6a.js">
<link rel="stylesheet" href="/assets/css/0.styles.df06e255.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/" class="home-link router-link-active"><!----><span class="site-name">
Vue Calendar
</span></a><div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""><!----></div><nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">Home</a></div><div class="nav-item"><a href="/guide/" class="nav-link router-link-active">Documentation</a></div><div class="nav-item"><a href="https://github.com/dapd007/v-calendar-scheduler/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="nav-link">Changelog</a></div><a href="https://github.com/dapd007/v-calendar-scheduler" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header><div class="sidebar-mask"></div><div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">Home</a></div><div class="nav-item"><a href="/guide/" class="nav-link router-link-active">Documentation</a></div><div class="nav-item"><a href="https://github.com/dapd007/v-calendar-scheduler/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="nav-link">Changelog</a></div><a href="https://github.com/dapd007/v-calendar-scheduler" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading open"><span>Guide</span><!----></p><ul class="sidebar-group-items"><li><a href="/guide/" class="sidebar-link">Introduction</a></li><li><a href="/guide/overview.html" class="sidebar-link">Overview</a></li><li><a href="/guide/getting-started.html" class="sidebar-link">Getting started</a></li><li><a href="/guide/config.html" class="sidebar-link">Config</a></li><li><a href="/guide/events.html" class="active sidebar-link">Event model</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/events.html#setting-or-adding-events" class="sidebar-link">Setting or adding events</a></li><li class="sidebar-sub-header"><a href="/guide/events.html#custom-attributes" class="sidebar-link">Custom attributes</a></li><li class="sidebar-sub-header"><a href="/guide/events.html#setting-the-event-display" class="sidebar-link">Setting the event display</a></li><li class="sidebar-sub-header"><a href="/guide/events.html#event-dialog" class="sidebar-link">Event dialog</a></li><li class="sidebar-sub-header"><a href="/guide/events.html#dialog-example" class="sidebar-link">Dialog example</a></li></ul></li><li><a href="/guide/callbacks.html" class="sidebar-link">Callbacks</a></li><li><a href="/guide/customization.html" class="sidebar-link">Customization</a></li><li><a href="/guide/demos.html" class="sidebar-link">Demos</a></li></ul></div></li></ul></div><div class="page"><div class="content"><h1 id="event-model"><a href="#event-model" aria-hidden="true" class="header-anchor">#</a> Event model</h1><p>The <code>Event</code> model represents an event in the calendar. The most basic instance consists of <code>date</code>, <code>startTime</code> and <code>endTime</code>.</p><p>It also contains some hidden logic that allows the calendar to perform validations and store some meta data <strong>without</strong> exposing this data to you, so the objects you pass to the calendar remain as you added them.</p><h2 id="setting-or-adding-events"><a href="#setting-or-adding-events" aria-hidden="true" class="header-anchor">#</a> Setting or adding events</h2><p>To add your events to the calendar simply pass an array with your events to the <code>events</code> prop of the calendar.</p><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>v-scheduler</span> <span class="token attr-name">:events</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>events<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
events<span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
date<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
date<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
startTime<span class="token punctuation">:</span> <span class="token string">"13:00"</span><span class="token punctuation">,</span>
endTime<span class="token punctuation">:</span> <span class="token string">"15:00"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre><p>You can pass events with just a <code>Date</code> object.<br>
If there is no <code>startTime</code> the event will show on the <code>all day</code> section of the <code>week</code> and <code>day</code> views. The <code>startTime</code> is also used to sort events with the same date on the <code>month</code> view.</p><p>If you pass an event <strong>with</strong> a <code>startTime</code> but <strong>without</strong> an <code>endTime</code> you will get an error.</p><p>The format for the times is <code>"HH:mm"</code>, using 24-hour.</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>Any event you later to the array, as well as any event created using the <a href="#event-dialog">Event dialog</a>, will appear in the calendar automatically.</p></div><h2 id="custom-attributes"><a href="#custom-attributes" aria-hidden="true" class="header-anchor">#</a> Custom attributes</h2><p>If you want to add more attributes to your events, like a name, simple add them to each event object.</p><pre class="language-js"><code><span class="token comment">// ...</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
events<span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
date<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
startTime<span class="token punctuation">:</span> <span class="token string">"13:00"</span><span class="token punctuation">,</span>
endTime<span class="token punctuation">:</span> <span class="token string">"15:00"</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">"Date with David"</span><span class="token punctuation">,</span>
comments<span class="token punctuation">:</span> <span class="token string">"MUST bring chocolate."</span><span class="token punctuation">,</span>
customAttribute<span class="token punctuation">:</span> <span class="token string">"I'm a custom attribute"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">// ...</span>
</code></pre><h2 id="setting-the-event-display"><a href="#setting-the-event-display" aria-hidden="true" class="header-anchor">#</a> Setting the event display</h2><p>By default the events on the calendar display only the <code>startTime</code> if any.<br>
If you want to display something else for each event, set the <code>event-display</code> prop on the calendar instance (<a href="/guide/config.html#available-settings-props">check available props</a>).</p><p>The props takes a <code>String</code> as the key for the attribute you want to display. It can also take a callback function in case you need more control. This callback receives the event as a parameter and should return a <code>String</code> with the value you want to display.</p><h4 id="using-a-string-as-key"><a href="#using-a-string-as-key" aria-hidden="true" class="header-anchor">#</a> Using a string as key:</h4><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>v-scheduler</span> <span class="token attr-name">:events</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>events<span class="token punctuation">"</span></span> <span class="token attr-name">event-display</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token comment"><!-- Using the custom attribute 'name' as display key. --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
events<span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
date<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
startTime<span class="token punctuation">:</span> <span class="token string">"13:00"</span><span class="token punctuation">,</span>
endTime<span class="token punctuation">:</span> <span class="token string">"15:00"</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">"Date with David"</span><span class="token punctuation">,</span>
comments<span class="token punctuation">:</span> <span class="token string">"MUST bring chocolate."</span><span class="token punctuation">,</span>
customAttribute<span class="token punctuation">:</span> <span class="token string">"I'm a custom attribute"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre><h4 id="using-a-callback-function"><a href="#using-a-callback-function" aria-hidden="true" class="header-anchor">#</a> Using a callback function:</h4><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>v-scheduler</span> <span class="token attr-name">:events</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>events<span class="token punctuation">"</span></span> <span class="token attr-name">:event-display</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>eventDisplay<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token comment"><!-- Using a callback function. --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
events<span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
date<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
startTime<span class="token punctuation">:</span> <span class="token string">"13:00"</span><span class="token punctuation">,</span>
endTime<span class="token punctuation">:</span> <span class="token string">"15:00"</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">"Date with David"</span><span class="token punctuation">,</span>
comments<span class="token punctuation">:</span> <span class="token string">"MUST bring chocolate."</span><span class="token punctuation">,</span>
customAttribute<span class="token punctuation">:</span> <span class="token string">"I'm a custom attribute"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token function">eventDisplay</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> event<span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">' - '</span> <span class="token operator">+</span> event<span class="token punctuation">.</span>comments<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre><h2 id="event-dialog"><a href="#event-dialog" aria-hidden="true" class="header-anchor">#</a> Event dialog</h2><p>The default, basic dialog looks like this:</p><p><img src="data:image/png;base64,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" alt="Event dialog"></p><p>If the user clicks on a date on the <code>month</code> view the dialog will populate the <code>Date</code> and leave the <code>Start Time</code> and <code>End Time</code> empty.<br>
If the user clicks on a time block on the <code>week</code> or <code>day</code> views the dialog will populate the <code>Date</code>, the <code>Start Time</code> and the <code>End Time</code>.</p><h3 id="dialog-settings"><a href="#dialog-settings" aria-hidden="true" class="header-anchor">#</a> Dialog settings</h3><p>To change any setting of the dialog, pass an object with your settings to the <code>event-dialog-config</code> prop of the calendar.</p><div class="warning custom-block"><p class="custom-block-title">These settings are not global.</p><p>Remember that these settings work <strong>per instance</strong> only.</p></div><table><thead><tr><th>Setting</th><th>Description</th><th>Type</th><th>Default</th></tr></thead><tbody><tr><td>title</td><td>Sets the dialog title.</td><td>String</td><td><code>'Create event'</code></td></tr><tr><td>inputClass</td><td>Additional classes for the dialog inputs. <strong>Classes are added to input parent</strong>, not the input itself.</td><td>String</td><td><code>null</code></td></tr><tr><td>overrideInputClass</td><td>By default classes set with <code>inputClass</code> are <strong>appended</strong> to the default class. This setting removes default classes.</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>createButtonLabel</td><td>Text for the <code>Create</code> button of the dialog.</td><td>String</td><td><code>'Create'</code></td></tr><tr><td>enableTimeInputs</td><td>Toggles the <code>startTime</code> and <code>endTime</code> inputs.</td><td>Boolean</td><td><code>true</code></td></tr><tr><td>fields</td><td>Additional fields.</td><td>Array[Object]. <a href="#custom-fields">Check Custom fields</a>.</td><td></td></tr></tbody></table><h3 id="custom-fields"><a href="#custom-fields" aria-hidden="true" class="header-anchor">#</a> Custom fields</h3><p>Each field consists of the following attributes:</p><div class="warning custom-block"><p class="custom-block-title">Input type support</p><p>Checkboxes, radio and selects are <strong>not</strong> supported yet. This will be fixed in the next release.</p></div><table><thead><tr><th>Attribute</th><th>Description</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td>name</td><td>Sets the name of the html input. It should match the name of the <a href="#custom-attributes">custom attribute</a> you want to set.</td><td>String</td><td>N/A</td><td>Yes</td></tr><tr><td>type</td><td>Sets the input type. Supports almost any HTML5 input type and textarea.</td><td>String</td><td><code>'text'</code></td><td>No</td></tr><tr><td>label</td><td>Sets the input label. Defaults to the <code>name</code> attribute.</td><td>String</td><td><code>name</code> attribute</td><td>No</td></tr><tr><td>showLabel</td><td>Shows/hides the input label.</td><td>Boolean</td><td><code>true</code></td><td>No</td></tr><tr><td>required</td><td>Adds/removes the <code>required</code> HTML attribute.</td><td>Boolean</td><td><code>false</code></td><td>No</td></tr><tr><td>value</td><td>Sets the initial input value.</td><td>Mixed</td><td><code>null</code></td><td>No</td></tr></tbody></table><div class="tip custom-block"><p class="custom-block-title">Inline fields</p><p>You can group fields to display them inline (like the default <code>time</code> fields).<br>
To do this, pass an object with a <code>fields</code> array and an optional <code>label</code>. Check the example below.</p></div><h2 id="dialog-example"><a href="#dialog-example" aria-hidden="true" class="header-anchor">#</a> Dialog example</h2><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>vue-scheduler</span> <span class="token attr-name">:event-dialog-config</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dialogConfig<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
dialogConfig<span class="token punctuation">:</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Custom dialog title'</span><span class="token punctuation">,</span>
createButtonLabel<span class="token punctuation">:</span> <span class="token string">'Save event thingy'</span><span class="token punctuation">,</span>
enableTimeInputs<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
fields<span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
name<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
label<span class="token punctuation">:</span> <span class="token string">'Event name'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
name<span class="token punctuation">:</span> <span class="token string">'email'</span><span class="token punctuation">,</span>
type<span class="token punctuation">:</span> <span class="token string">'email'</span><span class="token punctuation">,</span>
required<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
label<span class="token punctuation">:</span> <span class="token string">'E-mail'</span><span class="token punctuation">,</span>
value<span class="token punctuation">:</span> <span class="token string">'email@example.com'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
label<span class="token punctuation">:</span> <span class="token string">'Grouped'</span><span class="token punctuation">,</span>
fields<span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
name<span class="token punctuation">:</span> <span class="token string">'Field 1'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
name<span class="token punctuation">:</span> <span class="token string">'Field 2'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
name<span class="token punctuation">:</span> <span class="token string">'comments'</span><span class="token punctuation">,</span>
type<span class="token punctuation">:</span> <span class="token string">'textarea'</span><span class="token punctuation">,</span>
label<span class="token punctuation">:</span> <span class="token string">'comments'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre><h4 id="this-produces-the-following-dialog"><a href="#this-produces-the-following-dialog" aria-hidden="true" class="header-anchor">#</a> This produces the following dialog:</h4><p><img src="/assets/img/event-dialog-example.4fe8bb96.png" alt="Event dialog example"></p></div><div class="content edit-link"><a href="https://github.com/dapd007/v-calendar-scheduler/edit/master/docs/guide/events.md" target="_blank" rel="noopener noreferrer">Edit this page</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><div class="content page-nav"><p class="inner"><span class="prev">
← <a href="/guide/config.html" class="prev">
Config
</a></span><span class="next"><a href="/guide/callbacks.html">
Callbacks
</a> →
</span></p></div></div></div></div>
<script src="/assets/js/3.d6d810f1.js" defer></script><script src="/assets/js/app.233d7366.js" defer></script>
</body>
</html>