vue--创建日历

 

 

 

css使用

tailwindcss

  <script src="https://cdn.tailwindcss.com"></script>

 

 

 

 

全部代码

<template>
    <div class="m-auto">
        <h1 class="text-2xl my-2 text-center">Vue Calendar</h1>
        <div class="mx-2 flex justify-between">
            <h2 class="font-bold">{{currentMonthName}}</h2>
            <h2 class="font-bold">{{currentYear}}</h2>
        </div>
        <section class="flex">
            <p class="text-center" style="width:14.28%" v-for="day in days" :key="day">{{day}}</p>
        </section>
        <section class="flex flex-wrap">
            <p class="text-center" style="width:14.28%" v-for="num in startDay()" :key="num"></p>
            <p class="text-center" style="width:14.28%" v-for="num in daysInMonth()" :key="num" :class="currenDateClass(num)">{{num}}</p>
        </section>
        <section class="flex justify-between my-4">
            <button class="px-2 border rounded" @click="prev()">Prev</button>
            <button class="px-2 border rounded" @click="next()">Next</button>
        </section>
        {{currentDate}}
    </div>
</template>

<script>
export default {
    data(){
        return{
            currentDate:new Date().getUTCDate(),
            currentMonth:new Date().getMonth(),
            currentYear:new Date().getFullYear(),
            days:['Sun','Mon','Tue','Wed','Thu','Fir','Sat']
        }
    },
    methods:{
        daysInMonth(){
            // const month=new Date().getMonth()+1;
            return new Date(this.currentYear,this.currentMonth+1,0).getDate();
        },

        startDay(){
        return new Date(this.currentYear,this.currentMonth,1).getDay();
    },
        next(){
            if(this.currentMonth==11){
                this.currentMonth=0;
                this.currentYear++;
            }else{
                this.currentMonth++;
            }
        },
        prev(){
            if(this.currentMonth==0){
                this.currentMonth=11;
                this.currentYear--;
            }else{
                this.currentMonth--;
            }
        },
        currenDateClass(num){
            console.log(new Date(this.currentYear,this.currentMonth,num).toDateString());
            console.log(new Date());
            const calenderFullDate=new Date(this.currentYear,this.currentMonth,num).toDateString();
            const currentFullDate=new Date().toDateString()
            return calenderFullDate==currentFullDate?'text-yellow-600':'';
        }
    },
    computed:{
        currentMonthName(){
            return  new Date(this.currentYear,this.currentMonth).toLocaleString('default',{month:'long'})
        }
    }

}
</script>

<style>

</style>