Vue.js относительно новое изобретение, прогрессивный фреймворк, как его называют основатели, работавшие над Angular и решившие создать свой усовершенствованный вариант. Он много взял за основу из Angular, но оказался гораздо легче в освоении и не уступает в функциональности своему старшему брату. Vue.js можно использовать как в установленном виде с помощью npm (node package manager), так и просто подключив по ссылке, например как jQuery. Удобство подключения по ссылке безусловно в том, что нет необходимости устанавливать целое SPA (single page application) приложение, а можно ситуационно решить локальную задачу, например реализовать форму авторизации, с динамической валидацией и мное другое.

В данной статье будем писать и разбирать календарь на Vue.js. Да, календарей на Vue.js написано достаточно много на codepen например, но в данном случает будет разобран пример простого календаря, что бы понимать его принцип работы, и заодно принцип работы фреймворка Vue.js и его простоту использования.

Пример простого календаря на Vue.js представлен ниже, его можно расширять, сделать из него ежедневник или планировщик, можно подключить стили bootstrap, и много чего другого.

Итак, любой календарь это работа с датами. В Java Script существует объект типа Date, с помощью которого осуществляется доступ к датам, через вызов new Date.

Вызов new Date создаст объект с текущим временем и датой: Mon Mar 30 2020 23:58:09 GMT+0300 (Восточная Европа, летнее время). В Date можно передать аргументы: new Date(year, month, date, …), что бы устанавливать данные текущей даты.

Объект new Date имеет так называемые геттеры и сеттеры, методы с помощь которых манипулирует данными: с помощью метода getMonth() получаем месяц, с помощью setMonth() — устанавливаем. Все месяца номеруются от 0 до 11, начиная с January.

Также, одним из важных для календаря методов является getDay(), его не надо путать с getDate(). Метод getDay() позволяет получить номер дня недели. Дни недели нумеруются от 0 до 6, начиная с Sunday.

Все числа месяца начинаются с 1-го числа (спасибо Кэп)), а заканчиваются они по разному, поэтому определим основные свойства и узнаем последнее число месяца:

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();

Далее, основной метод calendar(), он будет возвращать нам массивы с числами за каждую неделю:

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;
    },
}

Добавим два метода прокрутки на месяц назад и на месяц вперед, соответственно: decrease() и 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++;
    }
},

Основные методы в свойстве methods описаны, также нам необходимо реализовать переключение дней недели, так как в ∀мерике все на оборот, — дни начинаются с Sunday. Поместим метод dayChange() в вычисляемое свойство computed, а не в свойство methods. Преимущество вычисляемого свойства computed заключается в том, что оно вызывается только тогда, когда будет затронута одна из его реактивных зависимостей.

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"]
        }
    },
},

В завершении нам надо все собрать воедино и вывести на экран, в этом нам поможет интерполяция, то есть динамическая замена текста в двойных фигурных скобках на данные полученные из нашего функционала.

<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>

Скачать файл с написанным кодом календаря можно по ссылке.

Как видим, фреймворк Vue.js предоставляет огромные возможности в первую очередь по реактивности данных и разнообразию способов ими манипуляции.