Nebulous Puffy Marshmallows

    sy_calendar

    1.0.1 • Public • Published

    vue2-calendar

    vue 2 calendar, datepicker component which supported lunar or date event

    Live Demo >>






    • This project is not only a vue component, but also a webpack multi-page project in action.

    • Boostrap style like

    • I18n support

    • Community feedback

    Install

    $ npm install vue2-slot-calendar

    Import using module

     
     
    // js file
    import 'vue2-slot-calendar/lib/calendar.min.css';
    import calendar from 'vue2-slot-calendar/lib/calendar';
     
    // vue file
    // in ES6 modules
    import Calendar from 'vue2-slot-calendar';
     
    // in CommonJS
    const Calendar = require('vue2-slot-calendar');
     
    // in Global variable
    const VueCalendar = Calendar;

    Import using script tag

     
    <link rel="stylesheet" href="../node_modules/vue2-slot-calendar/lib/calendar.min.css" >
    <script src="../node_modules/vue2-slot-calendar/lib/calendar.min.js"></script>

    Also see the demo file, example/demo.html

    I18n support

    currently, provide window.VueCalendarLang function hook to change your lang

      translations(lang) {
        lang = lang || "en";
        let text = {
          daysOfWeek: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
          limit: "Limit reached ({{limit}} items max).",
          loading: "Loading...",
          minLength: "Min. Length",
          months: [
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July",
            "August",
            "September",
            "October",
            "November",
            "December"
          ],
          notSelected: "Nothing Selected",
          required: "Required",
          search: "Search"
        };
        return window.VueCalendarLang ? window.VueCalendarLang(lang) : text;
      },

    Build Setup

    # install dependencies 
    npm install
     
    # serve with hot reload at localhost:4000 
    npm run dev
     
    # build for production with minification 
    npm run build
     
    # run unit tests 
    npm run unit
     
    # run all tests 
    npm test

    Screenshot

    Usage

    <calendar
      :value="value"
      :disabled-days-of-week="disabled"
      :format="format"
      :clear-button="clear"
      :placeholder="placeholder"
      :pane="2"
      :has-input="false"
      :on-day-click="onDayClick2"
      :special-days="_dateMap"
    ></calendar>

    Use slot to render async data

    <calendar
      class="event-calendar"
      :value="value"
      :disabled-days-of-week="disabled"
      :format="format"
      :clear-button="clear"
      :placeholder="placeholder"
      :pane="2"
      :has-input="false"
      :on-day-click="onDayClick3"
      :change-pane="changePane"
    >
      <div v-for="evt in events" :slot="evt.date">
        ${{evt.content}} <i :class="{low : evt.low}" v-if="evt.low"></i>
      </div>
    </calendar>

    Range Hover Status

    <calendar
      :value="value"
      :disabled-days-of-week="disabled"
      :format="format"
      :clear-button="clear"
      :placeholder="placeholder"
      :pane="2"
      :range-bus="getBus"
      :range-status="1"
    ></calendar>
     
    <calendar
      :value="value"
      :disabled-days-of-week="disabled"
      :format="format"
      :clear-button="clear"
      :placeholder="placeholder"
      :pane="2"
      :range-bus="getBus"
      :range-status="2"
    ></calendar>

    Props

    Options/Props

    Name Type Default Description
    value String '' Value of the input DOM
    width String '200px' Width of the input DOM
    format String MMMM/dd/yyyy The date format, combination of d, dd, M, MM, MMM, MMMM, yyyy.
    disabled-days-of-week Array Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be comma-separated.
    clear-button Bollean false If true shows an × shaped button to clear the selected date. Usefull in forms where date entry is optional.
    placeholder String Placeholder to put on the input field when no date (null or empty) is set
    hasInput Boolean true Default is has-input style, if don't have input will show pane directly
    pane Number 1 pane count
    borderWidth Number 2 This value is for calculating the pane width
    onDayClick Function Only for hasInput set false
    specialDays Object To repalce the day text
    changePane Function For pane change parameter (year, month, pane) month[0,11], demo /src/modules/Docs.vue
    rangeBus Function should return new Vue() as sibling component communication events bus
    rangeStatus Number 0 Default is disabled range hover effect, currently only support [0,1,2] 1 will communicate with 2
    onDrawDate Function DrawDate Function allowSelect to update date cell style
    showDateOnly Boolean false show date pane only
    transfer Boolean false transfer popup to document.body
    elementId String elementId for label tag for attribute
    firstDayOfWeek Number 0 first day of the week, default sunday, [0,6]

    Events

    Name Description
    drawdate drawdate Event like onDrawDate
      props: {
        value: {
          type: [String, Date]
        },
        format: {
          default: 'MM/dd/yyyy'
        },
        firstDayOfWeek: {
          // sunday
          default: 0
        },
        disabledDaysOfWeek: {
          type: Array,
          default () {
            return []
          }
        },
        width: {
          type: String,
          default: '200px'
        },
        clearButton: {
          type: Boolean,
          default: false
        },
        inputClasses: {
          type: String,
          default: ''
        },
        lang: {
          type: String,
          default: navigator.language
        },
        placeholder: {
          type: String
        },
        hasInput: {
          type: Boolean,
          default: true
        },
        pane: {
          type: Number,
          default: 1
        },
        borderWidth: {
          type: Number,
          default: 2
        },
        onDayClick: {
          type: Function,
          default () {}
        },
        changePane: {
          type: Function,
          default () {}
        },
        specialDays: {
          type: Object,
          default () {
            return {}
          }
        },
        rangeBus: {
          type: Function,
          default () {
            // return new Vue()
          }
        },
        rangeStatus: {
          type: Number,
          default: 0
        },
        onDrawDate: {
          type: Function,
          default () {}
        },
        maxDate: {
          type: String
        },
        minDate: {
          type: String
        },
        showDateOnly: {
          type: Boolean,
          default: false
        },
        transfer: {
          type: Boolean,
          default: false
        },
        elementId: [String]
      }

    Credits

    Inspired by vue-strap datepicker component.

    For detailed explanation on how things work, checkout the guide and docs for vue-loader.

    Keywords

    none

    Install

    npm i sy_calendar

    DownloadsWeekly Downloads

    0

    Version

    1.0.1

    License

    ISC

    Unpacked Size

    188 kB

    Total Files

    16

    Last publish

    Collaborators

    • suanyi_npm