EL-日历显示的样式修改

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

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

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

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 发表于 2024-12-4 17:44
您好，研究了一下，可以将下方js

下方css代码

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

您好，研究了一下，可以将下方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即可

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

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

大佬，研究了一下，这个要写css的话比较复杂
您可以在产品需求板块反馈这个需求，将这个需求归入官方的开发计划中

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


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