求calendar解决方案

目前的日历： 点击日历中某一天会触发valuechanged（底色变色了），再次点击该天就不能触发valuechanged的了
期望： 点击日历中某一天会触发valuechanged，并且底色变色，再次点击该天再触发valuechanged，底色消失（颜色变化已经解决，主要是想触发valuechanged）
求解决方案呀~

以下这个示例或许能解决楼主的需求。

源代码如下：

1. import 'bootstrap.css';
   
2. import '@grapecity/wijmo.styles/wijmo.css';
   
3. import './styles.css';
   
4. import * as wijmo from '@grapecity/wijmo';
   
5. import * as input from '@grapecity/wijmo.input';
   
6. //
   
7. document.readyState === 'complete' ? init() : window.onload = init;
   
8. //
   
9. function init() {
   
10.         const elDayMap = new WeakMap();
    
11.         const selectedDaySet = new Set();
    
12.         const toYmd = (d) => wijmo.Globalize.formatDate(d, 'yyyy-MM-dd');
    
13.         // the calendar
    
14.         const theCalendar = new input.Calendar('#theCalendar', {
    
15.                 value: null,
    
16.                 isReadOnly: true,
    
17.                 itemFormatter: (date, el) => elDayMap.set(el, date)
    
18.         });
    
19.         theCalendar.addEventListener(theCalendar.hostElement, 'click', (e) => {
    
20.                 const clickedDay = elDayMap.get(e.target);
    
21.                 if (clickedDay == null) return;
    
22. 
    
23.                 const dateString = toYmd(clickedDay);
    
24.                 if (selectedDaySet.has(dateString)) {
    
25.                         selectedDaySet.delete(dateString);
    
26.                 } else {
    
27.                         selectedDaySet.add(dateString);
    
28.                 }
    
29.                 showSelectedDateList();
    
30.                 theCalendar.invalidate();
    
31.         });
    
32.         theCalendar.formatItem.addHandler((sender, args) => {
    
33.                 const selected = selectedDaySet.has(toYmd(args.data));
    
34.                 wijmo.toggleClass(args.item, 'wj-state-selected', selected);
    
35.                 wijmo.setAttribute(args.item, 'aria-selected', selected);
    
36.         });
    
37.         //
    
38.         // show the currently selected date
    
39.         function showSelectedDateList() {
    
40.                 const el = document.querySelector('#theCalendarOutput');
    
41.                 el.textContent = '';
    
42.                 selectedDaySet.forEach((d) => {
    
43.                         el.textContent = el.textContent + '[' + d + '] ';
    
44.                 });
    
45.                 el.textContent = el.textContent.trim();
    
46.         }
    
47.         showSelectedDateList();
    
48. }

复制代码

如果想查看以上代码的运行效果，可以打开以下官方示例页面：
WijmoJS 示例 - 输入(Input) - 日历(Calendar) - 概览(Overview) - ES6

在运行效果面板的下方，有一个源码编辑器面板。
在源码编辑器面板的“app.js”页签中，将以下内容替换成上面的那段代码：

1. import 'bootstrap.css';
   
2. import '@grapecity/wijmo.styles/wijmo.css';
   
3. import './styles.css';
   
4. import * as wijmo from '@grapecity/wijmo';
   
5. import * as input from '@grapecity/wijmo.input';
   
6. //
   
7. document.readyState === 'complete' ? init() : window.onload = init;
   
8. //
   
9. function init() {
   
10.         // the calendar
    
11.         let theCalendar = new input.Calendar('#theCalendar', {
    
12.                 valueChanged: () => showCurrentDate()
    
13.         });
    
14.         //
    
15.         // show the currently selected date
    
16.         function showCurrentDate() {
    
17.                 let el = document.querySelector('#theCalendarOutput');
    
18.                 el.textContent = wijmo.Globalize.format(theCalendar.value, 'D');
    
19.         }
    
20.         showCurrentDate();
    
21. }
    

复制代码

点击源码编辑器面板右上角的“运行”按钮。
在运行效果面板中点击日历组件中的元素，查看日历组件下方的输出。

您好，您描述的是哪个产品的问题？SpreadJS和Wijmo都有这个事件，请指出具体产品，或者把您的实现逻辑打包成demo上传帖子附件，我们重现排查一下问题。

KevinChen 发表于 2019-9-26 18:08
您好，您描述的是哪个产品的问题？SpreadJS和Wijmo都有这个事件，请指出具体产品，或者把您的实现逻辑打包 ...

Wijmo calendar里面的valueChanged，目前是点过一次日期，再次点击同一天不会触发valuechanged

您好，valuechanged 事件确实是只有当calendar的值改变时才会触发，

不太了解为何您想要在点击时一定触发这个事件，或许您也可以尝试一下flexgrid的EditEnded事件：

https://demo.grapecity.com.cn/wi ... .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
以下这个示例或许能解决楼主的需求。

源代码如下：

万分感谢！！~~撒花撒花

为乐于助人的大神鼓掌~