Development of adaptive calendar component

Time:2021-10-24

Development of adaptive calendar component

design sketch

PC end

Development of adaptive calendar component

Mobile terminal

Development of adaptive calendar component

preview

Preview address:Preview address

1. Incoming parameters

1.1 top background picture

Development of adaptive calendar component

As shown in the figure above, the photo background in the red circle area is set

Defined in component parameters

bgSrc: {
    type: String,
        default: 'https://images8.alphacoders.com/992/992329.jpg'
}

1.2 calendar title

Development of adaptive calendar component
Circle the regional text settings as shown in the figure above

Defined in component parameters

title: {
    type: String,
    Default: 'calendar'
}

2. Callback method

2.1. Selected date

Use this. & dollar; Emit() passes data to the parent component.

Execute in the component date click event.

clickDay (day) {
    this.selectDay = day
    this.$emit('selectDay', day)
}

2.2 switching month

Use this. & dollar; Emit() passes data to the parent component.

Execute in the component date click event.

//Last month
toPreMonth () {
    let year = this.selectMonth.split('-')[0]
    let month = this.selectMonth.split('-')[1]
    month = parseInt(month) - 1
    if (month === 0) {
        month = 12
        year = parseInt(year) - 1
    }
    this.days = this.fillDays(year, month)
    this.$emit('changeMonth', year + '-' + this.zero(month))
},
//Next month
toNextMonth () {
    let year = this.selectMonth.split('-')[0]
    let month = this.selectMonth.split('-')[1]
    month = parseInt(month) + 1
    if (month === 13) {
        month = 1
        year = parseInt(year) + 1
    }
    this.days = this.fillDays(year, month)
    this.$emit('changeMonth', year + '-' + this.zero(month))
}

3. Component JS module development process

3.1 confirmation of months and days

3.1.1. Judge the profit year
/**
 *Judge Runnian
 *@ param {string} year year to judge
 * @return {Boolean}
 */
function isLeap(year) {
    if((year%4==0 && year%100!=0)||(year%400==0)){
        return true;
    }
    return false;
}
3.1.2. Obtain month and days
/**
 *Get month days
 *@ param {string} year
 *@ param {string} month
 * @return {string}
 */
function getMonthDays(year,month) {
    month = parseInt(month) - 1;
    if(month < 0 || month > 11) return ''
    let months = [31,28,31,30,31,30,31,31,30,31,30,31];
    if(isLeap(year)){
        months[1] = 29;
    }
    return months[month];
}
3.1.3 get week
/**
 *Get week
 *@ param {string} date needs to get the date of the week
 * @return {string}
 */
function getWeek(date){
    Let weeks = new array ("day", "one", "two", "three", "four", "Five", "six");
    let Stamp = new Date(date);
    console.log(weeks[Stamp.getDay()])
}
3.1.4 replenishment of full days
/**
 *Zero filling
 *@ param {string} STR the number of zeros to be filled
 * @return {string}
 */
function zero(str){
    return str > 9 ? str : '0' + str;
}
/**
 *Supplementary full days
 *@ param {string} year
 *@ param {string} month
 * @return {string}
 */
function fillDays(year,month) {
    const months = getMonthDays(year,month);
    const startWeek = getWeek(year + '-' + month + '-' + '01');
    const endWeek = getWeek(year + '-' + month + '-' + months);

    year = parseInt(year);
    month = parseInt(month);

    let preYear = year;
    let preMonth = month - 1;
    if(preMonth == 0){
        preMonth = 12;
        preYear = year - 1;
    }
    const preMonths = getMonthDays(preYear,preMonth);

    let nextYear = year;
    let nextMonth = month + 1;
    if(nextMonth == 13){
        nextMonth = 1;
        nextYear = year + 1;
    }
    const nextMonths = getMonthDays(nextYear,nextMonth);

    let days = [];
    for(let i = 0; i < startWeek; i++){
        days.unshift(preYear + '-' + preMonth + '-' + (preMonths - i));
    }
    for(let i = 1; i <= months; i++){
        days.push(year + '-' + zero(month) + '-' + zero(i));
    }
    for(let i = 0; i < (6 - endWeek); i++){
        days.push(nextYear + '-' + nextMonth + '-0' + (i + 1));
    }
    return days;
}

