vue 自己捣鼓周日程日历组件（WSchedule）

已于 2022-08-31 21:03:32 修改
阅读量6.7k 收藏 53
点赞数 18
分类专栏： vue 文章标签： javascript vue.js 开发语言
于 2022-02-10 17:36:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41277748/article/details/122865345
版权

需求：想要一个周日程表，记录每天的计划，点击可查看详情。可自定义时间段通过后台获取时间段显示

分析：

  1. 通过需求，我联想到在大学期间就用过超级课程表app这款软件，其中课表和这个需求很像，只不过这个需求第一列的时间段是自定义的，不是上午下午两个，但是原理都差不多
  2. 原本想找一些第三方插件使用，由于时间充足，而且自己也想封装成一个组件方便以后或许会碰到类似的需求，于是自己手动写了一个日程日历。

效果如下：自己写的肯定有不足的地方，如有问题请大佬们提出，进行改进

 优化修改：数据量大时，格子显示太长问题，这里进行了优化，如果超过2个就进行展开与收缩操作

 

 

 

 npm包 使用文档点击这里

npm i wschedule -S

 源码已经更新到github上了，点击这里欢迎大佬们来提问

 封装组件

使用

<template>
  <div id="app">
    <WSchedule:planList="timePeriodList" :isFirstDayOfMondayOrSunday="1" @handleDetail="handleDetail"
          @handleCardDetail="handleCardDetail" @changeWeek="changeWeek">
      <template v-slot:thing="{row}">
        <span>上课日期：{{ row.date }}</span>
        <span>上课时间：{{ row.timePeriod }}</span>
        <span>上课老师：{{ row.watchman }}</span>
        <span>上课地点：{{ row.place }}</span>
      </template>
    </WSchedule>
  </div>
</template>

<script>

import Vue from 'vue'
import WSchedule from 'wschedule'
import "wschedule/dist/wschedule.css";
Vue.use(WSchedule)

