这里有人使用 Wanderxx 制作的 vue-fullcalendar 组件吗?
我在两件事上遇到了问题:
(1) css 类未应用[已解决]
我用这个计算函数填充了每个 eventData 对象:
eventsArr: function(){
let newArr = [];
let arrEvents = this.transactions;
for (let x in arrEvents){
let eventData = new Object();
if(arrEvents[x].Status == "Reserved"){
let title = arrEvents[x].Product_name + " \n " + arrEvents[x].userData.Account_name;
eventData.title = title;
eventData.start = arrEvents[x].dateValid;
eventData.end = arrEvents[x].dateValid;
eventData.cssClass = 'RTW';
newArr.push(eventData);
}
else if(arrEvents[x].Status == "Accepted"){
let title = arrEvents[x].Product_Type + " \n " + arrEvents[x].userData.Account_name;
eventData.title = title;
eventData.start = arrEvents[x].dateFinish;
eventData.end = arrEvents[x].datefinish;
eventData.cssClass = 'mto';
newArr.push(eventData);
}
}
return newArr;
}
正如您在 prop cssClass
中看到的那样,类 mto
在 css 部分中声明如下:
.mto{
color: white;
background-color: orange;
}
事件应以白色字体和橙色背景显示。但是它没有被应用并且样式保持与默认相同(与 RTW
cssClass 相同的情况)。当我检查页面时,mto
类出现在标签中,所以我不知道哪里出错了。
(2) 换行符不起作用
其中一个 Prop 是title
,在存储它之前,我先创建了一个变量并像这样存储它:
let title = arrEvents[x].Product_Type + " \n " + arrEvents[x].userData.Account_name;
eventData.title = title;
我的目标是将标题显示为两行。但它不起作用,它仍然看起来像这样:
我不希望它看起来像那样,我希望显示全名。我如何使其成为两层?
最佳答案
我无法使模块的演示正常工作,但在 css 上,事件元素已将属性 text-oveflow
设置为 ellipsis
:
.full-calendar-body .dates .dates-events .events-week .events-day .event-box .event-item {
...
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
你将不得不覆盖它。
此外,如果您想让文本在两行(或更多行)上流动,您也将覆盖 white-space 属性。
关于javascript - vue-fullcalendar - css 类和换行符不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47153969/