EL-日历显示的样式修改

登录

本帖最后由 andy_chen 于 2024-12-2 09:35 编辑

在市场中发现“日历排班”这中可以能过CSS修改日历中的显示样式。
想问CSS如何写显示字段中包含指定字段时，显示不同样式
和小于当日的字段显示其它样式

http://marketplace.grapecity.com.cn/ApplicationDetails?productID=SP2308310001&productDetailID=D2308310001

Lay.Li · Lay.Li

您好，这些css样式，是插件本身中就有的，那直接去修改就行

但是您说的这个。显示字段包含指定日期，小于当日的字段，这个是插件本身没有的，就得先在插件本身给加上，才好去修改

Lay.Li · Lay.Li

大佬，研究了一下，这个要写css的话比较复杂

您可以在产品需求板块反馈这个需求，将这个需求归入官方的开发计划中

andy_chen · andy_chen

本帖最后由 andy_chen 于 2024-12-2 16:07 编辑

Lay.Li 发表于 2024-12-2 10:19
大佬，研究了一下，这个要写css的话比较复杂
您可以在产品需求板块反馈这个需求，将这个需求归入官方的 ...

在CSS里的像这些“is-selected”、“is-today”是如何定义的？

Lay.Li · Lay.Li

您好，研究了一下，可以将下方js

window.FgcElement = window.FgcElement || {};
window.FgcElement.CalendarSlots = window.FgcElement.CalendarSlots || {};
window.FgcElement.CalendarSlots.Cell = window.FgcElement.CalendarSlots.Cell || {};

window.FgcElement.CalendarSlots.Cell["custom_date_cell"] = function() {
return `
         <div class="calendar-container" :style="calendarContainerStyle" v-if="calendarContainerStyle" @dblclick="handleDoubleClick(data)">
            <div class="calendar-date-container">
                  <div>{{ formatDay(data.day)}}</div>
                  <div>
                     <div class="fgc-calendar-ellipsis" v-if="insufficientHeight && getOptionsByDay(data).length"/>
                  </div>
            </div>
            <div class="calendar-schedule-container" v-if="!insufficientHeight">
                  <el-scrollbar>
                     <div class="calendar-schedule-item" v-for="option in getOptionsByDay(data)"
                        @click="scheduleOnClick(option)" @dblclick="scheduleOnDoubleClick($event,option)">
                        <div
                              :title="option.text"
                              :class="{'calendar-schedule-item-text': true, 'blue-color': option.text === '设计', 'green-color': option.text === '报销', 'orange-color': option.text === '需求评审会', 'gray-color': data.date.getTime() < new Date(new Date().setHours(0, 0, 0, 0))}"
                        >{{option.text}}</div>
                     </div>
                  </el-scrollbar>
            </div>
         </div>`
}

下方css代码

.gray-color {
color: gray !important;
}

.blue-color {
color: blue;
}

.green-color {
color: green;
}

.orange-color {
color: orange;
}

放到这里

再将el日历的css类名修改为custom_date_cell即可

andy_chen · andy_chen

Lay.Li 发表于 2024-12-4 17:44
您好，研究了一下，可以将下方js

下方css代码

我的想法是，比如显示内容包含：已报销、设计中和测试中的状态，如：“费用500元，报销”，“A3G产品，设计中”，AGFRA产品，测试中“，依照显示文本状态来显示不同的颜色

Lay.Li · Lay.Li

本帖最后由 Lay.Li 于 2024-12-5 12:09 编辑

大佬，这个的话，感觉修改一下这里的判断应该可以做到

修改一下使用正则表达式去判断是否包含试试

andy_chen · andy_chen

本帖最后由 andy_chen 于 2024-12-5 17:20 编辑

Lay.Li 发表于 2024-12-5 12:08
大佬，这个的话，感觉修改一下这里的判断应该可以做到

这段改成这样，就可以
:class="{'calendar-schedule-item-text': true, 'blue-color': option.text.includes('测试中'), 'green-color': option.text.includes('报销中'), 'orange-color': option.text.includes('设计中'), 'gray-color': data.date.getTime() < new Date(new Date().setHours(0, 0, 0, 0))}"

Lay.Li · Lay.Li

问题解决了就好，后边有问题欢迎您继续发帖交流

		自动登录	找回密码
密码			立即注册

[已处理] EL-日历显示的样式修改

最佳答案

8 个回复

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

评分

圣诞拼拼乐

微信认证勋章

活字格认证

活字格高级认证

悬赏达人