fullcalendar样式改造

最新推荐文章于 2025-05-24 11:22:45 发布

一朵叶子

最新推荐文章于 2025-05-24 11:22:45 发布

阅读量9.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css vue js 文章标签：日历样式 vue中用fullcalendar做日历

本文链接：https://blog.youkuaiyun.com/yjy528/article/details/89518599

js 同时被 3 个专栏收录

7 篇文章

订阅专栏

css

5 篇文章

订阅专栏

vue

4 篇文章

订阅专栏

本文介绍如何在Vue项目中使用FullCalendar并进行个性化样式调整，包括创建独特的日期展示风格，通过代码实现自定义布局和日期格式化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

fullcalendar里默认是大表格，有日程事件显示在日期上，最近做了一个不一样的日期样式，项目中用了fullcalendar，所以就在此基础上做了一番改造，并把代码记录在这里，便于以后查询，效果如图所示：

代码在此（vue项目）：

<template>
    <div class="schedule_box show_box">
        <div class="right_small right_calendar">
            <div id='calendar_index'></div>
        </div>
    </div>
</template>

<script>
export default {
    name:'Schedule',
    data(){
        return {
            
        }
    },
     mounted() {
        this.showData()
    },
    methods: {
        showData(){
            $("#calendar_index").fullCalendar({ 
                header: { left: "title", center:'', right: "prev,title,next,"},
                // titleFormat: 'YYYY-MM-DD',
                defaultView:'month',//默认视图
                navLinks: true, // can click day/week names to navigate views
                editable: false, 
                eventLimit: true, // allow "more" link when too many events 
                eventLimitText: "更多",
                aspectRatio:2,//单元格宽高的比例，宽是高的2倍
                selectable: true,//允许选择事件                         
            });
            var odiv=$("<div class='today_div'></div>")
            var p0=$("<p class='today_date'></p>").html(this.getTodaydate())
            var p1=$("<p class='today_all'></p>").html(this.formatDate(new Date))
            odiv.append(p0)
            odiv.append(p1)
            $(".right_calendar").append(odiv)

            // $("#calendar_index .fc-right h2").html(odiv)
        },
        // 日期格式处理 年-月-日 星期-
        formatDate(date){   
          var year = date.getFullYear();
		  var month = date.getMonth() + 1;
		  month = month < 10 ? ('0' + month) : month;
          var todaydate = date.getDate();
          var day = date.getDay();
          todaydate = todaydate < 10 ? ('0' + todaydate) : todaydate;
          //星期大写
          var dayCycleArray=["日","一","二","三","四","五","六"];
            for(var i=0;i<7;i++){
                if(day==i){
                    day=dayCycleArray[i];
                }
            }

          return year + '年' + month + '月' + todaydate + '日' + '  ' + '星期' + day;
        },
        //得到 今天 - 日 -
        getTodaydate(){
            var date = new Date();
            var hours = date.getDate();
            return hours
        },
    },
}
</script>

.right_small{ width:5.28rem; height:4.5rem; background: #ffffff; border-radius: 0.05rem; padding-left:0.28rem; padding-right:0.28rem; }
/* 日历日程 */
    /* 标题 */
#calendar_index{ width:100%; height:4.5rem; border-bottom:1px solid #f5f4f7; }
.right_calendar{ border-top:1px solid #e52355; position:relative;}
#calendar_index .fc-toolbar.fc-header-toolbar{ margin-top:0.15rem; height:0.6rem; }
#calendar_index .fc-left{ width:50%; border-right:1px solid #f5f4f7; }
#calendar_index .fc-right{ width:50%; line-height: 0.6rem; font-weight:normal; padding-left:0.3rem; }
  /* 标题左侧--今日 */
.today_div{ position:absolute; left:0; top:0; z-index: 999; opacity: 1; background: #ffffff; margin:0.15rem 0 0 0.28rem; text-align: center; }
.today_date{ color:#e52355; font-weight: lighter; font-size: 0.36rem; }
.today_all{ color:#adadad; font-weight: lighter; font-size: 0.14rem; }
  /* 标题右侧--左右键 */
#calendar_index .fc-right h2{ color:#333333; font-weight: lighter; font-size: 0.2rem; margin:0 0.1rem 0 0.1rem; }
#calendar_index .fc-right button{ border-radius: 50%; width:0.2rem; height:0.2rem; text-align: center; margin-top:0.2rem; background: #e8f0ff; }
#calendar_index .fc-right span{ margin-left:-0.09rem!important; color:#5d93ff; line-height: 0.1rem; }
#calendar_index .fc-right>div{ width:100%; display:flex; }
#calendar_index .fc-grid .fc-day-number { float: left;padding: 0 0.02rem;text-align: center;background: red !important; width:100%; height:0.55rem;line-height: 0.55rem; }
#calendar_index .fc-body{ height:2.88rem; }
#calendar_index .fc-day-grid-container{ overflow-x: hidden!important; height: 2.7rem!important; overflow-y: hidden!important; border:none!important; }
   /* table星期标题 */
#calendar_index .fc-widget-header { margin:0!important; text-align: center; height:0.38rem; line-height: 0.38rem; font-size: 0.18rem; font-weight: normal; color:#333333; }

#calendar_index .fc-basic-view .fc-body .fc-row{ height:0.42rem!important; }
#calendar_index .fc-day-number{ float:left!important; }
#calendar_index .fc .fc-row .fc-content-skeleton table, .fc .fc-row .fc-content-skeleton td, .fc .fc-row .fc-helper-skeleton td{ line-height: 0.4rem; border-color:#ffffff!important; }
#calendar_index .fc-today{ background: #ffffff!important; }
/*  */
#calendar_index .fc-past a,#calendar_index .fc-future a{ display:inline-block; background: #ffffff!important; border-radius: 50%; width:0.35rem; height:0.35rem; text-align: center; margin-left:0.1rem; }
#calendar_index .fc-today a{ display:inline-block; background: chartreuse!important; border-radius: 50%; width:0.35rem; height:0.35rem; text-align: center; margin-left:0.1rem;}
#calendar_index .fc-unthemed .fc-content, .fc-unthemed .fc-divider, .fc-unthemed .fc-list-heading td, .fc-unthemed .fc-list-view, .fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead{ border:none!important; }