fini-ui/src/views/IpoCalendar/index.vue

<template>
    <div class="right">
        <div class="right-top">
            <img src="@/assets/1x/source13.png" class="icon1" @click="backRouter" />
            <img src="@/assets/1x/1x/source1.png" class="icon2" />
            <h3 class="top-title">{{ $t(i18n.global.t('home.IPOcalendar')) }}</h3>
        </div>
        <div class="right-bottom">

            <el-calendar ref="calendar" v-model="dayValue">
                <template #header="{ date }">

                    <el-button size="small" @click="selectDate('prev-month')">
                        <img src="@/assets/1x/source11.png">
                    </el-button>
                    <!-- <span class="month">{{ date.split(' ').slice(-1).join() }}</span> -->
                    <span class="month">{{ showMounth(date) }}</span>

                    <el-button size="small" @click="selectDate('next-month')">
                        <img src="@/assets/1x/source12.png">
                    </el-button>

                </template>
                <!-- <template #date-cell="{ data }">

                    </template> -->
            </el-calendar>
        </div>
        <div class="right-bottom1">
            <Event v-if="Eventdata.length" :data="Eventdata" />
            <div v-else class="right-bottom-title1">No event</div>

        </div>
    </div>
</template>

<script lang="ts">
export default {
    name: "ipocalendar",
};
</script>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import moment from "moment"
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
import Event from '@/views/login/components/Event.vue';
import { getEventData, getSearchListing } from "@/api/reqIpo/ipo";

const { proxy } = (getCurrentInstance() as any)
const dayValue = ref(new Date())
const calendar = ref()
const Eventdata = ref([])
const selectDate = (val: string) => {
    calendar.value.selectDate(val)
}
const showMounth = (date: any) => {
    const arr = date.split(" ")
    if (arr.length == 3) {
        return arr[2]
    } else if (arr.length == 4) {
        return arr[2] + " " + arr[3]
    }
}
onMounted(async () => {
    var day = moment(Date.now()).format("YYYY-MM-DD")
    const result = await getEventData(day);
    setEventdata((result as any).data)
})
const setEventdata = (EventD: any) => {
    Eventdata.value = EventD.map((item: any) => {
        const { stkCode, listPlatform, companyEngFull, companyChiFull } = item;
        return {
            logo: '-',
            listPlatform1: listPlatform,
            name: companyEngFull + ";" + companyChiFull,
            number: stkCode
        }

    })
}
const backRouter = () => {
    proxy.$router.go(-1)
}
</script>

<style lang="scss"  scoped>
@media screen and (max-width: 768px) {
    .right {
        width: 100vw;
        box-sizing: border-box;
        height: 100%;
        padding-bottom: 80px;
        background-color: #1f4055;
        z-index: 1;
        border: #1f4055 1px solid;
        
        .right-top {
            display: flex;
            // margin-left: 40px;
            margin-top: 20px;
            transform: translateX(-10px);
            .top-title {
                text-align: center;
                display: inline-block;
                font-size: 25px;
                color: #ffffff;
                margin-left: 10px;
            }

            .icon1 {
                width: 25px;
                height: 25px;
                margin-left: 30px;
            }

            .icon2 {
                width: 25px;
                height: 25px;
                margin-left: 10px;
            }
        }

        .right-bottom {
            width: 100vw;
            background-color: #ffffff;
            height: 400px;
            margin-top: 25px;

            // margin-left: 20px;
            // transform: translateX(-50px);
            .month {
                font-size: 25px;
                color: #000000;
                font-weight: bold;
            }

        }

        .right-bottom1 {
            margin-left: 5vw;
            width: 90vw;
            background-color: #ffffff;
            height: 40vh;
            margin-top: 20vh;
            // margin-left: 20px;
            // text-align: center;
            // line-height: 500px;
            display: flex;
            justify-content: center;
            align-items: center;

            .right-bottom-title1 {

                color: #1f4055;
                font-size: 20px;
                align-items: center;
            }

            li {
                color: #000000
            }
        }

    }

    .right-bottom1 {
        width: 420px;
        background-color: #ffffff;
        height: 50vh;
        margin-top: 150px;
        // margin-left: 20px;
        // text-align: center;
        // line-height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;

        .right-bottom-title1 {

            color: #1f4055;
            font-size: 20px;
            align-items: center;
        }

        li {
            color: #000000
        }
    }

    :deep(.el-button--small) {
        border: none
    }

    :deep(.el-calendar__body) {
        background-color: #e8ebee;
        height: 50vh;
    }
:deep(.el-calendar-table thead th){
    padding:2px 0;
    font-weight: 550;
}
:deep(.el-calendar-table){
    margin-top: 20px;
    width: 100vw;
    transform: translateX(-19px);
}
    :deep(.el-calendar) {
        width: 100vw;
        font-family: "Calibri";
    }

    :deep(.el-calendar-table td) {
        border: none;
        text-align: center;
    }

    :deep(.el-calendar .el-calendar-table .el-calendar-day) {
        padding: 0px;
        text-align: center;
        line-height: 33px;
        font: 13px 'Poppins-Regular';
        background-color: rgb(255, 255, 255);
        height: 33px;
        border: none;
        margin-top: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        // font-family: "Calibri"
    }

    :deep(.el-calendar-table thead) {
        margin-top: 20px;
        font-size: 16px;
        font-weight: bold;
        background-color: rgb(255, 255, 255);
        border: none;
        font-family: "Calibri"
    }

    :deep(.el-calendar-table td.is-selected) {
        background-color: #e8ebee;
    }

    :deep(.el-calendar-table td.is-today .el-calendar-day) {
        color: black;
        background-color: #e36466;
    }

    :deep(.el-calendar-table td.is-selected .el-calendar-day) {
        // background-color: #e36466;
        border: 5px solid #e36466;
    }

    :deep(.el-calendar-table td.is-selected .el-calendar-day span) {
        color: black;
    }



    :deep(.is-selected) {
        color: red;
    }
    
}
</style>