|
|
@@ -0,0 +1,169 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+<el-calendar v-model="value" id="calendar">
|
|
|
+ <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
|
|
|
+ <template
|
|
|
+ slot="dateCell"
|
|
|
+ slot-scope="{date, data}">
|
|
|
+ <!--自定义内容-->
|
|
|
+ <div>
|
|
|
+ <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}<el-button plain class="xsmini" size="mini" type="primary" icon="el-icon-edit" @click="schedule = true"></el-button></div>
|
|
|
+ <div v-for="item in calendarData">
|
|
|
+ <div v-if="(item.months).indexOf(data.day.split('-').slice(1)[0])!=-1">
|
|
|
+ <div v-if="(item.days).indexOf(data.day.split('-').slice(2).join('-'))!=-1">
|
|
|
+ <el-tooltip class="item" effect="dark" :content="item.things" placement="right">
|
|
|
+ <div class="is-selected">{{item.things}}</div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <div v-else></div>
|
|
|
+ </div>
|
|
|
+ <div v-else></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+</el-calendar>
|
|
|
+<el-dialog :visible.sync="schedule" title="添加日程" append-to-body width="40%" @click="close">
|
|
|
+ <el-row :gutter="12">
|
|
|
+ <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="开始日期" prop="field101">
|
|
|
+ <el-date-picker v-model="formData.field101" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
|
|
|
+ :style="{width: '100%'}" placeholder="请选择开始日期" clearable></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="时间" prop="field105">
|
|
|
+ <el-time-picker v-model="formData.field105" format="HH:mm:ss" value-format="HH:mm:ss"
|
|
|
+ :picker-options='{"selectableRange":"00:00:00-23:59:59"}' :style="{width: '100%'}"
|
|
|
+ placeholder="请选择时间" clearable></el-time-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="结束日期" prop="field106">
|
|
|
+ <el-date-picker v-model="formData.field106" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
|
|
|
+ :style="{width: '100%'}" placeholder="请选择结束日期" clearable></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="时间" prop="field107">
|
|
|
+ <el-time-picker v-model="formData.field107" format="HH:mm:ss" value-format="HH:mm:ss"
|
|
|
+ :picker-options='{"selectableRange":"00:00:00-23:59:59"}' :style="{width: '100%'}"
|
|
|
+ placeholder="请选择时间" clearable></el-time-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="提前提醒" prop="field108">
|
|
|
+ <el-input v-model="formData.field108" placeholder="小时提醒我" clearable :style="{width: '100%'}">
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="提前提醒" prop="field109">
|
|
|
+ <el-input v-model="formData.field109" type="textarea" placeholder="记录你将要做的一件事"
|
|
|
+ :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-form>
|
|
|
+ </el-row>
|
|
|
+ <div slot="footer">
|
|
|
+ <el-button @click="schedule = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="schedule = false">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+</div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ name: "calendar",
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ schedule: false,
|
|
|
+ formData: {
|
|
|
+ field101: null,
|
|
|
+ field105: null,
|
|
|
+ field106: null,
|
|
|
+ field107: null,
|
|
|
+ field108: undefined,
|
|
|
+ field109: undefined,
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ field101: [{
|
|
|
+ required: true,
|
|
|
+ message: '请选择开始日期',
|
|
|
+ trigger: 'change'
|
|
|
+ }],
|
|
|
+ field105: [],
|
|
|
+ field106: [{
|
|
|
+ required: true,
|
|
|
+ message: '请选择结束日期',
|
|
|
+ trigger: 'change'
|
|
|
+ }],
|
|
|
+ field107: [],
|
|
|
+ field108: [{
|
|
|
+ required: true,
|
|
|
+ message: '小时提醒我',
|
|
|
+ trigger: 'blur'
|
|
|
+ }],
|
|
|
+ field109: [{
|
|
|
+ required: true,
|
|
|
+ message: '记录你将要做的一件事',
|
|
|
+ trigger: 'blur'
|
|
|
+ }],
|
|
|
+ },
|
|
|
+ calendarData: [
|
|
|
+ { months: ['09', '11'],days: ['15'],things: '看电影' },
|
|
|
+ { months: ['10', '11'], days: ['02'],things: '去公园野炊' },
|
|
|
+ { months: ['11'], days: ['02'],things: '看星星' },
|
|
|
+ { months: ['11'], days: ['02'],things: '看月亮' }
|
|
|
+ ],
|
|
|
+ value: new Date()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ inheritAttrs: false,
|
|
|
+ components: {},
|
|
|
+ props: [],
|
|
|
+ computed: {},
|
|
|
+ watch: {},
|
|
|
+ created() {},
|
|
|
+ mounted() {},
|
|
|
+ // methods: {
|
|
|
+ // onOpen() {},
|
|
|
+ // onClose() {
|
|
|
+ // this.$refs['elForm'].resetFields()
|
|
|
+ // },
|
|
|
+ // close() {
|
|
|
+ // this.$emit('update:visible', false)
|
|
|
+ // },
|
|
|
+ // handelConfirm() {
|
|
|
+ // this.$refs['elForm'].validate(valid => {
|
|
|
+ // if (!valid) return
|
|
|
+ // this.close()
|
|
|
+ // })
|
|
|
+ // },
|
|
|
+ // }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+ .el-calendar__title{font-size: 22px;}
|
|
|
+ .calendar-day{
|
|
|
+ text-align: center;
|
|
|
+ color: #202535;
|
|
|
+ line-height: 30px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .is-selected{
|
|
|
+ color: #F8A535;
|
|
|
+ font-size: 10px;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ #calendar .el-button-group>.el-button:not(:first-child):not(:last-child):after{
|
|
|
+ content: '当月';
|
|
|
+ }
|
|
|
+ .prev,.next{background: #efefef;}
|
|
|
+ .prev .calendar-day,.next .calendar-day{color: #999;}
|
|
|
+ .el-calendar-table td.is-selected {
|
|
|
+ background-color:#d6ebff !important;
|
|
|
+ }
|
|
|
+ .el-calendar-table .el-calendar-day:hover{background-color:#d6ebff !important;}
|
|
|
+ .xsmini{width:20;float: right;}
|
|
|
+</style>
|
