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="selectCurrent">Today</span>    <span @click="selectNext">></span>  </div></template>

Then in the script section we set up two props that the component will accept:

然后，在脚本部分中，我们设置组件将接受的两个道具：

• currentDate that will allow us to come back to current month when clicked on the “Today” button

  当您点击“今天”按钮时， currentDate可使我们返回到当前月份

• selectedDate that will tell us what month is currently selected

  selectedDate ，它将告诉我们当前选择的月份

Also we will define methods responsible for calculating new selected date based on currently selected date using Day.js subtract and add methods. Each method will also $emit an event to the parent component with the newly selected month. This will allow us to keep the value of selected date in one place which will be our CalendarMonth.vue component and pass it down to all child components (header, calendar grid).

另外，我们将使用Day.js 减去和添加方法定义负责根据当前选定日期计算新选定日期的方法。 每种方法还将使用新选择的月份将事件$ emit事件发送到父组件。 这将使我们能够将选定日期的值保留在一个位置，该值将成为CalendarMonth.vue组件，并将其向下传递给所有子组件( 标头，日历网格 )。

<!-- CalendarDateSelector.vue --><script>import dayjs from "dayjs";export default {  name: "CalendarDateSelector",  props: {    currentDate: {      type: String,      required: true    },    selectedDate: {      type: Object,      required: true    }  },  methods: {    selectPrevious() {      let newSelectedDate = dayjs(this.selectedDate).subtract(1, "month");      this.$emit("dateSelected", newSelectedDate);    },    selectCurrent() {      let newSelectedDate = dayjs(this.currentDate);      this.$emit("dateSelected", newSelectedDate);    },    selectNext() {      let newSelectedDate = dayjs(this.selectedDate).add(1, "month");      this.$emit("dateSelected", newSelectedDate);    }  }};</script>

Now, let’s go back to the CalendarMonth.vue component and use our newly created components.

现在，让我们回到CalendarMonth.vue组件并使用我们新创建的组件。

To use them we first need to import and register the components, also we need to create the values that will be passed as props to those components:

要使用它们，我们首先需要导入和注册组件，还需要创建将作为道具传递给这些组件的值：

• today — properly formatted today’s date, used as a value for “Today” pagination button

  today -正确格式化了今天的日期，用作“今天”分页按钮的值

• selectedDate — currently selected date (set to today’s date initially)

  selectedDate —当前选择的日期(最初设置为今天的日期)

The last thing we need to do before we can render the components is to create a method that will be responsible for changing the value of selectedDate. This method will be fired when the event from the pagination component is received.

在渲染组件之前，我们需要做的最后一件事是创建一个负责更改selectedDate值的方法。 收到来自分页组件的事件时将触发此方法。

<!-- CalendarMonth.vue --><script>import dayjs from "dayjs";import CalendarDateIndicator from "./CalendarDateIndicator";import CalendarDateSelector from "./CalendarDateSelector";export default {  name: "CalendarMonth",

  components: {    CalendarDateIndicator,    CalendarDateSelector  },  data() {    return {      selectedDate: dayjs(),      today: dayjs().format("YYYY-MM-DD")    };  },  methods: {    selectDate(newSelectedDate) {      this.selectedDate = newSelectedDate;    }  }};</script>

Having that done we can finally render our calendar header.

完成之后，我们终于可以渲染我们的日历标题了。

<!-- CalendarMonth.vue --><template>  <div class="calendar-month">    <div class="calendar-month-header">      <CalendarDateIndicator        :selected-date="selectedDate"        class="calendar-month-header-selected-month"      />      <CalendarDateSelector        :current-date="today"        :selected-date="selectedDate"        @dateSelected="selectDate"      />    </div>  </div></template>

This is a good spot to stop and see what we have so far.

这是一个停下来看看我们到目前为止所拥有的好地方 。

So we have our calendar header ready, let’s move forward and create components for our calendar grid.

现在我们准备好日历标题了，让我们继续前进，为日历网格创建组件。

步骤3：日历网格组件 (Step 3: Calendar grid components)

Here, again, we have two components:

同样，这里有两个部分：

• CalendarWeekdays— shows the names of the weekdays

  CalendarWeekdays-显示工作日的名称

• CalendarMonthDayItem— represents a single day in the calendar

  CalendarMonthDayItem —代表日历中的一天

CalendarWeekdays component contains a list that iterates through the weekday labels (using v-for directive) and renders that label for each weekday. In the script section we need to define our weekdays and create a computed property to make it available in the template and cache the result not to re-calculate it in the future.

