npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-bootstrap4-calendar

v1.1.3

Published

Uses the magical power of VueJS v2 and beauty of Twitter Bootstraps 4 to create a powerful Responsive Calendar App.

Downloads

126

Readme

Vue Bootstrap Calendar

Uses the magical power of VueJS v2 and beauty of Twitter Bootstrap 4 to create a powerful responsive Calendar App. See the Demo site.

This repository is based on Yarob Al-Taay Vue-Bootstrap-Calendar, which uses Bootstrap 3.

This project aims to provide the Calendar for Bootstrap 4 and enhance it further.

Demo Vue Bootstrap Calendar

This Calendar only depends on the Bootstrap 4 CSS. Using Bootstrap 4 JS or even jQuery is NOT required. This implementation is fully based on VueJS 2.

This package is locale/language ready, with Arabic, English and German implemented so far. Please feel free to contribute for any language.

  • Please note, if you haven't got vue-i18n installed this package will default to English!

Install vue-bootstrap4-calendar

You can install via npm

$ npm install -S vue-bootstrap4-calendar

Then you can import Calendar from the package like this:

import {Calendar} from 'vue-bootstrap4-calendar';
import {messages} from 'vue-bootstrap4-calendar';
//to include Calendar locale(s) from this package, or you can use your own one!

How to use vue-bootstrap-calendar

Include Calendar in your Vue Apps components then use <Calendar :first-day="x" :all-events="events"></Calendar> in your code. x is an integer for the start of the week, which can be one of the following values 0,1,2,3,4,5,6, where 0 for Sunday, 1 for Monday and so on... Events array can be passed on via all-events binding.

If you want to restrict access to the Calendar (currently includes adding and deleting Events), you may pass the Props canAddEvent and canDeleteEvent to the Calendar. Both Props default to true, so it won't bother you if you don't need them.

Props:

first-day

Type: Number | String Default: 0 (equals Sunday)

This Prop describes the start of the Week, the value can be inbetween 0 and 6, where 0 equals Sunday and 6 equals Saturday.

all-events

Type: Array Default: []

This Prop defines an Array of Objects which describe your Events. Every object needs the following attributes:

title (Representation of the Event on Days) description (Description of the Event which is display when clicked on an Event) color (Color for the Event on Days) date (Date on which the Event should be displayed)

displayWeekNumber

Type: Boolean Default: true

Wether or not to display the week number Flag when a week/day is selected.

canAddEvent

Type: Boolean Default: true

Can be used to restrict access to Calendar features.

canDeleteEvent

Type: Boolean Default: true

Can be used to restrict access to Calendar features.

Events

eventAdded

Called when an Event is added to the Calendar. The Callback gets the created Event as Parameter:

eventAdded(event) { this.events.push(event); }

eventDeleted

Called when an Event is deleted from the Calendar. The Callback gets the deleted Event as Parameter:

eventDeleted(event) { this.events.splice(this.events.indexOf(event), 1); }

Example:

In your App.vue:

<template>
    <div id="app">
        <calendar
                :first-day="1"
                :all-events="events"
                :canAddEvent="true"
                :canDeleteEvent="true"
                @eventAdded="eventAdded"
                @eventDeleted="eventDeleted"
        ></calendar>
    </div>
</template>

<script>
    import {Calendar} from 'vue-bootstrap4-calendar';
    export default {
        name: 'app',
        data() {
            return {
                events: []
            }
        },
        components: {
            Calendar
        },
        methods: {
            eventAdded(event) {
                this.events.push(event);
            },
            eventDeleted(event) {
                this.events.splice(this.events.indexOf(event), 1);
            },
        },
        mounted() {
            let me = this;
            setTimeout(function () {
                me.events = [ // you can make ajax call here
                    {
                        id:1,
                        title:'Event 1',
                        description: 'Dummy Desc',
                        color: 'card-danger card-inverse',
                        date: new Date()
                    },
                    ...
                ];
            }, 1000);
        }
    }
</script>

Your main.js will be something like this:

import Vue from 'vue'
import VueI18n from 'vue-i18n' //needed for calendar locale
import App from './App.vue'

Vue.use(VueI18n);

import {messages} from 'vue-bootstrap4-calendar'; // you can include your own translation here if you want!

window.i18n = new VueI18n({
    locale: 'en',
    messages
});

/* eslint-disable no-new */
new Vue({
    el: '#app',
    i18n,
    template: '<App/>',
    components: {App}
});

Copyright and License

The Bootstrap 3 Version and base for this Vue-Bootstrap-Calendar was written by Yarob Al-Taay and is released under the MIT License.

This Bootstrap 4 Version Vue-Bootstrap-Calendar is written and maintained by Max Eckel and is also released under the MIT License.