vue关于element日历calendar组件上月、今天、下月、日历块点击事件

参考

https://blog.csdn.net/qq493820798/article/details/106858962

python任意输入一个月份，输出上月本月下月的日历，要求连续
代码
#-*-codeing = utf-8 -*-
#@Time : 2020/11/17 23:55
#@Author : 宋俊育
#@File : 任意输入一个月份，输出上月本月下月的日历，要求连续.py
#@Software : PyCharm
from datetime import datetime

def drawCalendar(year, month):
    dateday = []
    if month == 1:
        someday = datetime((year - 1), 12, 1)
        firstDay = someday.isoweekday()
        firstD = firstDay;
        for i in range(firstDay):
            dateday.append(" ")
        for i in range(1, 32):
            dateday.append(i)
        for i in range(1, 32):
            dateday.append(i)
        if (year % 4 == 0 and year % 100 != 0) or year % 400 == 0:
            for i in range(1, 30):
                dateday.append(i)
        else:
            for i in range(1, 29):
                dateday.append(i)
    elif month == 12:
        someday = datetime(year, 11, 1)
        firstDay = someday.isoweekday()
        firstD = firstDay;
        for i in range(1, 31):
            dateday.append(i)
        for i in range(1, 32):
            dateday.append(i)
        for i in range(1, 32):
            dateday.append(i)
    else:
        someday = datetime(year, (month - 1), 1)
        firstDay = someday.isoweekday()
        firstD = firstDay;
        for i in range(firstDay):
            dateday.append(" ")
        for j in range((month - 1), (month + 2)):
            if ((year % 4 == 0 and year % 100 != 0) or year % 400 == 0) and j == 2:
                for i in range(1, 30):
                    dateday.append(i)
            elif j in [1, 3, 5, 7, 8, 10, 12]:
                for i in range(1, 32):
                    dateday.append(i)
            elif j == 2:
                for i in range(1, 29):
                    dateday.append(i)
            elif j in [4, 6, 9, 11]:
                for i in range(1, 31):
                    dateday.append(i)
    print(" Mo    Tu    We    Th    Fr    Sa    Su", end="")
    for i in range(0, len(dateday)):
        print("{0: >3}   ".format(dateday[i]), end="")
        if i % 7 == 0:
            print("")

year = eval(input("请输入年份："))
month = eval(input("请输入月份:"))
drawCalendar(year, month)

运行：

交流qq群：672373393

前端项目公开在码云：https://gitee.com/xiao_yulong/noob-admin-ui

欢迎大家进群讨论！


  辰小白小白最近在写日历模板，项目已经用了element组件，奈何element日历组件官方文档提供的资料实在太少了。所以这里希望有相关开发需要的朋友能够少走一些辰小白踩过的坑。

首先展示一些模板效果图：



 这个项目的详细介绍可以下辰小白的这篇文章：后端开发的福音，vue+element实现的vue-element-admin前台框架，开箱即用

下面是日历模板首页源码