CalendarWeekdays组件包含一个列表，该列表遍历工作日标签( 使用v-for指令 )，并在每个工作日呈现该标签。 在脚本部分，我们需要定义工作日并创建一个计算属性，以使其在模板中可用，并缓存结果，以免日后对其进行重新计算。

<!-- CalendarWeekdays.vue --><template>  <ol class="day-of-week">    <li v-for="weekday in weekdays" :key="weekday">{{ weekday }}</li>  </ol></template><script>const WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];export default {  name: 'CalendarWeekdays',

  computed: {    weekdays() {      return WEEKDAYS    }  }}</script>

CalendarMonthDayItem is a list item that receives a day property that is an object and a boolean prop, isToday, that allows us to style the list item properly for today’s date. We also have one computed property that formats the received day object to our desired format.

CalendarMonthDayItem是一个列表项，它接收一个day属性(一个对象)和一个布尔属性isToday ，该属性允许我们为今天的日期正确设置列表项的样式。 我们还有一个计算属性，用于将收到的日对象格式化为所需格式。

<!-- CalendarMonthDayItem.vue --><template>  <li    class="calendar-day"    :class="{      'calendar-day--not-current': !isCurrentMonth,      'calendar-day--today': isToday    }"  >    <span>{{ label }}</span>  </li></template><script>import dayjs from "dayjs";export default {  name: "CalendarMonthDayItem",  props: {    day: {      type: Object,      required: true    },    isCurrentMonth: {      type: Boolean,      default: false    },    isToday: {      type: Boolean,      default: false    }  },  computed: {    label() {      return dayjs(this.day.date).format("D");    }  }};</script>

Okay, now that we have these two let’s go back to our CalendarMonth component and see how we can use them.

好的，现在我们有了这两个，让我们回到CalendarMonth组件，看看如何使用它们。

Again, to use the new components we first need to import and register them. We also need to create a computed property that will return an array of objects representing our days. Each day contains date property and isCurrentMonth property.

同样，要使用新组件，我们首先需要导入和注册它们。 我们还需要创建一个计算属性，该属性将返回代表我们日子的对象数组。 每天包含date属性和isCurrentMonth属性。

<!-- CalendarMonth.vue --><script>import dayjs from "dayjs";import CalendarMonthDayItem from "./CalendarMonthDayItem";import CalendarWeekdays from "./CalendarWeekdays";export default {  name: "CalendarMonth",

  components: {    ...    CalendarMonthDayItem,    CalendarWeekdays  },  computed: {    days() {      return [        { date: "2020-06-29", isCurrentMonth: false },        { date: "2020-06-30", isCurrentMonth: false },        { date: "2020-07-01", isCurrentMonth: true },        { date: "2020-07-02", isCurrentMonth: true },        ...        { date: "2020-07-31", isCurrentMonth: true },        { date: "2020-08-01", isCurrentMonth: false },        { date: "2020-08-02", isCurrentMonth: false }      ];    }  }};</script>

Then in the template we can render our components. Again we use v-for directive to render required number of day elements.

然后，我们可以在模板中渲染组件。 同样，我们使用v-for指令来呈现所需数量的天元素。

<!-- CalendarMonth.vue --><template>  <div class="calendar-month">    <div class="calendar-month-header">      ...    </div>    <CalendarWeekdays/>    <ol class="days-grid">      <CalendarMonthDayItem        v-for="day in days"        :key="day.date"        :day="day"        :is-today="day.date === today"      />    </ol>  </div></template>

Okay it starts to look good now, have a look where we are at this CodeSandbox.

好的，现在开始看起来不错， 看看我们在此CodeSandbox中的位置 。

It looks nice, but as you probably noticed, the template only contains static data at the moment. The month is hardcoded as July and the day numbers are hardcoded as well. In the next step we will change that by calculating what date should be shown on a specific month. Let’s dive into the code!

看起来不错，但是您可能已经注意到，模板目前仅包含静态数据。 月份硬编码为7月，日期编号也硬编码。 在下一步中，我们将通过计算应在特定月份显示的日期来更改该日期。 让我们深入研究代码！

步骤4：设定当月日历 (Step 4: Setting up current month calendar)

Let’s think how we can calculate what date should be shown on a specific month. That’s where Day.js comes into play. It provides all the data we need to properly place dates on the correct days of the week for a given month using real calendar data. It allows us to get and set anything from the start date of a month to all the date formatting options we need to display the data.

让我们考虑一下如何计算特定月份应显示的日期。 那就是Day.js发挥作用的地方。 它提供了我们需要的所有数据，以使用真实的日历数据将日期正确地放置在给定月份的一周的正确日期中。 它使我们能够获取和设置从一个月的开始日期到显示数据所需的所有日期格式选项的任何内容。

We will:

