How to implement calendar function in Vue

How to implement calendar function in Vue

With the popularity of web applications, calendar function has become a common requirement for many websites and applications. It is not difficult to implement the calendar function in Vue. The implementation process will be introduced in detail below and specific code examples will be provided.

First, we need to create a Vue component to host the calendar function. We can name this component "Calendar". In this component, we need to define some data and methods to control the display and interaction of the calendar.

<template>
  <div class="calendar">
    <div class="header">
      <button @click="prevMonth">&larr;</button>
      <h2>{{ currentMonth }}</h2>
      <button @click="nextMonth">&rarr;</button>
    </div>
    <div class="days">
      <div v-for="day in days" :key="day">{{ day }}</div>
    </div>
    <div class="dates">
      <div v-for="date in visibleDates" :key="date">{{ date }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentMonth: '',
      days: [],
      visibleDates: []
    };
  },
  mounted() {
    this.initCalendar();
  },
  methods: {
    initCalendar() {
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth();
      this.currentMonth = `${year}-${month + 1}`;

      const firstDay = new Date(year, month, 1).getDay();
      const lastDay = new Date(year, month + 1, 0).getDate();

      this.days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
      this.visibleDates = Array(firstDay).fill('').concat(Array.from({ length: lastDay }, (_, i) => i + 1));
    },
    prevMonth() {
      const [year, month] = this.currentMonth.split('-').map(Number);
      const prevMonth = month === 1 ? 12 : month - 1;
      const prevYear = month === 1 ? year - 1 : year;

      this.currentMonth = `${prevYear}-${prevMonth}`;
      this.updateVisibleDates();
    },
    nextMonth() {
      const [year, month] = this.currentMonth.split('-').map(Number);
      const nextMonth = month === 12 ? 1 : month + 1;
      const nextYear = month === 12 ? year + 1 : year;

      this.currentMonth = `${nextYear}-${nextMonth}`;
      this.updateVisibleDates();
    },
    updateVisibleDates() {
      const [year, month] = this.currentMonth.split('-').map(Number);
      const firstDay = new Date(year, month - 1, 1).getDay();
      const lastDay = new Date(year, month, 0).getDate();

      this.visibleDates = Array(firstDay).fill('').concat(Array.from({ length: lastDay }, (_, i) => i + 1));
    }
  }
};
</script>

<style scoped>
.calendar {
  width: 400px;
  margin: 0 auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
</style>

The above code implements a basic calendar component. We define the data of the current month, day of the week and visible dates in data, use the mounted hook function to initialize the calendar, and use prevMonth and nextMonth method to switch months, use updateVisibleDates method to update visible dates.

In the template, we use the v-for directive to cyclically render the days of the week and dates, and use the @click directive to bind events to switch months by clicking.

In the style, we use the grid layout to display the grid of days of the week and dates.

By using this calendar component in the parent component, the calendar function can be implemented in the Vue application.

Summary:

By using Vue’s data binding, event binding and loop instructions, we can easily implement the calendar function. The above code only provides a basic calendar component that you can extend and customize according to your needs. Hope this article helps you!

The above is the detailed content of How to implement calendar function in Vue. For more information, please follow other related articles on the PHP Chinese website!