求calendar解决方案

收藏

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

Wijmo5User · Wijmo5User

本帖最后由 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();
}

复制代码

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

KevinChen · KevinChen

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

Iris_qjj · Iris_qjj

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

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

KevinChen · KevinChen

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

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

https://demo.grapecity.com.cn/wi ... .html#celleditended

Iris_qjj · Iris_qjj

KevinChen 发表于 2019-9-27 17:20
您好，valuechanged 事件确实是只有当calendar的值改变时才会触发，

不太了解为何您想要在点击时一定触 ...

你好：
业务需求是：做一个日历，点击其中一天底色变色，然后这一天会被放进addList，再次点击这天底色消失（即取消选择），然后从addList中排除
所以现在没有已经封装这种事件是么？

KevinChen · KevinChen

您好，calendar确实不支持这个操作，包括内置的点击事件也不能取消掉选中的日期，

您是否可以做一个单独的删除或维护addList顺序的组件，以便于实现您的功能？

KevinChen · KevinChen

Wijmo5User 发表于 2019-9-28 13:37
以下这个示例或许能解决楼主的需求。

源代码如下：

感谢你的回答！！
你的代码完整，思路清晰，还有运行效果演示，
最高标准奖励2000金币，请收好！

Iris_qjj · Iris_qjj

Wijmo5User 发表于 2019-9-28 13:37
以下这个示例或许能解决楼主的需求。

源代码如下：

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

KevinChen · KevinChen

为乐于助人的大神鼓掌~

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

[已处理] 求calendar解决方案

12 个回复

评分

评分

微信认证勋章

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证