我们会：

• Get the current month
  获取当前月份
• Calculate where the days should be placed (weekdays)
  计算应该放置的日期(工作日)
• Calculate the days for displaying dates from the previous and next months
  计算显示上个月和下个月的日期的天数
• Put all of the days together in a single array
  将所有日子集中在一起

We already have Day.js imported in our CalendarMonth component. We’re also going to lean on a couple of Day.js plugins for help. WeekDay helps us set the first day of the week. Some prefer Sunday as the first day of the week. Other prefer Monday. Heck, in some cases, it makes sense to start with Friday. We’re going to start with Monday.

我们已经在CalendarMonth组件中导入了Day.js。 我们还将依靠一些Day.js插件寻求帮助。 WeekDay可帮助我们设置一周的第一天。 有些人将星期日作为一周的第一天。 其他人更喜欢星期一。 有时候，从星期五开始是有意义的。 我们将从星期一开始。

The weekOfYear plugin returns the numeric value for the current week out of all weeks in the year. There are 52 weeks in a year, so we’d say that the week starting January 1 is the the first week of the year, and so on.

weekOfYear插件返回一年中所有星期中当前星期的数值。 一年共有52周，因此我们可以说从1月1日开始的那一周是一年的第一周，依此类推。

So here what we put into CalendarMonth.vue

所以这是我们放入CalendarMonth.vue

<!-- CalendarMonth.vue --><script>import dayjs from "dayjs";import weekday from "dayjs/plugin/weekday";import weekOfYear from "dayjs/plugin/weekOfYear";...dayjs.extend(weekday);dayjs.extend(weekOfYear);...

That was pretty straightforward but now the real fun starts as we will now play with the calendar grid. Let’s stop for a second a think what we really need to do to get that right.

这很简单，但是现在真正的乐趣开始了，因为我们现在将使用日历网格。 让我们停下来思考一下，为实现这一目标我们真正需要做些什么。

First, we want the date numbers to fall in the correct weekday columns. For example, July 1, 2020 is on a Wednesday. That’s where the date numbering should start.

首先，我们希望日期数字落在正确的工作日列中。 例如，2020年7月1日是星期三。 那是应该从日期编号开始的地方。

If the first of the month falls on Wednesday, then that means we’ll have empty grid items for Monday and Tuesday in the first week. The last day of the month is July 31, which falls on a Friday. That means Saturday and Sunday will be empty in the last week of the grid. We went to fill those with the trailing and leading dates of the previous and next months, respectively, so that the calendar grid is always full.

如果每月的第一天是星期三，则意味着第一周的星期一和星期二我们将有空的网格项。 该月的最后一天是7月31日，即星期五。 这意味着星期六和星期日在网格的最后一周将为空。 我们分别用前几个月和下个月的尾随日期和前导日期来填充这些日期，以便日历网格始终是满的。

创建当月的天数 (Create days for the current month)

To add the days for the current month to the grid, we need to know how many days exist in the current month. We can get that using the daysInMonth method provided by Day.js. Let’s create a computed property for that.

要将当前月份的天数添加到网格中，我们需要知道当前月份中存在多少天。 我们可以使用daysInMonth提供的daysInMonth方法得到它。 让我们为此创建一个计算属性。

<!-- CalendarMonth.vue -->computed: {  ...  numberOfDaysInMonth() {      return dayjs(this.selectedDate).daysInMonth();  }}

When we know that, we create an empty array with a length that’s equal to number of days in the current month. Then we map() that array and create a day object for each one. The object we create has an arbitrary structure, so you can add other properties if you need them.

当我们知道这一点时，我们将创建一个空数组，其长度等于当月的天数。 然后，我们对该数组进行map()并为每个数组创建一个day对象。 我们创建的对象具有任意结构，因此您可以根据需要添加其他属性。

In this example, though, we need a date property that will be used to check if a particular date is the current day. We’ll also return a isCurrentMonth value that checks whether the date is in the current month or outside of it. If it is outside the current month, we will style those so folks know they are outside the range of the current month.

但是，在此示例中，我们需要一个date属性，该属性将用于检查特定日期是否为当前日期。 我们还将返回一个isCurrentMonth值，该值检查日期是在当前月份中还是在当前月份之外。 如果在当前月份之外，我们将为这些样式设置样式，以便人们知道他们不在当前月份的范围内。

<!-- CalendarMonth.vue -->computed: {  ...  currentMonthDays() {    return [...Array(this.numberOfDaysInMonth)].map((day, index) => {      return {        date: dayjs(`${this.year}-${this.month}-${index + 1}`).format("YYYY-MM-DD")        isCurrentMonth: true      };    });  },}