<template>
  <div>
    <el-card class="_calendar">
      <el-container>
        <el-main>
          <el-card>
            <el-calendar v-model="value" :first-day-of-week="7">
              <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
              <template slot="dateCell" slot-scope="{date, data}">
                <div slot="reference" class="div-Calendar" @click="calendarOnClick(data)">
                  <p :class="data.isSelected ? 'is-selected' : ''">
                    {{ data.day.split('-').slice(1).join('-') }}
                    <i
                      :class="[data.isSelected ?'el-icon-check':'']"
                    ></i>
                    <i v-if="_.indexOf(isArrange, data.day)>0" class="el-icon-s-claim"></i>
                    <!-- <i class="el-icon-coffee-cup"></i> -->
                  </p>
                </div>
              </template>
            </el-calendar>
          </el-card>
        </el-main>

        <el-aside width="40%" style="overflow: hidden;">
          <el-card>
            <div class="el-calendar__header">
              <div class="el-calendar__title">排班详情</div>
              <div class="el-calendar__button-group">
                <div class="el-button-group">
                  <button
                    type="button"
                    class="el-button el-button--plain el-button--mini"
                    @click="saveOnClick"
                  >
                    <span>新增</span>
                  </button>
                </div>
              </div>
            </div>
            <div class="calendar-info">
              <div style="padding: 15px;">
                <div role="alert" class="el-alert el-alert--success is-dark" @click="infoOnClick">
                  <i class="el-alert__icon el-icon-success is-big"></i>
                  <div class="el-alert__content">
                    <span class="el-alert__title is-bold">2020-06-19 9:00~11:00</span>
                    <p class="el-alert__description">值班人员：张三、李四、王五</p>
                    <p class="el-alert__description">携带设备：123547、985431、745481</p>
                    <i class="el-alert__closebtn el-icon-close" @click.stop="infoDel"></i>
                  </div>
                </div>
                <div role="alert" class="el-alert el-alert--info is-dark" @click="infoOnClick">
                  <i class="el-alert__icon el-icon-info is-big"></i>
                  <div class="el-alert__content">
                    <span class="el-alert__title is-bold">2020-06-19 9:00~11:00（待审核）</span>
                    <p class="el-alert__description">值班人员：张三、李四、王五</p>
                    <p class="el-alert__description">携带设备：123547、985431、745481</p>
                    <i class="el-alert__closebtn el-icon-close"></i>
                  </div>
                </div>
                <div role="alert" class="el-alert el-alert--warning is-dark" @click="infoOnClick">
                  <i class="el-alert__icon el-icon-warning is-big"></i>
                  <div class="el-alert__content">
                    <span class="el-alert__title is-bold">警告提示的文案</span>
                    <p class="el-alert__description">文字说明文字说明文字说明文字说明文字说明文字说明</p>
                    <i class="el-alert__closebtn el-icon-close"></i>
                  </div>
                </div>
                <div role="alert" class="el-alert el-alert--error is-dark" @click="infoOnClick">
                  <i class="el-alert__icon el-icon-error is-big"></i>
                  <div class="el-alert__content">
                    <span class="el-alert__title is-bold">错误提示的文案</span>
                    <p class="el-alert__description">文字说明文字说明文字说明文字说明文字说明文字说明</p>
                    <i class="el-alert__closebtn el-icon-close"></i>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-aside>
      </el-container>
    </el-card>
    <calendarDrawer ref="calendarDrawer"></calendarDrawer>
    <calendarForm ref="calendarForm"></calendarForm>
  </div>
