v-calendar-scheduler
Version:
Calendar scheduler component for VueJs
88 lines (83 loc) • 19.9 kB
HTML
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Vue Calendar | Config</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/6.c3810d63.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/3.d6d810f1.js"><link rel="prefetch" href="/assets/js/5.3ae44317.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="active sidebar-link">Config</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/config.html#global-configuration" class="sidebar-link">Global configuration</a></li><li class="sidebar-sub-header"><a href="/guide/config.html#instance-configuration" class="sidebar-link">Instance configuration</a></li><li class="sidebar-sub-header"><a href="/guide/config.html#available-settings-props" class="sidebar-link">Available settings (props)</a></li></ul></li><li><a href="/guide/events.html" class="sidebar-link">Event model</a></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="config"><a href="#config" aria-hidden="true" class="header-anchor">#</a> Config</h1><p></p><div class="table-of-contents"><ul><li><a href="#global-configuration">Global configuration</a></li><li><a href="#instance-configuration">Instance configuration</a></li><li><a href="#available-settings-props">Available settings (props)</a><ul><li><a href="#labels">Labels</a></li></ul></li></ul></div><p></p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>The calendar uses the great <a href="https://momentjs.com/" target="_blank" rel="noopener noreferrer">Moment.js</a>, so for every prop or config involving a date you can pass either a <strong>Javascript Date Object</strong> or a <strong>Moment</strong> object.</p><p>If you are working with dates or times in your application I highly recommend you use Moment, it will make your life easier.</p></div><h2 id="global-configuration"><a href="#global-configuration" aria-hidden="true" class="header-anchor">#</a> Global configuration</h2><p>If you want your settings to apply to every instance of the calendar just pass an object with any of the supported settings to the constructor:</p><pre class="language-js"><code>Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>VueScheduler<span class="token punctuation">,</span> <span class="token punctuation">{</span>
locale<span class="token punctuation">:</span> <span class="token string">'es'</span><span class="token punctuation">,</span>
minDate<span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
maxDate<span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
labels<span class="token punctuation">:</span> <span class="token punctuation">{</span>
today<span class="token punctuation">:</span> <span class="token string">'Hoy'</span><span class="token punctuation">,</span>
back<span class="token punctuation">:</span> <span class="token string">'Atrás'</span><span class="token punctuation">,</span>
next<span class="token punctuation">:</span> <span class="token string">'Siguiente'</span><span class="token punctuation">,</span>
month<span class="token punctuation">:</span> <span class="token string">'Mes'</span><span class="token punctuation">,</span>
week<span class="token punctuation">:</span> <span class="token string">'Semana'</span><span class="token punctuation">,</span>
day<span class="token punctuation">:</span> <span class="token string">'Día'</span><span class="token punctuation">,</span>
all_day<span class="token punctuation">:</span> <span class="token string">'Todo el día'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
timeRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">11</span><span class="token punctuation">,</span><span class="token number">20</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
availableViews<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'month'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
initialDate<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>
initialView<span class="token punctuation">:</span> <span class="token string">'week'</span><span class="token punctuation">,</span>
use12<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
showTimeMarker<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
showTodayButton<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
eventDisplay<span class="token punctuation">:</span> <span class="token keyword">null</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><h2 id="instance-configuration"><a href="#instance-configuration" aria-hidden="true" class="header-anchor">#</a> Instance configuration</h2><p>You can also apply settings to individual instances of the calendar using props. Please note that this would override any settings you set globally.</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>Note that the <code>disableDialog</code> and <code>eventDialogConfig</code> settings work <strong>only</strong> on individual instances of the calendar.
To learn more about the Event dialog check the <a href="/guide/events.html#event-dialog">events section</a>.</p></div><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>vue-scheduler</span>
<span class="token attr-name">:min-date</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>null<span class="token punctuation">"</span></span>
<span class="token attr-name">:max-date</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>null<span class="token punctuation">"</span></span>
<span class="token attr-name">:labels</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{
today: <span class="token punctuation">'</span>Hoy<span class="token punctuation">'</span>,
back: <span class="token punctuation">'</span>Atrás<span class="token punctuation">'</span>,
next: <span class="token punctuation">'</span>Siguiente<span class="token punctuation">'</span>,
month: <span class="token punctuation">'</span>Mes<span class="token punctuation">'</span>,
week: <span class="token punctuation">'</span>Semana<span class="token punctuation">'</span>,
day: <span class="token punctuation">'</span>Día<span class="token punctuation">'</span>,
all_day: <span class="token punctuation">'</span>Todo el día<span class="token punctuation">'</span>
}<span class="token punctuation">"</span></span>
<span class="token attr-name">:time-range</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>[10,20]<span class="token punctuation">"</span></span>
<span class="token attr-name">:available-views</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>[<span class="token punctuation">'</span>month<span class="token punctuation">'</span>, <span class="token punctuation">'</span>week<span class="token punctuation">'</span>, <span class="token punctuation">'</span>day<span class="token punctuation">'</span>]<span class="token punctuation">"</span></span>
<span class="token attr-name">:initial-date</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>null<span class="token punctuation">"</span></span>
<span class="token attr-name">initial-view</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span>
<span class="token attr-name">use12</span>
<span class="token attr-name">:show-time-marker</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>showMarker<span class="token punctuation">"</span></span>
<span class="token attr-name">:show-today-button</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span>
<span class="token attr-name">eventDisplay</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 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 comment">// ...</span>
methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
eventDisplay<span class="token punctuation">:</span> event <span class="token operator">=></span> event<span class="token punctuation">.</span>customAttribute<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// ... </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="available-settings-props"><a href="#available-settings-props" aria-hidden="true" class="header-anchor">#</a> Available settings (props)</h2><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>You can set the calendar locale <strong>globally</strong> using any <a href="https://momentjs.com/docs/#/i18n/loading-into-nodejs/" target="_blank" rel="noopener noreferrer">locale supported by Moment.js</a>.</p></div><table><thead><tr><th>Setting</th><th>Description</th><th>Type</th><th>Default value</th></tr></thead><tbody><tr><td>locale</td><td>Moment.js supported locale. <strong>Works as a global setting only</strong>.</td><td>String</td><td><code>'en'</code></td></tr><tr><td>min-date</td><td>Minimum date for the calendar on any view.</td><td>Date - Moment.js object</td><td><code>null</code></td></tr><tr><td>max-date</td><td>Maximum date for the calendar on any view.</td><td>Date - Moment.js object</td><td><code>null</code></td></tr><tr><td>labels</td><td>Texts for the labels that are not dependant on Moment, such as the buttons at the top.</td><td>Array[String]</td><td>Check labels table below</td></tr><tr><td>time-range</td><td>Sets the time range for the <code>week</code> and <code>day</code> views.</td><td>Array[Number]</td><td><code>[0, 23]</code></td></tr><tr><td>available-views</td><td>Enables/disables views for the calendar.</td><td>Array[String]</td><td><code>['month', 'week', 'day']</code></td></tr><tr><td>initial-date</td><td>Sets the date the calendar will display on load.</td><td>String</td><td><code>new Date()</code></td></tr><tr><td>initial-view</td><td>Sets the view the calendar will display on load.</td><td>String</td><td><code>'month'</code></td></tr><tr><td>use12</td><td>Toggles the use of 12-hour time format.</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>show-time-marker</td><td>Enables/disables the horizontal time marker for the <code>week</code> and <code>day</code> views.</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>show-today-button</td><td>Toggles the display of the <code>Today</code> button on the top left corner of the calendar.</td><td>Boolean</td><td><code>true</code></td></tr><tr><td>event-display</td><td>Attribute that will be displayed for each event in the calendar. This can be either an attribute key or a callback function that receives the event as parameter. <a href="/guide/events.html#setting-the-event-display">Learn more</a>.</td><td>String, Function</td><td><code>null</code></td></tr><tr><td>disable-dialog</td><td>Disables the <a href="/guide/events.html#event-dialog">Event dialog</a> that appears when an user clicks on a day or time. <strong>Only works as a prop on individual instances</strong>.</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>event-dialog-config</td><td>Configures the <a href="/guide/events.html#event-dialog">Event dialog</a>. <strong>Only works as a prop on individual instances</strong>.</td><td>Object</td><td>Check dialog config <a href="/guide/events.html#event-dialog">here</a>.</td></tr></tbody></table><h3 id="labels"><a href="#labels" aria-hidden="true" class="header-anchor">#</a> Labels</h3><table><thead><tr><th>Label</th><th>Description</th><th>Default</th></tr></thead><tbody><tr><td>today</td><td>Label for the 'today' button.</td><td><code>'Today'</code></td></tr><tr><td>back</td><td>Label for the 'back' button.</td><td><code>'Back'</code></td></tr><tr><td>next</td><td>Label for the 'next' button.</td><td><code>'Next'</code></td></tr><tr><td>month</td><td>Label for the 'month' button.</td><td><code>'Month'</code></td></tr><tr><td>week</td><td>Label for the 'week' button.</td><td><code>'Week'</code></td></tr><tr><td>day</td><td>Label for the 'day' button.</td><td><code>'Day'</code></td></tr><tr><td>all_day</td><td>Label for the 'All day' section in 'week' and 'day' views.</td><td><code>'all day'</code></td></tr></tbody></table></div><div class="content edit-link"><a href="https://github.com/dapd007/v-calendar-scheduler/edit/master/docs/guide/config.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/getting-started.html" class="prev">
Getting started
</a></span><span class="next"><a href="/guide/events.html">
Event model
</a> →
</span></p></div></div></div></div>
<script src="/assets/js/6.c3810d63.js" defer></script><script src="/assets/js/app.233d7366.js" defer></script>
</body>
</html>