Vue custom optional time calendar component

Vue custom optional time calendar component

This article example shares the specific code of the vue custom optional time calendar component for your reference. The specific content is as follows

Calendar features:

1. Past time cannot be selected
2. Customizable unselectable time
3. The default display date for this month is the first day, and the first day for other months is the first day. If the time is not selectable, it will be postponed to the next day.

Effect picture:

------- Let's start the show -----------

**First, draw the calendar page layout, refer to the win10 system calendar layout* 6 rows and 7 columns, why is it so, please understand it yourself...* I also "peeked"

beginDay is the day of the week of the first day of the current month, prevMdays is the total number of days in the previous month, and nowMdays is the total number of days in the current month. This achieves the calendar display effect, and some data that may be used is bound to the tag, such as data-dates, etc.

<div class="dateContent-body-day" v-for="item in 42" :key="item">
            <div
              v-if="item - beginDay > 0 && item - beginDay <= nowMdays"
              :class="{
                'active-day': `${year}/${month}/${item - beginDay}` == curDate
              }"
              @click="dayHandler"
              :data-year="year"
              :data-month="month"
              :data-day="item-beginDay"
              :data-dates="year + '/' + month + '/' + (item - beginDay)"
            >
              {{ item-beginDay }}
            </div>
            <div class="other-day" v-else-if="item - beginDay <= 0">
              {{ item - beginDay + prevMdays }}
    </div>
  <div class="other-day" v-else>{{ item - beginDay - nowMdays }}</div>
</div>

— Next…

Data used:

*active-day is the highlighted day, i.e. the selected date. curDate controls which day is selected. Here the default is today. A props data timeArry is opened to allow some custom dates to be passed in as unselectable. If the dates bound to the clicked date exist in the array, they are returned. If selectable, the selected result is exposed through the chooseDate event through $emit.

//Click to switch day dayHandler(e) {
      console.log(e);
      var daNum = e.target.dataset;
      if (this.cantTime.indexOf(daNum.dates) > -1) {
        this.$toast("Not an open date, cannot be selected");
        return;
      }
      if (
        `${daNum.year}/${daNum.month}/${daNum.day}` >=
        `${new Date().getFullYear()}/${new Date().getMonth() +
          1}/${new Date().getDate()}`
      ) {
        this.date = e.target.dataset.day;
        this.$emit(
          "chooseDate",
          this.year + "/" + this.month + "/" + this.date
        );
      } else {
        this.$toast("Past time cannot be selected");
      }
    },
    //Switch to next month``nextMonth() {
      if (this.month == 12) {
        this.month = 1;
        this.year++;
      } else {
        this.month++;
      }
},

The switching of months and days must be observed. The focus is on observing the changes in months. I don't know if the watch has been abused.

```javascript
watch:
    date(val, oldval) {
      if (val) {
        this.curDate = `${this.year}/${this.month}/${this.date}`;
      }
    },
    month(val, oldval) {
      if (val) {
        var ndate;
        for (var i = 1; i <= 31; i++) {
          console.log(`${this.year}/${this.month}/${i}`);
          if (this.cantTime.indexOf(`${this.year}/${this.month}/${i}`) < 0) {
            console.log("No value exists, stop, date stays at " + i);
            ndate = i;
            break;
          }
        }
        console.log(ndate, `${this.year}/${this.month}/${ndate}`);
        //Compare the current month with the current day. The default for future months is 1, and the default for the current month is today if (
          `${this.year}/${this.month}/1` >
          `${new Date().getFullYear()}/${new Date().getMonth() +
            1}/${new Date().getDate()}`
        ) {
          this.curDate = `${this.year}/${this.month}/${ndate}`;
          this.date = ndate;
        } else {
          for (var i = new Date().getDate(); i <= 31; i++) {
            console.log(2`${this.year}/${this.month}/${i}`);
            if (this.cantTime.indexOf(`${this.year}/${this.month}/${i}`) < 0) {
              this.curDate = `${new Date().getFullYear()}/${new Date().getMonth() +
            1}/${i}`;
          this.date = i;
              break;
            }
          }
        }
        this.$emit(
          "chooseDate",
          this.year + "/" + this.month + "/" + this.date
        );
      }
    }
  },

Called in the parent component

<calendar :timeArray="timeArray" @chooseDate="chooseHandler"></calendar>
import { calendar ,alertBox} from '@/components/index.js';
export default {
    components:{calendar,alertBox
    },

This completes the calendar.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Vue implements calendar component
  • Vue implements vertical infinite sliding calendar component
  • Encapsulation method of Vue calendar component
  • Write a vue calendar component from scratch
  • Sample code using the element calendar component in Vue
  • Improved calendar component based on Vue2-Calendar (including Chinese instructions)
  • Vue implements a cool calendar component
  • VUE implements calendar component function
  • Vue version of handwritten calendar component

<<:  Usage of MySQL time difference functions TIMESTAMPDIFF and DATEDIFF

>>:  How to enable or disable SSH for a specific user or user group in Linux

Recommend

How to implement mysql database backup in golang

background Navicat is the best MySQL visualizatio...

...

MySQL 8.0.11 Installation Guide for Mac

MAC installs mysql8.0, the specific contents are ...

HTML n ways to achieve alternate color code sample code

This article mainly introduces the sample code of...

MySQL 5.7.15 installation and configuration method graphic tutorial (windows)

Because I need to install MySQL, I record the ins...

Simple example of adding and removing HTML nodes

Simple example of adding and removing HTML nodes ...

Talk about important subdirectory issues in Linux system

/etc/fstab Automatically mount partitions/disks, ...

Why Nginx is better than Apache

Nginx has taken over the majority of the Web serv...

Summary of all HTML interview questions

1. The role of doctype, the difference between st...

Ubuntu MySQL version upgraded to 5.7

A few days ago, the library said that the server ...

CSS3 creates 3D cube loading effects

Brief Description This is a CSS3 cool 3D cube pre...

Advantages and disadvantages of common MySQL storage engines

Table of contents View all storage engines InnoDB...

Font Treasure House 50 exquisite free English font resources Part 2

Designers have their own font library, which allo...

How to restore a database and a table from a MySQL full database backup

In the official MySQL dump tool, how can I restor...