</template>
<script>
import calendarDrawer from "./calendar-drawer.vue";
import calendarForm from "./calendar-form.vue";
export default {
  components: { calendarDrawer, calendarForm },
  data: function() {
    return {
      value: new Date(),
      isArrange: [
        "2020-06-08",
        "2020-06-09",
        "2020-06-10",
        "2020-06-11",
        "2020-06-17",
        "2020-06-18"
      ]
    };
  },
  created: function() {
    this.$nextTick(() => {
      // 点击前一个月
      let prevBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(1)"
      );
      prevBtn.addEventListener("click", e => {
        console.log(this.data);
        this.$notify({
          title: "上一月",
          message: "上个月头天：" + this.value,
          type: "success",
          position: "top-left"
        });
      });

      //点击下一个月
      let nextBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(3)"
      );
      nextBtn.addEventListener("click", () => {
        console.log(this.value);
        this.$notify({
          title: "下一月",
          message: "下个月头天：" + this.value,
          type: "warning",
          position: "top-left"
        });
      });

      //点击今天
      let todayBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(2)"
      );
      todayBtn.addEventListener("click", () => {
        this.$notify.info({
          title: "今天",
          message: "今天：" + this.value,
          position: "top-left"
        });
      });
    });
  },
  mounted: function() {},
  methods: {
    //点击日期块
    calendarOnClick(e) {
      console.log(e);
      // this.isArrange.push("2020-06-19");
      this.$notify.error({
        title: "日历块点击",
        message: e,
        position: "top-left"
      });
    },
    //点击信息块
    infoOnClick() {
      this.$refs.calendarDrawer.drawer = true;
    },
    //新增排班
    saveOnClick() {
      this.$refs.calendarForm.dialogFormVisible = true;
    },
    //删除排班
    infoDel() {
      this.$confirm("此操作将永久删除该排班, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>
<style scoped>
.is-selected {
  color: #1989fa;
}
.p-popover {
  text-align: center;
}
._calendar {
  height: 99.5%;
  width: 100%;
}
.el-main {
  padding: 0px;
  overflow: hidden;
}
.calendar-info {
  height: 94%;
  overflow: auto;
}
.el-alert {
  margin: 15px 0px;
}
.el-alert:hover {
  transform: scale(1.02);
}
.el-alert:active {
  transform: scale(1.01);
}
</style>
<style >
._calendar .div-Calendar {
  height: 125px;
  box-sizing: border-box;
  padding: 8px;
}
._calendar .el-calendar-table .el-calendar-day {
  padding: 0px;
  height: 125px;
}
._calendar .el-container,
._calendar .el-calendar {
  height: 100%;
}
._calendar .el-card__body {
  padding: 0px;
}
</style>

 具体的几个点击事件都有备注，这里不细说了

 

 
主要就是利用 java的Calendar 类
 
 
传入一个 参数 如yyyyMMdd 20101201 这样的参数
 
然后找到 月 的第一天 和 月的最后一天 进行循环。
 
将循环放到 星期数组里面 传到页面。
 
	
        private String currentDay;
	private String currentMonth;
	private List<String[]> weeksOfMonth;

	/**
	 * 分页.查询.排序.
	 */
	public String listSchedule() throws Exception {
		Calendar now = Calendar.getInstance();
		if (currentDay != null) {
			try {
				now.setTime(new SimpleDateFormat("yyyyMMdd")
						.parse(currentDay));
			} catch (Exception e) {

			}
		}
		Calendar dateFirst = Calendar.getInstance();
		dateFirst.set(Calendar.YEAR, now.get(Calendar.YEAR));
		dateFirst.set(Calendar.MONTH, now.get(Calendar.MONTH));
		dateFirst.set(Calendar.DATE, 1);
		//将当前天和当前月设置值
		currentDay = new SimpleDateFormat("yyyyMMdd").format(now.getTime());
		currentMonth = new SimpleDateFormat("yyyyMM").format(now.getTime());

		List<String> daysOfMonth = new ArrayList<String>();// 变量放日期
		weeksOfMonth = new ArrayList<String[]>();// 转换成的星期
		for (int i = 1; i < ((dateFirst.get(Calendar.DAY_OF_WEEK)+5)%7); i++) {// 添加1号前面的空格
			daysOfMonth.add("");
		}
		for (int i = 1; i <= now.getActualMaximum(Calendar.DATE); i++) {
			//now.getActualMaximum(Calendar.DATE)获得当月天数
			daysOfMonth.add(i + "");// 添加月下面的日期
		}
		for (int i = daysOfMonth.size(); i < 6 * 7; i++) {
			daysOfMonth.add("");// 添加月末后面的空格
		}
		for (int j = 0; j < daysOfMonth.size(); j = j + 7) {// 将数组转换成星期放到list里面
			String[] week = new String[7];
			int index = 0;
			week[index] = daysOfMonth.get(j + index++);// 星期一
			week[index] = daysOfMonth.get(j + index++);// 星期二
			week[index] = daysOfMonth.get(j + index++);// 星期三
			week[index] = daysOfMonth.get(j + index++);// 星期四
			week[index] = daysOfMonth.get(j + index++);// 星期五
			week[index] = daysOfMonth.get(j + index++);// 星期六
			week[index] = daysOfMonth.get(j + index++);// 星期日
			weeksOfMonth.add(week);
		}
		return SUCCESS;
	}
 这里有个问题 
 
(dateFirst.get(Calendar.DAY_OF_WEEK)+5)%7)
 
本来 用
DAY_OF_WEEK
就可以获得星期，可是星期是从 周日开始的。想从周一开始就得 向后挪 5 
 
在页面显示
 
<s:iterator value="weeksOfMonth" status="status" id="week">
		<fs:gridPanelDataTable4Date index="${status.index}">
			<fs:gridPanelDataColumn4Date width="6" height="40">&nbsp;</fs:gridPanelDataColumn4Date>
			<s:iterator begin="0" end="6" step="1" id="index"><!-- 进行星期的7天循环 -->
				<s:if test="${index} == 5 || ${index} == 6"><!-- 判断是否是周六，周日换背景为黄色 -->
					<fs:gridPanelDataColumn4Date width="100" height="40" style="background-color: #ffffcc;">
						<span class="scheduleDateWeekendDiv"><s:property value="${week[index]}"/></span>
						<s:if test="${week[index]} != ''">
						<a href="javaScript:showScheduleViewDiv('${currentMonth}<s:if test="${week[index]} < 10 ">0${week[index]}</s:if><s:else>${week[index]}</s:else>');">编辑</a>
						<a href="${ctx}/addUserInfo.action?id=<s:property value="id"/>">查看</a>
						</s:if>
					</fs:gridPanelDataColumn4Date>
				</s:if>
				<s:else>
					<fs:gridPanelDataColumn4Date width="100" height="40">
						<span class="scheduleDateWeekendDiv"><s:property value="${week[index]}"/></span>
						<s:if test="${week[index]} != ''">
						<a href="javaScript:showScheduleViewDiv('${currentMonth}<s:if test="${week[index]} < 10 ">0${week[index]}</s:if><s:else>${week[index]}</s:else>');">编辑</a>
						<a href="${ctx}/addUserInfo.action?id=<s:property value="id"/>">查看</a>
						</s:if>
					</fs:gridPanelDataColumn4Date>
				</s:else>
			</s:iterator>
		</fs:gridPanelDataTable4Date>
	</s:iterator>
 
其中用到了一些自己封装的 标签。
 
效果图：


 
上月 下月的 action
/**
	 * 上一月
	 */
	public String prevMonthSchedule() throws Exception {
		Calendar now = Calendar.getInstance();
		if (currentDay != null) {
			try {
				now.setTime(new SimpleDateFormat("yyyyMMdd")
						.parse(currentDay));
			} catch (Exception e) {

			}
		}
		now.set(Calendar.MONTH, now.get(Calendar.MONTH) - 1);
		currentDay = new SimpleDateFormat("yyyyMMdd").format(now.getTime());
		System.out.println("currentDay:" + currentDay);
		return SUCCESS;
	}

	/**
	 * 下一月
	 */
	public String nextMonthSchedule() throws Exception {
		Calendar now = Calendar.getInstance();
		if (currentDay != null) {
			try {
				now.setTime(new SimpleDateFormat("yyyyMMdd")
						.parse(currentDay));
			} catch (Exception e) {

			}
		}
		now.set(Calendar.MONTH, now.get(Calendar.MONTH) + 1);
		currentDay = new SimpleDateFormat("yyyyMMdd").format(now.getTime());
		System.out.println("currentDay:" + currentDay);
		return SUCCESS;
	}
 
 
源代码 和 oa 放到一起了
demo:
http://freeweboa.appspot.com/index.html
里面的日程管理
下载地址：
 
http://code.google.com/p/freewebsys/downloads/list
 
  

  
  

    
      
        

          
          
大小: 63.6 KB
        
查看图片附件