将上个月的日期添加到日历网格 (Add dates from the previous month to the calendar grid)

To get dates from the previous month to display in the current month, we need to check what is the weekday of the first day in selected month. That’s where we can use the WeekDay plugin for Day.js. Let’s create a helper method for that.

要获取上个月的日期以显示在当月，我们需要检查所选月份第一天的工作日是什么。 那就是我们可以在Day.js使用WeekDay插件的地方。 让我们为此创建一个辅助方法。

<!-- CalendarMonth.vue -->methods: {  ...  getWeekday(date) {    return dayjs(date).weekday();  },}

Then, based on that, we need to check which day was the last Monday in the previous month. We need that value to know how many days from the previous month should be visible in the current month view. We can get that by subtracting the weekday value from the first day of the current month. For example, if first day of the month is Wednesday, we need to subtract 3 days to get last Monday of the previous month. Having that value allows us to create an array of day objects starting from the last Monday of the previous month through the end of that month.

然后，基于此，我们需要检查哪一天是上个月的最后一个星期一。 我们需要该值来知道在当前月份视图中应显示上个月的多少天。 我们可以通过从当前月份的第一天减去工作日值来获得。 例如，如果一个月的第一天是星期三，我们需要减去3天才能得到上个月的最后一个星期一。 有了该值，我们就可以创建从前一个月的最后一个星期一到该月末的一系列天对象。

<!-- CalendarMonth.vue -->computed: {  ...  previousMonthDays() {    const firstDayOfTheMonthWeekday = this.getWeekday(this.currentMonthDays[0].date);    const previousMonth = dayjs(`${this.year}-${this.month}-01`).subtract(1, "month");    const previousMonthLastMondayDayOfMonth = dayjs(this.currentMonthDays[0].date).subtract(firstDayOfTheMonthWeekday - 1, "day").date();    // Cover first day of the month being sunday     (firstDayOfTheMonthWeekday === 0)    const visibleNumberOfDaysFromPreviousMonth = firstDayOfTheMonthWeekday ? firstDayOfTheMonthWeekday - 1 : 6;    return [...Array(visibleNumberOfDaysFromPreviousMonth)].map((day, index) = {      return {        date: dayjs(`${previousMonth.year()}-${previousMonth.month() + 1}-${previousMonthLastMondayDayOfMonth + index}`).format("YYYY-MM-DD"),        isCurrentMonth: false      };    });  }}

将下个月的日期添加到日历网格 (Add dates from the next month to the calendar grid)

Now, let’s do the reverse and calculate which days we need from the next month to fill in the grid for the current month. Fortunately, we can use the same helper we just created for the previous month calculation. The difference is that we will calculate how many days from the next month should be visible by subtracting that weekday numeric value from 7.

现在，让我们做相反的事情，并计算下个月要填写本月网格的日期。 幸运的是，我们可以使用刚才为上个月的计算创建的相同帮助程序。 所不同的是，我们将从7减去该工作日的数值来计算下个月应显示的天数。

So, for example, if the last day of the month is Saturday, we need to subtract 1 day from 7 to construct an array of dates needed from next month (Sunday).

因此，例如，如果一个月的最后一天是星期六，则需要从7中减去1天，以构造下个月(星期日)所需的日期数组。

<!-- CalendarMonth.vue -->computed: {  ...  nextMonthDays() {    const lastDayOfTheMonthWeekday = this.getWeekday(`${this.year}-${this.month}-${this.currentMonthDays.length}`);    const nextMonth = dayjs(`${this.year}-${this.month}-01`).add(1, "month");    const visibleNumberOfDaysFromNextMonth = lastDayOfTheMonthWeekday ? 7 - lastDayOfTheMonthWeekday : lastDayOfTheMonthWeekday;    return [...Array(visibleNumberOfDaysFromNextMonth)].map((day, index) => {      return {        date: dayjs(`${nextMonth.year()}-${nextMonth.month() + 1}-${index + 1}`).format("YYYY-MM-DD"),        isCurrentMonth: false      };    });  }}

OK, we know how to create all days we need, let’s use them and merge all days into a single array of all the days we want to show in the current month, including filler dates from the previous and next months.

好的，我们知道如何创建所需的所有日，让我们使用它们并将所有日合并为要在当前月份中显示的所有日的单个数组，包括前几个月和下个月的填充日期。

<!-- CalendarMonth.vue -->computed: {  ...  days() {    return [      ...this.previousMonthDays,      ...this.currentMonthDays,      ...this.nextMonthDays    ];  },}

Voilà, there we have it! Check out the final demo to see everything put together.

Voilà ，到了！ 查看最终演示 ，看一看所有内容。