### Setup Calendar with Defaults Source: https://github.com/nathanreyes/v-calendar/blob/master/docs/installation.md Provides an example of using the `setupCalendar` function to configure global defaults for v-calendar before using any components. This is an alternative to the plugin method for setting defaults. ```javascript import { setupCalendar} from 'v-calendar' // main.js setupCalendar({ componentPrefix: 'vc', ..., }); ``` -------------------------------- ### Quick Guide: Highlight Today Source: https://github.com/nathanreyes/v-calendar/blob/master/docs/attributes.md Example of applying a simple highlight to the current date using the `highlight` property and providing a `key` and `dates`. ```html ``` ```js export default { data() { return { attrs: [ { key: 'today', highlight: true, dates: new Date(), }, ], }; }, }; ``` -------------------------------- ### Install v-calendar via npm Source: https://github.com/nathanreyes/v-calendar/blob/master/docs/installation.md Installs the v-calendar library using npm. This is the recommended method for most Vue.js projects. ```bash npm install v-calendar ``` -------------------------------- ### CDN Installation and Usage Source: https://github.com/nathanreyes/v-calendar/blob/master/docs/installation.md Illustrates how to include v-calendar in an HTML file using CDN links. It shows the necessary script tags for Vue.js and v-calendar, and how to initialize a Vue instance to use the v-calendar and v-date-picker components. ```html
``` -------------------------------- ### Install Project Dependencies Source: https://github.com/nathanreyes/v-calendar/blob/master/docs/vue-3.md Installs all necessary project dependencies using Yarn. This command should be run after cloning the repository and navigating into the project directory. ```sh yarn ``` -------------------------------- ### Install v-calendar Next Version Source: https://github.com/nathanreyes/v-calendar/blob/master/docs/changelog/v1.0.md Command to install the next version of v-calendar using npm. This is typically used to test pre-release versions or to upgrade to the latest development build. ```bash npm install --save v-calendar@next ``` -------------------------------- ### Import v-calendar as a Vue Plugin Source: https://github.com/nathanreyes/v-calendar/blob/master/docs/installation.md Demonstrates the recommended plugin method for integrating v-calendar into a Vue.js application. It shows how to import Vue and VCalendar, then use Vue.use() to install the plugin with optional configuration. ```javascript import Vue from 'vue'; import VCalendar from 'v-calendar'; // Use v-calendar & v-date-picker components Vue.use(VCalendar, { componentPrefix: 'vc', // Use instead of ..., // ...other defaults }); ``` -------------------------------- ### v-calendar Highlight Configuration Example (HTML) Source: https://github.com/nathanreyes/v-calendar/blob/master/docs/attributes.md Provides an HTML example demonstrating the usage of the v-calendar component with custom highlight configurations. It shows how to pass an array of attributes, each with specific highlight settings, to the component. ```html ``` ```html ``` -------------------------------- ### Install V-Calendar Source: https://github.com/nathanreyes/v-calendar/blob/master/docs/README.md Installs the V-Calendar package using npm. This command is essential for adding the library to your Vue.js project. ```bash npm i v-calendar ``` -------------------------------- ### v-calendar Dot Configuration Example (HTML) Source: https://github.com/nathanreyes/v-calendar/blob/master/docs/attributes.md Shows an HTML example of using the v-calendar component with dot attributes. It demonstrates how to pass an array of attributes, each configured with different dot settings, to the calendar component for display. ```html ``` -------------------------------- ### v-calendar Vue Plugin Installation Source: https://github.com/nathanreyes/v-calendar/blob/master/tests/unit/coverage/lcov-report/src/lib.js.html This snippet demonstrates the core functionality of lib.js, which imports Vue components (Calendar, DatePicker, Popover), defines a Vue plugin installation method, and exports the main VCalendar object. It also includes logic for auto-installing the plugin when Vue is available globally. ```javascript import Calendar from './components/Calendar'; import DatePicker from './components/DatePicker'; import Popover from './components/Popover'; import { mergeDefaults } from './utils/defaults'; const componentPrefix = 'v'; const components = { Calendar, DatePicker, Popover, }; const VCalendar = { ...components, install: (Vue, options) => { mergeDefaults(options); Object .keys(components) .forEach(k => Vue.component(`${componentPrefix}${k}`, components[k])); }, }; export default VCalendar; if (typeof window !== 'undefined' && window.Vue) { window.Vue.use(VCalendar); } ``` -------------------------------- ### Install v-calendar via npm Source: https://github.com/nathanreyes/v-calendar/blob/master/README.md Installs the v-calendar plugin using npm, the Node Package Manager. This command adds the library to your project's dependencies. ```bash npm i --save v-calendar ``` -------------------------------- ### v-calendar Plugin Setup Source: https://github.com/nathanreyes/v-calendar/blob/master/docs/changelog/v1.0.md Details on how to set up the v-calendar plugin and its default options. Calling `setupCalendar(opts)` is no longer mandatory for basic component imports but is still required for setting global plugin defaults. ```APIDOC setupCalendar(opts) - Sets up plugin defaults for all v-calendar and v-date-picker instances. - Not required when importing components separately. - Parameters: - opts: Object containing default configuration options for the calendar and date picker. - Notes: - Importing the setup function no longer includes the entire package, reducing initial bundle sizes. ``` -------------------------------- ### Quick Guide: Default Dot Source: https://github.com/nathanreyes/v-calendar/blob/master/docs/attributes.md Example of displaying a default dot on a calendar date by setting the `dot` property to `true`. ```js export default { data() { return { attrs: [ { key: 'today', dot: true, dates: new Date(), }, ], }; }, }; ``` -------------------------------- ### Basic V-Calendar Component Source: https://github.com/nathanreyes/v-calendar/blob/master/docs/quick-start.md Displays the core V-Calendar component with its default neutral design. This component is the foundation for calendar views and supports various layout configurations and slot customizations. ```html ``` -------------------------------- ### Pretty Print Initialization Source: https://github.com/nathanreyes/v-calendar/blob/master/tests/unit/coverage/lcov-report/src/utils/helpers.js.html Initializes code pretty printing on window load if the `prettyPrint` function is available. This is typically used for formatting code examples on a webpage. ```javascript window.onload = function () { if (typeof prettyPrint === 'function') { prettyPrint(); } }; ``` -------------------------------- ### Custom Locale Defaults with VCalendar Plugin Source: https://github.com/nathanreyes/v-calendar/blob/master/docs/changelog/v1.0.md Example of how to provide custom locale definitions to the VCalendar plugin during Vue application setup. This allows defining locales not natively supported by v-calendar or the browser. ```javascript import VCalendar from 'v-calendar'; // When using VCalendar Vue.use(VCalendar, { locales: { 'pt-PT': { firstDayOfWeek: 1, masks: { L: 'YYYY-MM-DD', // ...optional `title`, `weekdays`, `navMonths`, etc } } } }); // Then, simply use the locale in your calendar by passing the locale id (key above). // ``` -------------------------------- ### Custom Input Slot for Date Range Picker Source: https://github.com/nathanreyes/v-calendar/blob/master/docs/changelog/v2.0.md Illustrates using custom input slots for a date range picker. The `inputValue` and `inputEvents` slot props provide `start` and `end` sub-properties for managing the range inputs and their events. ```html ``` ```javascript export default { data() { return { range: { start: new Date(2020, 9, 12), end: new Date(2020, 9, 16), }, }; }, }; ``` -------------------------------- ### Time Component Selection with v-calendar Source: https://github.com/nathanreyes/v-calendar/blob/master/docs/datepicker.md Configure v-calendar to limit user selection to time components (hours, minutes, seconds) by setting the `mode` prop to 'time'. Includes example HTML structure and JavaScript data setup for date and timezone. ```html
Date (ISO): {{ date.toISOString() }}
``` ```js export default { data() { return { date: new Date(), timezone: '', }; }, } ``` -------------------------------- ### Pretty Print Initialization Source: https://github.com/nathanreyes/v-calendar/blob/master/tests/unit/coverage/lcov-report/utils/dayStore.js.html A small JavaScript snippet that runs on window load to initialize syntax highlighting if the 'prettyPrint' function is available. ```javascript window.onload = function () { if (typeof prettyPrint === 'function') { prettyPrint(); } }; ``` -------------------------------- ### Get Background Style for Calendar Day Source: https://github.com/nathanreyes/v-calendar/blob/master/tests/unit/coverage/lcov-report/components/CalendarDay.vue.html Generates a background object with specific styling and wrapper classes for a calendar day based on attribute properties. It handles different date ranges (start, end, middle) and animation states, adjusting width, border, and border-radius accordingly. ```javascript getBackground(attribute) { // Initialize the background object const { key, highlight, targetDate } = attribute; const { animated, width, height, backgroundColor, borderColor, borderWidth, borderStyle, borderRadius, opacity } = highlight; const background = { key, style: { width: width || height, height, backgroundColor, borderColor, borderWidth, borderStyle, borderRadius, opacity, }, }; if (targetDate.isDate) { background.wrapperClass = `c-day-layer c-day-box-center-center ${animated ? 'c-day-scale-enter c-day-scale-leave' : ''}`; } else { const onStart = targetDate.startTime === this.dateTime; const onEnd = targetDate.endTime === this.dateTime; const endLongWidth = '95%'; const endShortWidth = '50%'; // Is the day date on the highlight start and end date if (onStart && onEnd) { const animation = animated ? 'c-day-scale-enter c-day-scale-leave' : ''; background.wrapperClass = `c-day-layer c-day-box-center-center ${animation}`; background.style.width = endLongWidth; background.style.borderWidth = borderWidth; background.style.borderRadius = `${borderRadius} ${borderRadius} ${borderRadius} ${borderRadius}`; // Is the day date on the highlight start date } else if (onStart) { const animation = animated ? 'c-day-slide-left-scale-enter' : ''; background.wrapperClass = `c-day-layer c-day-box-right-center shift-right ${animation}`; if (attribute.highlightCaps) { background.style.width = endShortWidth; background.style.borderWidth = `${borderWidth} 0 ${borderWidth} 0`; background.style.borderRadius = 0; } else { background.style.width = endLongWidth; background.style.borderWidth = `${borderWidth} 0 ${borderWidth} ${borderWidth}`; background.style.borderRadius = `${borderRadius} 0 0 ${borderRadius}`; } // Is the day date on the highlight end date } else if (onEnd) { const animation = animated ? 'c-day-slide-right-scale-enter' : ''; background.wrapperClass = `c-day-layer c-day-box-left-center shift-left ${animation}`; if (attribute.highlightCaps) { background.style.width = endShortWidth; background.style.borderWidth = `${borderWidth} 0 ${borderWidth} 0`; background.style.borderRadius = 0; } else { background.style.width = endLongWidth; background.style.borderWidth = `${borderWidth} ${borderWidth} ${borderWidth} 0`; background.style.borderRadius = `0 ${borderRadius} ${borderRadius} 0`; } // Is the day date between the highlight start/end dates } else { background.wrapperClass = 'c-day-layer c-day-box-center-center shift-left-right'; background.style.width = '100%'; background.style.borderWidth = `${borderWidth} 0`; background.style.borderRadius = '0'; } } return background; }, ``` -------------------------------- ### Get Background Style for Calendar Day Source: https://github.com/nathanreyes/v-calendar/blob/master/tests/unit/coverage/lcov-report/src/components/CalendarDay.vue.html Generates a background object with specific styling and wrapper classes for a calendar day based on attribute properties. It handles different date ranges (start, end, middle) and animation states, adjusting width, border, and border-radius accordingly. ```javascript getBackground(attribute) { // Initialize the background object const { key, highlight, targetDate } = attribute; const { animated, width, height, backgroundColor, borderColor, borderWidth, borderStyle, borderRadius, opacity } = highlight; const background = { key, style: { width: width || height, height, backgroundColor, borderColor, borderWidth, borderStyle, borderRadius, opacity, }, }; if (targetDate.isDate) { background.wrapperClass = `c-day-layer c-day-box-center-center ${animated ? 'c-day-scale-enter c-day-scale-leave' : ''}`; } else { const onStart = targetDate.startTime === this.dateTime; const onEnd = targetDate.endTime === this.dateTime; const endLongWidth = '95%'; const endShortWidth = '50%'; // Is the day date on the highlight start and end date if (onStart && onEnd) { const animation = animated ? 'c-day-scale-enter c-day-scale-leave' : ''; background.wrapperClass = `c-day-layer c-day-box-center-center ${animation}`; background.style.width = endLongWidth; background.style.borderWidth = borderWidth; background.style.borderRadius = `${borderRadius} ${borderRadius} ${borderRadius} ${borderRadius}`; // Is the day date on the highlight start date } else if (onStart) { const animation = animated ? 'c-day-slide-left-scale-enter' : ''; background.wrapperClass = `c-day-layer c-day-box-right-center shift-right ${animation}`; if (attribute.highlightCaps) { background.style.width = endShortWidth; background.style.borderWidth = `${borderWidth} 0 ${borderWidth} 0`; background.style.borderRadius = 0; } else { background.style.width = endLongWidth; background.style.borderWidth = `${borderWidth} 0 ${borderWidth} ${borderWidth}`; background.style.borderRadius = `${borderRadius} 0 0 ${borderRadius}`; } // Is the day date on the highlight end date } else if (onEnd) { const animation = animated ? 'c-day-slide-right-scale-enter' : ''; background.wrapperClass = `c-day-layer c-day-box-left-center shift-left ${animation}`; if (attribute.highlightCaps) { background.style.width = endShortWidth; background.style.borderWidth = `${borderWidth} 0 ${borderWidth} 0`; background.style.borderRadius = 0; } else { background.style.width = endLongWidth; background.style.borderWidth = `${borderWidth} ${borderWidth} ${borderWidth} 0`; background.style.borderRadius = `0 ${borderRadius} ${borderRadius} 0`; } // Is the day date between the highlight start/end dates } else { background.wrapperClass = 'c-day-layer c-day-box-center-center shift-left-right'; background.style.width = '100%'; background.style.borderWidth = `${borderWidth} 0`; background.style.borderRadius = '0'; } } return background; }, ``` -------------------------------- ### v-date-picker Timezone Selection with dateTime Mode Source: https://github.com/nathanreyes/v-calendar/blob/master/docs/timezones.md Demonstrates using the `v-date-picker` component in `dateTime` mode with the `timezone` prop to display dates and times according to a specified timezone. The example includes dynamic timezone selection via a range input and displays the selected date range's start and end times in ISO format. ```html
Start:{{ dateRange && dateRange.start.toISOString() }}
End:{{ dateRange && dateRange.end.toISOString() }}
-11:00 UTC +11:00
Timezone: {{ timezone }}
``` ```js export default { data() { const start = new Date(2020, 0, 6); const end = new Date(2020, 0, 10); return { dateRange: { start, end, }, timezoneIndex: 0, timezones: [ 'Pacific/Niue', // -11 'US/Hawaii', // -10 'America/Anchorage', // -9 'America/Los_Angeles', // -8 'America/Boise', // -7 'America/Chicago', // -6 'America/New_York', // -5 'America/Aruba', // -4 'America/Buenos_Aires', // -3 'Brazil/DeNoronha', // -2, 'Atlantic/Azores', // -1 'UTC', // 0 'Europe/Amsterdam', // +1 'Europe/Athens', // +2 'Europe/Moscow', // +3 'Indian/Mahe', // +4 'Asia/Ashgabat', // +5 'Asia/Dhaka', // +6 'Asia/Bangkok', // +7 'Asia/Hong_Kong', // +8 'Asia/Pyongyang', // +9 'Australia/Sydney', // +10 'Asia/Magadan', // +11 ], }; }, computed: { timezone() { return this.timezones[this.timezoneIndex]; }, }, }; ``` -------------------------------- ### Calculate Start of Week Source: https://github.com/nathanreyes/v-calendar/blob/master/tests/unit/coverage/lcov-report/utils/dateInfo.js.html Determines the start of the week for a given date, respecting a configurable first day of the week. ```javascript function startOfWeek(date) { const day = date.getDay() + 1; const { firstDayOfWeek } = defaults; const daysToAdd = day >= firstDayOfWeek ? firstDayOfWeek - day : -(7 - (firstDayOfWeek - day)); return addDays(date, daysToAdd); } ``` -------------------------------- ### Responsive Layouts with $screens Function Source: https://github.com/nathanreyes/v-calendar/blob/master/docs/changelog/v1.0.md Example demonstrating how to use the `$screens` function to create responsive layouts for the v-calendar component, specifically controlling the number of rows and columns based on screen size. ```html ``` -------------------------------- ### Install v-calendar for Vue 3 Source: https://github.com/nathanreyes/v-calendar/blob/master/docs/vue-3.md Installs the v-calendar library with the 'next' tag, which provides Vue 3 support. This command uses Yarn package manager. ```sh yarn add v-calendar@next ``` -------------------------------- ### JavaScript Start of Week Calculation Source: https://github.com/nathanreyes/v-calendar/blob/master/tests/unit/coverage/lcov-report/src/utils/dateInfo.js.html Calculates the start date of the week for a given date, respecting a configurable `firstDayOfWeek` setting. This function is crucial for consistent weekly period calculations. ```javascript function startOfWeek(date) { const day = date.getDay() + 1; const { firstDayOfWeek } = defaults; const daysToAdd = day >= firstDayOfWeek ? firstDayOfWeek - day : -(7 - (firstDayOfWeek - day)); return addDays(date, daysToAdd); } ``` -------------------------------- ### Create DayStore Instance Source: https://github.com/nathanreyes/v-calendar/blob/master/tests/unit/coverage/lcov-report/src/utils/dayStore.js.html Initializes and returns a DayStore object configured with provided settings. The DayStore manages day data, including mapping page numbers to weeks and handling the first day of the week. ```javascript import defaults from './defaults'; const DayStore = (config) => { // Map of page numbers to weeks const pageWeeks = {}; const firstDayOfWeek = config.firstDayOfWeek || defaults.firstDayOfWeek; return { getWeeks(page) { }, }; }; export default DayStore; ``` -------------------------------- ### Normalize Date Range in JavaScript Source: https://github.com/nathanreyes/v-calendar/blob/master/tests/unit/coverage/lcov-report/components/DateRangePicker.vue.html Normalizes a date range object to ensure the start date always precedes the end date. It handles cases where the provided start date might be after the end date, returning a consistent structure with correctly ordered start and end dates and their corresponding timestamps. This function is useful for standardizing date inputs in calendar components. ```javascript function normalizeRange(range) { if (!rangeHasValue(range)) return null; const { start, end } = range; const startTime = start.getTime(); const endTime = end.getTime(); const isNormal = start < end; return { start: isNormal ? start : end, startTime: isNormal ? startTime : endTime, end: isNormal ? end : start, endTime: isNormal ? endTime : startTime, }; } ``` -------------------------------- ### v-calendar CSS Styling Source: https://github.com/nathanreyes/v-calendar/blob/master/demo.html Provides basic CSS styles for the calendar test section and selectors within the v-calendar component. These styles control layout, margins, and alignment. ```css .Calendar Test section { margin-top: 26px; max-width: 400px; margin-left: auto; margin-right: auto; } .selectors { display: flex; justify-content: center; align-items: center; margin-bottom: 10px; } .selectors label { margin-left: 10px; } ``` -------------------------------- ### Use v-calendar Components As Needed (Method 3) Source: https://github.com/nathanreyes/v-calendar/blob/master/docs/vue-3.md Illustrates how to use v-calendar components on a per-component basis. This involves importing `SetupCalendar` for global setup and then importing `Calendar` and `DatePicker` directly into the component where they are used. ```js // main.js import { SetupCalendar } from 'v-calendar'; // Setup plugin for defaults or `$screens` (optional) app.use(SetupCalendar, {}) ``` ```html ``` ```js // Component.vue script import { Calendar, DatePicker } from 'v-calendar'; export default { components: { Calendar, DatePicker, }, data() { return { date: new Date(), }; }, } ``` -------------------------------- ### Import v-calendar Components Separately Source: https://github.com/nathanreyes/v-calendar/blob/master/docs/installation.md Shows how to import individual v-calendar components like Calendar and DatePicker. Components can be registered globally in main.js or imported locally within specific Vue components. ```javascript import Calendar from 'v-calendar/lib/components/calendar.umd' import DatePicker from 'v-calendar/lib/components/date-picker.umd' // Register components in your 'main.js' Vue.component('calendar', Calendar) Vue.component('date-picker', DatePicker) // Or just use in separate component export default { components: { Calendar, DatePicker } ... } ``` -------------------------------- ### JavaScript Initialization for Pretty Printing Source: https://github.com/nathanreyes/v-calendar/blob/master/tests/unit/coverage/lcov-report/src/components/Calendar.vue.html A simple JavaScript snippet that executes when the window loads. It checks for the existence of a `prettyPrint` function and calls it, typically used to format code blocks for better readability on web pages. ```javascript window.onload = function () { if (typeof prettyPrint === 'function') { prettyPrint(); } }; ``` -------------------------------- ### Initialize Pretty Print on Window Load Source: https://github.com/nathanreyes/v-calendar/blob/master/tests/unit/coverage/lcov-report/src/utils/index.html JavaScript code that executes when the browser window finishes loading. It checks if the `prettyPrint` function is available and calls it, typically for formatting code blocks. ```JavaScript window.onload = function () { if (typeof prettyPrint === 'function') { prettyPrint(); } }; ``` -------------------------------- ### Helper Classes and Methods Export Source: https://github.com/nathanreyes/v-calendar/blob/master/docs/changelog/v1.0.md Exporting helper classes and methods from `lib.js` to make them accessible for external use. ```APIDOC Export from lib.js: - Description: Makes helper classes and methods available for import and use outside the library. - Related: - Fix `helpers` and `touch` exports. ```