求calendar解决方案
目前的日历： 点击日历中某一天会触发valuechanged（底色变色了），再次点击该天就不能触发valuechanged的了期望： 点击日历中某一天会触发valuechanged，并且底色变色，再次点击该天再触发valuechanged，底色消失（颜色变化已经解决，主要是想触发valuechanged）
求解决方案呀~
本帖最后由 Wijmo5User 于 2019-9-28 13:44 编辑
以下这个示例或许能解决楼主的需求。
源代码如下：
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import * as wijmo from '@grapecity/wijmo';
import * as input from '@grapecity/wijmo.input';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
const elDayMap = new WeakMap();
const selectedDaySet = new Set();
const toYmd = (d) => wijmo.Globalize.formatDate(d, 'yyyy-MM-dd');
// the calendar
const theCalendar = new input.Calendar('#theCalendar', {
value: null,
isReadOnly: true,
itemFormatter: (date, el) => elDayMap.set(el, date)
});
theCalendar.addEventListener(theCalendar.hostElement, 'click', (e) => {
const clickedDay = elDayMap.get(e.target);
if (clickedDay == null) return;
const dateString = toYmd(clickedDay);
if (selectedDaySet.has(dateString)) {
selectedDaySet.delete(dateString);
} else {
selectedDaySet.add(dateString);
}
showSelectedDateList();
theCalendar.invalidate();
});
theCalendar.formatItem.addHandler((sender, args) => {
const selected = selectedDaySet.has(toYmd(args.data));
wijmo.toggleClass(args.item, 'wj-state-selected', selected);
wijmo.setAttribute(args.item, 'aria-selected', selected);
});
//
// show the currently selected date
function showSelectedDateList() {
const el = document.querySelector('#theCalendarOutput');
el.textContent = '';
selectedDaySet.forEach((d) => {
el.textContent = el.textContent + '[' + d + '] ';
});
el.textContent = el.textContent.trim();
}
showSelectedDateList();
}
如果想查看以上代码的运行效果，可以打开以下官方示例页面：
WijmoJS 示例 - 输入(Input) - 日历(Calendar) - 概览(Overview) - ES6
在运行效果面板的下方，有一个源码编辑器面板。
在源码编辑器面板的“app.js”页签中，将以下内容替换成上面的那段代码：
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import * as wijmo from '@grapecity/wijmo';
import * as input from '@grapecity/wijmo.input';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
// the calendar
let theCalendar = new input.Calendar('#theCalendar', {
valueChanged: () => showCurrentDate()
});
//
// show the currently selected date
function showCurrentDate() {
let el = document.querySelector('#theCalendarOutput');
el.textContent = wijmo.Globalize.format(theCalendar.value, 'D');
}
showCurrentDate();
}
点击源码编辑器面板右上角的“运行”按钮。
在运行效果面板中点击日历组件中的元素，查看日历组件下方的输出。
您好，您描述的是哪个产品的问题？SpreadJS和Wijmo都有这个事件，请指出具体产品，或者把您的实现逻辑打包成demo上传帖子附件，我们重现排查一下问题。 KevinChen 发表于 2019-9-26 18:08
您好，您描述的是哪个产品的问题？SpreadJS和Wijmo都有这个事件，请指出具体产品，或者把您的实现逻辑打包 ...
Wijmo calendar里面的valueChanged，目前是点过一次日期，再次点击同一天不会触发valuechanged 您好，valuechanged 事件确实是只有当calendar的值改变时才会触发，
不太了解为何您想要在点击时一定触发这个事件，或许您也可以尝试一下flexgrid的EditEnded事件：
https://demo.grapecity.com.cn/wijmo/api/classes/wijmo_grid.flexgrid.html#celleditended KevinChen 发表于 2019-9-27 17:20
您好，valuechanged 事件确实是只有当calendar的值改变时才会触发，
不太了解为何您想要在点击时一定触 ...
你好：
业务需求是：做一个日历，点击其中一天底色变色，然后这一天会被放进addList，再次点击这天底色消失（即取消选择），然后从addList中排除
所以现在没有已经封装这种事件是么？ 您好，calendar确实不支持这个操作，包括内置的点击事件也不能取消掉选中的日期，
您是否可以做一个单独的删除或维护addList顺序的组件，以便于实现您的功能？ Wijmo5User 发表于 2019-9-28 13:37
以下这个示例或许能解决楼主的需求。
源代码如下：
感谢你的回答！！
你的代码完整，思路清晰，还有运行效果演示，
最高标准奖励2000金币，请收好！ Wijmo5User 发表于 2019-9-28 13:37
以下这个示例或许能解决楼主的需求。
源代码如下：
万分感谢！！~~撒花撒花:i0tw: 为乐于助人的大神鼓掌~ :i0tw:
页:
[1]
2