首先,在Vue项目中创建一个日历组件所需要的Vue单文件组件(.vue文件)。
在template标签中,可以使用table和tr标签来创建一个简单的日历表格,使用v-for指令来循环渲染每一行日期。
在script标签中:
最后,在style标签中,可以设置样式来美化日历组件。
这样,就可以创建一个基本的Vue日历组件了。具体实现可以看下面的代码:
-
-
-
-
-
{{ currentMonth }} {{ currentYear }} -
-
-
{{ day }} -
-
-
-
-
{{ day.format('D') }} -
-
-
-
-
- import moment from 'moment';
-
- export default {
- name: 'Calendar',
- data() {
- return {
- currentDate: moment(),
- };
- },
- computed: {
- currentMonth() {
- return this.currentDate.format('MMMM');
- },
- currentYear() {
- return this.currentDate.format('YYYY');
- },
- days() {
- return ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
- },
- weeks() {
- const weeks = [];
- const date = this.currentDate.clone().startOf('month').startOf('week');
- do {
- const week = [];
- for (let i = 0; i < 7; i++) {
- week.push(date.clone());
- date.add(1, 'day');
- }
- weeks.push(week);
- } while (date.month() === this.currentDate.month());
- return weeks;
- },
- },
- methods: {
- isToday(date) {
- return moment().isSame(moment(date), 'day');
- },
- isCurrentMonth(date) {
- return moment(date).isSame(this.currentDate, 'month');
- },
- handlePrevMonth() {
- this.currentDate.subtract(1, 'month');
- },
- handleNextMonth() {
- this.currentDate.add(1, 'month');
- },
- },
- };
-
- .calendar {
- margin: 20px;
- }
-
- table {
- border-collapse: collapse;
- width: 100%;
- max-width: 600px;
- }
-
- th,
- td {
- text-align: center;
- padding: 10px;
- border: 1px solid #ddd;
- }
-
- .weekend {
- color: red;
- }
-
- .today {
- background-color: #f5f5f5;
- }
-
- .different-month {
- color: #ddd;
- }
然后在页面中引入Calendar组件即可。