v-calendar-scheduler

Version:

Calendar scheduler component for VueJs

v-calendar.davidpaternina.com

43 lines (39 loc) • 23.4 kB

HTML

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Vue Calendar | Customization</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/5.3ae44317.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/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="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="active sidebar-link">Customization</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/customization.html#setting-variables" class="sidebar-link">Setting variables</a></li><li class="sidebar-sub-header"><a href="/guide/customization.html#available-variables" class="sidebar-link">Available variables</a></li></ul></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="customization"><a href="#customization" aria-hidden="true" class="header-anchor">#</a> Customization</h1><h2 id="setting-variables"><a href="#setting-variables" aria-hidden="true" class="header-anchor">#</a> Setting variables</h2><p>To customize the calendar import the default <code>Sass</code> variables, set your variables and then import the rest of the styles.<br> Check all the available variables <a href="#available-variables">below</a></p><pre class="language-scss"><code><span class="token comment">// Import the default variables</span> <span class="token keyword">@import</span> <span class="token string">"~v-calendar-scheduler/scss/variables"</span><span class="token punctuation">;</span> <span class="token comment">// Set your variables</span> <span class="token property"><span class="token variable">$v-cal-event-bg</span></span><span class="token punctuation">:</span> salmon<span class="token punctuation">;</span> <span class="token comment">// Event background color</span> <span class="token property"><span class="token variable">$v-cal-event-border-radius</span></span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token comment">// Events border radius (all 4 corners)</span> <span class="token comment">// Import the rest</span> <span class="token keyword">@import</span> <span class="token string">"~v-calendar-scheduler/scss/main"</span><span class="token punctuation">;</span> </code></pre><h4 id="result"><a href="#result" aria-hidden="true" class="header-anchor">#</a> Result:</h4><table><thead><tr><th>Before</th><th>After</th></tr></thead><tbody><tr><td><img src="data:image/png;base64,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" alt="Before"></td><td><img src="data:image/png;base64,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" alt="After"></td></tr></tbody></table><h2 id="available-variables"><a href="#available-variables" aria-hidden="true" class="header-anchor">#</a> Available variables</h2><h3 id="basic"><a href="#basic" aria-hidden="true" class="header-anchor">#</a> Basic</h3><table><thead><tr><th>Variable</th><th>Description</th><th>Default</th></tr></thead><tbody><tr><td><code>$v-cal-font-color</code></td><td>Sets the text color for the <code>Title</code>, month days, and week and day times.</td><td><code>#4D4F5C</code></td></tr><tr><td><code>$v-cal-title-font-size</code></td><td>Sets the <code>Title</code> font size.</td><td><code>18px</code></td></tr><tr><td><code>$v-cal-body-bg</code></td><td>Sets the background color for the calendar body (Including the buttons at the top.</td><td><code>$white</code></td></tr><tr><td><code>$v-cal-body-shadow</code></td><td>Sets the box shadow for the calendar body (Including the buttons at the top.</td><td><code>0 2px 6px rgba(0,0,0,.04)</code></td></tr><tr><td><code>$v-cal-content-border-color</code></td><td>Sets the border of the calendar main section. Applies to all views.</td><td><code>#EAF0F4</code></td></tr></tbody></table><h3 id="calendar-head"><a href="#calendar-head" aria-hidden="true" class="header-anchor">#</a> Calendar head</h3><table><thead><tr><th>Variable</th><th>Description</th><th>Default</th></tr></thead><tbody><tr><td><code>$v-cal-days-head-bg</code></td><td>Sets the background of the calendar head, where the days are shown.</td><td><code>#F5F6FA</code></td></tr><tr><td><code>$v-cal-days-head-border-color</code></td><td>Sets the border color of the calendar head, bottom border only.</td><td><code>#EAF0F4</code></td></tr><tr><td><code>$v-cal-days-head-color</code></td><td>Sets the text color of the calendar head (days names).</td><td><code>#A3A6B4</code></td></tr><tr><td><code>$v-cal-days-head-font-size</code></td><td>Sets the font size of the calendar head (days names).</td><td><code>.75rem</code></td></tr><tr><td><code>$v-cal-days-head-font-weight</code></td><td>Sets the font weight of the calendar head (days names).</td><td><code>bold</code></td></tr></tbody></table><h3 id="days-all-views"><a href="#days-all-views" aria-hidden="true" class="header-anchor">#</a> Days - All views</h3><table><thead><tr><th>Variable</th><th>Description</th><th>Default</th></tr></thead><tbody><tr><td><code>$v-cal-day-bg</code></td><td>Sets the background color for the days.</td><td><code>$white</code></td></tr><tr><td><code>$v-cal-day-border-color</code></td><td>Sets the border color for the days (<code>month</code>) and the time blocks (<code>week</code>, <code>day</code>).</td><td><code>#EAF0F4</code></td></tr><tr><td><code>$v-cal-day-diff-month-color</code></td><td>Sets the background color for the days that belong to a month different from the active one.</td><td><code>rgba(67, 66, 93, .3)</code></td></tr><tr><td><code>$v-cal-day-today-bg</code></td><td>Sets the background color <code>today</code>.</td><td><code>#F5F6FA</code></td></tr><tr><td><code>$v-cal-day-disabled-bg</code></td><td>Sets the background color for disabled days when using <code>min-date</code> or <code>max-date</code>. <a href="/guide/config.html#available-settings-props">Learn more</a>.</td><td><code>#f0f0f0</code></td></tr><tr><td><code>$v-cal-day-disabled-color</code></td><td>Sets the text color for disabled days when using <code>min-date</code> or <code>max-date</code>. <a href="/guide/config.html#available-settings-props">Learn more</a>.</td><td><code>#b0b0b0</code></td></tr></tbody></table><h3 id="days-month-view-only"><a href="#days-month-view-only" aria-hidden="true" class="header-anchor">#</a> Days - Month view only</h3><table><thead><tr><th>Variable</th><th>Description</th><th>Default</th></tr></thead><tbody><tr><td><code>$v-cal-day-number-font-size</code></td><td>Sets the font size for the dates.</td><td><code>.75rem</code></td></tr><tr><td><code>$v-cal-day-number-padding</code></td><td>Sets the padding for the dates. (Just the numbers)</td><td><code>10px</code></td></tr><tr><td><code>$v-cal-day-month-height</code></td><td>Minimum height for the days.</td><td><code>140px</code></td></tr><tr><td><code>$v-cal-day-month-hover-bg</code></td><td>Day background color on <code>hover</code>.</td><td><code>#fcfcfc</code></td></tr></tbody></table><h3 id="times-week-and-day-views-only"><a href="#times-week-and-day-views-only" aria-hidden="true" class="header-anchor">#</a> Times - Week and day views only</h3><table><thead><tr><th>Variable</th><th>Description</th><th>Default</th></tr></thead><tbody><tr><td><code>$v-cal-time-block-bg</code></td><td>'Time block' background color.</td><td><code>transparent</code></td></tr><tr><td><code>$v-cal-time-block-hover-bg</code></td><td>'Time block' background color on <code>hover</code>.</td><td><code>#fcfcfc</code></td></tr></tbody></table><h3 id="times-column-week-and-day-views-only"><a href="#times-column-week-and-day-views-only" aria-hidden="true" class="header-anchor">#</a> Times column - Week and day views only</h3><table><thead><tr><th>Variable</th><th>Description</th><th>Default</th></tr></thead><tbody><tr><td><code>$v-cal-times-bg</code></td><td>Times column background color.</td><td><code>$white</code></td></tr><tr><td><code>$v-cal-times-font-size</code></td><td>Times column font size.</td><td><code>.8125rem</code></td></tr><tr><td><code>$v-cal-times-border-color</code></td><td>Times column border color.</td><td><code>#EAF0F4</code></td></tr></tbody></table><h3 id="events"><a href="#events" aria-hidden="true" class="header-anchor">#</a> Events</h3><table><thead><tr><th>Variable</th><th>Description</th><th>Default</th></tr></thead><tbody><tr><td><code>$v-cal-event-bg</code></td><td>Event background color.</td><td><code>#3B86FF</code></td></tr><tr><td><code>$v-cal-event-color</code></td><td>Event text color.</td><td><code>$white</code></td></tr><tr><td><code>$v-cal-event-border-radius</code></td><td>Events border radius (all 4 corners).</td><td><code>4px</code></td></tr></tbody></table><h3 id="time-marker"><a href="#time-marker" aria-hidden="true" class="header-anchor">#</a> Time Marker</h3><table><thead><tr><th>Variable</th><th>Description</th><th>Default</th></tr></thead><tbody><tr><td><code>$v-cal-time-marker-color</code></td><td>Time marker color (<code>week</code> and <code>day</code> views).</td><td><code>#3B86FF</code></td></tr></tbody></table><h3 id="buttons"><a href="#buttons" aria-hidden="true" class="header-anchor">#</a> Buttons</h3><table><thead><tr><th>Variable</th><th>Description</th><th>Default</th></tr></thead><tbody><tr><td><code>$v-cal-button-bg</code></td><td>Buttons background color.</td><td><code>$white</code></td></tr><tr><td><code>$v-cal-button-shadow</code></td><td>Buttons shadow.</td><td><code>0 2px 3px rgba(0,0,0,.05)</code></td></tr><tr><td><code>$v-cal-button-padding</code></td><td>Buttons padding.</td><td><code>8px 18px</code></td></tr><tr><td><code>$v-cal-button-border-color</code></td><td>Buttons border color.</td><td><code>#D7DAE2</code></td></tr><tr><td><code>$v-cal-button-border-radius</code></td><td>Buttons border radius.</td><td><code>4px</code></td></tr><tr><td><code>$v-cal-button-active-bg</code></td><td>Button <code>is-active</code> background color.</td><td><code>$white</code></td></tr><tr><td><code>$v-cal-button-active-color</code></td><td>Button <code>is-active</code> text color.</td><td><code>#3B86FF</code></td></tr><tr><td><code>$v-cal-button-hover-bg</code></td><td>Button <code>hover</code> background color.</td><td><code>#fcfcfc</code></td></tr><tr><td><code>$v-cal-button-hover-color</code></td><td>Button <code>hover</code> text color.</td><td><code>#3B86FF</code></td></tr><tr><td><code>$v-cal-button-disabled-bg</code></td><td>Button <code>:disabled</code> background color.</td><td><code>#f0f0f0</code></td></tr><tr><td><code>$v-cal-button-disabled-color</code></td><td>Button <code>:disabled</code> text color.</td><td><code>#d0d0d0</code></td></tr><tr><td><code>$v-cal-button-disabled-cursor</code></td><td>Button <code>:disabled</code> cursor.</td><td><code>not-allowed</code></td></tr></tbody></table><h3 id="dialog"><a href="#dialog" aria-hidden="true" class="header-anchor">#</a> Dialog</h3><table><thead><tr><th>Variable</th><th>Description</th><th>Default</th></tr></thead><tbody><tr><td><code>$v-cal-dialog-bg</code></td><td>Dialog background (overlay).</td><td><code>rgba(0,0,0,.3)</code></td></tr><tr><td><code>$v-cal-dialog-card-bg</code></td><td>Dialog card background color.</td><td><code>$white</code></td></tr><tr><td><code>$v-cal-dialog-card-max-width</code></td><td>Dialog card maximum width.</td><td><code>500px</code></td></tr><tr><td><code>$v-cal-dialog-shadow</code></td><td>Dialog card shadow.</td><td><code>0 0 6px rgba(0,0,0,.4)</code></td></tr><tr><td><code>$v-cal-dialog-header-padding</code></td><td>Dialog header padding.</td><td><code>20px</code></td></tr><tr><td><code>$v-cal-dialog-header-border-color</code></td><td>Dialog header border-color (bottom only).</td><td><code>#EAF0F4</code></td></tr><tr><td><code>$v-cal-dialog-title-font-size</code></td><td>Dialog title font size.</td><td><code>13px</code></td></tr><tr><td><code>$v-cal-dialog-close-width</code></td><td>Dialog close button width.</td><td><code>18px</code></td></tr><tr><td><code>$v-cal-dialog-close-color</code></td><td>Dialog close button color.</td><td><code>#BCBCCB</code></td></tr><tr><td><code>$v-cal-dialog-body-padding</code></td><td>Dialog body padding.</td><td><code>20px</code></td></tr><tr><td><code>$v-cal-field-border-radius</code></td><td>Dialog field border radius.</td><td><code>4px</code></td></tr><tr><td><code>$v-cal-field-padding</code></td><td>Dialog field padding.</td><td><code>10px 12px</code></td></tr><tr><td><code>$v-cal-field-idle-border-color</code></td><td>Dialog idle field border color.</td><td><code>#E8E9EC</code></td></tr><tr><td><code>$v-cal-field-hover-border-color</code></td><td>Dialog <code>:hover</code> field border color.</td><td><code>#808495</code></td></tr><tr><td><code>$v-cal-field-active-border-color</code></td><td>Dialog <code>:active</code>, <code>:focus</code> field border color.</td><td><code>#3B86FF</code></td></tr><tr><td><code>$v-cal-dialog-footer-padding</code></td><td>Dialog footer padding.</td><td><code>20px</code></td></tr><tr><td><code>$v-cal-dialog-footer-border-color</code></td><td>Dialog footer border color (top only).</td><td><code>#EAF0F4</code></td></tr></tbody></table></div><div class="content edit-link"><a href="https://github.com/dapd007/v-calendar-scheduler/edit/master/docs/guide/customization.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/callbacks.html" class="prev"> Callbacks </a></span><span class="next"><a href="/guide/demos.html"> Demos </a> → </span></p></div></div></div></div> <script src="/assets/js/5.3ae44317.js" defer></script><script src="/assets/js/app.233d7366.js" defer></script> </body> </html>