Calendar with Vue.js

Vue.js is a relatively new invention, a progressive framework, as the founders call it, that working with Angular and deciding to create their own improved version. It took a lot from Angular as a basis, but it turned out to be much easier to learn and is not inferior in functionality to its older brother. Vue.js can be used both in the installed version using npm (node ​​package manager), or simply by connecting it via a link, for example, as jQuery. The convenience of connecting by reference is undoubtedly in that there is no need to install an entire SPA (single page application) and you can situationally solve a local problem, for example, implement an authorization form with dynamic validation and much more.

In this article, we will write and parse a calendar with Vue.js. Yes, a lot of calendars with Vue.js have been written on "codepen", for example, but in this case a simple calendar will be analyzed in order to understand its principle of work, and at the same time the principle of work of the Vue.js framework.

An example of a simple calendar with Vue.js is presented below, you can extend it, make a daily planner or booking calendar. Also you can connect bootstrap styles, and much more.

{{monthes[month]}} {{year}}
{{d}}
{{ day.index }}
Format week

So, any calendar is working with dates. In Java Script, there is a Date object that can be used to access dates by calling new Date.

Calling new Date will create an object with the current time and date: Mon Mar 30 2020 23:58:09 GMT + 0300 (Eastern Europe Daylight Time). You can pass arguments to Date: new Date (year, month, date, …) to set the data for the current date.

The new Date object has so-called getters and setters, the methods with which it manipulates data: using the getMonth() method, we get the month, using setMonth(), we set it. All months are numbered from 0 to 11, starting in January.

Also, one of the important methods for the calendar is getDay(), it should not be confused with getDate(). The getDay() method allows you to get the day of the week. The days of the week are numbered from 0 to 6, starting with Sunday.

All days of the month start on the 1st (thanks Cap)), but they end in different ways, so let's define the main properties and find out the last day of the month:

data: {
    month: new Date().getMonth(),    
    year: new Date().getFullYear(), 
    dFirstMonth: '1',
    day:["Mn", "Tu","We","Th","Fr","Sa", "Su"],
    monthes:["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
    date: new Date(),
},
var dlast = new Date(this.year, this.month + 1, 0).getDate();

Further, the main method calendar(), it will return us arrays with numbers for each week:

methods:{
    calendar: function(){
        var days = [];
        var week = 0;
        days[week] = [];
        var dlast = new Date(this.year, this.month + 1, 0).getDate();
        for (let i = 1; i <= dlast; i++) {
            if (new Date(this.year, this.month, i).getDay() != this.dFirstMonth) {
                a = {index:i};
                days[week].push(a);
            } else {
                week++;
                days[week] = [];
                a = {index:i};
                days[week].push(a);
            }
        }
        if (days[0].length > 0) {
            for (let i = days[0].length; i < 7; i++) {
                days[0].unshift('');
            }
        }
        this.dayChange;
        return days;
    },
}

Let's add two methods of scrolling back one month and one month forward, respectively: decrease() and increase().

decrease: function(){
    this.month--;
    if (this.month < 0) {
        this.month = 12;
        this.month--;
        this.year--;
    }
},
increase: function(){
    this.month++;
    if (this.month > 11) {
        this.month = -1;
        this.month++;
        this.year++;
    }
},

The main methods are described in the methods property, we also need to implement switching the days of the week, since in ∀merica everything is reversed - days start with Sunday. Let's put the dayChange() method in the computed property, not in the methods property. The advantage of a computed property is that it is only called when one of its reactive dependencies is affected.

computed: { dayChange: function(){ if(this.dFirstMonth == 0){ this.day = ["Su", "Mn", "Tu","We","Th","Fr","Sa"] } else { this.day = ["Mn", "Tu","We","Th","Fr","Sa", "Su"] } }, },

In the end, we need to put everything together and display it, interpolation will help us with this, that is, the dynamic replacement of text in double curly braces with data obtained from our functionality.

<table class="table">
    <thead>
        <tr>
            <td>
                <button v-on:click="decrease"><</button>
            </td>
            <td colspan="5"> {{monthes[month]}} {{year}} </td>
            <td>
                <button v-on:click="increase">></button>
            </td>
        </tr>
        <tr>
            <td v-for="d in day">{{d}}</td>
        </tr>
    </thead>
    <tbody>
        <tr v-for="week in calendar()">					   
            <td v-for="(day, index) in week"> {{ day.index }} </td>
        </tr>						
    </tbody>
</table>

You can download the file with the written calendar code here.

As you can see, the Vue.js framework provides big opportunities, primarily in terms of data reactivity and a variety of ways to manipulate them.

Leave a Reply