export default {
  name: 'App',
  components: {
  },
  data() {
    /**
     * 获取当天时间
     * @returns {string}
     */
    function getCurDay(num = 0) {
      var datetime = new Date();
      var year = datetime.getFullYear();
      var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
      let day = datetime.getDate()
      if ((day + num) > 0) {
        day = (day + num) < 10 ? "0" + (datetime.getDate() + num) : datetime.getDate() + num;
      } else {
        day = (day - num) < 10 ? "0" + (datetime.getDate() - num) : datetime.getDate() - num;
      }
      return `${year}-${month}-${day}`
    }
    return {
            timePeriodList: [
        {
          timePeriod: '8:00~10:00',
          schedule: [
            {
              isExpend: false,
              [getCurDay()]: [
                {
                  timePeriod: '8:00~10:00',
                  date: getCurDay(),
                  course: '大学英语',
                  watchman: '井底的蜗牛',
                  place: '测试地点',
                  status: 1,
                },
                {
                  timePeriod: '8:00~10:00',
                  date: getCurDay(),
                  course: '大学英语',
                  watchman: '井底的蜗牛',
                  place: '测试地点',
                  status: 2,
                },
                {
                  timePeriod: '8:00~10:00',
                  date: getCurDay(),
                  course: '大学英语',
                  watchman: '井底的蜗牛',
                  place: '测试地点',
                  status: 3,
                },
              ],
            },
            {
              isExpend: false,
              [getCurDay(-1)]: [
                {
                  id: 1,
                  timePeriod: '8:00~10:00',
                  date: getCurDay(-1),
                  course: '大学英语',
                  watchman: '井底的蜗牛',
                  place: '测试地点',
                  status: 1,
                },
              ]
            }
          ]
        },
        {
          timePeriod: '12:00~14:00',
          schedule: [
            {
              isExpend: false,
              [getCurDay()]: [
                {
                  timePeriod: '12:00~14:00',
                  date: getCurDay(),
                  course: '大学英语',
                  watchman: '井底的蜗牛',
                  place: '测试地点',
                  status: 2,
                },
                {
                  timePeriod: '12:00~14:00',
                  date: getCurDay(),
                  course: '大学英语',
                  watchman: '井底的蜗牛',
                  place: '测试地点',
                  status: 3,
                },
              ],
            },
            {
              isExpend: false,
              [getCurDay(-1)]: [
                {
                  timePeriod: '12:00~14:00',
                  date: getCurDay(-1),
                  course: '大学英语',
                  watchman: '井底的蜗牛',
                  place: '测试地点',
                  status: 1,
                },
                {
                  timePeriod: '实验室1',
                  date: getCurDay(-1),
                  course: '大学英语',
                  watchman: '井底的蜗牛',
                  place: '测试地点',
                  status: 1,
                },
                {
                  timePeriod: '实验室1',
                  date: getCurDay(-1),
                  course: '大学英语',
                  watchman: '井底的蜗牛',
                  place: '测试地点',
                  status: 1,
                },
              ]
            }
          ]
        },
        {
          timePeriod: '14:00~16:00',
          schedule: []
        },
      ],
    }
  },
  methods: {
    /**
     * 点击详情
     * @param row
     */
    handleDetail(row){
      console.log(row)
    },
    /**
     * 点击卡片查看全部内容
     */
    handleCardDetail(row) {
      console.log(row)
    },
    /**
     * 切换周
     * @param date
     */
    changeWeek(date){
      console.log(date)
    }
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

组件完整代码

Html代码

<template>
  <div class="course-week">
    <div class="week-top">
      <div class="week-btn-wrap">
        <span @click="getLastWeek">上周</span>
        <span @click="getCurWeek">本周</span>
        <span @click="getNextWeek">下周</span>
      </div>
      <span class="w-today-date"> {{ todayDate }}</span>
      <div class="w-choose-status">
        <div v-for="sta in cardStatus">
          <span class="square" :style="{background:sta.color}"></span>
          <span class="title">{{ sta.title }}</span>
        </div>
      </div>
    </div>
    <div class="week-table">
      <div class="table-header">
        <div class="table-week">
          <template v-for="(item,index) of weeks">
            <span class="w-first" v-if="index===0" :key="index">{{ item }}</span>
            <span v-else :key="index">{{ item }}</span>
          </template>
        </div>
        <div class="w-table-date">
          <template v-for="(item,index) of months">
            <span class="w-first" v-if="index===0" :key="index">
            </span>
            <template v-else>
              <span :key="index" class="w-day-item" :class="{'w-isCurDate':item&&item.isCurDate}">
                {{ `${item && item.isCurDate ? item && item.showDate + '(今天)' || '' : item && item.showDate || ''}` }}
              </span>
            </template>
          </template>
        </div>
      </div>
      <div class="w-time-period-list">
        <ul class="w-time-period-row">
          <!--循环时段，看时段有多少个-->
          <template v-if="planList.length>0">
            <li class="w-time-period-col" v-for="(period,p_index) in planList"
                :key="`period${p_index}`">
              <!--第一列显示时段-->
              <div class="w-time-period"> {{ period.timePeriod }}</div>
              <!-- 后面显示周一到周日的计划-->
              <div class="w-row-day">
                <!-- 循环显示每周的日期-->
                <template v-for="(month,m_index) of months">
                  <!-- v-if="month" 去除数据处理的时候移除数组第一个为empty的问题-->
                  <div v-if="month" :key="`month${m_index}`" class="w-things" @click="handleCardDetail(month,period)">
                    <!-- 循环每个时间段的计划-->
                    <template v-for="(card,t_index) of period.schedule">
                      <template v-for="(single,sIndex) in card[month.date]">

                        <template v-if="!card.isExpend">
                          <div v-if="single.date===month.date&&sIndex<2"
                               :key="`thing${sIndex}`"
                               class="w-thing-item"
                               @click="handleDetail(single)"
                               :style="{background: cardStatus[single.status].color}">
                            <slot name="thing" :row="single"></slot>
                          </div>
                        </template>
                        <template v-if="card.isExpend">
                          <div v-if="single.date===month.date"
                               :key="`thing${sIndex}`"
                               class="w-thing-item"
                               @click="handleDetail(single)"
                               :style="{background: cardStatus[single.status].color}">
                            <slot name="thing" :row="single"></slot>
                          </div>
                        </template>
                        <div class="w_expand"
                             v-if="card[month.date].length>2&&(card[month.date].length-1)===sIndex&&!card.isExpend&&single.date===month.date"
                             @click="handleExpand(card)">展开
                        </div>
                        <div class="w_shrink"
                             v-if="card[month.date].length>2&&(card[month.date].length-1)===sIndex&&card.isExpend&&single.date===month.date"
                             @click="handleExpand(card)">收缩
                        </div>
                      </template>

                    </template>

                  </div>
                </template>
              </div>
            </li>
          </template>
          <div class="w-noMore" v-else><span>暂无数据</span></div>
        </ul>
      </div>
    </div>
  </div>
</template>

js代码  MyTools点击这里

import { formatDate, getCurDay } from '../utils/MyTools'

export default {
  name: 'WSchedule',
  props: {
    planList: {
      type: Array,
      default: []
    },
    cardStatus: {
      type: Object,
      default: () => {
        return {
          1: {
            title: '已过期',
            color: '#9CADADB7'
          },
          2: {
            title: '进行中',
            color: '#FF6200'
          },
          3: {
            title: '未开始',
            color: '#3291F8'
          },
        }
      }
    },
    isFirstDayOfMondayOrSunday: {
      type: Number,
      default: 1,
    }
  },
  data () {
    return {
      weeks: [
        '时段', '周一', '周二', '周三', '周四', '周五', '周六', '周日',
      ],
      todayDate: '',
      months: [],
      curDate: '',
      nowDate: new Date(),
    }
  },
  watch: {
    isFirstDayOfMondayOrSunday: {
      handler (val) {
        if (val > 1) {
          let arr = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          const arr1 = arr.slice(val - 1)
          const arr2 = arr.slice(0, val - 1)
          this.weeks = ['时段', ...arr1, ...arr2]
        }
      },
      immediate: true
    }
  },
  mounted () {
    this.getCurWeek()
  },
  methods: {
    //展开与缩放操作
    handleExpand (row) {
      row.isExpend = !row.isExpend
    },
    /**
     * 获取 时间
     * @param time
     */
    getWeek (time) {
      this.curDate = new Date(time)
      //当前是周几
      const whichDay = time.getDay()
      let num = 0
      if (this.isFirstDayOfMondayOrSunday <= whichDay) {
        num = this.isFirstDayOfMondayOrSunday
      } else {
        num = this.isFirstDayOfMondayOrSunday - 7
      }
      const weekDay = time.getDay() - num
      time = this.addDate(time, weekDay * -1)
      for (let i = 0; i < 7; i++) {
        const { year, month, day } = formatDate(i === 0 ? time : this.addDate(time, 1))
        this.months.push({
          date: `${year}-${month}-${day}`,
          showDate: `${month}-${day}`,
          timestamp: new Date(`${year}-${month}-${day}`).getTime()
        })
      }
      this.months.sort((a, b) => a.timestamp - b.timestamp)
      delete this.months[0]
      this.todayDate = `${this.months[1].date} ~ ${this.months[this.months.length - 1].date}`
    },
    /**
     * 处理日期
     * @param date
     * @param n
     * @returns {*}
     */
    addDate (date, n) {
      date.setDate(date.getDate() + n)
      return date
    },
    /**
     * 上周
     */
    getLastWeek () {
      const date = this.addDate(this.curDate, -7),
          { year, month, day } = formatDate(date),
          dateObj = {
            date: `${year}-${month}-${day}`,
            timestamp: new Date(`${year}-${month}-${day}`).getTime()
          }
      this.dealDate(date)
      this.$emit('changeWeek', dateObj)
    },
    /**
     * 本周
     */
    getCurWeek () {
      const { year, month, day } = formatDate(new Date()),
          dateObj = {
            date: `${year}-${month}-${day}`,
            timestamp: new Date(`${year}-${month}-${day}`).getTime()
          }
      this.dealDate(new Date())
      this.$emit('changeWeek', dateObj)
    },
    /**
     * 下周
     */
    getNextWeek () {
      const date = this.addDate(this.curDate, 7),
          { year, month, day } = formatDate(date),
          dateObj = {
            date: `${year}-${month}-${day}`,
            timestamp: new Date(`${year}-${month}-${day}`).getTime()
          }
      this.dealDate(date)
      this.$emit('changeWeek', dateObj)
    },
    /**
     * 显示当天日期状态
     * @param date
     */
    dealDate (date) {
      this.months = ['']
      this.getWeek(date)
      const curDate = getCurDay()
      this.months.forEach(item => {
        item.isCurDate = item.date === curDate
      })
    },
    /**
     * 点击卡片子内容查看详情
     * @param row
     */
    handleDetail (row) {
      this.$emit('handleDetail', row)
    },
    /**
     * 点击卡片查看全部内容
     * @param month
     * @param period
     */
    handleCardDetail (month, period) {
      this.$emit('handleCardDetail', { ...month, ...period })
    }
  }
}
</script>

css 代码

<style>
ul {
  list-style: none;
}

ul, li {
  margin: 0;
  padding: 0;
}

.course-week {
  width: 100%;
  border: 1px solid #ddd;
  padding: 1%;
  box-sizing: border-box;
}

.week-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0 1%;
  box-sizing: border-box;

}

.week-top .week-btn-wrap {
  width: 200px;
  display: flex;
  justify-content: space-around;
  color: #409EFF;
}

.week-top .week-btn-wrap span {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
}

.w-today-date {
  font-weight: bold;
  font-size: 16px;
}

.w-choose-status {
  display: flex;
  justify-content: flex-end;
  width: 200px;
}

.w-choose-status > div {
  width: 100%;
  flex: 1;
  display: flex;
  padding: 0 2%;
  white-space: nowrap;
  line-height: 20px;
  box-sizing: border-box;
}

.w-choose-status > div .square {
  display: flex;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  box-sizing: border-box;
}

.w-choose-status > div .title {
  display: flex;
  align-items: center;
  line-height: 16px;
  padding-left: 4px;
  font-size: 14px;
  box-sizing: border-box;
}


.week-table {
  display: flex;
  flex-direction: column;
}

.week-table .table-header {
  width: 100%;
  height: 80px;
  background: #EAEDF2;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid #EAEDF2;
  box-sizing: border-box;
}

.table-header .w-table-date, .table-week {
  width: 100%;
  height: 40px;
  text-align: left;
  display: flex;
  justify-content: center;
  align-items: center;

}

.table-header .w-table-date > span, .table-week > span {
  flex: 1;
  color: #000;
  height: 100%;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}


.w-table-date .w-day-item, .table-week .w-day-item {
  color: #000;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.week-table .w-time-period-list {
  width: 100%;
}

.w-time-period-list .w-time-period-row {
  width: 100%;
  min-height: 60px;
}

.w-time-period-col {
  width: 100%;
  min-height: 60px;
  display: flex;
}

.w-time-period-col .w-time-period {
  width: 12.5%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px solid #EAEDF2;
  border-bottom: 1px solid #EAEDF2;
  box-sizing: border-box;
}

.w-time-period-col .w-row-day {
  width: 87.5%;
  display: flex;
  justify-content: center;
}

.w-row-day .w-things {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-left: 1px solid #EAEDF2;
  border-bottom: 1px solid #EAEDF2;
  box-sizing: border-box;
}

.w-row-day .w-things:last-child {
  border-right: 1px solid #EAEDF2;
}

.w-things .w-thing-item {
  display: flex;
  width: 80%;
  font-size: 14px;
  flex-direction: column;
  justify-content: space-around;
  min-height: 90px;
  border-radius: 10px;
  margin: 2% 1%;
  padding: 1% 2%;
  cursor: pointer;
  color: #fff;
  background: #FF6200;
  box-sizing: border-box;
  transition: all 1s linear .5s;
}


.w-isCurDate {
  color: #FF2525 !important;
}

.w-noMore {
  min-height: 200px;
  padding: 2%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(156, 173, 173, 0.3);
  color: #9CADADB7;
  box-sizing: border-box;
}

.w_expand, .w_shrink {
  color: #0A98D5;
  cursor: pointer;
  width: 100%;
  padding: 2% 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

优化：

1、卡片空白数据无法获取，添加获取卡片全部详细数据方法handleCardDetail；

2、日历的显示问题优化，比如第一天想显示周日，或者显示周三，这次加了一个属性isFirstDayOfMondayOrSunday，传入对应的数字，周一就是1，周日就是7，以此类推

3、优化 每个日期卡片显示多调数据时，可以进行展开、缩放功能问题，数据格式进行改进 

井底的蜗牛
关注
  • 18
    点赞
  • 踩
  • 53
    收藏
    觉得还不错? 一键收藏
  • 31
    评论
专栏目录
vue2 实现日历组件，包含新增日程
所学所思
06-09 2322
实现的最终效果： 模板 html 部分 js 部分 css 部分
Vue3+Typescript日历组件
07-29
首先，我们从标题"Vue3+Typescript日历组件"出发，理解其核心是创建一个基于Vue3的组件，且使用了TypeScript作为编程语言。TypeScript是JavaScript的超集，它提供了静态类型系统，有助于在编码阶段发现潜在的错误，...
schedule-explorer：使用Vue.js构建的Schedule Explorer演示
02-20
时间表浏览器 基于 。 项目设置 yarn install 编译和热重装以进行开发 yarn run serve 编译并最小化生产 yarn run build 运行测试 yarn run test 整理和修复文件 yarn run lint 自定义配置 请参阅。
vue 自定义月日历日程组件（MSchedule）
weixin_41277748的博客
02-11 5541
效果图 组件的使用 日程内容可以自定义 状态对应颜色可以自定义 <MSchedule :list="plan" @handleDetail="handleDetail" @chooseEntireCard="chooseEntireCard" @changeMonth="changeMonth"> <template v-slot:card="{row}"> <span>时段：{{ row..
打造你的专属Vue组件：基于FullCalendar超实用“日程任务管理组件”实战
最新发布
小猿同学628的博客
06-02 1300
在现代Web应用中，日程管理是一个常见而又关键的功能，它帮助用户高效安排和追踪日常任务及会议。Vue.js作为一个流行的前端框架，以其简洁的语法和强大的组件化能力深受开发者喜爱。本文将手把手教你如何利用Vue 3和FullCalendar库构建一个功能丰富、易用的日程任务管理组件，让你的应用瞬间提升日程管理体验。
前端Vue制作日历插件FullCalendar
HD The Sky的博客
06-12 8031
Vue使用fullCalendar制作日历
Vue进阶（幺柒贰）：应用 @fullcalendar/vue 实现日程日历
IT全栈 华强工作室
03-14 4777
前言 在项目实战过程中，需要为项目主页实现日程日历功能，主要包括日程的增删改查。 在网上研究一番后，经过对比发现一款比较好用的良心插件Fullcalendar。 Fullcalendar是一个可以创建日历日程管理的开源组件。下面让我们来认识下该日程日历组件的强大吧。 本文由以下几个部分组成： 1.安装fullcalendar 2.简易DEMO代码 3.Template中FullCalendar属性注解 4.script中FullCalendar属性方法注解 安装Fullcalendar Vue框架下，ful
vue实现农历日历插件——vue-jlunar-datepicker插件的使用——技能提升
yehaocheng520的博客
03-17 5397
vue实现农历日历插件——vue-jlunar-datepicker插件的使用——技能提升
基于Vue3和TypeScript的日历日程组件设计源码
05-31
日历日程组件项目源码，共30个文件，采用Vue3、TypeScript和HTML等语言开发，涉及多种文件类型如Vue组件、TypeScript...该项目是一个基于Vue3和TypeScript的日历日程组件，旨在提供一个高效、稳定的日程管理解决方案。
VUE实现日历组件功能
08-31
VUE实现日历组件功能 在这篇文章中，我们将介绍如何使用VUE实现日历组件功能。该组件支持月视图，且可以自由地在vue项目中使用。 知识点1：Vue 日历组件的实现 要实现日历组件，需要使用VUE框架。该组件支持月...
vue实现一个炫酷的日历组件
10-17
公司业务新开了一个商家管理微信H5移动端项目，日历控件是商家管理员查看通过日程来筛选获取某日用户的订单等数据。下面小编给大家带来了基于vue实现一个炫酷的日历组件，感兴趣的朋友参考下吧
一个可切换周视图和月视图的vue日历组件并且可以显示日程安排及事件标注
08-12
一个可切换周视图和月视图的vue日历组件，并且可以显示日程安排及事件标注
eventCalendar:Vue日程组件
05-16
hansinCalendar 功能： 生成日历 日程排列 1.0: 2.0: 3.0: 完成版，加入了Elemen_ui, store, http-request 使用需谨慎 抽空把这个组件独立出来放到npm方便使用 eventList = [ { id: 5018500790, _id: 5018500790, title: '3-10跨周显示0000', color: '#ff3333', start: '2018-05-03', end: '2018-05-10', className: '' }, { id: 5018500791, _id: 5018500791, title: '跨周显示111', color: '#ff3333', start: '2018-05-04'
基于Vue实现支持按周切换的日历
08-29
基于Vue实现支持按周切换的日历 本文主要介绍了基于Vue实现支持按周切换的日历的实现方法，通过实际开发情况按每年、每月、每周进行切换，具有很高的参考价值。下面将详细介绍该日历的实现过程和相关知识点。 Vue...
Vue日历组件，周和月的显示模式
12-15
在本文中，我们将深入探讨如何使用Vue.js创建一个具有周和月切换显示模式的日历组件。Vue.js是一款轻量级的前端JavaScript框架，以其简洁的API和强大的功能深受开发者喜爱。构建日历组件是常见的需求，它能帮助用户...
基于Vue2-Calendar改进的日历组件（含中文使用说明）
10-17
本文将详细介绍一个基于Vue2-Calendar组件进行改进的日历组件，该组件在原版基础上进行了多项优化，以满足更多样化的使用需求。首先，让我们了解一下Vue2-Calendar的基础知识。 Vue2-Calendar是一款适用于Vue.js...
vue日历插件vue-calendar
热门推荐
memory_zzz的博客
09-09 3万+
原始效果： 修改后的效果： 接下来，我们使用它～ 1.安装 npm i vue-calendar-component --save cnpm i vue-calendar-component --save //国内镜像 2.在使用到日历插件的文件中引入 import Calendar from 'vue-calendar-component'; 3.原始效果代码 <template> <div class="con"> <Calen.
前端日历组价（包含新建日程，查看日程/切换年月查看日程）vue组件日历复制即用，日程可能要看这调一调。
苦逼打工人的博客
04-20 1952
【代码】前端日历组价（包含新建日程，查看日程/切换年月查看日程）vue组件日历复制即用，日程可能要看这调一调。
fullCalendar日程表在Vue项目中的应用
绝对零度的博客
05-06 5567
fullCalendar日程表在Vue项目中的应用 fullCalendar相关API 使用fullCalendar插件在项目中实现日程排版，支持天、月日程转换，自定义事件 页面布局 通过按钮切换天与月视图的转换，天视图回显具体的时分排版项目，月视图回显缩略信息 <div class="order-day-calendar h-100 clearfix"> <div id='calendar' class="h-100" @contextmenu.prevent.stop="st
JQuery日程管理组件 FullCalendar 设置前端展示高度
05-10
你可以通过设置 FullCalendar 的高度选项来控制其在前端的展示高度。具体来说，你可以在初始化 FullCalendar 实例时，通过设置 height 属性来指定其高度，如下所示： ```javascript $('#calendar').fullCalendar({ height: 600, // 设置高度为 600 像素 // 其他配置项... }); ``` 你可以根据需要调整 height 属性的具体值来满足你的需求。另外，你也可以将 height 的值设置为一个百分比，以使 FullCalendar 的高度随着浏览器窗口大小的变化而相应地自适应调整。例如，设置 height 为 "80%" 将使 FullCalendar 的高度自适应为浏览器窗口高度的 80%。
评论 31
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值