3.2 click event

3.2.1 month switching
toPreMonth () {
    let year = this.selectMonth.split('-')[0]
    let month = this.selectMonth.split('-')[1]
    month = parseInt(month) - 1
    if (month === 0) {
        month = 12
        year = parseInt(year) - 1
    }
    this.days = this.fillDays(year, month)
    this.$emit('changeMonth', year + '-' + this.zero(month))
},
toNextMonth () {
    let year = this.selectMonth.split('-')[0]
    let month = this.selectMonth.split('-')[1]
    month = parseInt(month) + 1
    if (month === 13) {
        month = 1
        year = parseInt(year) + 1
    }
    this.days = this.fillDays(year, month)
    this.$emit('changeMonth', year + '-' + this.zero(month))
}
3.2.2 click date
clickDay (day) {
    this.selectDay = day
    this.$emit('selectDay', day)
}

4. HTML module

<template>
    <div>
        <div id="header" class="header">
            <div class="header-title">{{title}}</div>
            <div class="btn-list">
        <div class="btn-list-left">
          <div class="btn-pre" @click="toPreMonth()"><</div>
          <div class="select-month">{{selectMonth}}</div>
          <div class="btn-next" @click="toNextMonth()">></div>
        </div>
                < div class = "BTN today" @ Click = "tonowday()" > back to today < / div >
            </div>
        </div>
        <div class="content" id="content">
          <div class="calendar-content">
             <div class="grid-week grid" v-for="(item,index) in weeks" :key="index">
                 Week {{item}}
             </div>
             <div @click="clickDay(item)"
                  class="grid-day grid"
                  :class="{'selected': item == selectDay}"
                  v-for="(item,index) in days"
                  :key="index">
                 {{item.split('-')[2]}}
             </div>
          </div>
        </div>
    </div>
</template>

5. CSS Style

<style lang="scss" scoped>
  @media screen and (max-width:500px) {
    .header{
      height: calc(100vw * 9 / 16);
    }
  }
  .header{
    display: flex;
    flex-direction: column;
    .header-title{
      line-height: 5rem;
    }
    .btn-list{
      display: flex;
      padding: 1rem;
      margin-top: auto;
      .btn-list-left{
        padding: 0.5rem;
        width: 40%;
        display: flex;
        .select-month{
          flex: 2;
        }
        .btn-pre{
          flex: 1;
          background-color: #0080FF;
        }
        .btn-next{
          flex: 1;
          background-color: #0080FF;
        }
      }
      .btn-today{
        padding: 0.5rem;
        margin-left: auto;
        margin-right: 1rem;
        background-color: #076678;
        color: white;
      }
    }
  }
    .calendar-content{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    .selected{
      background-color: #007FAA;
    }
    .grid{
      width: calc((100% - 9px)/7);
      height: 3rem;
      line-height: 3rem;
      border-left: #005599 solid 1px;
      border-bottom: #005599 solid 1px;
    }
    .grid-week{
      border-top: #005599 solid 1px;
    }
    .grid-week:nth-child(7){
      border-right: #005599 solid 1px;
    }
    .grid-day:nth-child(14){
      border-right: #005599 solid 1px;
    }
    .grid-day:nth-child(21){
      border-right: #005599 solid 1px;
    }
    .grid-day:nth-child(28){
      border-right: #005599 solid 1px;
    }
    .grid-day:nth-child(35){
      border-right: #005599 solid 1px;
    }
    .grid-day:nth-child(42){
      border-right: #005599 solid 1px;
    }
    }
</style>

Source address

Gitee:https://gitee.com/zheng_yongtao/jyeontu-component-warehouse/tree/master/components

You can give me a start ★★★★★