vue制作日历_如何使用Vue制作每月日历

vue制作日历

Have you ever seen a calendar on a webpage and thought, how the heck did they did that? For something like that, it might be natural to reach for a plugin, or even an embedded Google Calendar, but it’s actually a lot more straightforward to make one than you might think.

您是否曾经在网页上看到日历并想过， 他们是怎么做到的 ？ 对于这样的事情，可能会很自然地获得一个插件，甚至是一个嵌入式Google日历，但实际上制作一个插件要比您想象的要简单得多。

I’ve set up a demo over at CodeSandbox so you can see what we’re aiming for.

我已经在CodeSandbox上建立了一个演示，以便您可以看到我们的目标。

Let’s first identify some requirements for what the calendar should do. It should:

首先，让我们确定日历的功能要求。 这应该：

• Display a month grid for a given month
  显示给定月份的月份网格
• Display dates from the previous and next months to so the grid is always full
  显示从前几个月到下个月的日期，因此网格始终充满
• Indicate current date
  指示当前日期
• Show the name of the currently selected month
  显示当前所选月份的名称
• Navigate to the previous and next month
  导航到上个月和下个月
• Allow the user to navigate back to current month with a single click
  允许用户单击一下即可导航回当前月份

Oh, and we’ll build this as a single page application that fetches calendar dates from Day.js, a super light utility library.

哦，我们将其构建为一个单页面应用程序，该应用程序从超轻型实用程序库Day.js中获取日历日期。

步骤1：从基本标记开始 (Step 1: Start with the basic markup)

Let’s start with creating a basic template for our calendar.

让我们从为日历创建一个基本模板开始。

We can outline our markup as three layers where we have:

我们可以将标记概述为三层，其中：

• A section for the calendar header. This will show components with the currently selected month and the elements responsible for paginating between months.

  日历标题的一部分。 这将显示具有当前选定月份的组件以及负责在月份之间进行分页的元素。

• A section for the calendar grid header. A table header that holds a list containing the days of the week, starting with Monday.

  日历网格标题的一部分。 一个表头，其中包含一个列表，其中包含从星期一开始的星期几。

• The calendar grid. You know, each day in the current month, represented as a square in the grid.

  日历网格。 您知道，当月的每一天，都以网格中的正方形表示。

Let’s write this up in a file called CalendarMonth.vue. This will be our main component.

让我们将其写在一个名为CalendarMonth.vue的文件中。 这将是我们的主要组成部分。

<!-- CalendarMonth.vue --><template>
  <!-- Parent container for the calendar month -->
  <div class="calendar-month">
      
    <!-- The calendar header -->
    <div class="calendar-month-header"
      <!-- Month name -->
      <CalendarDateIndicator />      <!-- Pagination -->
      <CalendarDateSelector />
    </div>    <!-- Calendar grid header -->
    <CalendarWeekdays />    <!-- Calendar grid -->
    <ol class="days-grid">
      <CalendarMonthDayItem />
    </ol>
  </div>
</template>

Now that we have some markup to work with, let’s go one step further and create required components.

现在，我们有了一些标记可以使用，让我们进一步走一步，创建所需的组件。

步骤2：标头组件 (Step 2: Header components)

In our header we have two components:

在标题中，我们有两个部分：

• CalendarDateIndicator — showing currently selected month

  CalendarDateIndicator-显示当前选定的月份

• CalendarDateSelector — responsible for paginating between months

  CalendarDateSelector-负责在两个月之间进行分页

Let’s start with CalendarDateIndicator. This component will accept selectedDate property which will be a Day.js object, format it properly and show it to the user.

让我们从CalendarDateIndicator开始。 该组件将接受selectedDate属性，该属性将是Day.js对象，对其进行正确的格式化并将其显示给用户。

<!-- CalendarDateIndicator.vue --><template>
  <div class="calendar-date-indicator">{
       { selectedMonth }}</div>
</template><script>
export default {
       
  props: {
       
  selectedDate: {
       
    type: Object,
    required: true
  }
},  computed: {
       
    selectedMonth() {
       
      return this.selectedDate.format("MMMM YYYY");
    }
  }
};
</script>

That was easy. Let’s go and create the month pagination component now. In the template it will contain three elements responsible for selecting previous, current and next month. To each of those elements we add an event listener that will fire appropriate method when the element is clicked.

那很简单。 现在开始创建月份分页组件。 在模板中，它将包含三个元素，分别负责选择上个月，当前和下个月。 我们为每个元素添加了一个事件侦听器 ，该事件侦听器将在单击该元素时触发适当的方法。

<!-- CalendarDateSelector.vue --><template>
  <div class="calendar-date-selector">
    <span @click="selectPrevious"><</span>
    <span @click="selectCurre