ExtJs 6 日历周和日事件

Question

如何在日历 Week 和 day 视图上添加 eventClick 听众。我在 Month 视图上添加了监听器，它工作正常，但我在周视图和日视图上没有任何事件。有没有一种方法可以将事件添加到这些视图中。或者任何解决方法。

我也不想包括整个 extension。

xtype: 'panel',
title: 'Calendar',
layout: 'fit',
width: 1200,
height: 600,
items: [{
    xtype: 'calendar',
    views: {
        day: {
            addForm: null,
            editForm: null,
            listeners: {
                eventtap: 'onEventClick' //this doesn't work 
            }
        },
        week: {
            addForm: null,
            editForm: null,
            listeners: {
                eventtap: 'onEventClick' //this doesn't work 
            }
        },
        month: {
            addForm: null,
            editForm: null,
            listeners: {
                eventtap: 'onEventClick' // this works
            }
        }
    },
    bind: {
        store: '{calendars}'
    }
}]

默认的添加和编辑表单可以正常工作，但我想打开我自己的 window 事件单击以仅显示有关事件的详细信息。不是默认的 window 可编辑或可添加 windows。是否有为 Week 和 Day 视图添加 event click 的解决方法，就像 Month view 一样？

Answer 1

ExtJs Calendar包的源代码中有一个bug/issue。转到

ext/packages/calendar/src/calendar/view/days.js

在第 1436 行使用此代码更改函数 onEventTap：

    onEventTap: function(e) {
        var event = this.getEvent(e);
        this.fireEvent('eventtap', this, {
            event: event
        });
        this.showEditForm(event);
    },

Answer 2

这是一个对我很有效的例子。

{
        xtype: 'calendar',
        flex: 1,
        reference: 'customMainCalendarRef',
        border: false,
        layout: 'border',
        timezoneOffset: 0,
        manageHeight: false,
        createButtonPosition: 'titleBar',
        createButton: {
            xtype: 'button',
            region: 'center',
            hidden: true
        },
        views: {
            month: {
                xtype: 'calendar-month',
                region: 'west',
                //id:'tasksMonthViewId',
                width: 150,
                label: 'Month',
                view: {
                    xtype: 'calendar-monthview',
                    addForm: null,
                    editForm: null,
                    firstDayOfWeek: 1,
                    listeners: {
                        eventtap: 'onCalendarmonthviewEventtap',
                        select: 'onTaskCalendarmonthviewSelect',
                        valuechange: 'onCalendarmonthviewValueChange'
                    }
                },
                listeners: {
                    afterrender: 'onCalendarmonthAfterRender',
                    added: 'onMonthViewAdded'
                }
            },
            week: {
                xtype: 'calendar-week',
                region: 'east',
                //id:'tasksWeekViewId',
                width: 150,
                label: 'Week',
                view: {
                    xtype: 'calendar-weekview',
                    timeRenderer: function(hour, formatted, firstInGroup) {
                        return '';
                    },
                    addForm: null,
                    editForm: null,
                    firstDayOfWeek: 1,
                    listeners: {
                        eventtap: 'onCalendarweekviewEventtap'
                    }
                }
            },
            day: {
                xtype: 'calendar-day',
                //id:'tasksDayViewId',
                region: 'north',
                height: 150,
                label: 'Day',
                view: {
                    xtype: 'calendar-dayview',
                    timeRenderer: function(hour, formatted, firstInGroup) {
                        return '';
                    },
                    addForm: null,
                    editForm: null,
                    listeners: {
                        eventtap: 'onCalendardayviewEventtap'
                    }
                }
            }
        }
    }

ExtJs 6 日历周和日事件

ExtJs 6 Calendar week and day events

javascript

calendar

extjs

sencha-touch

extjs6-classic